利用鍵盤(pán)事件移動(dòng)小方塊小demo

junbaor 發(fā)布于2019-08-20 17:03 / 2930人閱讀

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

思路：

根據(jù)鍵盤(pán)的unicode值來(lái)判斷是鍵盤(pán)上的哪個(gè)鍵

通過(guò)定位利用鍵盤(pán)事件改編方塊的top和left值

通過(guò)開(kāi)啟定時(shí)器消除長(zhǎng)按鍵盤(pán)的首次卡頓情況

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è)置移動(dòng)的步進(jìn)
    //開(kāi)啟一個(gè)定時(shí)器
    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);
    
    //按下方向鍵時(shí)
    document.onkeydown=function(ev){
        console.log(ev.keyCode);//檢查方向的unicode
        //左：37 上：38 右：39 下：40
        //用switch語(yǔ)句來(lái)判斷按下了哪個(gè)方向鍵
        switch(ev.keyCode){
            case 37:toLeft=true;break;
            case 38:toTop=true;break;
            case 39:toRight=true;break;
            case 40:toBottom=true;break;
        }
    }
    
   //松開(kāi)按鍵時(shí)
   document.onkeyup=function(ev){
       //還原對(duì)應(yīng)松開(kāi)的值
       switch(ev.keyCode){
            case 37:toLeft=false;break;
            case 38:toTop=false;break;
            case 39:toRight=false;break;
            case 40:toBottom=false;break;
       }
   }

}