如何使用document.onkeydown使用箭头键移动对象？

Question

我在学校有一项任务，我们应该使用箭头键在画布内创建一个可移动对象。 我在完成代码并使对象实际移动时遇到麻烦。 到目前为止，当尝试使用向右箭头键移动对象时，我只得到一个显示文本“未定义”的警报框（因为此键是我目前开始使用的唯一键）。 有人对如何完成此代码有一些提示吗？ 我将非常感谢！

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();
}

Answer 1

由于这是家庭作业，因此您将无法获得完整的解决方案。 但您需要考虑（至少）：

• 什么时候应该实例化您的Rectangle对象
• 您所有对象的范围
• 哪些对象应分别负责绘图，清理，移动等
• HTML Canvas的2D坐标系。 向上/向下和向左/向右
• 如果您的矩形可能脱离画布

除此之外，请查看事件API。 属性keyCode是驼峰式的 ，不是小写的。

alert(e.keyCode); // camel case

那将解决undefined问题