使用JavaScript画布向fillRect添加边距

我正在做一个蛇游戏，为了好玩，练习JavaScript/canvas，到目前为止，我有一个while循环，当我<100时，它说

，然后添加一个正方形
，然后使用
fillRect（10，10，xCoord，yCoord）
添加正方形，在while循环中我有
xCoord=xCoord+11所以它会将正方形向右移动，中间有一个空格。。。以下是一个链接：


及有关守则：

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++;

}

while（i<100）{
//fillRect（x，y，宽度，高度）…x是水平的，y是垂直的。。。
context.fillRect（xCoord、yCoord、sW、sH）；
//我们希望每个静噪之间有一个像素，所以我们增加11，而不是10。
xCoord=xCoord+11；
//当我（0）到达numOfSquares（3）时，将其余部分设置为白色，这样你就看不到它们了。。。
如果（i>=numOfSquares）{
context.fillStyle=“#FFFFFF”；
}
//每循环增加1，使方块继续前进
i++；
}

我试图让蛇动画，我已经尝试了许多不同的选择。现在我试着在4个正方形的右边加一个边距，所以看起来它在移动。。。有没有可能增加利润？以下是我所拥有的内容的快照：

既然您正在制作snake游戏，我们知道您想要做什么，我认为如果我们尝试让您走上正确的轨道，而不是修改您现有的代码，那将更加有用

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


左上角的一条蛇在
[0,0]

右上角的一条蛇在
[59,0]


让我们进一步假设一条蛇是由若干段组成的。从4段开始怎么样。这意味着我们需要保留4个位置的数组：

[位置1、位置2、位置3、位置4]

我们必须选择一个正面，所以让我们假设数组的末端是蛇的“正面”。如果我们选择左上4个位置，则蛇将：

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

板上的哪个看起来像这样：

++++OOOOOOOO
OOOOOOOOOOOO
OOOOOOOOOOOO

O+++OOOOOOOO
OOO+OOOOOOOO
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]];

蛇现在看起来像这样：

++++OOOOOOOO
OOOOOOOOOOOO
OOOOOOOOOOOO

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

函数drawSnake（上下文，snake）{
//记得清理黑板！
ctx.clearRect（0,060600）；
变量长度=snake.length；
对于（变量i=0；i

在此处查看已完成的演示。


请注意，它允许箭头键控制蛇来显示moveSnake方法，但常规的蛇游戏的移动由计时器控制，用户通常只能更改下一个可能的方向。
好吧，因为您正在制作蛇游戏，我们知道您想要做什么，我认为如果我们尝试让您走上正确的轨道，而不是修改您现有的代码，这将更加有用

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


左上角的一条蛇在
[0,0]

右上角的一条蛇在
[59,0]


让我们进一步假设一条蛇是由若干段组成的。从4段开始怎么样。这意味着我们需要保留4个位置的数组：

[位置1、位置2、位置3、位置4]

我们必须选择一个正面，所以让我们假设数组的末端是蛇的“正面”。如果我们选择左上4个位置，则蛇将：

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

板上的哪个看起来像这样：

++++OOOOOOOO
OOOOOOOOOOOO
OOOOOOOOOOOO

O+++OOOOOOOO
OOO+OOOOOOOO
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]];

蛇现在看起来像这样：

++++OOOOOOOO
OOOOOOOOOOOO
OOOOOOOOOOOO

O+++OOOOOOOO
OOO+OOOOOOOO
OOOOOOOOOOOO

现在这个方法相当愚蠢，在真正的蛇游戏中，我们需要添加一些条件。泰