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

junbaor 發布于2019-08-20 17:03 / 2922人閱讀

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

思路：

根據鍵盤的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;//設置方向變量，后面需要用作判斷
    var step=5;//設置移動的步進
    //開啟一個定時器
    var timer=setInterval(function(){
        //根據方向變量進行判斷
        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){
       //還原對應松開的值
       switch(ev.keyCode){
            case 37:toLeft=false;break;
            case 38:toTop=false;break;
            case 39:toRight=false;break;
            case 40:toBottom=false;break;
       }
   }

}

云服務器 GPU云服務器小方塊微信小程序Demo ios 騰訊云小直播demo 鍵盤事件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/83353.html

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

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

marek 2019-08-29 12:44 評論0 收藏0
利用鍵盤事件移動小方塊小demo

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

GraphQuery 2019-08-01 16:57 評論0 收藏0
原生js練習題---第五課

摘要：那該如何是好原題給出思路是讓事件負責標記按鍵就好了，而方向鍵的事件處理使用設個周期比較小的定時器持續監聽，由于周期小，長按時就會立刻執行相應的事件處理，效果更加流暢。閃爍實現效果閃爍簡單的一個定時器應用，用或都可以實現。 0x1模擬select控件實現效果：5-01模擬select控件比較簡單的點擊事件處理，也就處理點擊選擇框展示菜單、點擊菜單選擇、點擊頁面任意角落隱藏菜單這三件事...

winterdawn 2019-08-19 18:11 評論0 收藏0
全新Chrome Devtools Performance使用指南

摘要：分析每一秒的幀是用來分析動畫的一個主要性能指標。軸代表了調用棧。在事件長條的右上角出，如果出現了紅色小三角，說明這個事件是存在問題的，需要特別注意。雙擊這個帶有紅色小三角的的事件。運行時性能表現（runtime performance）指的是當你的頁面在瀏覽器運行時的性能表現，而不是在下載頁面的時候的表現。這篇指南將會告訴你怎么用Chrome DevTools Performance...

sumory 2019-08-21 16:59 評論0 收藏0