如何使用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用箭頭鍵移動對象？

回答

相關問題