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 相关文章推荐
jquery写个checkbox——类似邮箱全选功能
Mar 19 Javascript
jquery中event对象属性与方法小结
Dec 18 Javascript
jquery实现省市select下拉框的替换(示例代码)
Feb 22 Javascript
用js格式化金额可设置保留的小数位数
May 09 Javascript
node.js中的forEach()是同步还是异步呢
Jan 29 Javascript
angularJS 指令封装回到顶部示例详解
Jan 22 Javascript
angularJs的ng-class切换class
Jun 23 Javascript
Vue2.0 多 Tab切换组件的封装实例
Jul 28 Javascript
JS数组操作之增删改查的简单实现
Aug 21 Javascript
H5+C3+JS实现五子棋游戏(AI篇)
May 28 Javascript
jquery使用FormData实现异步上传文件
Oct 25 jQuery
解决vue props传Array/Object类型值,子组件报错的情况
Nov 07 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在线生成ico文件的代码
2007/10/09 PHP
如何在PHP程序中防止盗链
2008/04/09 PHP
php中配置文件操作 如config.php文件的读取修改等操作
2012/07/07 PHP
php过滤XSS攻击的函数
2013/11/12 PHP
php判断GIF图片是否为动画的方法
2020/09/04 PHP
laravel 解决多库下的DB::transaction()事务失效问题
2019/10/21 PHP
利用Ext Js生成动态树实例代码
2008/09/08 Javascript
javaScript 判断字符串是否为数字的简单方法
2009/07/25 Javascript
JavaScript中常用的运算符小结
2012/01/18 Javascript
详解JavaScript中数组的reduce方法
2016/12/02 Javascript
关于vue.js发布后路径引用的问题解决
2017/08/15 Javascript
Vue实现按钮旋转和移动位置的实例代码
2018/08/09 Javascript
VUE实现强制渲染,强制更新
2019/10/29 Javascript
[04:11]DOTA2上海特级锦标赛主赛事首日TOP10
2016/03/03 DOTA
python连接sql server乱码的解决方法
2013/01/28 Python
python模拟登录百度代码分享(获取百度贴吧等级)
2013/12/27 Python
Python处理字符串之isspace()方法的使用
2015/05/19 Python
Python学习小技巧之列表项的排序
2017/05/20 Python
python 实现上传图片并预览的3种方法(推荐)
2017/07/14 Python
Python单例模式的两种实现方法
2017/08/14 Python
Python建立Map写Excel表实例解析
2018/01/17 Python
在Python中Dataframe通过print输出多行时显示省略号的实例
2018/12/22 Python
Pyqt QImage 与 np array 转换方法
2019/06/27 Python
Python使用itchat模块实现简单的微信控制电脑功能示例
2019/08/26 Python
Python代理IP爬虫的新手使用教程
2019/09/05 Python
python GUI库图形界面开发之PyQt5浏览器控件QWebEngineView详细使用方法
2020/02/26 Python
使用HTML5 Canvas绘制直线或折线等线条的方法讲解
2016/03/14 HTML / CSS
波兰品牌内衣及泳装网上商店:Astratex.pl
2017/02/03 全球购物
美国最大的船只买卖在线市场:Boat Trader
2018/08/04 全球购物
会议主持词
2014/03/17 职场文书
国旗下的演讲稿
2014/05/08 职场文书
工作作风整顿个人剖析材料
2014/10/11 职场文书
简历自我评价:教师师德表现自我评价
2019/04/24 职场文书
TensorFlow中tf.batch_matmul()的用法
2021/06/02 Python
OpenCV-Python实现人脸磨皮算法
2021/06/07 Python
Django实现drf搜索过滤和排序过滤
2021/06/21 Python