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中splice()的强大(插入、删除或替换数组的元素)
Jan 16 Javascript
intro.js 页面引导简单用法 分享
Aug 06 Javascript
$(document).ready(function() {})不执行初始化脚本
Jun 19 Javascript
JS在Chrome浏览器中showModalDialog函数返回值为undefined的解决方法
Aug 03 Javascript
对js eval()函数的一些见解
Aug 15 Javascript
js判断文件格式及大小的简单实例(必看)
Oct 11 Javascript
详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
Oct 12 Javascript
Vue.js中的组件系统
May 30 Javascript
解决ele ui 表格表头太长问题的实现
Nov 13 Javascript
Vue 3.0中jsx语法的使用
Nov 13 Javascript
JavaScript实现HTML导航栏下拉菜单
Nov 25 Javascript
vue实现树状表格效果
Dec 29 Vue.js
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执行速度全攻略(上)
2006/10/09 PHP
PHP 错误之引号中使用变量
2009/05/04 PHP
php数组去重实例及分析
2013/11/26 PHP
php分页函数示例代码分享
2014/02/24 PHP
解决laravel 出现ajax请求419(unknown status)的问题
2019/09/03 PHP
Yii框架getter与setter方法功能与用法分析
2019/10/22 PHP
支持ie与FireFox的剪切板操作代码
2009/09/28 Javascript
模仿百度三维地图的js数据分享
2011/05/12 Javascript
通过JS获取用户本地图片路径并显示的代码
2012/02/16 Javascript
鼠标事件的screenY,pageY,clientY,layerY,offsetY属性详解
2015/03/12 Javascript
神奇!js+CSS+DIV实现文字颜色渐变效果
2016/03/16 Javascript
举例讲解jQuery中可见性过滤选择器的使用
2016/04/18 Javascript
Angular浏览器插件Batarang介绍及使用
2018/02/07 Javascript
JavaScript复制内容到剪贴板的两种常用方法
2018/02/27 Javascript
浅谈VUE-CLI脚手架热更新太慢的原因和解决方法
2018/09/28 Javascript
深入理解JavaScript的值传递和引用传递
2018/10/24 Javascript
mpvue实现微信小程序快递单号查询代码
2020/04/03 Javascript
Python实现遍历windows所有窗口并输出窗口标题的方法
2015/03/13 Python
Python基于递归算法实现的汉诺塔与Fibonacci数列示例
2018/04/18 Python
Python 利用高德地图api实现经纬度与地址的批量转换
2019/08/14 Python
Django数据库操作之save与update的使用
2020/04/01 Python
Python爬虫HTPP请求方法有哪些
2020/06/03 Python
Python3+RIDE+RobotFramework自动化测试框架搭建过程详解
2020/09/23 Python
HTML5 input新增type属性color颜色拾取器的实例代码
2018/08/27 HTML / CSS
做一个能自适应高度的textarea的示例代码
2019/09/06 HTML / CSS
切尔西足球俱乐部官方网上商店:Chelsea FC
2019/06/17 全球购物
澳大利亚100%丝绸多彩度假装商店:TheSwankStore
2019/09/04 全球购物
日本即尚网:JSHOPPERS.com(支持中文)
2019/12/03 全球购物
耐克亚太地区:Nike APAC
2019/12/07 全球购物
网络通讯中,端口有什么含义,端口的取值范围
2012/11/23 面试题
成语的广告词
2014/03/19 职场文书
导师工作推荐信
2015/03/27 职场文书
工厂仓库管理员岗位职责
2015/04/09 职场文书
刑事附带民事代理词
2015/05/25 职场文书
python函数指定默认值的实例讲解
2021/03/29 Python
Java内存模型之happens-before概念详解
2021/06/13 Java/Android