js键盘事件实现人物的行走


Posted in Javascript onJanuary 17, 2020

本文实例为大家分享了js键盘事件实现人物行走的具体代码,供大家参考,具体内容如下

描述:

小时候喜欢玩的一个游戏,魔塔,实现了人物的行走,以及跳跃,当然是2D的效果。

用到的图:

js键盘事件实现人物的行走

效果:

js键盘事件实现人物的行走

代码:

<!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 弹出框 替代浏览器的弹出框
Oct 29 Javascript
Javascript中的String对象详谈
Mar 03 Javascript
Python脚本后台运行的几种方式
Mar 09 Javascript
Js实现无刷新删除内容
Apr 29 Javascript
JavaScript中的各种操作符使用总结
May 26 Javascript
Bootstrap源码解读下拉菜单(4)
Dec 23 Javascript
vue-router 中router-view不能渲染的解决方法
May 23 Javascript
深入理解vue-loader如何使用
Jun 06 Javascript
vue使用xe-utils函数库的具体方法
Mar 06 Javascript
深入理解es6块级作用域的使用
Mar 28 Javascript
Chrome插件开发系列一:弹窗终结者开发实战
Oct 02 Javascript
vue2和vue3的v-if与v-for优先级对比学习
Oct 10 Javascript
javascript实现简易的计算器
Jan 17 #Javascript
JavaScript简易计算器制作
Jan 17 #Javascript
vue下axios拦截器token刷新机制的实例代码
Jan 17 #Javascript
js布局实现单选按钮控件
Jan 17 #Javascript
vue 查看dist文件里的结构(多种方式)
Jan 17 #Javascript
JavaScript数组去重实现方法小结
Jan 17 #Javascript
JS面向对象之多选框实现
Jan 17 #Javascript
You might like
PHP加密解密函数详解
2015/10/28 PHP
PHP静态成员变量和非静态成员变量详解
2017/02/14 PHP
PHP创建文件及写入数据(覆盖写入,追加写入)的方法详解
2019/02/15 PHP
php+ajax实现文件切割上传功能示例
2020/03/03 PHP
js不完美解决click和dblclick事件冲突问题
2012/07/16 Javascript
仿百度的关键词匹配搜索示例
2013/09/25 Javascript
js获取当前月的第一天和最后一天的小例子
2013/11/18 Javascript
兼容主流浏览器的iframe自适应高度js脚本
2014/01/10 Javascript
nodejs下打包模块archiver详解
2014/12/03 NodeJs
SeaJS 与 RequireJS 的差异对比
2014/12/08 Javascript
avalonjs制作响应式瀑布流特效
2015/05/06 Javascript
可以浮动某个物体的jquery控件用法实例
2015/07/24 Javascript
js带点自动图片轮播幻灯片特效代码分享
2015/09/07 Javascript
详解JavaScript中常用的函数类型
2015/11/18 Javascript
jQuery+ajax实现文章点赞功能的方法
2015/12/31 Javascript
jquery mobile 实现自定义confirm确认框效果的简单实例
2016/06/17 Javascript
Easyui的组合框的取值与赋值
2016/10/28 Javascript
vue 点击按钮实现动态挂载子组件的方法
2018/09/07 Javascript
深入理解 JS 垃圾回收
2019/06/03 Javascript
Javascript实现贪吃蛇小游戏(含详细注释)
2020/10/23 Javascript
python实现保存网页到本地示例
2014/03/16 Python
用Python写脚本,实现完全备份和增量备份的示例
2018/04/29 Python
python 信息同时输出到控制台与文件的实例讲解
2018/05/11 Python
浅谈django的render函数的参数问题
2018/10/16 Python
浅谈python脚本设置运行参数的方法
2018/12/03 Python
Pycharm配置远程调试的方法步骤
2018/12/17 Python
Python基础之字典常见操作经典实例详解
2020/02/26 Python
使用Python防止SQL注入攻击的实现示例
2020/05/21 Python
python实现时间序列自相关图(acf)、偏自相关图(pacf)教程
2020/06/03 Python
Python环境管理virtualenv&amp;virtualenvwrapper的配置详解
2020/07/01 Python
李培根演讲稿
2014/05/22 职场文书
珠宝的促销活动方案
2014/08/31 职场文书
2015年三年级班主任工作总结
2015/05/21 职场文书
2015年高三班主任工作总结
2015/05/21 职场文书
2019银行员工个人工作自我鉴定
2019/06/27 职场文书
如何利用pygame实现打飞机小游戏
2021/05/30 Python