角色跳轉腳本javascript平臺遊戲

可能是我在這個主題上的第三或第四篇文章，感謝迄今的幫助。角色跳轉腳本javascript平臺遊戲

我在JavaScript中有一個小型平臺遊戲項目，用戶可以控制一個可以左右運行的立方體，並可以跳轉和（隨後）下降。

問題我有，當我按住跳躍按鈕，我的角色跳躍，達到最大高度，然後下降（這是所需的），但如果繼續按住跳躍按鈕，字符然後再次跳轉和被捲入一個跳動/下降的無限循環中，這個循環具有剛剛在空中晃動的立方體的視覺效果。

雖然可愛和熱鬧，這是不期望的。有人可以用一些代碼來幫助我禁用跳躍布爾值，同時按鍵仍然被按下，然後一旦釋放按鍵就重新啓用它，並且再次按下該按鍵。代碼如下，謝謝。

<!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>

來源

2017-06-14 James Lewis

我希望這幫助：

<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/

來源

2017-06-15 00:48:11

解決了，謝謝！我只需將'down = true'這行添加到我的keyUpHandler中以獲得相同的密鑰以允許在遊戲中進行額外的跳轉，但這非常棒！ –

角色跳轉腳本javascript平臺遊戲

回答

相關問題