首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何在document.onkeydown中使用箭头键移动对象?

如何在document.onkeydown中使用箭头键移动对象?
EN

Stack Overflow用户
提问于 2016-09-26 16:31:41
回答 1查看 526关注 0票数 0

我在学校有一个任务,我们应该在画布内使用箭头键创建一个可移动的对象。我在完成代码和让对象实际移动时遇到了麻烦。到目前为止,当我尝试使用向右键移动对象时,我只得到一个显示文本“未定义”的警告框(因为此键是我目前唯一开始使用的键)。有谁对如何完成这段代码有什么建议吗?我会非常感激的!

代码语言:javascript
运行
复制
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();
}
EN

Stack Overflow用户

发布于 2016-09-26 17:24:44

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

respectively

  • Html
  • 当你的矩形对象应该是你的所有对象的作用域时,
  • 哪些对象应该负责绘制,清除,移动等。哪个方向是向上/向下和向左/向右,如果您的矩形可能会离开画布

,那么哪个方向是向上/向下和向左/向右

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

代码语言:javascript
运行
复制
alert(e.keyCode); // camel case

这将解决undefined问题

票数 0
EN
查看全部 1 条回答
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/39698034

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档