使用JavaScript画布为fillRect添加边距

Question

我正在制作一个有趣的蛇游戏,练习JavaScript /画布,到目前为止我所说的是一个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个方格中添加一个边距 - 所以看起来它正在移动......是否可以为这些添加边距？这是我所拥有的快照:

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个蛇形片从左到右,就像你到目前为止一样.问题是,通过保存这些位置,我们已经离开并为我们的程序添加了一些持久状态.

现在蛇是一个有趣的游戏,因为"移动"蛇真的意味着两件事:

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