我們現(xiàn)在擁有了一個(gè)不錯(cuò)的蛇頭，我們需要它動(dòng)起來(lái)。

它有30px大小，如果它每次移動(dòng)30px，那么它將在我們的屏幕中非常和諧的移動(dòng)，因此我們把速度speed設(shè)置成30。

    let speed = 30;//速度

我們要蛇頭動(dòng)起來(lái)很容易，只需要讓它的left和top增加或者減少speed就好了。但是我們?cè)趺醋屔哳^按照我們的意愿移動(dòng)呢？比如，我按下上方向鍵，它應(yīng)該向上走。

這里我們要用到事件onkeydown，他會(huì)不斷的監(jiān)測(cè)鍵盤，當(dāng)有鍵被按下時(shí)，該事件觸發(fā)。我們需要一個(gè)事件列表event，并且判斷事件列表中方向鍵是否被按下，如果按下則做出進(jìn)一步判斷。

    let direction = "left";//蛇頭方向 默認(rèn)為左
 //監(jiān)測(cè)鍵盤并觸發(fā)函數(shù)keyDown
    document.onkeydown = keyDown;
    function keyDown(event){
        // 方向鍵控制元素移動(dòng)函數(shù)
        event = event || window.event;
        switch(event.keyCode){
            case 37:
                direction ="left";//左
                break;
            case 38:
                direction ="up";//上
                break;
            case 39:
                direction = "right";//右
                break;
            case 40:
                direction = "down";//下
                break;
        }
    function snMove(){
        //獲取蛇頭
        const snHead = document.getElementById("snHead");
        let snHead_x = snHead.style.left;
        let snHead_y = snHead.style.top;
        let old_x = snHead_x;
        let old_y = snHead_y;
        //判斷方向
        switch(direction){
            case "left":
                console.log("往左走");
                snHead.style.left = parseInt(snHead_x) - speed + "px";
                break;
            case "right":
                console.log("往右走");
                snHead.style.left = parseInt(snHead_x) + speed + "px";
                break;
            case "up":
                console.log("往上走");
                snHead.style.top = parseInt(snHead_y) - speed + "px";
                break;
            case "down":
                console.log("往下走");
                snHead.style.top = parseInt(snHead_y) + speed + "px";
                break;
        }
        //蛇身跟進(jìn)
        ctlBody(old_x,old_y);
        //邊界監(jiān)測(cè)
        aside(snHead);
        //監(jiān)測(cè)進(jìn)食
        eatFood(snHead);
    }
    }