扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
这篇文章主要讲解了javascript如何利用键盘控制小方块的移动，内容清晰明了，对此有兴趣的小伙伴可以学习一下，相信大家阅读完之后会有帮助。
成都创新互联长期为上千客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为咸阳企业提供专业的做网站、成都网站制作，咸阳网站改版等技术服务。拥有十载丰富建站经验和众多成功案例,为您定制开发。
原理
1. 利用键盘控制移动，则需要了解onkeydown函数，表示某个按键被按下，可以以此绑定一个事件响应函数，当键盘被按下时候，触发此事件，进行移动
2. keyCode 对于keypress 事件，该属性声明了被敲击的键生成的 Unicode 字符码。对于 keydown 和 keyup 事件，它指定了被敲击的键的虚拟键盘码。虚拟键盘码可能和使用的键盘的布局相关。 因此我们可以根据keycode返回的字符码来判断用户所按下的键，下面就是一个用于测试上下左右按键的js代码，经过我的测试之后，返回37 38 39 40；
window.onload = function(){
var box = document.getElementById("box");
document.onkeydown = function(event){
event = event || window.event;
console.log(event.keyCode);
}
};3.方块的移动实际上就是坐标的改变，因此需要offsetLeft 和offsetTop 来获得当前方块的坐标，然后将坐标进行一定的更改，就可以实现移动的效果了，下面给出代码
window.onload = function() {
document.onkeydown = function(event) {
event = event || window.event;
//设置移动速度
var speed = 10;
//当ctrl和方向按键同时按下时，提升移动速度
if(event.ctrlKey) {
speed = 50;
}
//获取div
var box01 = document.getElementById("box01");
switch(event.keyCode) {
/*keyCode返回按下按键的编码
* 37 向左
* 38向上
* 39向右
* 40向下
*/
case 37:
box01.style.left = box01.offsetLeft - speed + "px";
break;
case 39:
box01.style.left = box01.offsetLeft + speed + "px";
break;
case 38:
box01.style.top = box01.offsetTop - speed + "px";
break;
case 40:
box01.style.top = box01.offsetTop + speed + "px";
break;
}
};
};这样就可以简单实现方块的移动，但是此时我们会发现一个问题，当我们进行移动的时候，按住按键不松手，理论上方块应该直接平滑的进行移动，但实际上并非如此，第一下它会有一个小的停顿，这实际上是浏览器防止误触所设置的，因此我们需要对此进行优化
解决方案
下面附上修改后的完整代码
看完上述内容，是不是对javascript如何利用键盘控制小方块的移动有进一步的了解，如果还想学习更多内容，欢迎关注创新互联行业资讯频道。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网