Schlange Spiel Bewegung Problem [javascript]

Question

Ich bin irgendwie neu in Javascript und ich versuche, ein Snake-Spiel zu machen, würde ich gerne die Schlange bewegen sich automatisch mit snake.push und snake.shift(tail), versuchte ich ein paar Dinge und immer gescheitert, wie ein foor loop und dy ++ zum hY hinzufügen (aber nur der Kopf bewegte sich).

Mit diesem Code, alles, was ich bekomme, ist Kopf zu bewegen und der Schwanz verschoben, aber es nur einmal bewegen. Wie wäre es eine schlaue Art, die gewünschte Richtung durch Hinzufügen und Entfernen des Objekts aus dem multidimensionalen Array in Bewegung zu halten?

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

Es stellt sich heraus, dass die Schlange Initialisierungscode am Anfang der drawSnake() Funktion enthalten ist.

Aber es sollte nur einmal verarbeitet werden, wenn ein neues Spiel gestartet wird. Ein weiteres Problem ist, dass snake[] im globalen Umfang des Spiels existieren muss, so dass es zwischen 2 Anrufen an game() persistent ist.

Sie können Ihre vorhandenen Code arbeiten leicht haben durch diesen Block zu bewegen:

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

kurz vor:

setInterval(game,1000) 

Darüber hinaus gibt es 3 weitere kleinere Korrekturen in this JSFiddle:

• ersetzt i<=snake.length mit i<snake.length (aus durch eine Iteration)
• ersetzt i<=snakeLength mit i<snakeLength (off von einer Iteration)
• ctx.fillStyle="red" vor ctx.fillRect() bewegt (sonst wird das erste Rechteck in schwarz gezeichnet)

Hoffnung, das hilft.