javascript利用键盘控制小方块的移动


Posted in Javascript onApril 20, 2020

本文实例为大家分享了利用键盘控制小方块的移动,供大家参考,具体内容如下

原理

1. 利用键盘控制移动,则需要了解onkeydown函数,表示某个按键被按下,可以以此绑定一个事件响应函数,当键盘被按下时候,触发此事件,进行移动

2. keyCode 对于keypress 事件,该属性声明了被敲击的键生成的 Unicode 字符码。对于 keydown 和 keyup 事件,它指定了被敲击的键的虚拟键盘码。虚拟键盘码可能和使用的键盘的布局相关。 因此我们可以根据keycode返回的字符码来判断用户所按下的键,下面就是一个用于测试上下左右按键的js代码,经过我的测试之后,返回37 38 39 40;

window.onload = function(){
  var box = document.getElementById("box");
  document.onkeydown = function(event){
   event = event || window.event;
   console.log(event.keyCode);
  }  
  };

3.方块的移动实际上就是坐标的改变,因此需要offsetLeft 和offsetTop 来获得当前方块的坐标,然后将坐标进行一定的更改,就可以实现移动的效果了,下面给出代码

window.onload = function() {
  document.onkeydown = function(event) {
   event = event || window.event;
   //设置移动速度
   var speed = 10;
   //当ctrl和方向按键同时按下时,提升移动速度
   if(event.ctrlKey) {
   speed = 50;
   }
   //获取div
   var box01 = document.getElementById("box01");
   switch(event.keyCode) {
   /*keyCode返回按下按键的编码
    * 37 向左
    * 38向上
    * 39向右
    * 40向下
    */
   case 37:
    box01.style.left = box01.offsetLeft - speed + "px";
    break;
   case 39:
    box01.style.left = box01.offsetLeft + speed + "px";
    break;
   case 38:
    box01.style.top = box01.offsetTop - speed + "px";
    break;
   case 40:
    box01.style.top = box01.offsetTop + speed + "px";
    break;

   }
  };
  
  };

这样就可以简单实现方块的移动,但是此时我们会发现一个问题,当我们进行移动的时候,按住按键不松手,理论上方块应该直接平滑的进行移动,但实际上并非如此,第一下它会有一个小的停顿,这实际上是浏览器防止误触所设置的,因此我们需要对此进行优化

解决方案

  • 这里我采用了定时器的做法来解决这个问题,因为控制移动的因素有两个,一个是控制方向,一个是控制速度,控制方向没有问题,因此我们需要改变速度
  • setInterval(function(){},time);这是一个定时器,我们只需要在time时间内调用一次函数,就可以解决停顿的问题了

下面附上修改后的完整代码

<!DOCTYPE html>
<html>

 <head>
 <meta charset="UTF-8">
 <title></title>
 <style type="text/css">
  #box01 {
  width: 100px;
  height: 100px;
  background-color: #008000;
  position: absolute;
  }
 </style>
 <script type="text/javascript">
  window.onload = function() {

  //获取div
  var box01 = document.getElementById("box01");
  //设置移动速度
  var speed = 10;
  //设置移动的方向
  var dir = 0;

  setInterval(function() {
   switch(dir) {
   /*keyCode返回按下按键的编码
    * 37 向左
    * 38向上
    * 39向右
    * 40向下
    */
   case 37:
    box01.style.left = box01.offsetLeft - speed + "px";
    break;
   case 39:
    box01.style.left = box01.offsetLeft + speed + "px";
    break;
   case 38:
    box01.style.top = box01.offsetTop - speed + "px";
    break;
   case 40:
    box01.style.top = box01.offsetTop + speed + "px";
    break;

   }

  }, 50)

  document.onkeydown = function(event) {
   event = event || window.event;

   //当ctrl和方向按键同时按下时,提升移动速度
   if(event.ctrlKey) {
   speed = 50;
   } else {
   speed = 10;
   }
   //使dir等于keycode的值
   dir = event.keyCode;

   //当鼠标松开时,停止移动     ---如果不写这一个会造成无法停止移动的效果
   document.onkeyup = function() {
   dir = 0;
   };

  };

  };
 </script>
 </head>

 <body>
 <div id="box01"></div>
 </body>

