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

【问题标题】：Moving an Object in a HTML5 Canvas with User Input使用用户输入在 HTML5 画布中移动对象
【发布时间】：2015-11-01 20:58:45
【问题描述】：

我只是 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>

【问题讨论】：

说“它不起作用”并不是很有帮助。你能描述一下你所期望的发生或没有发生的事情吗？

标签： javascript html canvas addeventlistener keycode

【解决方案1】：

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

【讨论】：