1

我正在制作一个有趣的蛇游戏，以练习 JavaScript/canvas，到目前为止，我所拥有的是一个 while 循环，它表示while i is < 100, then add a square并通过使用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 个正方形上添加一个边距，所以看起来它正在移动……是否可以为这些正方形添加边距？这是我所拥有的快照：

在此处输入图像描述

4

2 回答 2

6

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

假设我们的逻辑游戏网格是 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 条蛇从左到右，就像你到目前为止一样。问题是，通过保存这些位置，我们已经为我们的程序添加了一些持久状态。

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

  1. 拿走最后一块（尾巴）
  2. 为蛇添加一个新片段

所以我们应该做一个移动蛇的函数来完成这两个任务。我们将根据方向制作一个：

// 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. 如果新的蛇在食物上，尾巴不会被移除，而是蛇长+1格
  2. 如果新棋子超出 60x60 网格，则用户输掉游戏
  3. 如果新棋子位于任何其他蛇棋子已经存在的位置，则用户输掉游戏

唉，这些还没有在这里完成

我们仍然需要把它全部画出来，但是因为我们要跟踪蛇的位置，所以很容易。我们可以为每条蛇画一个正方形：

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

于 2013-01-12T05:30:53.370 回答
0

canvas 元素是一个 2D 绘图表面，因此它不支持（更高级别）诸如 CSS 边距之类的东西。

要制作动画，您需要不断清除画布并重新绘制场景，每次都稍微调整移动对象的位置（使它们看起来在移动）。在您的情况下，这意味着重新绘制正方形，每次的起始位置距离您上次重新绘制框架时 4 个像素。

您可能想查看MDN上的基本动画页面（他们的画布教程的一部分）。

于 2013-01-16T11:00:50.533 回答