Question

我正在制作一个有趣的蛇游戏，练习JavaScript /画布，到目前为止，我所说的是while i is < 100, then add a square的while循环，并使用fillRect(10, 10, xCoord, yCoord)添加了正方形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个方格中添加一个边距 - 所以看起来它正在移动......是否可以为这些添加边距？这是我所拥有的快照：

enter image description here

Answer 1

好吧，既然你正在制作蛇游戏，我们知道你想做什么，我认为如果我们试图让你走上正确的轨道而不是修改你现有的代码会更有用。

假设我们的逻辑游戏网格是60x60。所以蛇形片可以在这个网格中的任何地方，X和Y值在0到59之间。这意味着：

左上角的一条蛇位于[0, 0]
右上角有一条蛇在[59, 0]

让我们进一步假设蛇是由许多片段组成的。如何开始4个细分市场。这意味着我们需要保留4个位置的数组：

[position1, position2, position3, position4]

我们必须选择一个前线，所以让我们说阵列的末端是蛇的“前线”。如果我们选择左上角4个位置，那么蛇将是：

var mySnake = [[0, 0], [1,0], [2,0], [3,0]]

董事会上的内容如下：

++++OOOOOOOO
OOOOOOOOOOOO
OOOOOOOOOOOO

这意味着它的4个蛇形片从左到右，就像你到目前为止一样。问题是，通过保存这些位置我们已经离开并在我们的程序中添加了一些持久的州。

现在蛇是一个有趣的游戏，因为“移动”蛇真的意味着两件事：

拿走最后一块（尾巴）
在蛇身上添加新作品

所以我们应该制作一个能够移动蛇的功能。我们将根据方向制作一个：

// 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方法，但常规蛇游戏的运动由计时器控制，用户通常只能改变下一个可能的方向。

Answer 2

canvas元素是2D绘图表面，因此它不支持（更高级别）CSS边距等内容。

要进行动画制作，您需要不断清除画布并重新绘制场景，每次稍微调整移动物体的位置（使它们看起来移动）。在你的情况下，这意味着重新绘制正方形，每次都有一个起始位置，距离你最后一次重绘帧的位置是4个像素。

您可能需要查看MDN上的Basic animations页面（他们的画布教程的一部分）。

使用JavaScript画布为fillRect添加边距

2 个答案: