（三）让蛇头动起来

我们现在拥有了一个不错的蛇头，我们需要它动起来。

它有30px大小，如果它每次移动30px，那么它将在我们的屏幕中非常和谐的移动，因此我们把速度speed设置成30。

    let speed = 30;//速度

我们要蛇头动起来很容易，只需要让它的left和top增加或者减少speed就好了。但是我们怎么让蛇头按照我们的意愿移动呢？比如，我按下上方向键，它应该向上走。

这里我们要用到事件onkeydown，他会不断的监测键盘，当有键被按下时，该事件触发。我们需要一个事件列表event，并且判断事件列表中方向键是否被按下，如果按下则做出进一步判断。

    let direction = "left";//蛇头方向 默认为左
 //监测键盘并触发函数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);
        //边界监测
        aside(snHead);
        //监测进食
        eatFood(snHead);
    }
    }