Javascript畫布繪制矩形不起作用，試圖制作游戲板

Question

因此，我編寫了一個程序，該程序可以使用筆觸rect或繪制img來制作空白的2d游戲板。 這是（使用筆觸矩形）：

window.onload = function() {

    //set up the canvas items
    var canvas = document.getElementById("paper");
    var emptySquare = canvas.getContext("2d");
    var player = canvas.getContext("2d");
    var background = canvas.getContext("2d");

    //An empty game board, with basic stats
    var boardArray = [];
    var rowNum = 7;
    var colNum = 7;

    //Makes the board with the empty squares
    for (i = 0; i < colNum; i++) {
        for (x = 0; x < rowNum; x++) {
            boardArray.push([colNum*10, rowNum*10]);
        }
    }

    //This is the png of an empty board part of an array
    var emptySquareImg = new Image();
    emptySquareImg.src = "border.png";

    function displayBoard() {
        background.fillStyle = "rgb(0, 0, 0)";
        background.fillRect(0, 0, canvas.width, canvas.height);

        for (x = 0; x < boardArray.length; x++) {
            for (y = 0; y < x.length; y++) {

                emptySquare.beginPath();
                emptySquare.lineWidth = "4";
                emptySquare.strokeStyle = "rgb(200, 34, 22)";
                emptySquare.rect(boardArray[x], boardArray[y], 10, 10)
                emptySquare.stroke();

            }
        } 
    }

    displayBoard();
}

除黑色背景外，它不顯示任何其他內容。 它也不會拋出任何錯誤，這很奇怪。 感謝您的幫助，我很快就能開始制作小型棋盤游戲！

Answer 1

循環和正方形數組的生成存在一些問題。 在javascript中設置for循環時，請記住使用var關鍵字。 否則，該變量將不在本地范圍內，並且您可能無法獲得期望的結果。 特別是對於x ，因為它在兩個循環中使用。

http://jsfiddle.net/mfohao5x/

window.onload = function() {
    var canvas = document.getElementById("paper");
    var emptySquare = canvas.getContext("2d");
    var player = canvas.getContext("2d");
    var background = canvas.getContext("2d");

    var boardArray = [];
    var rowNum = 7;
    var colNum = 7;

    // probably worth defining the width and height of cells here
    var width = 10;
    var height = 10;

    // remember to include the keyword "var"
    for (var i = 0; i < rowNum; i++) {
      // add a new row to boardArray
      boardArray.push([]);
      for (var x = 0; x < colNum; x++) {
        // add your values for this square within this row
        boardArray[i].push([i*width, x*height]);
      }
    }
    //console.log(boardArray);

    var emptySquareImg = new Image();
    emptySquareImg.src = "border.png";

    function displayBoard() {
      background.fillStyle = "rgb(0, 0, 0)";
      background.fillRect(0, 0, canvas.width, canvas.height);

      for (var x = 0; x < boardArray.length; x++) {
        // get the row here and then iterate through it
        var row = boardArray[x];

        for (var y = 0; y < row.length; y++) {
          // now row[y] will give you your square
          emptySquare.beginPath();
          emptySquare.lineWidth = "4";
          emptySquare.strokeStyle = "rgb(200, 34, 22)";
          // use row[y][0] and row[y][1] to position the rect
          emptySquare.rect(row[y][0], row[y][1], width, height);
          emptySquare.stroke();

        }
      } 
    }

    displayBoard();
}

Answer 2

這是經過調整的循環的代碼。 boardArray.push([colNum*10, rowNum*10]); 更改為boardArray.push([i*10, x*10]); 。 boardArray[x], boardArray[y]更改為arr[0], arr[1] 。

 window.onload = function() { //set up the canvas items var canvas = document.getElementById("paper"); var emptySquare = canvas.getContext("2d"); var player = canvas.getContext("2d"); var background = canvas.getContext("2d"); //An empty game board, with basic stats var boardArray = []; var rowNum = 7; var colNum = 7; //Makes the board with the empty squares for (i = 0; i < colNum; i++) { for (x = 0; x < rowNum; x++) { boardArray.push([i*10, x*10]); } } //This is the png of an empty board part of an array var emptySquareImg = new Image(); emptySquareImg.src = "border.png"; function displayBoard() { background.fillStyle = "rgb(0, 0, 0)"; background.fillRect(0, 0, canvas.width, canvas.height); for (x = 0; x < colNum; x++) { for (y = 0; y < rowNum; y++) { emptySquare.beginPath(); emptySquare.lineWidth = "4"; emptySquare.strokeStyle = "rgb(200, 34, 22)"; var arr = boardArray[y+x*colNum]; emptySquare.rect(arr[0], arr[1], 10, 10) emptySquare.stroke(); } } } displayBoard(); } 

 <canvas id='paper'></canvas>