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

我在学校有一项任务，我们应该使用箭头键在画布内创建一个可移动的对象。我有麻烦完成代码并使对象实际移动。到目前为止，当我尝试使用右箭头键移动对象时（因为此键是我目前开始使用的唯一一个键），我只会看到一个警告框，显示文本“未定义”。有没有人有关于如何完成此代码的一些线索？我会非常感激！如何使用document.onkeydown用箭头键移动对象？

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

来源

2016-09-26 elisoph

因为这是功课，你不会得到一个完整的解决方案。但是，你需要考虑（至少）：

当你的Rectangle对象应该被实例化
所有对象范围
哪些对象应该是负责拟定，结算，运动等。分别为
Html Canvas的二维坐标系。哪个方向是向上/向下和向左/右
如果您的矩形可能熄灭画布

从

除此之外，查看事件API。属性keyCode在骆驼案例而不是小写。

alert(e.keyCode); // camel case

这将解决这个问题undefined

来源

2016-09-26 09:24:44 Nelson

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

回答

相关问题