js键盘事件如何实现人物的行走
作者
这篇文章将为大家详细讲解有关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键盘事件如何实现人物的行走”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。
目录
推荐阅读
-
JavaScript闭包用多会造成内存泄露吗
-
javascript中文乱码如何解决
-
PHP学习第十五天——JavaScript入门DOM对象:二
-
Node.js基本内容和知识点
简单的说node.js就是运行在服务端的JavaScript,起初段定位是后端开发语言,由于技术的不够成熟,一般小型项目...
-
PHP与Node.js:一个史诗般开发者的分享
-
JavaScript 中 find() 和 filter() 方法的区别
JavaScript在ES6上有很多数组方法,每种方法都有独特的用途和好处。在开发应用程序时,大多使用数组方法来获...
-
js怎么跟php结合使用
-
简单说说Node.js和JavaScript
Node.js是一个开源和跨平台的JavaScript运行时环境,在浏览器之外运行V8JavaScript引擎(...
-
前端开发工程师专业技能简历范文
-
JavaScript怎么实现淘宝网图片的局部放大功能
0 条评论
本站已关闭游客评论,请登录或者注册后再评论吧~