Pro Android Web Game Apps - Ch. 2 full Example

by Denise Nepraunig

HTML

<canvas width="300" height="300" id="myCanvas1"></canvas>

JavaScript

var context = document.getElementById('myCanvas1');
var ctx = context.getContext('2d');

// Background 
var gradient = ctx.createLinearGradient(0, 0, 0, 300);
gradient.addColorStop(0, "#fffbb3");
gradient.addColorStop(1, "#f6f6b2");
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, canvas.width, canvas.height);

// Drawing curves 
ctx.strokeStyle = "#dad7ac";
ctx.fillStyle = "#f6f6b2";

ctx.beginPath();
ctx.moveTo(50, 300);
ctx.bezierCurveTo(450, -50, -150, -50, 250, 300);
ctx.fill();

ctx.beginPath();
ctx.moveTo(50, 0);
ctx.bezierCurveTo(450, 350, -150, 350, 250, 0);
ctx.fill();

// Border 
ctx.strokeStyle = "#989681";
ctx.lineWidth = 2;
ctx.strokeRect(1, 1, canvas.width - 2, canvas.height - 2);

// Grid and pieces (translate to center in on Canvas) 
var cellSize = 40;
var gridWidth = cellSize * 7;
var gridHeight = cellSize * 6;
var gridOffsetLeft = Math.floor((canvas.width - gridWidth) / 2);
var gridOffsetTop = Math.floor((canvas.height - gridHeight) / 2);

ctx.save();
ctx.translate(gridOffsetLeft, gridOffsetTop);

// Grid 
ctx.beginPath();

// Drawing horizontal lines 
for (var i = 0; i < 8; i++) {
    ctx.moveTo(i * cellSize + 0.5, 0);
    ctx.lineTo(i * cellSize + 0.5, cellSize * 6)
}

// Drawing vertical lines 
for (var j = 0; j < 7; j++) {
    ctx.moveTo(0, j * cellSize + 0.5);
    ctx.lineTo(cellSize * 7, j * cellSize + 0.5);
}

// Stroking to show them on the screen 
ctx.lineWidth = 1;
ctx.strokeStyle = "#989681";
ctx.stroke();

// Pieces 
var data = [
    [0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 2, 1, 0, 0],
    [0, 0, 2, 1, 1, 2, 0]
];

ctx.strokeStyle = "#000";
ctx.lineWidth = 3;

for (var i = 0; i < data.length; i++) {
    for (var j = 0; j < data[i].length; j++) {
        var value = data[i][j];
        if (!value) continue;

        // Determine the color of the token 
        var color;
        switch (value) {
            case 1:
                color = "red";
               ...