使用JavaScript画布向fillRect添加边距
我正在做一个有趣的蛇游戏，来练习JavaScript/canvas，到目前为止，我有一个while循环，它使用fillRect(10, 10, xCoord, yCoord)添加了while i is < 100, then add a square和正方形，在while循环中，我有xCoord = xCoord + 11;，所以它将正方形向右移动，中间有一个空格……这里有一个链接：
http://brycemckenney.com/snake_canvas
以及相关代码：
while(i < 100) {
// fillRect(x, y, width, height)... x is horizontal and y is vertical...
context.fillRect(xCoord, yCoord, sW, sH);
// We want each squere to have one pixel in between them, so we increment by 11, not 10.
xCoord = xCoord + 11;
// When i (0) gets to numOfSquares (3), then make the rest white so that you can't see them...
if (i >= numOfSquares) {
context.fillStyle = "#FFFFFF";
}
//Increment by 1 every loop, so that the squares keep going
i++;
}我正在尝试让蛇动起来，我已经尝试了许多不同的选择。现在我正试着添加一个边距-右边的4个方块，所以它看起来像是在移动…有没有可能增加保证金？以下是我所拥有的快照：
回答 2
Stack Overflow用户
发布于 2013-01-12 13:30:53
好吧，既然你在做蛇的游戏，我们知道你想做什么，我认为如果我们试着让你走上正确的道路，而不是修改你现有的代码，这会更有用。
假设我们的逻辑游戏网格是60x60。因此，蛇片可以在此栅格中的任何位置，其X和Y值介于0和59之间。这意味着：
左上角的一条蛇在[0, 0]
- A，右上角的一条蛇在
[59, 0]
让我们进一步假设一条蛇是由许多段组成的。从4个分段开始怎么样？这意味着我们需要保留一个包含4个位置的数组：
[position1, position2, position3, position4]
我们必须选择一个前端，因此假设数组的末端是蛇的“前端”。如果我们选择左上角的4个位置，蛇将是：
var mySnake = [[0, 0], [1,0], [2,0], [3,0]]
它在黑板上看起来像这样：
++++OOOOOOOO
OOOOOOOOOOOO
OOOOOOOOOOOO这意味着它的4个蛇片从左到右，就像你到目前为止一样。问题是，通过保存这些位置，我们已经在程序中添加了一些持久状态。
现在蛇是一个有趣的游戏，因为“移动”蛇实际上意味着两件事：
- 将最后一块(尾巴)移走
- 将新块添加到snake
中
所以我们应该做一个移动蛇的函数，同时做这两件事。我们将基于方向创建一个：
// modifies a snake's array
function moveSnake(snake, direction) {
// First we must remove a piece of the snake's tail, which is at the start of the array
// There's a built in command in JavaScript for this called shift()
snake.shift();
// Now we must add the new piece!
// To tell where we need to go we must look at the last location:
var lastLoc = snake[snake.length - 1];
// Just to be a little more clear:
var lastX = lastLoc[0];
var lastY = lastLoc[1];
switch (direction) {
case 'up':
snake.push([lastX, lastY-1]);
break;
case 'down':
snake.push([lastX, lastY+1]);
break;
case 'left':
snake.push([lastX-1, lastY]);
break;
case 'right':
snake.push([lastX+1, lastY]);
break;
}
// redraw after every move!
drawSnake(ctx, mySnake);
}使用这种方法，我们可以做到：
var mySnake = [[0, 0], [1,0], [2,0], [3,0]];
moveSnake(mySnake, 'down');
// mySnake is now [[1,0], [2,0], [3,0], [3,1]];蛇现在看起来像这样：
O+++OOOOOOOO
OOO+OOOOOOOO
OOOOOOOOOOOO现在这个方法非常愚蠢，在一个真正的蛇的游戏中，我们需要添加一些条件。通常：
- 如果新的一块蛇在一块食物的顶部，尾部的块不会被移除，相反，蛇的长度是+1
- 如果新的块在60x60格子之外，用户会输掉游戏
- 如果新的块在任何其他蛇块已经存在的位置，用户就会输掉游戏
可惜，这些都没有在这里完成。
我们仍然需要绘制所有的内容，但是因为我们要跟踪蛇的位置，所以这很容易。我们可以为蛇的每一块画一个正方形：
function drawSnake(context, snake) {
// Remember to clear the board!
ctx.clearRect(0, 0, 600, 600);
var length = snake.length;
for (var i = 0; i < length; i++) {
context.fillStyle = 'teal';
// position is its own array and looks like: [x, y]
var position = snake[i];
// our logical snake board is 60x60, but the real canvas is 600x600,
// so we multiply x and y by 10.
// We also use "9" for the width and height so theres a tiny gap
context.fillRect(position[0]*10, position[1]*10, 9, 9);
}
}请点击此处查看完整的演示。
http://jsfiddle.net/FsqXE/
注意，它允许箭头键控制蛇以显示moveSnake方法，但常规的蛇游戏具有由计时器控制的移动，并且用户通常只能更改下一个可能的方向。
Stack Overflow用户
发布于 2013-01-16 19:00:51
canvas元素是一个2D绘图表面，所以它不支持(更高级别的) CSS边距之类的东西。
要制作动画，需要不断地清除画布并重绘场景，每次都稍微调整移动对象的位置(使它们看起来像是在移动)。在您的例子中，这意味着重新绘制正方形，每次重新绘制的起始位置与上次重新绘制框架的开始位置相差4个像素。
你可能想看看MDN的Basic animations页面(画布教程的一部分)。
https://stackoverflow.com/questions/14286273
复制相似问题
腾讯云开发者
