js键盘事件如何实现人物的行走

tangjin

作者

这篇文章将为大家详细讲解有关js键盘事件如何实现人物的行走，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

描述：

小时候喜欢玩的一个游戏，魔塔，实现了人物的行走，以及跳跃，当然是2D的效果。

用到的图：

效果：

代码：

<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Title</title>
<style>
html
{
background-color:deepskyblue;
}
div
{
width:32px;
height:32px;
background-image:url("img/Actor01-Braver03.png");
position:absolute;
}
</style>
</head>
<body>
<div></div>
<script>
varkey=0;
varbool=false;
varspeed=2;//每次行走的距离
varactor;//人物div
constHEIGHT=33;//人物的高
constWIDTH=32;//人物的宽
vararr=[1,3,2,0];//4排图像代表下左右上
varnum=0;
varjumpBool=false;
varactorSkinSpeed=8;
varjumpSpeed=-15;
init();
functioninit(){
window.addEventListener("keydown",keyHandler);
window.addEventListener("keyup",keyHandler);
actor=document.querySelector("div");
setInterval(animation,16);
//按键驱动不能实现实现的是通过按键触发相应动画实现我们的人物的帧动画跳转
}

functionkeyHandler(e){
bool=e.type==="keydown";
key=e.keyCode;
if(!bool){
num=0;
actor.style.backgroundPositionX=-num*WIDTH+"px";
}
if(key===32&&!jumpBool){//跳跃空格驱动
jumpBool=true;
}
}

functionanimation(){
jump();
if(!bool)return;
walk();//单方向行走实现
changeDirection();//方向确定时内部行走的实现
}

functionjump(){
if(!jumpBool)return;
jumpSpeed+=1;
if(jumpSpeed===15){
jumpBool=false;
jumpSpeed=-15;
return;
}
actor.style.top=actor.offsetTop+jumpSpeed+"px";
}

functionchangeDirection(){
actorSkinSpeed--;
if(actorSkinSpeed>0)return;
actorSkinSpeed=8;
num++;
if(num>3)num=0;
actor.style.backgroundPositionX=-num*WIDTH+"px";
}

functionwalk(){
switch(key){
case37://左×1第二排
actor.style.left=actor.offsetLeft-speed+"px";
actor.style.backgroundPositionY=-arr[0]*HEIGHT+"px";
break;
case38://上×3第四排
actor.style.top=actor.offsetTop-speed+"px";
actor.style.backgroundPositionY=-arr[1]*HEIGHT+"px";
break;
case39://右×2第三排
actor.style.left=actor.offsetLeft+speed+"px";
actor.style.backgroundPositionY=-arr[2]*HEIGHT+"px";
break;
case40://下×0第一排
actor.style.top=actor.offsetTop+speed+"px";
actor.style.backgroundPositionY=-arr[3]*HEIGHT+"px";
break;

}
}
</script>
</body>
</html>

关于“js键盘事件如何实现人物的行走”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。

阅读全文

发布于 2021-05-30 14:05:15

javascript