我們現(xiàn)在擁有了一個不錯的蛇頭，我們需要它動起來。

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

    let speed = 30;//速度

我們要蛇頭動起來很容易，只需要讓它的left和top增加或者減少speed就好了。但是我們怎么讓蛇頭按照我們的意愿移動呢？比如，我按下上方向鍵，它應該向上走。

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

    let direction = "left";//蛇頭方向 默認為左
 //監(jiān)測鍵盤并觸發(fā)函數keyDown
    document.onkeydown = keyDown;
    function keyDown(event){
        // 方向鍵控制元素移動函數
        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;
        }
        //蛇身跟進
        ctlBody(old_x,old_y);
        //邊界監(jiān)測
        aside(snHead);
        //監(jiān)測進食
        eatFood(snHead);
    }
    }