キャンバスでチェスボードを作成する

Question

さて、私は現在、Javascript/Canvasでチェスゲームを作成しようとしています。私はまだJSにとってとても新しいので、私の理解の不足を言い訳します。

私は現在、グリッドを生成する次のコードを持っていますが、1行の正方形しか作成せず、キャンバス領域全体を塗りつぶすこともありません。

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); 
} 

どうしたのですか？

Answer 1

あなたはwindow.addEventListener代わりにwindow.onloadの（ 'ロード'、機能（）{...}）=関数（）を使用する必要があります{...}。ネストされたループを代わりに使用する必要があります。ほとんどの場合、これらのループはずっと簡単です。

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(); 
    } 
} 

Answer 2

それをチェックアウト：

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"/>