Javascript HTML5画布-键盘键不响应

我试图在我的乒乓球游戏中实现按键输入。要点是上下箭头键根本不起作用。我的浏览器控制台不显示任何错误消息

---

事件正在触发，问题是您在每次更新时都要添加它们。您要做的是将回调和addEventListeners放在一个方法（如addEvents）的外部，该方法在初始化期间应该调用一次。当前，被触发的大量事件处理程序会杀死页面

    function addEvents() {

      window.addEventListener('keydown', onKeyDown, false);
      window.addEventListener('keyup', onKeyUp, false);

      var key = {
        UP: 38,
        DOWN: 40
      };

      function onKeyDown(e) {
        if (e.keyCode == key.UP) {
          playerPaddle.UP_DOWN = true;
        }

        if (e.keyCode == key.DOWN) {
          playerPaddle.DOWN_DOWN = true;
      }
    }

    function onKeyUp(e) {
      if (e.keyCode == key.UP) {
        playerPaddle.UP_DOWN = false;
      }

      if (e.keyCode == 40) {
        playerPaddle.DOWN_DOWN = key.DOWN;
      }
    }
}

在进一步审查之后，还有一些其他问题。首先，实际更改拨片的X和Y的逻辑应该在更新方法中（因为这通常用于更改对象属性），而渲染方法应该只使用对象的更新属性绘制形状和图像

第二，您试图在render方法中访问this.playerBat.y，但是“this”实际上就是playerBat。因此，为了正确地定位“y”属性，您需要编写这个.y

---

我还注意到，你有一个键映射，定义了上下键码，但实际上并不使用它，而是使用数字。可能是您计划要做的事情？

我重新实现了您提供的代码，并向

playerBat

添加了一个

init

函数，该函数为

keydown

和

keyup

事件附加事件监听器。我只是保留了相关的位和实现的对象作为函数，但是这个概念仍然是适用的

传递到

addEventListener

的回调函数需要绑定

this

，否则回调中的

this

值（

this.UP\u DOWN

和

this.DOWN\u DOWN

）将与包含范围中的

this

值不同；您想要的一个值

您的浏览器不支持HTML5画布
var canvas=document.getElementById（'canvas'）；
canvas.width=window.innerWidth-20；
canvas.height=window.innerHeight-20；
var ctx=canvas.getContext（'2d'）；
var Canvas_W=数学地板（Canvas.width）；
var Canvas_H=数学地板（Canvas.height）；
/*
*定义一个玩家对象。
*/
函数PlayerBat（）{
这个.x=null；
这个.y=null；
这个宽度=20；
该高度=画布高度/3；
this.UP\u DOWN=false；
this.DOWN\u DOWN=false；
this.init=函数（）{
console.log（'init'）；
//必须绑定“这个”！
window.addEventListener（'keydown'，函数（e）{
console.log（'keydown'）；
如果（e.keyCode==38）this.UP\u DOWN=true；
否则如果（e.keyCode==40）this.DOWN\u DOWN=true；
}.绑定（此），假）；
//必须绑定“这个”！
window.addEventListener（'keyup'，函数（e）{
console.log（'keyUp'）
如果（e.keyCode==38）this.UP\u DOWN=false；
否则如果（e.keyCode==40）this.DOWN\u DOWN=false；
}.绑定（此），假）；
};
this.update=函数（）{
var key={UP:38，DOWN:40}；
this.y=Math.max（Math.min（this.y，Canvas_H-this.height），0）；
};
this.render=函数（）{
//清理画布
clearRect（0，0，canvas.width，canvas.height）；
//重划划桨
ctx.fillStyle='#00F'；
ctx.fillRect（this.x，this.y，this.width，this.height）；
this.y=（this.UP\u DOWN）？this.y-5:（（this.DOWN\u DOWN）？this.y+5:this.y）；
};
}
函数GameRunner（）{
//创建播放器的实例
var playerBat=新playerBat（）；
playerBat.init（）；
//在GameRunner实例化时执行
（功能（）{
playerBat.x=playerBat.width；
playerBat.y=（Canvas_H-playerBat.height）/2；
})();
函数步骤（）{
playerBat.update（）；
playerBat.render（）；
请求动画帧（步骤）；
}
//公共方法。启动动画循环
this.start=函数（）{
请求动画帧（步骤）；
}
}
//创建GameRunner实例
var game=newgamerunner（）；
//开始比赛
game.start（）；

    function addEvents() {

      window.addEventListener('keydown', onKeyDown, false);
      window.addEventListener('keyup', onKeyUp, false);

      var key = {
        UP: 38,
        DOWN: 40
      };

      function onKeyDown(e) {
        if (e.keyCode == key.UP) {
          playerPaddle.UP_DOWN = true;
        }

        if (e.keyCode == key.DOWN) {
          playerPaddle.DOWN_DOWN = true;
      }
    }

    function onKeyUp(e) {
      if (e.keyCode == key.UP) {
        playerPaddle.UP_DOWN = false;
      }

      if (e.keyCode == 40) {
        playerPaddle.DOWN_DOWN = key.DOWN;
      }
    }
}