如何使用document.onkeydown用方向键移动对象

How to move object with arrow keys using document.onkeydown?

本文关键字：移动 对象 方向 何使用 document onkeydown      更新时间：2023-09-26

我在学校有一个任务，我们应该在画布内创建一个可移动的对象，使用箭头键。我在完成代码和使对象实际移动方面遇到了麻烦。到目前为止，当我试图使用右箭头键移动对象时，我只会得到一个显示文本"undefined"的警告框(因为这个键是我目前唯一开始使用的键)。有人知道如何完成这段代码吗?我会非常感激!

window.onload = function(){
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var x = 0;
var y = 0;
context.fillStyle = "#c409a3";
context.fillRect(x, y, 100, 100);
}
document.onkeydown = function(e){
alert(e.keycode);
var rect = new Object();
rect.x = 0;
rect.y = 0;
rect.moveright = function(){rect.x++;}
rect.draw = function(){
   context.fillStyle = "#c409a3";
   context.fillRect(rect.x, rect.y, 100, 100)
}
}
rect.erease = function(){
}
rect.moveleft = function(){rect.x--;}
rect.moveup = function(){rect.y++;}
rect.movedown = function(){rect.y--;}

if (e.keyCode == "39"){
    rect.erease();
    rect.moveright();
    rect.draw();
}
if (e.keyCode == "37"){
   rect.erease();
   rect.moveleft();
   rect.draw();
}
if (e.keyCode == "38"){
   rect.erease();
   rect.moveup();
   rect.draw();
}
if (e.keyCode == "40"){
   rect.erease();
   rect.movedown();
   rect.draw();
}

因为这是作业，你不会得到一个完整的解决方案。但是你需要考虑(至少):

  • 当你的矩形对象应该实例化
  • 所有对象的作用域
  • 哪些对象分别负责绘图、清理、移动等
  • Html Canvas的2D坐标系。哪个方向是上/下和左/右
  • 如果你的矩形可能会脱离画布

除此之外，看看事件API。属性keyCode使用驼峰大小写，而不是小写。

alert(e.keyCode); // camel case

这将解决undefined问题

相关文章：