Question

所以我做了一个程序，应该使用stroke rect或draw 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]。

＆＃13;

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

＆＃13;

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

＆＃13;

Javascript画布绘制矩形不工作，试图制作游戏板

2 个答案: