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 相关文章推荐
javascript 语法基础 想学习js的朋友可以看看
Dec 16 Javascript
jQuery ctrl+Enter shift+Enter实现代码
Feb 07 Javascript
页面右下角弹出提示框示例代码js版
Aug 02 Javascript
js菜单点击显示或隐藏效果的简单实例
Jan 13 Javascript
JS实现文档加载完成后执行代码
Jul 09 Javascript
javascript数据结构之二叉搜索树实现方法
Nov 25 Javascript
JQuery点击事件回到页面顶部效果的实现代码
May 24 Javascript
详解ES6中的三种异步解决方案
Jun 28 Javascript
vue-router之nuxt动态路由设置的两种方法小结
Sep 26 Javascript
详谈Object.defineProperty 及实现数据双向绑定
Jul 18 Javascript
JavaScript高级程序设计之基本引用类型
Nov 17 Javascript
前端JS获取URL参数的4种方法总结
Apr 05 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获取发送给用户的header信息的方法
2015/03/16 PHP
CI框架(ajax分页,全选,反选,不选,批量删除)完整代码详解
2016/11/01 PHP
php7 图形用户界面GUI 开发示例
2020/02/22 PHP
ECMAScript 创建自己的js类库
2012/11/22 Javascript
JQuery中extend使用介绍
2014/03/13 Javascript
jQuery+jRange实现滑动选取数值范围特效
2015/03/14 Javascript
JS实现仿FLASH效果的竖排导航代码
2015/09/15 Javascript
javascript之with的使用(阿里云、淘宝使用代码分析)
2016/10/11 Javascript
jQuery Easy UI中根据第一个下拉框选中的值设置第二个下拉框是否可以编辑
2016/11/29 Javascript
解决Angular.Js与Django标签冲突的方案
2016/12/20 Javascript
那些精彩的JavaScript代码片段
2017/01/12 Javascript
node.js基于fs模块对系统文件及目录进行读写操作的方法详解
2017/11/10 Javascript
详解封装基础的angular4的request请求方法
2018/06/05 Javascript
详解webpack运行Babel教程
2018/06/13 Javascript
记录一篇关于redux-saga的基本使用过程
2018/08/18 Javascript
vue自定义js图片碎片轮播图切换效果的实现代码
2019/04/28 Javascript
JavaScript之Blob对象类型的具体使用方法
2019/11/29 Javascript
Python中input与raw_input 之间的比较
2017/08/20 Python
Python Unittest自动化单元测试框架详解
2018/04/04 Python
Python利用splinter实现浏览器自动化操作方法
2018/05/11 Python
深入浅析Python中list的复制及深拷贝与浅拷贝
2018/09/03 Python
Python 200行代码实现一个滑动验证码过程详解
2019/07/11 Python
在django admin详情表单显示中添加自定义控件的实现
2020/03/11 Python
解决pycharm安装第三方库失败的问题
2020/05/09 Python
python 实现学生信息管理系统的示例
2020/11/28 Python
详解css3自定义滚动条样式写法
2017/12/25 HTML / CSS
天游软件面试
2013/11/23 面试题
中专三年学习的个人自我评价
2013/12/12 职场文书
党风廉设责任书
2014/04/16 职场文书
市场营销专业毕业生求职信
2014/07/21 职场文书
刑事撤诉申请书
2015/05/18 职场文书
幼儿园六一儿童节主持词
2015/06/30 职场文书
大学毕业谢师宴致辞
2015/07/27 职场文书
早安问候语大全
2015/11/10 职场文书
你对自己的信用报告有过了解吗?
2019/07/09 职场文书
dubbo集成zipkin获取Traceid的实现
2021/07/26 Java/Android