今天做了一个贪吃蛇的小游戏，不过 蛇和食物的碰撞 出现了问题可能是我的思路出现了问题，改了3次，思路越来越清晰，但是还会出现错误，还是应该多去看看别人怎么写的比较好，网上的代码过长，不好切入。没有精力去琢磨他们的代码自己写了一个明天再改改

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>贪吃蛇</title>
    <style>
    *{padding: 0;margin: 0;}
    a{text-decoration: none;}
    li{list-style: none}
    html,body{display: flex;width: 100%;height: 100%;align-items: center;justify-content: center;}
    #box{width: 400px;height: 400px;background: #000;position: relative;}
    #anmite{width: 20px;height: 20px;background: #c3c3c3;position: absolute;}
    #food{width: 20px;height: 20px;background: #fff;position: absolute;}
    </style>
</head>
<body>
    <div id="box">
        <span id="anmite" style="top:0px;left:0px;"></span>
        <span id="food" style="top:180px;left:180px;"></span>
    </div>
    <script>

    var score = 0;
    var food = document.getElementById("food");
    var anmite = document.getElementById('anmite');
    var speed =5;
    var a,b,c,d;  //定义方向
    function place(ele){ //查看蛇的位置
        var tp = parseInt(ele.style.top);
        var lft = parseInt(ele.style.left);
        return [tp,lft];
    }

    //食物的位置
    function posit(ele){

        var  arr = {
            x:0,
            y:0
        };
        var xx = Math.floor(Math.random()*400);
        var yy = Math.floor(Math.random()*400);
        arr.x = xx;
        arr.y = yy;
            ele.style.top = arr.x+"px";
            ele.style.left = arr.y+"px";
        return arr;
    }

    //检查是否碰撞

    function z_pz(){
        var z_tp= posit(food);
        var z_sp= place(anmite);
        if(z_sp[0]==z_tp.x&&z_sp[1]==z_tp.y){
            //蛇和食物已经碰撞
            score++;

        }else{
console.log(z_sp[0],z_sp[1],z_tp.x,z_tp.y);
        }
    }



    setInterval(function(){ //检测碰撞没有实现
        z_pz();

    },100);



    function an(s){   //上
        var tf = checkpx(anmite);
        if(tf){
            var po =  place(anmite);
        anmite.style.top = (po[0] - s) + 'px';
        z_pz();
         a = setTimeout("an(speed)",200)
        }

    }
    function ab(s){  //下
        var tf = checkpx(anmite);
        if(tf){
        var po =  place(anmite);
        anmite.style.top = (po[0] + s) + 'px';
        z_pz();
         b = setTimeout("ab(speed)",200)
    }
}
    function ac(s){   //左
        var tf = checkpx(anmite);
        if(tf){
        var po =  place(anmite);
        anmite.style.left = (po[1] - s) + 'px';
        z_pz();
         c = setTimeout("ac(speed)",200)
        }
    }
    function aa(s){  //右
        var tf = checkpx(anmite);
        if(tf){
        var po =  place(anmite);
        anmite.style.left = (po[1] + s) + 'px';
        z_pz();
         d = setTimeout("aa(speed)",200)
    }
}

    function clear(){ //清理定时器 可以和暂停游戏合成一段代码
            clearTimeout(a);
            clearTimeout(b);
            clearTimeout(c);
            clearTimeout(d);
    }
    window.onclick =  function stop(){   //暂停游戏
        clear();
    }
    //检查是否超出边界
    function checkpx(a){
        if(place(a)[0]<0 || place(a)[0]>375){
            console.log("you lose game");
            stop();
            return  false;

        }else if(place(a)[1]<0 || place(a)[1]>375){
            console.log("you lose game");
            stop();
            return  false;
        }else{
            return true;
        }
    }

    window.addEventListener("keydown",function direction(e){
        var event = e||window.event;
        var key = event.keyCode;

        if(key==37){  //左
            clear();
            ac(speed);

        }else if(key==38){//上
            clear();
            an(speed);
        }else if(key==39){//右
            clear();
            aa(speed);
        }else if(key==40){//下
            clear();
            ab(speed);
        }
    })

    </script>
</body>
</html>