利用鍵盤控制小方塊的移動

2020-3-1    前端達人

原理

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

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

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

                }
            };

        };



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

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


    <!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è)置移動速度
            var speed = 10;
            //設(shè)置移動的方向
            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和方向按鍵同時按下時，提升移動速度
                if(event.ctrlKey) {
                    speed = 50;
                } else {
                    speed = 10;
                }
                //使dir等于keycode的值
                dir = event.keyCode;

                //當(dāng)鼠標(biāo)松開時，停止移動         ---如果不寫這一個會造成無法停止移動的效果
                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)載請附上原文出處鏈接及本聲明。

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



分享本文至：

日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://m.820esy.cn

存檔