【来自项目的技术点】— 聊聊键盘长按的时候解决卡顿方案

当我们做游戏的时候,很多时候遇用到键盘事件长按的的时候第一下卡顿的情况,怎么解决呢?
　以下是我的解决方案,建议复制到编辑器上直接调试

代码里面有我思考的过程,大家可以参考

　　思考过程

 

//当按下的时候改变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>

 

posted @ 2018-02-06 22:39  -宇泽-  阅读(4185)  评论(0)  编辑  收藏  举报