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返回上一页的三种方法及区别介绍
Jul 04 Javascript
js+div+css下拉导航菜单完整代码分享
Dec 28 Javascript
浅谈javascript中的事件冒泡和事件捕获
Dec 28 Javascript
jquery实现下拉框多选方法介绍
Jan 03 Javascript
Vue.js系列之项目搭建(1)
Jan 03 Javascript
原生JavaScript实现的简单省市县三级联动功能示例
May 27 Javascript
vue.js实现标签页切换效果
Jun 07 Javascript
JavaScript的Object.defineProperty详解
Jul 09 Javascript
angular6根据environments配置文件更改开发所需要的环境的方法
Mar 06 Javascript
微信小程序图片左右摆动效果详解
Jul 13 Javascript
vue 使用vant插件做tabs切换和无限加载功能的实现
Nov 04 Javascript
详解JavaScript中的this指向问题
Feb 05 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
Windows下利用Gvim写PHP产生中文乱码问题解决方法
2011/04/20 PHP
PHP异步调用socket实现代码
2012/01/12 PHP
深入理解curl类,可用于模拟get,post和curl下载
2013/06/08 PHP
PHP中数据库单例模式的实现代码分享
2014/08/21 PHP
微信公众平台接口开发入门示例
2014/12/24 PHP
解决Laravel blade模板转义html标签的问题
2019/09/03 PHP
解读IE和firefox下JScript和HREF的执行顺序
2008/01/12 Javascript
js鼠标及对象坐标控制属性详细解析
2013/12/14 Javascript
常见浏览器多长时间会提示“脚本运行时间过长”总结
2014/04/29 Javascript
AngularJS 输入验证详解及实例代码
2016/07/28 Javascript
Vue.js第四天学习笔记
2016/12/02 Javascript
在node.js中怎么屏蔽掉favicon.ico的请求
2017/03/01 Javascript
详解使用grunt完成requirejs的合并压缩和js文件的版本控制
2017/03/02 Javascript
Node.js如何实现注册邮箱激活功能 (常见)
2017/07/23 Javascript
基于jQuery Ajax实现下拉框无刷新联动
2017/12/06 jQuery
剖析Angular Component的源码示例
2018/03/23 Javascript
Nuxt使用Vuex的方法示例
2019/09/06 Javascript
JS实现分页导航效果
2020/02/19 Javascript
详解Python中使用base64模块来处理base64编码的方法
2016/07/01 Python
Pytorch中的VGG实现修改最后一层FC
2020/01/15 Python
python 读取.nii格式图像实例
2020/07/01 Python
Pycharm2020.1安装无法启动问题即设置中文插件的方法
2020/08/07 Python
python excel多行合并的方法
2020/12/09 Python
用python批量移动文件
2021/01/14 Python
CSS3制作苹果风格键盘特效
2015/02/26 HTML / CSS
英国珠宝钟表和家居礼品精品店:David Shuttle
2018/02/24 全球购物
工商管理应届生求职信
2013/10/07 职场文书
新学期开学标语
2014/06/30 职场文书
网吧七夕活动策划方案
2014/08/31 职场文书
群众路线个人对照检查材料
2014/09/23 职场文书
高校自主招生自荐信2015
2015/03/04 职场文书
交通事故赔偿起诉书
2015/05/20 职场文书
Mysql 如何批量插入数据
2021/04/06 MySQL
background-position百分比原理详解
2021/05/08 HTML / CSS
CSS实现渐变色边框(Gradient borders)的5种方法
2022/03/25 HTML / CSS
《遗弃》开发商删推文要跑路?官方回应:还在开发
2022/04/03 其他游戏