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 相关文章推荐
有效的捕获JavaScript焦点的方法小结
Oct 08 Javascript
利用jquery操作Radio方法小结
Oct 20 Javascript
使用VS开发 Node.js指南
Jan 06 Javascript
Javascript实现的Map集合工具类完整实例
Jul 31 Javascript
JavaScript中日期的相关操作方法总结
Oct 24 Javascript
Javascript实现图片不间断滚动的代码
Jun 22 Javascript
深入理解Javascript箭头函数中的this
Feb 13 Javascript
JS区分Object与Aarry的六种方法总结
Feb 27 Javascript
令按钮悬浮在(手机)页面底部的实现方法
May 02 Javascript
深入理解Commonjs规范及Node模块实现
May 17 Javascript
vscode 开发Vue项目的方法步骤
Nov 25 Javascript
vue-cli中vue本地实现跨域调试接口
Jan 16 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
PHP实现绘制3D扇形统计图及图片缩放实例
2014/10/01 PHP
PHP 中 Orientation 属性判断上传图片是否需要旋转
2015/10/16 PHP
JavaScript中valueOf函数与toString方法深入理解
2012/12/02 Javascript
Textarea根据内容自适应高度
2013/10/28 Javascript
zTree插件之多选下拉菜单实例代码
2013/11/06 Javascript
jsPDF生成pdf后在网页展示实例
2014/01/16 Javascript
通过pjax实现无刷新翻页(兼容新版jquery)
2014/01/31 Javascript
基于jquery实现等比缩放图片
2014/12/03 Javascript
使用jQuery jqPlot插件绘制柱状图
2014/12/18 Javascript
使用javascript实现判断当前浏览器
2015/04/14 Javascript
JS文字球状放大效果代码分享
2015/08/19 Javascript
jquery转盘抽奖功能实现
2015/11/13 Javascript
js 截取或者替换字符串中的数字实现方法
2016/06/13 Javascript
详解nodejs 文本操作模块-fs模块(二)
2016/12/22 NodeJs
详谈Node.js之操作文件系统
2017/08/29 Javascript
Vue基础学习之项目整合及优化
2019/06/02 Javascript
Vue.js中provide/inject实现响应式数据更新的方法示例
2019/10/16 Javascript
使用node-media-server搭建一个简易的流媒体服务器
2021/01/20 Javascript
使用Python中PDB模块中的命令来调试Python代码的教程
2015/03/30 Python
Python浅拷贝与深拷贝用法实例
2015/05/09 Python
python追加元素到列表的方法
2015/07/28 Python
Python编程中归并排序算法的实现步骤详解
2016/05/04 Python
python登录并爬取淘宝信息代码示例
2017/12/09 Python
Python 装饰器实现DRY(不重复代码)原则
2018/03/05 Python
Python之pymysql的使用小结
2019/07/01 Python
浅谈keras中自定义二分类任务评价指标metrics的方法以及代码
2020/06/11 Python
HTML5中的nav标签学习笔记
2016/06/24 HTML / CSS
英国最出名高街品牌:Forever Unique
2018/02/24 全球购物
班子四风对照检查材料
2014/08/21 职场文书
2014镇党委班子对照检查材料思想汇报
2014/09/23 职场文书
机关干部个人对照检查材料思想汇报
2014/09/28 职场文书
2015年财务人员工作总结
2015/04/10 职场文书
Python中使用Opencv开发停车位计数器功能
2022/04/04 Python
vue postcss-px2rem 自适应布局
2022/05/15 Vue.js
Win11 25163.1010更新补丁KB5016904推送,测试服务验证管道(附更新修复汇总)
2022/07/23 数码科技
Mysql中mvcc各场景理解应用
2022/08/05 MySQL