聊聊 鍵盤長按將解決卡頓方案
阿新 • • 發佈：2018-02-07
itl lang false doctype ctype 如何 true etl osi
當我們做遊戲的時候,很多時候遇用到鍵盤事件長按的的時候第一下卡頓的情況,怎麽解決呢?
以下是我的解決方案,建議復制到編輯器上直接調試
代碼裏面有我思考的過程,大家可以參考
思考過程
//當按下的時候改變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 varisbottom = 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>
聊聊 鍵盤長按將解決卡頓方案