[英]Javascript canvas draw rect not working, trying to make a game board
So I made a program that is supposed to make an empty 2d game board using stroke rect or draw img. 因此,我编写了一个程序,该程序可以使用笔触rect或绘制img来制作空白的2d游戏板。 Here it is (using stroke rect):
这是(使用笔触矩形):
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();
}
It does not display anything except the black background. 除黑色背景外,它不显示任何其他内容。 It also throws no errors, which is sort of weird.
它也不会抛出任何错误,这很奇怪。 Thank you for any help, and I can soon make my little board game!
感谢您的帮助,我很快就能开始制作小型棋盘游戏!
There are a few issues with your loops and generation of the array of squares. 循环和正方形数组的生成存在一些问题。 Remember to use the
var
keyword when setting up for-loops in javascript. 在javascript中设置for循环时,请记住使用
var
关键字。 Otherwise the variable will not be in the local scope and you probably won't get what you expect. 否则,该变量将不在本地范围内,并且您可能无法获得期望的结果。 Especially with
x
in your case since it's used in two loops. 特别是对于
x
,因为它在两个循环中使用。
http://jsfiddle.net/mfohao5x/ 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();
}
Here's your code with adjusted loops. 这是经过调整的循环的代码。
boardArray.push([colNum*10, rowNum*10]);
is changed to boardArray.push([i*10, x*10]);
更改为
boardArray.push([i*10, x*10]);
. 。
boardArray[x], boardArray[y]
is changed to arr[0], arr[1]
. 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.