亚洲av日韩av永久无码久久,免费的视频app网站,欧美性猛交xxxx免费看,国产成人精品三级麻豆

利用鍵盤控制小方塊的移動(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 對于keypress 事件,該屬性聲明了被敲擊的鍵生成的 Unicode 字符碼。對于 keydown 和 keyup 事件,它指定了被敲擊的鍵的虛擬鍵盤碼。虛擬鍵盤碼可能和使用的鍵盤的布局相關(guān)。 因此我們可以根據(jù)keycode返回的字符碼來判斷用戶所按下的鍵,下面就是一個(gè)用于測試上下左右按鍵的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.方塊的移動(dòng)實(shí)際上就是坐標(biāo)的改變,因此需要offsetLeft 和offsetTop 來獲得當(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;
    
                    }
                };
    
            };
    



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

    這里我采用了定時(shí)器的做法來解決這個(gè)問題,因?yàn)榭刂埔苿?dòng)的因素有兩個(gè),一個(gè)是控制方向,一個(gè)是控制速度,控制方向沒有問題,因此我們需要改變速度
    setInterval(function(){},time);這是一個(gè)定時(shí)器,我們只需要在time時(shí)間內(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è)置移動(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)松開時(shí),停止移動(dòng)         ---如果不寫這一個(gè)會造成無法停止移動(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)載請附上原文出處鏈接及本聲明。

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



日歷

鏈接

個(gè)人資料

藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.chinatradebeam.com

存檔

国产国语老龄妇女a片| 新狼窝色AV性久久久久久| 人禽无码视频在线观看| 国产免费av片在线无码免费看 | 久久久久99精品成人片直播| 久久精品99久久香蕉国产色戒| 亚洲综合久久日日躁综合| 亚洲精品无码av久久久久久| 亚洲午夜精品一区二区| 最近2019中文字幕电影免费看| 99无码熟妇丰满人妻啪啪| 国产午夜片无码区在线播放 | 夜夜爽夜夜叫夜夜高潮漏水| 国产精品久久久久影院老司 | 亚洲熟女www一区二区三区| 国内精品久久毛片一区二区| 精品国模一区二区三区| 欧美肉欲k8播放毛片| 少妇真实被内射视频三四区| 边做边爱mp3在线播放免费观看| 欧美狂野另类xxxxoooo| 亚洲精品成人片在线观看| 被多个强壮的黑人灌满浆| 永久免费的啪啪网站免费观看浪潮 | 欧美午夜精品久久久久免费视| 成熟女人毛片www免费版在线 | 亚洲色大成www亚洲女子| 免费a级毛片在线播放不收费| 放荡勾人绿茶女(h)| 国产精品久久人妻拍拍水牛影视| 久久精品国产亚洲av久| 久久不射| 又狠又深h军人高干| 国产精品久久久久av| 欧美又粗又大xxxxbbbb疯狂| 又大又粗又爽A级毛片免费看| 国产av精品国语对白国产| 久久国产精品免费一区| 国产亚洲午夜高清国产拍精品| 日本亲近相奷中文字幕| 国产精品久久久久乳精品爆|