【EVENT】键盘事件：键盘控制元素移动

对于一些简单的键盘游戏，比如森林冰火人、闪翼双星等等，都是用上下左右或WASD键来控制人物移动的。这类案例的实现思路很简单，使用键盘事件判断键码相等之后执行即可。下面我们来一起实现一下。

首先构造一个div，代替游戏中的人物元素。

    <style>*{margin: 0;padding: 0;list-style: none;}#ok{width: 100px;height: 100px;background-color: aqua;position: absolute;left: 800px;top: 200px;}</style>

<body><div id="ok"></div>
</body>

然后开始创建JS：

1.对id为ok的div进行操作，所以要获取div。

var dOk = document.getElementById("ok");

2.添加键盘事件实现元素移动。

     window.onkeydown = function(e){var l = dOk.offsetLeft;var t = dOk.offsetTop;if(e.keyCode === 37){l -= 5;}else if(e.keyCode === 38){t -= 5;}else if(e.keyCode === 39){l += 5;}else if(e.keyCode === 40){t += 5;}dOk.style.left = l + 'px';dOk.style.top = t + 'px';}

这段代码要注意的是最后一个else if不能写成else，因为键盘中不止有这四个键，所以要指明比较的内容，使用else if来判断。

但是，上述代码思路是错误的！

因为你会发现，这段代码不能实现让div在移动时有斜向的速度，动起来是一顿一顿的，一点都不丝滑，而且切换方向时不能立即切换，而是要先停顿一下，才能继续。

那么如何正确实现这个需求呢？

首先规定四个方向的运动状态

    var isLeft = false;var isTop = false;var isRight = false;var isBottom = false;

然后使用键盘事件修改状态，分为按下键盘按键和释放键盘按键。

    window.onkeydown = function(e){if(e.keyCode === 37){isLeft = true;}else if(e.keyCode === 38){isTop = true;}else if(e.keyCode === 39){isRight = true;}else if(e.keyCode === 40){isBottom = true;}}window.onkeyup = function(e){if(e.keyCode === 37){isLeft = false;}else if(e.keyCode === 38){isTop = false;}else if(e.keyCode === 39){isRight = false;}else if(e.keyCode === 40){isBottom = false;}}

定义一个定时器，来实现动画效果

var timer = null;
timer = setInterval(function(){var l = dOk.offsetLeft;var t = dOk.offsetTop;// 每个方向都得判断if(isLeft){l -= 5;}if(isTop){t -= 5;}if(isRight){l += 5;}if(isBottom ){t += 5;}//边界处理l = l < 0 ? 0 :(l > window.innerWidth - dOk.offsetWidth ? window.innerWidth - dOk.offsetWidth : l);t = t < 0 ? 0 :(t > window.innerHeight - dOk.offsetHeight ? window.innerHeight - dOk.offsetHeight : t);dOk.style.left = l + 'px';dOk.style.top = t + 'px';},30)

注意：边界处理

这两个三目表达式的嵌套，意思是：判断 t 是否小于0，小于0时返回0，否则进入第二个三目表达式进行判断：t 是否大于（window.innerHeight - dOk.offsetHeight）的值，大于时返回该值，否则返回 t 值。分别判断的是上边界和下边界是否越界。

注：

innerHeight ：返回窗口的文档显示区的高度，如果有垂直滚动条，也包括滚动条高度。

offsetHeight ：返回元素的像素高度，包含元素的垂直内边距和边框，水平滚动条的高度。

这样div移动起来就会丝滑的多，并且可以斜向移动。

【EVENT】键盘事件：键盘控制元素移动相关推荐

python+webdriver学习鼠标键盘事件以及定位元素
设置浏览器大小:像素点 set_window_size(width,height) maximize_window() 浏览器全屏显示,不带参数控制浏览器前进.后退: driver.forward( ...
JavaScript 获取键盘事件(键盘某个按键被按下)
键盘事件(Keyboard Events) 属性值描述 onkeydown script 当按下按键时运行脚本 onkeypress script 当按下并松开按键时运行脚本 onkeyup sc ...
vue 指令 v-on 事件修饰符-键盘事件-键盘事件梳理
<body><div id="app">用户名:<input type="text" v-on:keyup.delete='cle ...
HTML5 Canvas鼠标与键盘事件
演示HTML5 Canvas鼠标事件,获取Canvas对象上的鼠标坐标,演示键盘事件通过键盘控制Canvas上对象移动. Canvas对象支持所有的JavaScript的鼠标事件,包括鼠标点击(Mo ...
html5鼠标事件监听,HTML5 Canvas鼠标与键盘事件
演示HTML5 Canvas鼠标事件,获取Canvas对象上的鼠标坐标,演示键盘事件通过键盘控制Canvas上对象移动. Canvas对象支持所有的JavaScript的鼠标事件,包括鼠标点击(Mo ...
HTML将canvas画布鼠标事件,HTML5 Canvas鼠标与键盘事件demo示例
演示html5 canvas鼠标事件,获取canvas对象上的鼠标坐标,演示键盘事件通过键盘控制canvas上对象移动. canvas对象支持所有的javascript的鼠标事件,包括鼠标点击(mou ...
(Keydown,KeyCode)键盘事件的简单使用
开发工具与关键技术: VS Keydown,KeyCode 作者:听民谣的老猫撰写时间:2019/4/1 16:15 W.A.S.D 是我们玩游戏时经常用到的几个键盘按键.通过W来触发游戏人物向上移 ...
键盘事件是什么？键盘事件包括哪几种？
什么是键盘事件键盘事件是指用户在使用键盘时触发的事件.例如,用户按Esc键关闭打开的状态栏,按Enter键直接完成光标的上下切换等.下面列举几个常用的键盘事件,如表所示. 事件名称事件触发时机 k ...
Vue中键盘快捷键-JS键盘事件
在VUE中键盘快捷键-JS键盘事件键盘事件在vue项目中监听键盘事件--keydown 键盘常用键的keyCode值键盘事件在 JavaScript 中,当用户操作键盘时,会触发键盘事件,键盘 ...
浏览器滑块、鼠标事件、鼠标滑轮、键盘事件详细说明
鼠标滑轮必须是在 mousewheel 事件中注册事件 window.addEventListener("mousewheel ",function(){}); event ...