当我们做游戏的时候,很多时候遇用到键盘事件长按的的时候第一下卡顿的情况,怎么解决呢?
以下是我的解决方案,建议复制到编辑器上直接调试
代码里面有我思考的过程,大家可以参考
思考过程
//当按下的时候改变left属性值 40 //总结:当我们按下的时候,键盘的设计者不知道我们是要连续按还是按一下,所以,键盘的制造者定了一个规矩,如果按下超过..s的时候就认为是用户要连续按,于是就出现了一个问题,当我们玩游戏的时候,我们如果连续按下键盘就会先停顿一下,然后在连续的 41 //转化思想:如何解决这个问题,当按第一下的时候我们就执行left/top的改变,那么改变的代码就不能写在按下的事件里面,按下只是传给我们信号,这个信号让top/left连续改变,当抬起键盘的时候,改变这个信号,让上面的改变停止,传给他的信号应该是布尔值
1 老版本
<!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>Document</title> 7 <style> 8 .box { 9 position: absolute; 10 top: 10px; 11 left: 10px; 12 width: 100px; 13 height: 100px; 14 background: red; 15 } 16 </style> 17 </head> 18 19 <body> 20 <div class="box"></div> 21 <script> 22 var box = document.querySelector(‘.box‘); 23 var isleft = false; 24 var isright = false; 25 var istop = false; 26 var isbottom = false; 27 setInterval(function() { 28 29 if (isleft) { 30 box.style.left = box.offsetLeft - 5 + ‘px‘; 31 } else if (isbottom) { 32 box.style.top = box.offsetTop - 5 + ‘px‘; 33 } else if (istop) { 34 box.style.top = box.offsetTop + 5 + ‘px‘; 35 } else if (isright) { 36 box.style.left = box.offsetLeft + 5 + ‘px‘; 37 } 38 }, 20) 39 //当按下的时候改变left属性值 40 //总结:当我们按下的时候,键盘的设计者不知道我们是要连续按还是按一下,所以,键盘的制造者定了一个规矩,如果按下超过..s的时候就认为是用户要连续按,于是就出现了一个问题,当我们玩游戏的时候,我们如果连续按下键盘就会先停顿一下,然后在连续的 41 //转化思想:如何解决这个问题,当按第一下的时候我们就执行left/top的改变,那么改变的代码就不能写在按下的事件里面,按下只是传给我们信号,这个信号让top/left连续改变,当抬起键盘的时候,改变这个信号,让上面的改变停止,传给他的信号应该是布尔值 42 window.onkeydown = function(e) { 43 switch (e.keyCode) { 44 case 37: 45 isleft = true; 46 break; 47 case 38: 48 isbottom = true; 49 break; 50 case 39: 51 isright = true; 52 break; 53 case 40: 54 istop = true; 55 break; 56 } 57 } 58 window.onkeyup = function(e) { 59 switch (e.keyCode) { 60 case 37: 61 isleft = false; 62 break; 63 case 38: 64 isbottom = false; 65 break; 66 case 39: 67 isright = false; 68 break; 69 case 40: 70 istop = false; 71 break; 72 } 73 } 74 </script> 75 </body> 76 77 </html>
改良版本
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>Document</title> 7 <style> 8 .box { 9 position: absolute; 10 top: 10px; 11 left: 10px; 12 width: 100px; 13 height: 100px; 14 background: red; 15 } 16 </style> 17 </head> 18 19 <body> 20 <div class="box"></div> 21 <script> 22 var box = document.querySelector(‘.box‘); 23 24 //当按下的时候改变left属性值 25 //总结:当我们按下的时候,键盘的设计者不知道我们是要连续按还是按一下,所以,键盘的制造者定了一个规矩,如果按下超过..s的时候就认为是用户要连续按,于是就出现了一个问题,当我们玩游戏的时候,我们如果连续按下键盘就会先停顿一下,然后在连续的 26 //转化思想:如何解决这个问题,当按第一下的时候我们就执行left/top的改变,那么改变的代码就不能写在按下的事件里面,按下只是传给我们信号,这个信号让top/left连续改变,当抬起键盘的时候,改变这个信号,让上面的改变停止,传给他的信号应该是布尔值 27 window.onkeydown = function(e) { 28 switch (e.keyCode) { 29 case 37: 30 box.style.left = box.offsetLeft - 5 + ‘px‘; 31 break; 32 case 38: 33 box.style.top = box.offsetTop - 5 + ‘px‘; 34 35 break; 36 case 39: 37 box.style.left = box.offsetLeft + 5 + ‘px‘; 38 break; 39 case 40: 40 box.style.top = box.offsetTop + 5 + ‘px‘; 41 break; 42 } 43 } 44 </script> 45 </body> 46 47 </html>