使用用户输入在HTML5画布中移动对象

Moving an Object in a HTML5 Canvas with User Input

本文关键字：布中 移动 对象 HTML5 用户 输入      更新时间：2023-09-26

我只是JavaScript的新手，我的代码有问题，我试图用用户输入在画布上移动对象。

使用Firefox运行它效果很好，但使用Chrome，用户输入来移动方块不起作用，我想知道为什么会这样？

<!DOCTYPE html>
<html>
 <head>
    <canvas id = "gameCanvas" width="400" height="400" style = "border:1px solid #000000;"></canvas>
   <style type="text/css"></style>
</head>
<body>
<script type="text/javascript">
   var c = document.getElementById("gameCanvas");
    var ctx = c.getContext("2d");
    ctx.fillStyle = "rgb(255, 0, 0)";
    var snake = {
        x: 5
        , y: 5
      };

    function drawSnake() {
        ctx.fillRect(snake.x ,snake.y,20,20);
      }
    window.addEventListener("keypress", function(event) { 
        if (event.keyCode == 39)
          snake.x += 5;
        else if (event.keyCode == 37)
          snake.x -= 5;
        else if (event.keyCode == 38)
          snake.y -= 5;
        else if (event.keyCode == 40)
          snake.y += 5;
        drawSnake();
      });
   drawSnake();
</script>
</body>
</html>

您必须将keypress事件更改为keydown才能在基于IE和Chromium的浏览器中工作。

相关文章：