js键盘事件实现人物的行走
程序员文章站
2022-06-22 13:58:23
本文实例为大家分享了js键盘事件实现人物行走的具体代码,供大家参考,具体内容如下
描述:
小时候喜欢玩的一个游戏,魔塔,实现了人物的行走,以及跳跃,当然是2d的效果。
用到的图:...
本文实例为大家分享了js键盘事件实现人物行走的具体代码,供大家参考,具体内容如下
描述:
小时候喜欢玩的一个游戏,魔塔,实现了人物的行走,以及跳跃,当然是2d的效果。
用到的图:
效果:
代码:
<!doctype html> <html lang="en"> <head> <meta charset="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> var key=0; var bool=false; var speed=2;//每次行走的距离 var actor;//人物div const height=33;//人物的高 const width=32;//人物的宽 var arr=[1,3,2,0];//4排图像 代表 下 左 右 上 var num=0; var jumpbool=false; var actorskinspeed=8; var jumpspeed=-15; init(); function init() { window.addeventlistener("keydown",keyhandler); window.addeventlistener("keyup",keyhandler); actor=document.queryselector("div"); setinterval(animation,16); //按键驱动不能实现 实现的是通过按键触发相应动画 实现我们的人物的帧动画 跳转 } function keyhandler(e) { bool=e.type==="keydown"; key=e.keycode; if(!bool){ num=0; actor.style.backgroundpositionx=-num*width+"px"; } if(key===32 && !jumpbool){//跳跃 空格驱动 jumpbool=true; } } function animation() { jump(); if(!bool)return; walk();//单方向行走 实现 changedirection();//方向确定时 内部行走的实现 } function jump() { if(!jumpbool)return; jumpspeed+=1; if(jumpspeed===15){ jumpbool=false; jumpspeed=-15; return; } actor.style.top=actor.offsettop+jumpspeed+"px"; } function changedirection() { actorskinspeed--; if(actorskinspeed>0) return; actorskinspeed=8; num++; if(num>3) num=0; actor.style.backgroundpositionx=-num*width+"px"; } function walk() { switch (key){ case 37://左 ×1 第二排 actor.style.left=actor.offsetleft-speed+"px"; actor.style.backgroundpositiony=-arr[0]*height+"px"; break; case 38://上 ×3 第四排 actor.style.top=actor.offsettop-speed+"px"; actor.style.backgroundpositiony=-arr[1]*height+"px"; break; case 39://右 ×2 第三排 actor.style.left=actor.offsetleft+speed+"px"; actor.style.backgroundpositiony=-arr[2]*height+"px"; break; case 40://下 ×0 第一排 actor.style.top=actor.offsettop+speed+"px"; actor.style.backgroundpositiony=-arr[3]*height+"px"; break; } } </script> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
推荐阅读
-
C#中winform实现自动触发鼠标、键盘事件的方法
-
android 键盘事件和屏幕事件的运行原理及交互实现
-
为radio类型的INPUT添加客户端脚本(附加实现JS来禁用onClick事件思路代码)
-
js通过keyCode值判断单击键盘上某个键,然后触发指定的事件方法
-
JS实现动态添加DOM节点和事件的方法示例
-
android 键盘事件和屏幕事件的运行原理及交互实现
-
C#实现可捕获几乎所有键盘鼠标事件的钩子类完整实例
-
为radio类型的INPUT添加客户端脚本(附加实现JS来禁用onClick事件思路代码)
-
原生js实现下拉框功能(支持键盘事件)
-
js通过keyCode值判断单击键盘上某个键,然后触发指定的事件方法