2017-06-14 4 views
0

Probablement mon troisième ou quatrième poste sur ce sujet, merci pour l'aide jusqu'à présent.Script de saut de caractères jeu de plateforme javascript

J'ai un petit projet de jeu de plate-forme en javascript où l'utilisateur contrôle un cube qui peut courir à gauche et à droite et peut sauter et (par la suite) tomber. Le problème est que quand je maintiens le bouton de saut enfoncé, mon personnage saute, atteint la hauteur maximum, puis tombe (ce qui est désiré) mais si le bouton de saut est maintenu enfoncé, le personnage saute à nouveau et est pris dans une boucle infinie de saut/chute, qui a l'effet visuel du cube secouant juste dans l'air moyen. Bien qu'adorable et hilarant, ce n'est pas souhaitable. Quelqu'un peut-il m'aider avec un code pour désactiver le saut booléen alors que la touche est encore pressée, puis re en l'activant une fois que la touche est relâchée, sous réserve d'appuyer à nouveau sur la touche. Le code suit, merci.

<!DOCTYPE html> 

<head> 

<meta charset="utf-8" /> 

    <title>Platformer!</title> 

    <style> 
    * { 
     padding: 0; 
     margin: 0; 
    } 
    canvas { 
     background: "#eee"; 
     display: block; 
     margin: 0 auto; 
     border: 2px solid black; 
    }   
    </style> 

</head> 

<body> 

    <canvas id="gameCanvas" width="640" height="560"></canvas> 

    <script> 

     var canvas = document.getElementById("gameCanvas"); 

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

     var coinRad = 8; 
     var coinX = 40; 
     var coinY = 80; 

     var x = 20; 
     var y = 510; 
     var w = 30; 
     var h = 50; 

     var rightPressed = false; 
     var leftPressed = false; 

     var ducked = false; 
     var jumping = false; 

     var falling = false; 

     document.addEventListener("keydown", keyDownHandler, false); 
     document.addEventListener("keyup", keyUpHandler, false); 

     function keyDownHandler(e) { 
      if(e.keyCode == 39) { 
      rightPressed = true; 
     } 
     else if(e.keyCode == 37) { 
      leftPressed = true; 
     } 
     else if(e.keyCode == 40) { 
      ducked = true; 
      } 
     else if(e.keyCode == 32) { 
      jumping = true; 
     } 
     } 


     function keyUpHandler(e) { 
      if(e.keyCode == 39) { 
      rightPressed = false; 
     } 
     else if(e.keyCode == 37) { 
      leftPressed = false; 
      } 
     else if(e.keyCode == 40) { 
      ducked = false; 
      } 
     else if(e.keyCode == 32) { 
      jumping = false; 
      falling = true; 
     } 
     } 

     function drawCube() { 
      ctx.beginPath(); 
      ctx.rect(x,y,w,h); 
      ctx.fillStyle = "Green"; 
      ctx.fill(); 
      ctx.closePath(); 
      } 

     function run() { 
      ctx.clearRect(0,0,canvas.width,canvas.height); 

      if (jumping) { 
       if (y > canvas.height/3) { 
        y -= 20; 
       } 
       if (y <= canvas.height/3) { 
        jumping = false; 
        falling = true; 
       } 
       } 
      else if (falling) { 
       if (y < 510) { 
        y += 40; 
       } 
       if (y >= 510) { 
        y = 510; 
        falling = false; 
       } 
      } 
      if (leftPressed) { 
       if (x > 0) { 
        x -= 2.5; 
       } 
      } 
      else if (rightPressed) { 
       if (x < canvas.width-w) { 
        x += 2.5; 
       } 
      } 
      drawCube(); 
     } 

     setInterval(run, 10); 

    </script> 
</body> 

Répondre

0

J'espère que cette aide:

<canvas id="gameCanvas" width="640" height="560"></canvas> 

<script> 

    var canvas = document.getElementById("gameCanvas"); 

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

    var coinRad = 8; 
    var coinX = 40; 
    var coinY = 80; 

    var x = 20; 
    var y = 510; 
    var w = 30; 
    var h = 50; 

    var rightPressed = false; 
    var leftPressed = false; 

    var ducked = false; 
    var jumping = false; 

    var falling = false; 

    var down = true; 

    document.addEventListener("keydown", keyDownHandler, false); 
    document.addEventListener("keyup", keyUpHandler, false); 

    function keyDownHandler(e) { 
     if(e.keyCode == 39) { 
     rightPressed = true; 
    } 
    else if(e.keyCode == 37) { 
     leftPressed = true; 
    } 
    else if(e.keyCode == 40) { 
     ducked = true; 
     } 
    else if(e.keyCode == 32) { 
    if (down) { 
     jumping = true; 
     down = false; 
    } 

    } 
    } 


    function keyUpHandler(e) { 
     if(e.keyCode == 39) { 
     rightPressed = false; 
    } 
    else if(e.keyCode == 37) { 
     leftPressed = false; 
     } 
    else if(e.keyCode == 40) { 
     ducked = false; 
     } 
    else if(e.keyCode == 32) { 
     jumping = false; 
     falling = true; 
    } 
    } 

    function drawCube() { 
     ctx.beginPath(); 
     ctx.rect(x,y,w,h); 
     ctx.fillStyle = "Green"; 
     ctx.fill(); 
     ctx.closePath(); 
     } 

    function run() { 
     ctx.clearRect(0,0,canvas.width,canvas.height); 

     if (jumping) { 
      if (y > canvas.height/3) { 
       y -= 20; 
      } 
      if (y <= canvas.height/3) { 
       jumping = false; 
       falling = true; 
      } 
      } 
     else if (falling) { 

      if (y < 510) { 
       y += 40; 
      } 
      if (y >= 510) { 
       y = 510; 
       falling = false; 
       down = true; 
      } 
     } 
     if (leftPressed) { 
      if (x > 0) { 
       x -= 2.5; 
      } 
     } 
     else if (rightPressed) { 
      if (x < canvas.width-w) { 
       x += 2.5; 
      } 
     } 
     drawCube(); 
    } 

    setInterval(run, 10); 

</script> 

https://jsfiddle.net/hg788rj7/

+0

Résolu, merci! J'ai juste dû ajouter la ligne 'down = true' à mon keyUpHandler pour la même clé pour permettre des sauts supplémentaires dans le jeu mais c'était super! –