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

互联网 20-3-11

使用的图：

效果图：

（推荐教程：javascript教程）

实例代码：

<!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>

相关视频教程推荐：javascript视频教程

以上就是js如何利用键盘事件实现人物行走的详细内容，更多内容请关注技术你好其它相关文章！

来源链接：

免责声明：
1.资讯内容不构成投资建议，投资者应独立决策并自行承担风险
2.本文版权归属原作所有，仅代表作者本人观点，不代表本站的观点或立场

标签：键盘事件