CODEWITHSUNDEEP
javascript
Amaan Shawkath
Amaan Shawkath

Reputation: 3

Creating chess board with canvas

Okay, so I am currently trying a create a Chess game in Javascript/Canvas. I am still quite new to JS so excuse my lack of understanding.

I currently have the following code to generate the grid, however, it only creates one line of squares and doesn't fill the whole canvas area. 

var SQUARE_SIZE;
const NUMBER_OF_ROWS = 5;
const NUMBER_OF_COLS = 5;
var NUMBER_OF_SQUARES;

var xValue = 0;
var yValue = 0;

var canvas, ctx

window.onload = function()
{
    canvas = document.getElementById("chessBoard");
    ctx = canvas.getContext("2d");
    SQUARE_SIZE = canvas.height / NUMBER_OF_ROWS;
    NUMBER_OF_SQUARES = NUMBER_OF_ROWS * NUMBER_OF_COLS;

    console.log("Size of each square = " + SQUARE_SIZE +"px");

    drawBoard();
}

function drawBoard()
{
    for (var blockTotal = 0; blockTotal < NUMBER_OF_SQUARES; blockTotal++)
    {
        if (blockTotal % 2)
        {
            xValue += SQUARE_SIZE;
            ctx.fillStyle = '#663300';
            ctx.fillRect(xValue, yValue, SQUARE_SIZE, SQUARE_SIZE);
        }
        else
        {
            xValue += SQUARE_SIZE
            ctx.fillStyle = '#eeeed2';
            ctx.fillRect(xValue, yValue, SQUARE_SIZE, SQUARE_SIZE);
        }
        xValue = 0;
        yValue += SQUARE_SIZE;
    }

    // Outline of board
    ctx.lineWidth = 5;
    ctx.strokeRect(0, 0, NUMBER_OF_ROWS * SQUARE_SIZE, NUMBER_OF_COLS * SQUARE_SIZE);
}

What have I done wrong?

Upvotes: 0

Views: 3718

Answers (2)

Benjamin Belisle
Benjamin Belisle

Reputation: 96

You should use window.addEventListener('load', function() {...}) instead of window.onload = function() {...}. You should also use nested loops, they're a lot simpler most of the time.

for (var i = 0; i < 8; i++) {
    for (var j = 0; j < 8; j++) {
        ctx.beginPath();
        ctx.fillStyle = ["#eeeed2", "#630"][(i + j) % 2];
        ctx.fillRect(j * 20, i * 20, 20, 20);
        ctx.closePath();
    }
}

Upvotes: 1

Mos&#232; Raguzzini
Mos&#232; Raguzzini

Reputation: 15831

Check it out:

var SQUARE_SIZE;
const NUMBER_OF_ROWS = 5;
const NUMBER_OF_COLS = 5;
var NUMBER_OF_SQUARES;

var xValue = 0;
var yValue = 0;

var canvas, ctx

window.onload
    canvas = document.getElementById("chessBoard");
    ctx = canvas.getContext("2d");
    SQUARE_SIZE = canvas.height / NUMBER_OF_ROWS;
    NUMBER_OF_SQUARES = NUMBER_OF_ROWS * NUMBER_OF_COLS;

    console.log("Size of each square = " + SQUARE_SIZE +"px");

    drawBoard(canvas, NUMBER_OF_ROWS, NUMBER_OF_COLS);


function drawBoard(can, nRow, nCol) {
    var ctx = can.getContext("2d");
    var w = can.width;
    var h = can.height;

    nRow = nRow || 8;    // default number of rows
    nCol = nCol || 8;    // default number of columns

    w /= nCol;            // width of a block
    h /= nRow;            // height of a block

    for (var i = 0; i < nRow; ++i) {
        for (var j = 0, col = nCol / 2; j < col; ++j) {
            ctx.rect(2 * j * w + (i % 2 ? 0 : w), i * h, w, h);
        }
    }

    ctx.fill();
}
<canvas id="chessBoard" width="400" height="400"/>

Upvotes: 1

Related Questions