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 字符串乘法
Aug 20 Javascript
cookie的复制与使用记住用户名实现代码
Nov 04 Javascript
JavaScript动态改变HTML页面元素例如添加或删除
Aug 10 Javascript
js实现有时间限制消失的图片方法
Feb 27 Javascript
Jquery中Event对象属性小结
Feb 27 Javascript
js实现超酷的照片墙展示效果图附源码下载
Oct 08 Javascript
js友好的时间返回函数
Aug 24 Javascript
Bootstrap响应式导航由768px变成992px的实现代码
Jun 15 Javascript
node作为中间服务层如何发送请求(发送请求的实现方法详解)
Jan 02 Javascript
微信小程序之几种常见的弹框提示信息实现详解
Jul 11 Javascript
js实现div色块碰撞
Jan 16 Javascript
手把手教你如何编译打包video.js
Dec 09 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 socket方式提交的post详解
2008/07/19 PHP
zend api扩展的php对象的autoload工具
2011/04/18 PHP
PHP实现数字补零功能的2个函数介绍
2014/05/12 PHP
PHP获取路径和目录的方法总结【必看篇】
2017/03/04 PHP
jquery last-child 列表最后一项的样式
2010/01/22 Javascript
只需20行代码就可以写出CSS覆盖率测试脚本
2013/04/24 Javascript
Javascript对象属性方法汇总
2013/11/21 Javascript
JQuery以JSON方式提交数据到服务端示例代码
2014/05/05 Javascript
基于NodeJS的前后端分离的思考与实践(三)轻量级的接口配置建模框架
2014/09/26 NodeJs
JS两个数组比较,删除重复值的巧妙方法(推荐)
2016/06/03 Javascript
BootStrap注意事项小结(五)表单
2017/03/10 Javascript
bootstrap-table实现服务器分页的示例 (spring 后台)
2017/09/01 Javascript
js插件实现图片滑动验证码
2020/09/29 Javascript
使用sessionStorage解决vuex在页面刷新后数据被清除的问题
2018/04/13 Javascript
移动端底部导航固定配合vue-router实现组件切换功能
2019/06/13 Javascript
微信小程序 (地址选择1)--选取搜索地点并显示效果
2019/12/17 Javascript
node.js如何操作MySQL数据库
2020/10/29 Javascript
JS操作JSON常用方法(10w阅读)
2020/12/06 Javascript
使用Python的Tornado框架实现一个Web端图书展示页面
2016/07/11 Python
python实现BackPropagation算法
2017/12/14 Python
python数字图像处理实现直方图与均衡化
2018/05/04 Python
Django框架组成结构、基本概念与文件功能分析
2019/07/30 Python
Python流程控制 while循环实现解析
2019/09/02 Python
python判断单向链表是否包括环,若包含则计算环入口的节点实例分析
2019/10/23 Python
关于python3.7安装matplotlib始终无法成功的问题的解决
2020/07/28 Python
Python 如何展开嵌套的序列
2020/08/01 Python
python 如何对logging日志封装
2020/12/02 Python
基于HTML5 audio元素播放声音jQuery小插件
2011/05/11 HTML / CSS
献爱心活动总结
2014/05/07 职场文书
省级优秀毕业生主要事迹
2014/05/29 职场文书
在校学生证明格式
2015/06/24 职场文书
2016年助残日旅游活动总结
2016/04/01 职场文书
大学毕业生自我鉴定范文
2019/06/21 职场文书
浅谈@Value和@Bean的执行顺序问题
2021/06/16 Java/Android
JVM钩子函数的使用场景详解
2021/08/23 Java/Android
详细聊聊vue中组件的props属性
2021/11/02 Vue.js