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

最新推荐文章于 2023-12-07 17:38:12 发布

原创

最新推荐文章于 2023-12-07 17:38:12 发布 · 418 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #css #html

这是一个使用jQuery实现的简化版贪吃蛇游戏代码，包含游戏逻辑、键盘控制、碰撞检测和分数显示。游戏地图25x20，蛇的身体由数组管理，通过改变头部位置来移动。当蛇碰到食物时，分数增加，食物随即消失并重新生成。若蛇碰到边界或自身，则游戏结束。CSS用于设置样式，HTML包含游戏得分和开始按钮。

真的很易懂
先看样子
在这里插入图片描述
还是老样子，直接看代码，注释写的应该可以看懂，删掉注释也就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