Question

我是javascript的新手，我正在尝试制作一个蛇游戏，我想让蛇在snake.push和snake.shift(tail)自动移动，我尝试了一些事情，总是失败，就像一个foor loop并将dy ++添加到hY（但只有头部正在移动）。

使用这段代码，我得到的只是移动和尾部移动，但它只移动一次。如何通过在多维数组中添加和删除项目来使其继续移动所需的方向是一种聪明的方法？

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var snakeSize=10;
var snakeLength = 5;
var dist =2+snakeSize;
var dy=1;    
var direction = "up";

function game(){
 ctx.clearRect(0,0,canvas.width,canvas.height); 
drawSnake()

}


function snakeBody(x,y){
  ctx.beginPath();
  ctx.fillRect(x*(dist),y*(dist),snakeSize,snakeSize);
  ctx.fillStyle="red";
  ctx.fill();
  ctx.closePath();}

function drawSnake(){
 var snake = []; 
  for (var i=0;i<=snakeLength;i++){
  snake.push({x:i, y:canvas.height/dist/2});
  } 

  var hX = snake[snake.length-1].x
  var hY = snake[snake.length-1].y

  switch(direction){
  case "down":
  hY++;
      break;
  case "up":{
    hY--;}
    break;
  case "right":
    hX++
    break;
  case "left":
    hX--;
    break;
}

var tail = snake.shift();
  tail.x=hX;
  tail.y=hY;

  snake.push(tail);


   for (var i=0;i<=snake.length;i++){
 snakeBody(snake[i].x,snake[i].y); 
  }

} 


setInterval(game,1000)

Answer 1

事实证明，您的蛇初始化代码包含在drawSnake()函数的开头。

但是当新游戏推出时，它应该只处理一次。另一个问题是snake[]必须存在于游戏的全局范围内，以便在两次调用game()之间保持不变。

您可以通过移动此块轻松地使现有代码正常工作：

var snake = [];
for (var i=0;i<=snakeLength;i++){
  snake.push({x:i, y:canvas.height/dist/2});
}

就在之前：

setInterval(game,1000)

this JSFiddle还有其他3个小修正：

将i<=snake.length替换为i<snake.length（关闭一次迭代）
将i<=snakeLength替换为i<snakeLength（关闭一次迭代）
在ctx.fillStyle="red"之前移动ctx.fillRect()（否则，第一个矩形以黑色绘制）

希望有所帮助。

蛇游戏移动问题[javascript]

1 个答案: