Question

所以我是HTML5的新手，并决定开始编写乒乓球游戏。我想用键盘顺利移动我的角色，左边的W和S键以及右边的向上和向下箭头。我似乎无法让它发挥作用。这可能很容易，但我是我的菜鸟，我需要一些帮助。提前致谢！

<!DOCTYPE html>
<html>
  <head>
      <title>Pingedy Pong</title>
  </head>
  <body style="font-family:Arial;">
      <canvas id="ctx" width="699" height="400" style="background-color:black;border:2px solid black;background-image: url('background.jpg');"></canvas>
      <script>
        
        // STARTING SCRIPT
          
        var ctx = document.getElementById("ctx").getContext("2d");
        ctx.fillStyle="white";
        ctx.font = '30px Arial';
        
        // VARIABLES
          
        var keys1 = [];
        var keys2 = [];
          
        var width = 699;
        var height = 400;
          
        var ball = {
            width:20,
            height:20,
            spdX:2.9,
            spdY:2.9,
            x:340,
            y:190,
        };
          
        var char1 = {
            w:15,
            h:90,
            spdX:3,
            spdY:3,
            x:10,
            y:155,
        };
          
        var char2 = {
            w:15,
            h:90,
            spdX:3,
            spdY:3,
            x:674,
            y:155,
        };
          
          // UPDATE
          
          function updateEntity(a) {
            a.x+=a.spdX;
            a.y+=a.spdY;
            ctx.clearRect(0,0,width,height);
            ctx.fillRect(a.x,a.y,a.height,a.width);
              if(a.x > width-a.width || a.x < 0) {
                a.spdX = -a.spdX;
              };
              
              if(a.y > height-a.height || a.y < 0) {
                a.spdY = -a.spdY;
              };
          };
          
          function renderChar(b) {
            ctx.fillRect(b.x,b.y,b.w,b.h);
          };
          
          function checkInput() {
            document.addEventListener('onkeydown', function(e) {
                if(e.keyCode == 37) {
                    char1.y += 1;
                }
                else if(e.keyCode == 39) {
                    char1.y -= 1;
                }
            });
          };
          
          function checkWinP1() {
              if (ball.x < 0.33) {
                console.log("P1 Wins");
              };
          };
          function checkWinP2() {
              if (ball.x > 679) {
                console.log("P2 Wins");
              };
          };
          
          function update() {
            updateEntity(ball);
            renderChar(char1);
            renderChar(char2);
            checkInput();
            checkWinP1();
            checkWinP2();
          };
          
          //TICKS
          
          setInterval(update,1000/120);
             
     </script>
  </body>
</html>

Answer 1

更新1 ：使用keydown代替keypress事件。

此次更新的原因是箭头键don't trigger keypress事件（或者它们会触发它，但事件不会返回有关按下哪个键的信息）。如果您想了解更多相关信息，请阅读this。

更新2

我现在意识到＆＃39; 顺利＆＃39;你问题中的关键字。如果短时间内拨打update功能对您来说不够好，requestAnimationFrame() API is the way to go。

当你编写游戏时，我建议你使用jQuery。

试试这段代码：

var characterSpeed = 15;

$(document).on("keydown", function (e) {
    switch (e.which)
    {
        case 87: //w
            char1.y -= characterSpeed;
            break;
        case 83: //s
            char1.y += characterSpeed;
            break;
        case 38: //up arrow
            char2.y -= characterSpeed;
            break;
        case 40: //down arrow
            char2.y += characterSpeed;
            break;
        default:
            alert("You have pressed the key " + e.which);
     } 
});

这里有你的代码：

＆＃13;

// STARTING SCRIPT
          
        var ctx = document.getElementById("ctx").getContext("2d");
        ctx.fillStyle="white";
        ctx.font = '30px Arial';
        
        // VARIABLES
          
        var keys1 = [];
        var keys2 = [];
          
        var width = 699;
        var height = 400;
          
        var ball = {
            width:20,
            height:20,
            spdX:2.9,
            spdY:2.9,
            x:340,
            y:190,
        };
          
        var char1 = {
            w:15,
            h:90,
            spdX:3,
            spdY:3,
            x:10,
            y:155,
        };
          
        var char2 = {
            w:15,
            h:90,
            spdX:3,
            spdY:3,
            x:674,
            y:155,
        };
          
          // UPDATE
          
          function updateEntity(a) {
            a.x+=a.spdX;
            a.y+=a.spdY;
            ctx.clearRect(0,0,width,height);
            ctx.fillRect(a.x,a.y,a.height,a.width);
              if(a.x > width-a.width || a.x < 0) {
                a.spdX = -a.spdX;
              };
              
              if(a.y > height-a.height || a.y < 0) {
                a.spdY = -a.spdY;
              };
          };
          
          function renderChar(b) {
            ctx.fillRect(b.x,b.y,b.w,b.h);
          };
          
          function checkInput() {
            document.addEventListener('onkeydown', function(e) {
                if(e.keyCode == 37) {
                    char1.y += 1;
                }
                else if(e.keyCode == 39) {
                    char1.y -= 1;
                }
            });
          };
          
          function checkWinP1() {
              if (ball.x < 0.33) {
                console.log("P1 Wins");
              };
          };
          function checkWinP2() {
              if (ball.x > 679) {
                console.log("P2 Wins");
              };
          };
          
          function update() {
            updateEntity(ball);
            renderChar(char1);
            renderChar(char2);
            checkInput();
            checkWinP1();
            checkWinP2();
          };
          
          //TICKS
          
          setInterval(update,1000/120);


    //NEW CODE TO MANAGE THE CHARACTERS MOTION

    var characterSpeed = 15;

    $(document).on("keydown", function (e) {
        switch (e.which)
        {
            case 87: //w
                char1.y -= characterSpeed;
                break;
            case 83: //s
                char1.y += characterSpeed;
                break;
            case 38: //up arrow
                char2.y -= characterSpeed;
                break;
            case 40: //down arrow
                char2.y += characterSpeed;
                break;
            default:
                alert("You have pressed the key " + e.which);
         } 
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
  <head>
      <title>Pingedy Pong</title>
  </head>
  <body style="font-family:Arial;">
      <canvas id="ctx" width="699" height="400" style="background-color:black;border:2px solid black;background-image: url('background.jpg');"></canvas>
      <script>
        

     </script>
  </body>
</html>

＆＃13;

另外，您可能想阅读这两篇文章：

您将了解如何将多个处理程序绑定到同一事件，IE与其他浏览器之间的区别，String.fromCharCode函数以及如果您感兴趣的话，如何编写相同的代码与香草javascript。

希望它有所帮助！

如何使用键盘输入顺利移动JS对象？

1 个答案: