js游戏键盘延时问题完美解决方案

最近出于兴趣，想做个h5小游戏，但一开始就发现键盘连续点击会出现很明显的延时，这个我之前看过一个文案是说防止输入的时候按键keyup相对慢一点就输一大堆文字，导致输入有问题。其实这个很合理，但置于js游戏里面会很不合理。

先看一下没有解决之前的代码

<div id="a"></div>
<style>#a{position: relative;height: 100px;width: 100px;background-color: #111;}
</style>
<script>
var a = document.getElementById('a'),//获取a
translateX = 0,//translateX初始值，并作为动作的关键
translateY = 0,//translateY初始值，并作为动作的关键
step = 1 //keydown时候的步伐（可以理解为速度）
window.onkeydown=function(e){//筛选不同的按键事件switch(e.keyCode){case 38:translateY  -=step //upbreakcase 40:translateY +=step //downbreakcase 37:translateX -=step //leftbreakcase 39:translateX +=step //rightbreakdefault:break}//a执行动作a.style.transform = `translate(${translateX}px,${translateY}px)`
}
</script>

明显当你换个按钮或者直接按下去的时候会有500ms延时（这个我自己通过new Date().getTime()测过）

后来我参考了墙外的一些小哥的回答，通过设定参考值，通过定时器来执行a的动作。我瞬间豁然开朗。。。确实当你一筹莫展的时候问一下其他人的意见还是焕然一新，在代码海洋中沉溺太久，有时候是“众人皆醒你独醉”。下面是完善后的代码。。。

<div id="a"></div>
<style>#a{position: relative;height: 100px;width: 100px;background-color: #111;}
</style>
<script>//设定一个对象做参考值，这个不一定是对象obj，可以直接设定status=[0,0,0,0]，当然这时后面的代码全部要改var obj = {status:[0,0,0,0]//[up+1,down-1,left-1,right+1]}var translateX = 0,translateY = 0,step = 1window.onkeydown = function (e) {switch(e.keyCode){case 38:obj.status[0] = step  //upbreakcase 40:obj.status[1] = step  //downbreakcase 37:obj.status[2] = step  //leftbreakcase 39:obj.status[3] = step  //rightbreakdefault:break}}window.onkeyup = function (e) {switch(e.keyCode){case 38:obj.status[0] = 0 //upbreakcase 40:obj.status[1] = 0 //downbreakcase 37:obj.status[2] = 0 //leftbreakcase 39:obj.status[3] = 0 //rightbreakdefault:break}}function handleStatus() {//X轴的值translateY += obj.status[1] - obj.status[0]//Y轴的值translateX += obj.status[3] - obj.status[2]//a动作a.style.transform = `translate(${translateX}px,${translateY}px)`}//定时器一直读取参考值setInterval(handleStatus,10)</script>

这时候已经搞定了，但说实话我不喜欢switch代码虽然好，但我不喜欢它的累赘，所以我简化了代码，而且存在定时器又不去关闭的时候会影响到内存，所以添加了keyup的时候关闭定时器

<div id="a"></div>
<style>#a{position: relative;height: 100px;width: 100px;background-color: #111;}
</style>
<script>var obj = {status:[0,0,0,0]//[up+1|down-1,left-1|right+1]}var keyCode_data = {38: 0,40: 1,37: 2,39: 3,}var translateX = 0,translateY = 0,step = 1,timer = falsewindow.onkeydown = function (e) {obj.status[keyCode_data[e.keyCode]] = step!timer ? setTimer() : false}window.onkeyup = function (e) {obj.status[keyCode_data[e.keyCode]] = 0obj.status.indexOf(step) == -1 ? clearTimer() : false}function handleStatus() {translateY += obj.status[1] - obj.status[0]translateX += obj.status[3] - obj.status[2]a.style.transform = `translate(${translateX}px,${translateY}px)`// console.log(123) //测试定时器是否关闭}function setTimer() {timer = setInterval(handleStatus,10)}function clearTimer() {clearInterval(timer)timer = false}</script>

js游戏键盘延时问题完美解决方案相关推荐

js手机键盘遮挡_完美解决手机网页中输入框被输入法遮挡的问题
之前要做一个弹出对话框,填写信息,发现在手机上看的时候,较后的输入框在填写信息时,输入框被输入法遮挡,只能盲填. 前提 1.弹出的对话框用display:fixed定位的 2.对话框大小固定解决办法 ...
Android判断软键盘弹出并隐藏的简单完美解决方案
Android判断软键盘弹出并隐藏的简单完美解决方案参考文章: (1)Android判断软键盘弹出并隐藏的简单完美解决方案 (2)https://www.cnblogs.com/thare1307/ ...
Android 适配底部返回键等虚拟键盘的完美解决方案
这个问题来来回回困扰了我很久,一直没能妥善解决. 场景1:华为手机遮挡了屏幕底部. 场景2:进入应用时,虚拟键自动缩回,留下空白区域. 需求: 需要安卓能自适应底部虚拟按键,用户隐藏虚拟按键时应用要占 ...
Android适配底部返回键等虚拟键盘的完美解决方案
这个问题来来回回困扰了我很久,一直没能妥善解决. 场景1:华为手机遮挡了屏幕底部. 场景2:进入应用时,虚拟键自动缩回,留下空白区域. 需求: 需要安卓能自适应底部虚拟按键,用户隐藏虚拟按键时应用要占 ...
android自定义键盘遮挡,Android软键盘遮挡的四种完美解决方案
一.问题概述在编辑框输入内容时会弹出软键盘,而手机屏幕区域有限往往会遮住输入界面,我们先看一下问题效果图: 输入用户名和密码时,系统会弹出键盘,造成系统键盘会挡住文本框的问题,如图所示: 输入密码时 ...
js控制excel打印完美解决方案
js控制excel打印完美解决方案转自:http://hi.baidu.com/hongz1125/blog/item/0152bcfd84ce1e1008244d5c.html 做web开发大家都 ...
手游直播正在连接推流服务器,游戏直播时Airplay投屏卡死完美解决方案
游戏直播时Airplay投屏卡死完美解决方案作者:葫芦君来源:小葫芦时间:2018-03-08 11:38 在使用OBS直播手游时,用投屏软件投屏到电脑上,然后用OBS捕捉到游戏源.比如:手机打 ...
小米红米手机无电池24H开机完美解决方案
小米红米手机无电池24H开机完美解决方案因为小米红米手机比较适合做测试工具,本身也比较廉价,所以拿来当日常管理工具,家庭网关等之类的24H开机的机器再好不过了.但是由于电池的存在并且该电池性能较差, ...
linux关机_【linux】不要再暴力关机了，讲讲我最近遇到的问题和完美解决方案...
欢迎关注我的个人公众号:AI蜗牛车前言结束了每天的紧张的工作,这两天真的有些肝. 这两天打打字,突然感觉手指头疼起来了,想意识到成天打了十多个小时的键盘, 手指头都疲劳了= = 之后这两天基本上除 ...

js游戏键盘延时问题完美解决方案

js游戏键盘延时问题完美解决方案相关推荐

最新文章

热门文章