利用鍵盤控制小方塊的移動(dòng)

2020-3-1    前端達(dá)人

原理

  1. 利用鍵盤控制移動(dòng)，則需要了解onkeydown函數(shù)，表示某個(gè)按鍵被按下，可以以此綁定一個(gè)事件響應(yīng)函數(shù)，當(dāng)鍵盤被按下時(shí)候，觸發(fā)此事件，進(jìn)行移動(dòng)

  2. keyCode 對(duì)于keypress 事件，該屬性聲明了被敲擊的鍵生成的 Unicode 字符碼。對(duì)于 keydown 和 keyup 事件，它指定了被敲擊的鍵的虛擬鍵盤碼。虛擬鍵盤碼可能和使用的鍵盤的布局相關(guān)。 因此我們可以根據(jù)keycode返回的字符碼來(lái)判斷用戶所按下的鍵，下面就是一個(gè)用于測(cè)試上下左右按鍵的js代碼，經(jīng)過(guò)我的測(cè)試之后，返回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.方塊的移動(dòng)實(shí)際上就是坐標(biāo)的改變，因此需要offsetLeft 和offsetTop 來(lái)獲得當(dāng)前方塊的坐標(biāo)，然后將坐標(biāo)進(jìn)行一定的更改，就可以實(shí)現(xiàn)移動(dòng)的效果了，下面給出代碼 

    window.onload = function() {
            document.onkeydown = function(event) {
                event = event || window.event;
                //設(shè)置移動(dòng)速度
                var speed = 10;
                //當(dāng)ctrl和方向按鍵同時(shí)按下時(shí)，提升移動(dòng)速度
                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;

                }
            };

        };



    這樣就可以簡(jiǎn)單實(shí)現(xiàn)方塊的移動(dòng)，但是此時(shí)我們會(huì)發(fā)現(xiàn)一個(gè)問(wèn)題，當(dāng)我們進(jìn)行移動(dòng)的時(shí)候，按住按鍵不松手，理論上方塊應(yīng)該直接平滑的進(jìn)行移動(dòng)，但實(shí)際上并非如此，第一下它會(huì)有一個(gè)小的停頓，這實(shí)際上是瀏覽器防止誤觸所設(shè)置的，因此我們需要對(duì)此進(jìn)行優(yōu)化
    解決方案

    這里我采用了定時(shí)器的做法來(lái)解決這個(gè)問(wèn)題，因?yàn)榭刂埔苿?dòng)的因素有兩個(gè)，一個(gè)是控制方向，一個(gè)是控制速度，控制方向沒(méi)有問(wèn)題，因此我們需要改變速度
    setInterval（function(){},time）;這是一個(gè)定時(shí)器，我們只需要在time時(shí)間內(nèi)調(diào)用一次函數(shù)，就可以解決停頓的問(wèn)題了
    下面附上修改后的完整代碼


    <!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");
            //設(shè)置移動(dòng)速度
            var speed = 10;
            //設(shè)置移動(dòng)的方向
            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;

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

                //當(dāng)鼠標(biāo)松開(kāi)時(shí)，停止移動(dòng)         ---如果不寫這一個(gè)會(huì)造成無(wú)法停止移動(dòng)的效果
                document.onkeyup = function() {
                    dir = 0;
                };

            };

        };
    </script>
</head>

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

</html>

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

版權(quán)聲明：本文為CSDN博主「loving-cat」的原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。

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



分享本文至：

日歷

鏈接

個(gè)人資料

存檔