蛇游戏移动问题 [javascript]答案

【问题标题】：snake game move issue [javascript]蛇游戏移动问题 [javascript]
【发布时间】：2016-07-25 14:08:11
【问题描述】：

我是 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)

【问题讨论】：

标签： javascript loops multidimensional-array

【解决方案1】：

原来你的snake初始化代码包含在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()之前（否则，第一个矩形将绘制为黑色）

希望对您有所帮助。

【讨论】：