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

前端  /  管理员 发布于 7年前   169

使用的图：

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如何利用键盘事件实现人物行走的详细内容，更多请关注其它相关文章！


  • 上一条：
    css如何实现n宫格布局
    下一条：
    css如何实现始终将footer固定在底部

    • 昵称：

    邮箱：

    0条评论 (评论内容有缓存机制,请悉知!)
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客