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

使用的图:

f82390ae8afb9ba9750fac88e04ad1c.png

效果图:

26ecb9da85499cfc645fa0d782cda5e.png

(推荐教程: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如何利用键盘事件实现人物行走的详细内容,更多请关注龙方网络其它相关文章!

郑重声明:本文版权包含图片归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们(delete@yzlfxy.com)修改或删除,多谢。

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。

留言与评论(共有 0 条评论)
昵称:
匿名发表
   
验证码: