好资源导航 » 文章资讯 » javascript利用键盘控制小方块的移动

javascript利用键盘控制小方块的移动

2023-07-26 23:07:04 62

本文实例为大家分享了利用键盘控制小方块的移动，供大家参考，具体内容如下

原理

1.利用键盘控制移动，则需要了解onkeydown函数，表示某个按键被按下，可以以此绑定一个事件响应函数，当键盘被按下时候，触发此事件，进行移动

2.keyCode对于keypress事件，该属性声明了被敲击的键生成的Unicode字符码。对于keydown和keyup事件，它指定了被敲击的键的虚拟键盘码。虚拟键盘码可能和使用的键盘的布局相关。因此我们可以根据keycode返回的字符码来判断用户所按下的键，下面就是一个用于测试上下左右按键的js代码，经过我的测试之后，返回37383940；

window.onload=function(){
varbox=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;
//设置移动速度
varspeed=10;
//当ctrl和方向按键同时按下时，提升移动速度
if(event.ctrlKey){
speed=50;
}
//获取div
varbox01=document.getElementById("box01");
switch(event.keyCode){
/*keyCode返回按下按键的编码
*37向左
*38向上
*39向右
*40向下
*/
case37:
box01.style.left=box01.offsetLeft-speed+"px";
break;
case39:
box01.style.left=box01.offsetLeft+speed+"px";
break;
case38:
box01.style.top=box01.offsetTop-speed+"px";
break;
case40:
box01.style.top=box01.offsetTop+speed+"px";
break;

}
};

};

这样就可以简单实现方块的移动，但是此时我们会发现一个问题，当我们进行移动的时候，按住按键不松手，理论上方块应该直接平滑的进行移动，但实际上并非如此，第一下它会有一个小的停顿，这实际上是浏览器防止误触所设置的，因此我们需要对此进行优化

解决方案

这里我采用了定时器的做法来解决这个问题，因为控制移动的因素有两个，一个是控制方向，一个是控制速度，控制方向没有问题，因此我们需要改变速度
setInterval（function(){},time）;这是一个定时器，我们只需要在time时间内调用一次函数，就可以解决停顿的问题了

下面附上修改后的完整代码








#box01{
width:100px;
height:100px;
background-color:#008000;
position:absolute;
}


window.onload=function(){

//获取div
varbox01=document.getElementById("box01");
//设置移动速度
varspeed=10;
//设置移动的方向
vardir=0;

setInterval(function(){
switch(dir){
/*keyCode返回按下按键的编码
*37向左
*38向上
*39向右
*40向下
*/
case37:
box01.style.left=box01.offsetLeft-speed+"px";
break;
case39:
box01.style.left=box01.offsetLeft+speed+"px";
break;
case38:
box01.style.top=box01.offsetTop-speed+"px";
break;
case40:
box01.style.top=box01.offsetTop+speed+"px";
break;

}

},50)

document.onkeydown=function(event){
event=event||window.event;

//当ctrl和方向按键同时按下时，提升移动速度
if(event.ctrlKey){
speed=50;
}else{
speed=10;
}
//使dir等于keycode的值
dir=event.keyCode;

//当鼠标松开时，停止移动---如果不写这一个会造成无法停止移动的效果
document.onkeyup=function(){
dir=0;
};

};

};

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
514930285
czq8825@qq.com

javascript利用键盘控制小方块的移动

热门推荐

随机推荐