cant déplacer deux rectangles de toile en même temps

j'ai demandé une autre question aujourd'hui et j'ai un autre ..cant déplacer deux rectangles de toile en même temps

mais d'abord voici le 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>

pour que chacun du rect se déplace parfaitement :) mais voici le problème .. Je ne peux pas les déplacer à la fois togheter ..

merci d'aider !!

Source

2016-07-02 Nimrod Naim

Vous devriez apprendre le javascript orienté objet. –

Le problème est que le navigateur ne peut gérer qu'une seule touche enfoncée à la fois. Pour contourner cela, vous devez les choses suivantes:

Un tableau
Deux écouteurs d'événements, un pour le keydown et un pour l'événement keyup.

Le tableau contiendra les touches actuellement pressées. Dans l'écouteur de l'événement keydown, vous devez définir l'élément au même index que l'ID de la touche pressée sur true, et dans le gestionnaire d'événements keyup, vous devez définir le même élément sur false. Exemple:

var keys = []; 

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

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

Ceci s'assurera qu'un élément reste vrai jusqu'à ce que la clé soit libérée. Vous pouvez vérifier, si une clé est actuellement pressée en vérifiant l'élément avec le même indice:

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

Remarque: Vous ne devez pas utiliser else-if s lorsque vous vérifiez les touches enfoncées.

Source

2016-07-02 20:11:22

l'écouteur d'événement fonctionne mais le sis arent donc il ne bouge pas .. –

@NimrodNaim poster votre code actuel avec jsfiddle –

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

cant déplacer deux rectangles de toile en même temps

Répondre

Questions connexes