利用键盘控制小方块的移动

原理

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;}//获取divvar 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() {//获取divvar 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>

利用键盘控制小方块的移动相关推荐

[转]基于ROS平台的移动机器人-4-通过ROS利用键盘控制小车移动
原文出处: https://blog.csdn.net/Forrest_Z/article/details/55002484 准备工作 1.下载串口通信的ROS包 (1)cd ~/catkin_ws/ ...
在html中什么标签可以显示小方块,css列表前的小方块
css列表前的小方块自己用个符号·来代替,却发现怎么显示都比较小,后来自己研究才发现我的字体全部定义成tahoma了,只要采用"宋体"就正常了. 列表前的小方块--design ...
回归前端学习第23天-实现俄罗斯方块小游戏6（实现单机版2——键盘控制方块移动）
界面出现对应方块后,可自行控制其左右或快速下降的移动,上键可以实现方块形状的改变调整代码结构实现键盘控制方块移动 game.js中代码注意这里在SquareFactory中又写了个make函数, ...
小实操（3）: 利用键盘事件实现小人快跑
** 实例: 利用html表单和js的数学对象及函数做一个有验证码的简单登录表单实操:利用日期对象和方法以及其他相关知识实现简单的钟表功能 ....... js学习中的小实操(目录) ** ...
你真的完全掌握了 Input 组件的键盘控制么？ ——百度智能小程序 Input 组件原理剖析与键盘行为说明
在百度智能小程序的很多开发场景中,我们都会使用到 Input 输入框组件.而在操作输入框的过程中,正确处理键盘的弹出和收起行为也是十分重要的一环.键盘行为不仅需要完美符合业务场景,同时也和用户体验息息 ...
c语言自动按键脚本,C语言键盘控制走迷宫小游戏
本文实例为大家分享了C语言键盘控制走迷宫小游戏的具体代码,供大家参考,具体内容如下在看了<啊哈C语言>之后想写一个游戏demo 游戏的截图首先是启动界面然后是初始化接下来是键盘操控 ...
【Proteus仿真】数字温度计，利用 Mega16 控制 DS18B20 ，若温度达到设定阈值，即可报警提醒（用串口控制停止报警、用键盘输入改变报警阈值）
(代码在文末) 工程文件和代码下载链接如下(求求下载前点个赞支持一下吧QAQ,博主自己做出来这个也hin累的) 链接: https://pan.baidu.com/s/1-aRZjyRZodzLcw8 ...
linux图形界面鼠标变成小手_扔掉鼠标，用键盘控制一切～
如今大家使用计算机,必不可少地需要鼠标和键盘.鼠标的存在极大地方便了用户在使用个人计算机的过程中的操作,特别是windows操作系统. 但是当以linux作为个人操作系统的时候,肯定会意识到一定情况下 ...
java 怎么让图片运动,小编给你传授java怎么实现键盘控制图片移动
电脑现已成为我们工作.生活和娱乐必不可少的工具了,在使用电脑的过程中,可能会遇到java怎么实现键盘控制图片移动的问题,如果我们遇到了java怎么实现键盘控制图片移动的情况,该怎么处理怎么才能解决ja ...

利用键盘控制小方块的移动

原理

利用键盘控制小方块的移动相关推荐

最新文章

热门文章