Snake in JS etablieren Links-Rechts-Bewegung

Question

Dears, habe ich angefangen zu lernen Programmierung und wählte Snake als erstes Projekt. Da ich kein richtiges Tutorial für Anfänger finden konnte, habe ich mir das Pygame Snake Tutorial von "thenewboston" auf youtube angeschaut. Ich habe versucht, seine Schritte mit JS zu kopieren, und ich endete mit folgendem Problem. Ich kann mich nach links und rechts bewegen, aber sobald ich nach links und dann nach rechts gucke, ist da ein Fehler: Er versucht, nach links UND gleichzeitig nach rechts zu gehen. Ich habe absolut keine Ahnung, wie man JS sagt, dass er sich nicht weiter nach links bewegen soll, als ich direkt danach drücke.

Ich hoffe, Sie können mir das Problem erklären und eine Lösung vorschlagen. Vielen Dank!

var canvas = document.getElementById('canvas'); 
var ctx = canvas.getContext("2d"); 

lead_x = 100; 
lead_y = 100; 

function draw_it() { 
    // background 
    ctx.fillStyle = "white" 
    ctx.fillRect(0, 0, canvas.width, canvas.height); 

    // snake head 
    ctx.fillStyle = "green" 
    ctx.fillRect(lead_x, lead_y, 20 , 20) 
} 

draw_it(); 

document.onkeydown = function(event) { 
    if (event.keyCode == 37) { 
    setInterval(function() { 
     lead_x -= 10; 
     draw_it(); 
    }, 100); 
    } else if (event.keyCode == 39) { 
    setInterval(function() { 
     lead_x += 10; 
     draw_it(); 
    }, 100); 
} 

Answer 1

Satz intervar hält für unendlich läuft, müssen Sie vorherige Timer töten, wenn neue erstellt wird oder nur ein einzelnes Intervall wie folgt aus:

var canvas = document.getElementById('canvas'); 
var ctx = canvas.getContext("2d"); 

lead_x = 100; 
lead_y = 100; 

function draw_it() { 
    // background 
    ctx.fillStyle = "white"; 
    ctx.fillRect(0, 0, canvas.width, canvas.height); 

    // snake head 
    ctx.fillStyle = "green"; 
    ctx.fillRect(lead_x, lead_y, 20 , 20); 
} 

draw_it(); 

var left_turn = false; 
var right_turn = false; 

document.onkeydown = function(event) { 
    if (event.keyCode == 37) { 
     left_turn = true; 
     right_turn = false; 
    } else if (event.keyCode == 39) { 
     right_turn = true; 
     right_turn = false; 
    } 
} 


setInterval(function() { 
    if (left_turn) { 
     lead_x -= 10; 
     draw_it(); 
    } else if (right_turn) { 
     lead_x += 10; 
     draw_it(); 
    } 
}, 100); 

Answer 2

Das große Problem ist, sind Sie setInterval mit das wird den Code darin endlos wiederholen.

console.log('It just keeps going...'); 
 
setInterval(function() { 
 
    console.log('and going...'); 
 
}, 1000);

Stattdessen würde ich dann ändern Sie den „Herzschlag“ des Spiels steuern mit setTimeout oder requestAnimationFrame vorzuschlagen nur eine Nummer, wenn der Benutzer eine Richtung drückt.

var canvas = document.querySelector('canvas'); 
 
var ctx = canvas.getContext('2d'); 
 

 
var leadX = 160; 
 
var leadY = 120; 
 

 
var speed = 10; 
 
var xDirection = 1; // Start out going right 
 

 
function update() { 
 
    // Update the players position 
 
    
 
    // If xDirection === 1, move to the right 
 
    // if xDirection === -1, move to the left 
 
    leadX += xDirection * speed; 
 
} 
 

 
function draw() { 
 
    // Clear the screen and draw the player 
 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
 
    ctx.fillStyle = '#000'; 
 
    ctx.fillRect(leadX, leadY, 10, 10); 
 
} 
 

 
function heartBeat() { 
 
    update(); 
 
    draw(); 
 
    
 
    // Call `heartBeat` again in 100ms 
 
    setTimeout(heartBeat, 100); 
 
} 
 
heartBeat(); 
 

 
document.onkeydown = function(event) { 
 
    if (event.keyCode === 37) { 
 
    // Go to the left 
 
    xDirection = -1; 
 
    } else if (event.keyCode === 39) { 
 
    // Go to the right 
 
    xDirection = 1; 
 
    } 
 
};

html, body { 
 
    background: #222; 
 
} 
 
canvas { 
 
    display: block; 
 
    margin: 4px auto; 
 
    background: #FFF; 
 
}

<canvas width="320" height="240"></canvas>

Answer 3

Sie müssen lediglich sicherstellen, dass, wenn die linke Taste gedrückt wird, die rechte Taste Funktion nicht mehr wiederholen und wenn die rechte Taste gedrückt wird, die linke Taste Funktion nicht mehr wiederholt zu werden:

document.onkeydown = function(event) { 

    if (event.keyCode == 37) { 
     clearInterval(goRight); 

     var goLeft = setInterval(function() { 
      lead_x -= 10; 
      draw_it(); 
     }, 100); 
    } 

    else if (event.keyCode == 39) { 
     clearInterval(goLeft); 

     var goRight = setInterval(function() { 
      lead_x += 10; 
      draw_it(); 
     }, 100); 
    } 
}