<address id="ttjl9"></address>
      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      

      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>
          
  
      
    

          

	
          
		
          
			
          
				
          利用鍵盤控制小方塊的移動
          
				
           2020-3-1      前端達人      
          
			
          
			
          
				
          原理
          

            

          1. 利用鍵盤控制移動，則需要了解onkeydown函數，表示某個按鍵被按下，可以以此綁定一個事件響應函數，當鍵盤被按下時候，觸發此事件，進行移動
            2. 

          2. 

            keyCode 對于keypress 事件，該屬性聲明了被敲擊的鍵生成的 Unicode 字符碼。對于 keydown 和 keyup 事件，它指定了被敲擊的鍵的虛擬鍵盤碼。虛擬鍵盤碼可能和使用的鍵盤的布局相關。 因此我們可以根據keycode返回的字符碼來判斷用戶所按下的鍵，下面就是一個用于測試上下左右按鍵的js代碼，經過我的測試之后，返回37 38 39 40；
            

            window.onload = function(){
            var box = document.getElementById("box");
            document.onkeydown = function(event){
                event = event || window.event;
                console.log(event.keyCode);
            }           
        };
3
            

            

            

            

            

            

            

            
3.方塊的移動實際上就是坐標的改變，因此需要offsetLeft 和offsetTop 來獲得當前方塊的坐標，然后將坐標進行一定的更改，就可以實現移動的效果了，下面給出代碼

            

            

            window.onload = function() {
            document.onkeydown = function(event) {
                event = event || window.event;
                //設置移動速度
                var speed = 10;
                //當ctrl和方向按鍵同時按下時，提升移動速度
                if(event.ctrlKey) {
                    speed = 50;
                }
                //獲取div
                var box01 = document.getElementById("box01");
                switch(event.keyCode) {
                    /*keyCode返回按下按鍵的編碼
                     * 37 向左
                     * 38向上
                     * 39向右
                     * 40向下
                     */
                    case 37:
                        box01.style.left = box01.offsetLeft - speed + "px";
                        break;
                    case 39:
                        box01.style.left = box01.offsetLeft + speed + "px";
                        break;
                    case 38:
                        box01.style.top = box01.offsetTop - speed + "px";
                        break;
                    case 40:
                        box01.style.top = box01.offsetTop + speed + "px";
                        break;

                }
            };

        };

            

            
    
            

            

            
    
            

            
這樣就可以簡單實現方塊的移動，但是此時我們會發現一個問題，當我們進行移動的時候，按住按鍵不松手，理論上方塊應該直接平滑的進行移動，但實際上并非如此，第一下它會有一個小的停頓，這實際上是瀏覽器防止誤觸所設置的，因此我們需要對此進行優化
            
解決方案
            

            
這里我采用了定時器的做法來解決這個問題，因為控制移動的因素有兩個，一個是控制方向，一個是控制速度，控制方向沒有問題，因此我們需要改變速度
            
setInterval（function(){},time）;這是一個定時器，我們只需要在time時間內調用一次函數，就可以解決停頓的問題了
            
下面附上修改后的完整代碼
            

            

            

            <!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #box01 {
            width: 100px;
            height: 100px;
            background-color: #008000;
            position: absolute;
        }
    </style>
    <script type="text/javascript">
        window.onload = function() {

            //獲取div
            var box01 = document.getElementById("box01");
            //設置移動速度
            var speed = 10;
            //設置移動的方向
            var dir = 0;

            setInterval(function() {
                switch(dir) {
                    /*keyCode返回按下按鍵的編碼
                     * 37 向左
                     * 38向上
                     * 39向右
                     * 40向下
                     */
                    case 37:
                        box01.style.left = box01.offsetLeft - speed + "px";
                        break;
                    case 39:
                        box01.style.left = box01.offsetLeft + speed + "px";
                        break;
                    case 38:
                        box01.style.top = box01.offsetTop - speed + "px";
                        break;
                    case 40:
                        box01.style.top = box01.offsetTop + speed + "px";
                        break;

                }

            }, 50)

            document.onkeydown = function(event) {
                event = event || window.event;

                //當ctrl和方向按鍵同時按下時，提升移動速度
                if(event.ctrlKey) {
                    speed = 50;
                } else {
                    speed = 10;
                }
                //使dir等于keycode的值
                dir = event.keyCode;

                //當鼠標松開時，停止移動         ---如果不寫這一個會造成無法停止移動的效果
                document.onkeyup = function() {
                    dir = 0;
                };

            };

        };
    </script>
</head>

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

            3. 

          

          </html>
          

          
————————————————

          
版權聲明：本文為CSDN博主「loving-cat」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。

          
原文鏈接：https://blog.csdn.net/weixin_42878211/article/details/104558443

          


          

          				
          
								
			
          
		
          
		
		
	
          


          
    
  
          
    
          日歷
          
    
          
        
          
        
    
          
  
          
    
    
          
      
          鏈接
          
      
            
                
          
    
          
    
          
      
          個人資料
          
      
          
          
          
                    
          
          
          藍藍設計的小編
          http://www.syprn.cn
          
      
          
    
          
    
          
      
          存檔
          
      
    
          

          

          



亚洲va欧美va天堂v国产综合