</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
自制的文件上传JS控件可支持IE、chrome、firefox etc
Apr 18 Javascript
如何用JavaScript定义一个类
Sep 12 Javascript
jQuery验证插件validation使用指南
Apr 21 Javascript
基于javascript制作经典传统的拼图游戏
Mar 22 Javascript
JavaScript中最常见的三个面试题解析
Mar 04 Javascript
详解如何在vue中使用sass
Jun 21 Javascript
iscroll动态加载数据完美解决方法
Jul 18 Javascript
把JavaScript代码改成ES6语法不完全指南(分享)
Sep 10 Javascript
浅谈angular4实际项目搭建总结
Dec 01 Javascript
vue将毫秒数转化为正常日期格式的实例
Sep 16 Javascript
Node.js 使用axios读写influxDB的方法示例
Oct 26 Javascript
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
Aug 14 Javascript
vue实现购物车的监听
Apr 20 #Javascript
详解微信小程序工程化探索之webpack实战
Apr 20 #Javascript
Vue中el-form标签中的自定义el-select下拉框标签功能
Apr 20 #Javascript
javascript设计模式 ? 中介者模式原理与用法实例分析
Apr 20 #Javascript
javascript设计模式 ? 命令模式原理与用法实例分析
Apr 20 #Javascript
JS实现横向跑马灯效果代码
Apr 20 #Javascript
vue2.x数组劫持原理的实现
Apr 19 #Javascript
You might like
Laravel框架实现超简单的分页效果示例
2019/02/08 PHP
js监听表单value的修改同步问题,跨浏览器支持
2009/12/31 Javascript
javascript hashtable 修正版 下载
2010/12/30 Javascript
基于JQuery的日期联动实现代码
2011/02/24 Javascript
js数组转json并在后台对其解析具体实现
2013/11/20 Javascript
用于deeplink的js方法(判断手机是否安装app)
2014/04/02 Javascript
告诉你什么是javascript的回调函数
2014/09/04 Javascript
JavaScript使用循环和分割来替换和删除元素实例
2014/10/13 Javascript
jquery ui resize 中border-box的bug修正
2015/04/26 Javascript
TypeError document.getElementById(...) is null错误原因
2015/05/18 Javascript
JQuery给网页更换皮肤的方法
2015/05/30 Javascript
javascript比较两个日期相差天数的方法
2015/07/23 Javascript
jQuery实现的背景动态变化导航菜单效果
2015/08/24 Javascript
JS清除字符串中重复值的实现方法
2016/08/03 Javascript
setTimeout函数的神奇使用
2017/02/26 Javascript
node puppeteer(headless chrome)实现网站登录
2018/05/09 Javascript
使用D3.js+Vue实现一个简单的柱形图
2018/08/05 Javascript
extjs4图表绘制之折线图实现方法分析
2020/03/06 Javascript
nuxt+axios实现打包后动态修改请求地址的方法
2020/04/22 Javascript
怎么理解wx.navigateTo的events参数使用详情
2020/05/18 Javascript
Python使用当前时间、随机数产生一个唯一数字的方法
2017/09/18 Python
Win8下python3.5.1安装教程
2020/07/29 Python
Python 通过截图匹配原图中的位置(opencv)实例
2019/08/27 Python
python爬虫爬取笔趣网小说网站过程图解
2019/11/18 Python
Python xmltodict模块安装及代码实例
2020/10/05 Python
支持IE8的纯css3开发的响应式设计动画菜单教程
2014/11/05 HTML / CSS
详解利用canvas实现环形进度条的方法
2019/06/12 HTML / CSS
html5指南-4.使用Geolocation实现定位功能
2013/01/07 HTML / CSS
Html5页面上如何禁止手机虚拟键盘弹出
2020/03/19 HTML / CSS
美国电子元器件分销商:Newark element14
2018/01/13 全球购物
澳洲健康食品网上商店:Aussie Health Products
2018/06/15 全球购物
制药工程专业毕业生推荐信
2013/12/24 职场文书
打造高效课堂实施方案
2014/03/22 职场文书
科长竞聘演讲稿
2014/05/16 职场文书
2014年中学生检讨书大全
2014/10/09 职场文书
2014年政教处工作总结
2014/12/20 职场文书