js判斷同時按下兩個鍵


剛剛在學習JS事件這一塊兒,看到視頻教程中教做飛機大戰中飛機移動的程序:

var oDiv = document.getElementById("div1");
    var timer = null;
    var left = false;
    var right = false;
    var top = false;
    var bottom = false;
    setInterval(function(){
        if(left){
            oDiv.style.left = oDiv.offsetLeft-10+"px";
        }else if(top){
            oDiv.style.top = oDiv.offsetTop-10+"px";
        }else if(right){
            oDiv.style.left = oDiv.offsetLeft+10+"px";
        }else if(bottom){
            oDiv.style.top = oDiv.offsetTop+10+"px";
        }
    },50);
    document.onkeydown = function(ev){
        var ev = ev || event;
        var keyCode = ev.keyCode;
        switch(keyCode){
           case 37: left = true;break;
           case 38: top = true;break;
           case 39: right = true;break;
           case 40: bottom = true;break;
        }
    }
    document.onkeyup = function(ev){
        var ev = ev || event;
        var keyCode = ev.keyCode;
        switch(keyCode){
           case 37: left = false;break;
           case 38: top = false;break;
           case 39: right = false;break;
           case 40: bottom = false;break;
        }
    }

這段代碼只能上下左右四個方向移動,而不能左上、左下這樣移動,我找了一下網上的解決方案,其中有一個是把所有按下去的鍵的keyCode放到一個數組里,然后通過判斷數組中的值來決定執行哪個動作

<script>
    var keyCodeArry=[];
        document.onkeydown=function(ev){
            var oEvent=ev||event;
            keyCode=oEvent.keyCode;
            keyCodeArry=addKeyCodeArry(keyCode,keyCodeArry);
            console.log(keyCodeArry);
        }
        document.onkeyup=function(ev){
            var oEvent=ev||event;
            keyCode=oEvent.keyCode;
            keyCodeArry=deletKeyCodeArry(keyCode,keyCodeArry);
            console.log(keyCodeArry);
        }
        function addKeyCodeArry(num,arr){
            var check=0;
            for (var i=0;i<arr.length;i++) {
                if (arr[i]==num) {
                    check=1;
                }
            }
            if (check==0) {
                arr.push(num);
            }
            return arr;
        }
        function deletKeyCodeArry(num,arr){
            for (var i=0;i<arr.length;i++) {
                if (arr[i]==num) {
                    arr.splice(i,1);
                }
            }
            return arr;
        }
    </script>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM