kippe zwei Leinwand Rechtecke zur gleichen Zeit bewegen

ich heute eine andere Frage gestellt, und ich habe ein anderes ..kippe zwei Leinwand Rechtecke zur gleichen Zeit bewegen

aber zuerst hier ist der Code:

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Pong</title> 
 
    <script type="text/javascript"> 
 
     var x = 100; 
 
     var y = 100; 
 
     var xmoveFirst = 720; 
 
     var ymoveFirst = 0; 
 
     var xmoveSecond = 30 ; 
 
     var ymoveSecond = 0; 
 
     function canvas() { 
 
      var can = document.getElementById('theCanvas'); 
 
      can.style.backgroundColor = "black"; 
 
      var ctx = can.getContext('2d'); 
 
      
 
      //first player 
 
      ctx.fillStyle="white"; 
 
      ctx.fillRect(xmoveFirst,ymoveFirst,5,75); 
 
      
 
      //second player 
 
      ctx.fillStyle = 'white'; 
 
      ctx.fillRect(xmoveSecond,ymoveSecond,5,75); 
 
      
 
      //first player move 
 
      function move(event) { 
 
       ctx.clearRect(0,0,750,750); //clear rects 
 
       if (event.keyCode == 40) { 
 
        ymoveFirst+=25; 
 
        console.log("first,"+ymoveFirst); 
 
       } 
 
       
 
       else if (event.keyCode == 38) { 
 
        ymoveFirst-=25; 
 
        console.log("first,"+ymoveFirst); 
 
       } 
 
       
 
       else if (event.keyCode == 83) { 
 
        ymoveSecond +=25; 
 
       } 
 
       
 
       else if (event.keyCode==87) { 
 
        ymoveSecond -=25; 
 
       } 
 
       ctx.fillStyle="white"; 
 
       ctx.fillRect(xmoveFirst,ymoveFirst,5,75); 
 
       ctx.fillRect(xmoveSecond,ymoveSecond,5,75); 
 

 
      } 
 
      var movement = document.addEventListener("keydown", move); 
 
      
 
      
 
     } 
 
     
 
       
 
    </script> 
 
</head> 
 
<body onload="canvas()"> 
 
    <canvas id="theCanvas" width="750" height="750"></canvas> 
 
</body> 
 
</html>

so jeder der rect bewegt sich perfekt :) aber hier ist das problem .. ich kann sie beide togheter nicht bewegen ..

danke für die hilfe !!

Quelle

2016-07-02 Nimrod Naim

Sie sollten objektorientiertes JavaScript lernen. –

Das Problem ist, dass der Browser nur 1 gedrückte Taste gleichzeitig behandeln kann. Um dies zu umgehen, müssen Sie folgende Dinge:

Ein Array
Zwei Ereignis-Listener, eine für die keydown und eine für das keyup Ereignis.

Das Array enthält die aktuell gedrückten Tasten. In der Keydown-Event-Listener müssen Sie das Element auf den gleichen Index wie die ID der gedrückten Taste auf True setzen, und in der KeyUp EventListener müssen Sie das gleiche Element auf False setzen. Beispiel:

var keys = []; 

document.addEventListener("keydown", function(e) { 
    keys[e.keyCode] = true; 
}); 

document.addEventListener("keyup", function(e) { 
    keys[e.keyCode] = false; 
});

Dadurch wird sichergestellt, dass ein Element wahr bleibt, bis der Schlüssel losgelassen wird. Sie können prüfen, ob ein Schlüssel zur Zeit durch Überprüfen des Elements mit dem gleichen Index gedrückt wird:

if (keys[87]) { 
    // The "W" key is pressed 
} 
if (keys[83]) { 
    // The "S" key is pressed 
} 
/// ...

Hinweis: Sie nicht else-if s verwenden sollten, wenn Sie für die gedrückten Tasten überprüfen.

Quelle

2016-07-02 20:11:22

der Ereignis-Listener funktioniert, aber die ifs nicht so es nicht bewegt .. –

@NimrodNaim Ihren aktuellen Code mit jsfiddle –

https://jsfiddle.net/6ekjxonh/ –

kippe zwei Leinwand Rechtecke zur gleichen Zeit bewegen

Antwort

Verwandte Themen