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为对象原型prototype添加属性的两种方式
Aug 01 Javascript
js将iframe中控件的值传到主页面控件中的实现方法
Mar 11 Javascript
Js参数值中含有单引号或双引号问题的解决方法
Nov 06 Javascript
利用javascript实现全部删或清空所选的操作
May 27 Javascript
防止登录页面出现在frame中js代码
Jul 22 Javascript
jQuery+slidereveal实现的面板滑动侧边展出效果
Mar 14 Javascript
jQuery DateTimePicker 日期和时间插件示例
Jan 22 Javascript
JavaScript实现简单生成随机颜色的方法
Sep 21 Javascript
VueJs监听window.resize方法示例
Jan 17 Javascript
解决Antd Table表头加Icon和气泡提示的坑
Nov 17 Javascript
ES6学习教程之Promise用法详解
Nov 22 Javascript
angular异步验证器防抖实例详解
Mar 31 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位运算的简单权限设计
2013/06/30 PHP
PHP goto语句简介和使用实例
2014/03/11 PHP
ThinkPHP文件上传实例教程
2014/08/22 PHP
PHP获取指定时间段之间的 年,月,天,时,分,秒
2016/06/05 PHP
Yii框架ACF(accessController)简单权限控制操作示例
2019/04/26 PHP
从零开始学习jQuery (四) jQuery中操作元素的属性与样式
2011/02/23 Javascript
js URL参数的拼接方法比较
2012/02/15 Javascript
javascript动态控制服务器控件实例
2014/09/05 Javascript
使用plupload自定义参数实现多文件上传
2016/07/19 Javascript
JavaScript中数组的22种方法必学(推荐)
2016/07/20 Javascript
Google 地图控件集详解及实例代码
2016/08/06 Javascript
jQuery自适应轮播图插件Swiper用法示例
2016/08/24 Javascript
提高Web性能的前端优化技巧总结
2017/02/27 Javascript
JavaScript学习总结之正则的元字符和一些简单的应用
2017/06/30 Javascript
Angularjs cookie 操作实例详解
2017/09/27 Javascript
element-ui 表格实现单元格可编辑的示例
2018/02/26 Javascript
使用Javascript简单计算器
2018/11/17 Javascript
微信小程序页面间值传递的两种方法
2018/11/26 Javascript
mpvue小程序循环动画开启暂停的实现方法
2019/05/15 Javascript
基于vue+echarts数据可视化大屏展示的实现
2020/12/25 Vue.js
[29:23]2014 DOTA2国际邀请赛中国区预选赛 LGD-GAMING VS CIS 第一场1
2014/05/23 DOTA
[11:12]2018DOTA2国际邀请赛寻真——绿色长城OpTic
2018/08/10 DOTA
Python格式化压缩后的JS文件的方法
2015/03/05 Python
pandas按若干个列的组合条件筛选数据的方法
2018/04/11 Python
对python中的logger模块全面讲解
2018/04/28 Python
Python 中的Selenium异常处理实例代码
2018/05/03 Python
python实现提取str字符串/json中多级目录下的某个值
2020/02/27 Python
Python selenium 加载并保存QQ群成员,去除其群主、管理员信息的示例代码
2020/05/28 Python
详解html5 shiv.js和respond.min.js
2018/01/24 HTML / CSS
video下autoplay属性无效的解决方法(添加muted属性)
2020/05/19 HTML / CSS
美国礼品卡商城: Gift Card Mall
2017/08/25 全球购物
UNIX操作系统结构由哪几部分组成
2016/02/17 面试题
电气自动化专业职业规划范文
2014/02/16 职场文书
公司承诺书格式范文
2015/04/28 职场文书
高一英语教学反思
2016/03/03 职场文书
Nginx图片服务器配置之后图片访问404的问题解决
2022/03/21 Servers