蛇遊戲移動問題[javascript]

我是一種新的JavaScript，我想做一個蛇遊戲，我想讓蛇自動移動snake.push和snake.shift(tail)，我嘗試了一些東西，並始終失敗，就像一個foor loop並添加dy ++到hY（但只有頭部正在移動）。使用這段代碼，我得到的所有東西都是頭部移動和尾部移動，但它只移動一次。如何通過添加和刪除多維數組中的項來使其保持移動所需的方向？蛇遊戲移動問題[javascript]

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)

來源

2016-07-25 Rafael Monte

事實證明，您的蛇初始化代碼包含在drawSnake()函數的開頭。

但是它應該只處理一次，當一個新遊戲啓動時。另一個問題是snake[]必須存在於全球範圍的遊戲中，因此它在2個調用中保持爲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.fillRect()之前移動ctx.fillStyle="red"（否則，第一矩形在黑畫）

希望有所幫助。

來源

2016-07-25 14:38:30 Arnauld

蛇遊戲移動問題[javascript]

回答

相關問題