利用鍵盤事件移動小方塊小demo

marek 發(fā)布于2019-08-29 12:44 / 2368人閱讀

摘要：思路根據(jù)鍵盤的值來判斷是鍵盤上的哪個鍵通過定位利用鍵盤事件改編方塊的和值通過開啟定時器消除長按鍵盤的首次卡頓情況代碼設(shè)置方向變量，后面需要用作判斷設(shè)置移動的步進(jìn)開啟一個定時器根據(jù)方向變量進(jìn)行判斷按下方向鍵時檢查方向的左上右下用語句來判斷

思路：

根據(jù)鍵盤的unicode值來判斷是鍵盤上的哪個鍵

通過定位利用鍵盤事件改編方塊的top和left值

通過開啟定時器消除長按鍵盤的首次卡頓情況

html

css

div{
    width:100px;
    height:100px;
    position:absolute;
    background:red;
}

js代碼

window.onload=function(){
    var div=document.querySelector("div");
    var toLeft=toRight=toTop=toBottom=false;//設(shè)置方向變量，后面需要用作判斷
    var step=5;//設(shè)置移動的步進(jìn)
    //開啟一個定時器
    var timer=setInterval(function(){
        //根據(jù)方向變量進(jìn)行判斷
        if(toLeft){
            div.style.left=div.offsetLeft-step+"px";
        }
        if(toRight){
            div.style.left=div.offsetLeft+step+"px";
        }
        if(toTop){
            div.style.top=div.offsetTop-step+"px";
        }
        if(toBottom){
            div.style.top=div.offsetTop+step+"px";
        }
    },30);
    
    //按下方向鍵時
    document.onkeydown=function(ev){
        console.log(ev.keyCode);//檢查方向的unicode
        //左：37 上：38 右：39 下：40
        //用switch語句來判斷按下了哪個方向鍵
        switch(ev.keyCode){
            case 37:toLeft=true;break;
            case 38:toTop=true;break;
            case 39:toRight=true;break;
            case 40:toBottom=true;break;
        }
    }
    
   //松開按鍵時
   document.onkeyup=function(ev){
       //還原對應(yīng)松開的值
       switch(ev.keyCode){
            case 37:toLeft=false;break;
            case 38:toTop=false;break;
            case 39:toRight=false;break;
            case 40:toBottom=false;break;
       }
   }

}