Javascript I'；我试图让画布元素随键盘移动

我知道这个问题已经像q2i3648123648一样被回答了很多次，但我正试图用键盘移动红方块，因为某些原因，代码可以处理鼠标事件，但似乎不能处理键盘输入 这是javascript代码

let canvas;
let canvasContext;

let playerPositionX = 10;
let playerPositionY = 10;
let playerSpeed = 5;
const load = () => {
  canvas = document.getElementById("gameCanvas");
  canvasContext = canvas.getContext('2d');


  let framesPerSecond = 30;
  setInterval(() => {
    gameObjects();
  }, 1000 / framesPerSecond);
  // moving the player
  canvas.addEventListener("onkeydown", (e) => {
      if(e.keyCode === 87){
        playerPositionX += playerSpeed;
      }
  });

};
const gameObjects = () => {
  // canvas
  component(0, 0, canvas.width, canvas.height, 'black');

  // player
  component(playerPositionX, playerPositionY, 30, 30, 'red');
};

const component = (positionX, positionY, width, height, color) => {
  canvasContext.fillStyle = color;
  canvasContext.fillRect(positionX, positionY, width, height);
};



window.onload = load;

是一种折旧的财产。使用

• 将键盘事件侦听器与控制逻辑分离
• 同时收听key down（向下键）和key up（向上键）事件，并设置特定键已按下的标志
• 在主循环中检查该标志，并根据需要进行移动
• 使用

  [requestAnimationFrame][3]

  进行渲染

例子 下面的示例演示如何创建键盘界面。它消除了键盘自动重复的问题。如果需要，只需设置

keys.nameOfKey=false即可停止输入


const ctx=canvas.getContext（“2d”）；
常量帧率=30；//必须用整数除60，例如60,30,20,15,10
var frameCount=0；
//定义要侦听的键
常量键={
阿罗普：错，
箭头向下：错误，
左箭头：假，
右箭头：错，
anykey:false，
};
//如果“关键点”已关闭，则将“关键点”设置为true
功能键盘事件（事件）{
if（键[事件代码]！==未定义）{
keys[event.code]=event.type==“keydown”；
event.preventDefault（）；
event.type==“keydown”&&（keys.anykey=true）；
}
}
//将键侦听器添加到窗口
addEventListener（“keydown”，键盘事件）；
addEventListener（“keyup”，键盘事件）；
//对于SO snippet，如果没有用户单击，它将不会聚焦。
addEventListener（“单击”，（）=>requestAnimationFrame（更新），{once:true}）；
ctx.font=“16px arial”；
ctx.textAlign=“中心”；
ctx.fillText（“单击以聚焦键盘”，canvas.width/2，canvas.height/2）；
康斯特玩家={
x:0，y:0，w:10，h:10，速度：5，
画（）{
ctx.fillRect（player.x，player.y，player.w，player.h）；
},
移动（）{
如果（keys.ArrowUp）{player.y-=player.speed}
如果（keys.ArrowDown）{player.y+=player.speed}
如果（keys.ArrowRight）{player.x+=player.speed}
如果（keys.arrow left）{player.x-=player.speed}
如果（player.y<0）{player.y=0}
如果（player.y+player.h>canvas.height）{player.y=canvas.height-player.h}
如果（player.x+player.w>canvas.width）{player.x=canvas.width-player.w}
如果（player.x<0）{player.x=0}
}
}
函数更新（）{
如果（帧数%（60/帧率）==0）{
ctx.clearRect（0,0，canvas.width，canvas.height）；
player.move（）；
player.draw（）；
如果（！keys.anykey）{
ctx.fillText（“要移动的箭头键！”，canvas.width/2，canvas.height/2）；
}
}
帧数+=1；
requestAnimationFrame（更新）；
}
画布{
边框：2件纯黑；
}
Thx要获得帮助，我需要更多的研究来熟悉这一切，但是你建议使用es6来编码画布和动画，还是使用简单的旧JS就足够了？@TarekRoukoz es6使用起来容易得多，打字也少得多，技术进步非常快（es6已经5年了）所以，总是最好跟上最新和最伟大的，以免你落后太远。