Snake Bewegung Javascript

Ich versuche Schlange Spiel in js zu machen, und ich habe diese Bewegung Code, wo sq ist DIV bewegt:Snake Bewegung Javascript

window.onkeyup = function move(e) 
{  
    switch(e.keyCode) 
    { 
     case 37: 
     function moveLeft() 
     { 
      sq.style.left = parseInt(sq.style.left) - 20 + 'px';  
      checkGameOver(); 
     } 
     setInterval(moveLeft, 500); 
     break; 
     case 38: 
     function moveUp() 
     { 
      sq.style.top = parseInt(sq.style.top) - 20 + 'px'; 
      checkGameOver(); 
     } 
     setInterval(moveUp, 500); 
     break; 
     case 39: 
     function moveRight() 
     { 
      sq.style.left = parseInt(sq.style.left) + 20 + 'px'; 
      checkGameOver(); 
      clearTimeout(timeLeft); 
     } 
     setInterval(moveRight, 500); 
     break; 
     case 40: 
     function moveDown() 
     { 
      sq.style.top = parseInt(sq.style.top) + 20 + 'px'; 
      checkGameOver(); 
     } 
     setInterval(moveDown, 500); 
     break; 
    } 
}

Aber jedes Mal, wenn ich Bewegungsrichtung ändern, letzte Richtung bleibt und Bewegung ist nicht korrekt. Die Frage ist, wie kann ich korrekte Bewegung machen und auch wie man ein div stoppt?

Quelle

2016-06-30 Efim Bistrov

Warum machen Sie für jeden Fall eine Funktion? leg den Code einfach ohne eine Funktion dorthin ... Und versuche zu debuggen, indem du alle Werte zu einem bestimmten Zeitpunkt mit 'console.log (parseInt (sq.style.top));' ansiehst, zum Beispiel – JRsz

@JRsz Für 'setInterval' I glauben. – Arg0n

Ändern Sie diesen Anruf in eine Funktion, dh. "Schritt"; 'onkeyup' sollte eine globale Variable setzen, die das Schlangenverhalten steuert, welches dann in einem Intervall in' step' ausgewertet wird (zB 'window.setInterval (step, 1000)'). Momentan ist es so, dass du die Taste drückst und das die Schlange weggeht (nur einmal). – eithed

Weisen Sie die interval einen variable und löschen, bevor ein neues Intervall einstellen:

var movementInterval; 
window.onkeyup = function move(e) 
{  
    if(movementInterval) { 
    clearInterval(movementInterval); 
    } 
    switch(e.keyCode) 
    { 
    case 37: 
     function moveLeft() 
     { 
     sq.style.left = parseInt(sq.style.left) - 20 + 'px';  
     checkGameOver(); 
     } 
     movementInterval = setInterval(moveLeft, 500); 
     break; 
    case 38: 
     function moveUp() 
     { 
     sq.style.top = parseInt(sq.style.top) - 20 + 'px'; 
     checkGameOver(); 
     } 
     movementInterval = setInterval(moveUp, 500); 
     break; 
    case 39: 
     function moveRight() 
     { 
     sq.style.left = parseInt(sq.style.left) + 20 + 'px'; 
     checkGameOver(); 
     clearTimeout(timeLeft); 
     } 
     movementInterval = setInterval(moveRight, 500); 
     break; 
    case 40: 
     function moveDown() 
     { 
     sq.style.top = parseInt(sq.style.top) + 20 + 'px'; 
     checkGameOver(); 
     } 
     movementInterval = setInterval(moveDown, 500); 
     break; 
    } 
}

Andernfalls werden Sie einfach weiter auf neue intervals mit jedem Tastendruck zu schaffen.

Quelle

2016-06-30 11:30:54 Arg0n

Antwort

Verwandte Themen