50行js简洁完成贪吃蛇？！

真的很易懂
先看样子

还是老样子，直接看代码，注释写的应该可以看懂，删掉注释也就54行，但是一些内容可以直接在css里面搞，所以算下来50行获取还没到呢，也请大家伙帮忙看看还能不能在删到40行以内(doge)

$(function () {
    /*
    * body是身体，存放数组
    * yx是运行的计时器
    * time是运行的计时器的世家
    * number是分数
    * position是头朝向的方向
    * */
    let body=[],run,time=200,number=0,position='left';
    // 循环输出一个宽25格，高20格的地图
    for (let i=0;i<25;i++){
        for (let j=0;j<20;j++){
            $('ul').append('<li id="li_'+i+'_'+j+'" class="li"></li>');
        }
    }
    // 为id为li_10_9的li添加名为t（头）的类，同下
    $('#li_10_9').addClass('t');
    $('#li_10_10').addClass('y');
    $('#li_10_11').addClass('y');
    // 创建身体都在那里
    body.unshift([10,9],[10,10],[10,11]);
    // 控制头上下左右的方位
    $(document).keydown(function (e) {
        if (e.keyCode==37||e.keyCode==65) position='left';
        if (e.keyCode==38||e.keyCode==87) position='up';
        if (e.keyCode==39||e.keyCode==68) position='right';
        if (e.keyCode==40||e.keyCode==83) position='down';
    });
    // 运行开始
    $('button').click(function () {
        // 循环计时器
        run=setInterval(main,time);
    });
    // 主函数
    function main() {
        // 获取头部x方向
        let x=parseInt($('.t').attr('id').split('_')[1]);
        // 获取头部y方向
        let y=parseInt($('.t').attr('id').split('_')[2]);
        // 因为运动的原因，所以先要删除头部和身体的样式
        $('.li').removeClass('t');
        $('.li').removeClass('y');
        // 查看运动方向，以便获取x轴和y轴
        if (position=='left') y-=1;
        if (position=='right') y+=1;
        if (position=='up') x-=1;
        if (position=='down') x+=1;
        // 在数组里面生成新的头
        body.unshift([x,y]);
        // 判断头部是否碰到‘.f’(食物)的类名
        if ($('#li_'+body[0].join('_')).is('.f')){
            // 如果碰到，分数加一
            $('span').text(++number);
            // 删除食物
            $('.li').removeClass('f');
        }else{
            // 如果没吃到，那就断掉一截尾巴
            body.pop();
        }
        // 当地图上面没有食物，那就执行food()以便生成新的食物
        if (!$('.li').is('.f')) food();
        // 在地图上生成新的头
        $('#li_'+body[0].join('_')).addClass('t');
        // 在地图上生成尾部
        for (let i=1;i<body.length;i++) $('#li_'+body[i].join('_')).addClass('y');
        // 如果头碰到上下左右边框和自己的身体，那就死亡，弹出‘Game Over’，停止运行
        if (y<0||y>19||x<0||x>24||$('#li_'+body[0].join('_')).is('.y')){
            alert('Game Over');
            clearInterval(run);
        }
    }
    // 生成食物
    function food() {
        // 随机向下生成一个x、y轴的坐标
        let x=Math.floor(Math.random()*20);
        let y=Math.floor(Math.random()*25);
        // 如果这个随机生成的食物在贪吃蛇头上或身上时，就在执行一遍，以此重复到没有
        if ($('#li_'+x+'_'+y).is('.t')||$('#li_'+x+'_'+y).is('.y')){
            food();
        }else{
            // 如果没有在身上，那就生成食物到地图上
            $('#li_'+x+'_'+y).addClass('f');
        }
    }
});

接着就是一些没用的html代码
当然，jQuery就不用我提供了吧

<div>
    <h2>分数: <span>0</span></h2>
    <button>开始</button>
</div>
<ul></ul>

css：

*{
    margin: 0;
    padding: 0;
}
div{
    width: 400px;
    height: 40px;
    margin: 30px auto;
}
h2{
    float: left;
    margin-left: 50px;
    margin-top: 5px;
}
button{
    float: right;
    width: 100px;
    height: 100%;
    background: yellowgreen;
    border: none;
    border-radius: 10px;
    color: white;
    margin-right: 50px;
}
ul{
    width: 400px;
    height: 520px;
    margin: 50px auto;
    background: url("./image/bg1.png") no-repeat;
    background-size: 100% 100%;
}
li{
    list-style: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    float: left;
}
.y{
    background: yellowgreen;
}
.t{
    background: green;
}
.f{
    background: url("./image/food/food (6).png") no-repeat;
    background-size: 100% 100%;
}

里面图片地址什么的可以自己的图片放上去，应该都能支持的，我相信大家可以的
其实这些加起来也就100行左右，算是比较少的了，也非常的简单易懂
也希望多几个大神帮忙修改修改，转发记得提供本页源地址哦
还有一个增强版的，看情况吧，有时间会发出来