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

来源：懂视网责编：小采时间：2020-11-03 18:16:35

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

js如何利用键盘事件实现人物行走:使用的图：效果图：（推荐教程：javascript教程）实例代码：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title

推荐度：

点击下载本文 文档为doc格式

导读js如何利用键盘事件实现人物行走:使用的图：效果图：（推荐教程：javascript教程）实例代码：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title

使用的图：

效果图：

（推荐教程：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视频教程

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

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

推荐度：

点击下载本文 文档为doc格式

标签：人物实现 js

热门焦点

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

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

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

最新推荐

猜你喜欢

热门推荐