听说刚学完JavaScript的你，找不到demo来练手？

ゝ一纸荒年。 2023-07-25 14:03 135阅读 0赞

# 听说刚学完JavaScript的你，找不到demo来练手？ #

### 文章目录 ###

*  听说刚学完JavaScript的你，找不到demo来练手？
 *   *  前言：
     *  文件资源：
     *  demo的简单介绍：
     *  布局：
     *   *  效果图：
         *  具体实现：
         *  html文件：
         *  css文件：
     *  相关功能实现：
     *   *  1.产生蛇头、食物div
         *  2.使用定时器让蛇头动起来
         *  3.通过键盘的上下左右键，实现蛇头的移动
         *  4.定义两个数组
         *  5.碰撞检测：以改变食物的位置
         *  6.身体随之移动：
         *  7.游戏结束
         *  8.防止更新的食物位置与身体重合
         *  9.得分增加
         *  10.对按钮实现相关功能
         *  js文件：

## 前言： ##

这是本蒟蒻这周的web作业，开始觉得选贪吃蛇可能会有点小难，但是自己看了看网站的一些视频后，发现似乎还是挺有意思的，于是打算分享出来，希望对刚学完JavaScript基础知识，正愁没有demo来练手的小伙伴有些许帮助。

## 文件资源： ##

[资源位置][Link 1]  
因为比较简单，所以没有设置c币，只希望大佬留个赞再走呗；

## demo的简单介绍： ##

前言中也提了句，这是一个web版的**低配版**贪吃蛇**单机**小游戏  
（看到前面那么多前缀，就知道，这真的只是一个demo，因为实在是太低配了）  
这是的蛇头，食物、身体都是通过div实现，所以就比较简单了。  
这里的JavaScript用的是jquery框架，因为还是可以稍微少点代码量（哈哈哈）

## 布局： ##

### 效果图： ###

既然选好目标后，我们首先当然是得确定布局：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JvbGl1MTQ3MjU4_size_16_color_FFFFFF_t_70]  
这是最终需要的效果图。

### 具体实现： ###

那么怎么实现呢：  
**1.地图：**  
身体，食物都要大小一致，我们还是比较容易想到用**table标签**，但是table下面不能创建**div**，这是我们需要注意的。所以我们需要另外开一个div表示真正的地图：这样就可以在地图开生成食物和蛇头了。  
但是我们会发现table标签和真正表示地图的div不能重合，于是我们可以用**绝对定位**，使其重合

**2.得分显示区域：**  
直接用一个div下面封装一个span标签即可，方便之后修改它的值

**3.改变速度按钮区域：**  
直接用四个buton标签即可

**4.游戏说明区域：**  
一个p标签即可

于是html文件和css文件就出来了：  
这里对于table的创建，就别一个个cv…  
vscode下直接**table>tr*20>td*40**按回车即可，  
其他操作可以看下面博客：  
[https://www.cnblogs.com/summit7ca/p/6944215.html][https_www.cnblogs.com_summit7ca_p_6944215.html]

### html文件： ###

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>贪吃蛇</title>
        <link type="text/css" rel="stylesheet" href="index.css"/>
        <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
        <script src="index.js" type="text/javascript"></script>
    </head>
    
    <body>
        
        <table>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </table>
        
        <div id="map"></div>
        <div id="scoreDiv">
            Score：<span id="score">0</span>
        </div>
        <div id="buttonGroup">
            <button id="quickBtn">快</button>
            <button id="midBtn">中</button>
            <button id="slowBtn">慢</button>
            <button id="restart">重新开始</button>
        </div>
        <p>
            游戏说明：<br>
            红色方块表示：蛇头，蓝色方块表示：食物，黄色方块表示：身体。<br>
            通过键盘的上、下、左、右键来移动贪吃蛇
        </p>
    </body>
    
    </html>

### css文件： ###

命名需要为：index.css，而且需要和html在同一目录下，不然html无法调用  
（这是讲给像我一样的蒟蒻的，大佬勿喷）

* {
        
        margin: 0;
        padding: 0;
    }
    
    #scoreDiv {
        
        font-size: 30px;
    }
    
    #map {
        
        width: 1000px;
        height: 500px;
        background-color: black;
    }
    
    table {
        
        border: 0;
        position: absolute;
        left: 0;
        top: 0;
    }
    
    td {
        
        width: 25px;
        height: 25px;
    }
    button{
        
        width: 25px;
        height: 25px;
    }
    #restart{
        
        background-color: red;
        width:100px;
        height: 25px;
    }
    p{
        
        font-size:20px;
    }

## 相关功能实现： ##

### 1.产生蛇头、食物div ###

我们可以对这个操作用一函数封装。

//刷新页面时，不仅要产生地图，而且还要产生 蛇头 和 一个食物
        //封装一个方法，用于创建div元素 放入地图
        function createDiv(color) {
        
            var div = document.createElement("div");   //创建一个div节点
            div.style.width = "25px";
            div.style.height = "25px";
            div.style.position="absolute";  //为了改变位置，并不独立成行 
            //位置是随机的     使用js随机数
            //Math.random() 产生一个[0,1)的随机数
            div.style.left=parseInt(Math.random()*10)*25+"px";
            div.style.top=parseInt(Math.random()*10)*25+"px";
            div.style.backgroundColor=color;
            $("#map").append(div);       //JQuery操作
            
            //返回创建出的div
            return div;
        }

*  这里需要传入一个color是因为，我们对于后面的身体操作有用
 *  其中每次游戏蛇头和食物都是随机的，于是我们得用到Math.random()这个函数产生随机数。

### 2.使用定时器让蛇头动起来 ###

我们可以对我们新产生的div的value值，表示方向，然后对于游戏开始时对蛇头设置一个默认的移动方向，通过对div的位置，来实现蛇头的移动，具体见代码：

//判断当前蛇头的移动方向
            switch(headNode.value){
        
                case "左":
                    headNode.style.left=parseInt(headNode.style.left)-25+"px";
                    break;
                case "右":
                    headNode.style.left=parseInt(headNode.style.left)+25+"px";
                    break;
                case "上":
                    headNode.style.top=parseInt(headNode.style.top)-25+"px";
                    break;
                case "下":
                    headNode.style.top=parseInt(headNode.style.top)+25+"px";
                    break;
            }

### 3.通过键盘的上下左右键，实现蛇头的移动 ###

*  我们首先得知道键值，左：37，右：39，上：38，下：40
 *  调用document的keydown方法，获取当前按下的键值

//通过键盘的按键，来改变蛇头的移动方向
        //不同的键值对应不同的键
        $(document).keydown(function(e){
              //e表示事件对象
            //console.log(e.keyCode);
            switch(e.keyCode){
        
                case 37:
                    headNode.value="左"
                    break;
                case 39:
                    headNode.value="右"
                    break;
                case 38:
                    headNode.value="上"
                    break;
                case 40:
                    headNode.value="下"
                    break;
            }
        })

### 4.定义两个数组 ###

\-分别存身体和整个蛇，在后面蛇的移动有需要

//放所有身体的数组
        var bodyarr=[];
        //放整个蛇的数组
        var nodes=[];

### 5.碰撞检测：以改变食物的位置 ###

*  碰撞检测：即div元素重合（蛇头和食物）
 *  吃到食物，身体加一

//碰撞检测       即：两个元素重合
            //吃到食物,身体加一
            if(headNode.style.left==foodNode.style.left&&headNode.style.top==foodNode.style.top){
        
                var bodyNode=createDiv("yellow");
                var lastNode;      
                if(bodyarr.length>0){
        
                    lastNode=bodyarr[bodyarr.length-1];
                }
                else{
        
                    lastNode=headNode;
                }
    
                switch(lastNode.value){
        
                    case "左":
                        bodyNode.style.left=parseInt(lastNode.style.left)+25+"px";
                        bodyNode.style.top=lastNode.style.top;
                        break;
                    case "右":
                        bodyNode.style.left=parseInt(lastNode.style.left)-25+"px";
                        bodyNode.style.top=lastNode.style.top;
                        break;
                    case "上":
                        bodyNode.style.top=parseInt(lastNode.style.top)+25+"px";
                        bodyNode.style.left=lastNode.style.left;
                        break;
                    case "下":
                        bodyNode.style.top=parseInt(lastNode.style.top)-25+"px";
                        bodyNode.style.left=lastNode.style.left;
                        break;
                }
                bodyNode.value=lastNode.value;
                bodyarr.push(bodyNode);
                nodes.push(bodyNode);

### 6.身体随之移动： ###

*  身体随前一块移动
 *  需要逆序遍历身体数组，正序的话会出错，仔细想一想会发现：第一块身体移动方向等于蛇头移动方向，第二块等于第一块，以此类推，所有的身体移动方向都是蛇头移动方向了

//身体移动
            if(bodyarr.length>0){
        
                //身体跟随前一块移动  ,逆序遍历
                for(var i=bodyarr.length-1;i>=0;i--){
        
                    switch(bodyarr[i].value){
        
                        case "左":
                            bodyarr[i].style.left=parseInt(bodyarr[i].style.left)-25+"px";
                            break;
                        case "右":
                            bodyarr[i].style.left=parseInt(bodyarr[i].style.left)+25+"px";
                            break;
                        case "上":
                            bodyarr[i].style.top=parseInt(bodyarr[i].style.top)-25+"px";
                            break;
                        case "下":
                            bodyarr[i].style.top=parseInt(bodyarr[i].style.top)+25+"px";
                            break;
                    }
                    if(i==0){
        
                        bodyarr[i].value=headNode.value;
                    }
                    else{
        
                        bodyarr[i].value=bodyarr[i-1].value;
                    }
                }
            }

### 7.游戏结束 ###

*  撞墙
 *  吃到身体

//离开地图,撞墙
            if(parseInt(headNode.style.left)<0||parseInt(headNode.style.left)>975
            ||parseInt(headNode.style.top)<0||parseInt(headNode.style.top)>475){
        
                clearInterval(t);
                alert("撞墙了,Game Over!");
            }
    
            //吃到自己的身体
            if(bodyarr.length>0){
        
                for(var i=0;i<bodyarr.length;i++){
        
                    if(bodyarr[i].style.left==headNode.style.left&&bodyarr[i].style.top==headNode.style.top){
        
                        clearInterval(t); 
                        alert("咬到身体了,Game Over!");
                        break;
                    }
                }
            }

### 8.防止更新的食物位置与身体重合 ###

//更新食物位置,防止食物与蛇重合
                var x=parseInt(Math.random()*10)*25;
                var y=parseInt(Math.random()*10)*25;
                for(var i=0;i<nodes.length;i++){
        
                    if(parseInt(nodes[i].style.left)==x&&parseInt(nodes[i].style.top)==y){
        
                        x=parseInt(Math.random()*10)*25;
                        y=parseInt(Math.random()*10)*25;
                        i=-1;
                    }
                }
                foodNode.style.left=x+"px";
                foodNode.style.top=y+"px";

### 9.得分增加 ###

直接改变span标签的值即可（每吃一个+10）

//得分增加
                $("#score").text(parseInt($("#score").text())+10);

### 10.对按钮实现相关功能 ###

//对按钮实现相关功能
        $("#quickBtn").click(function(){
        
            t=setInterval(move,100);
        })
    
        $("#midBtn").click(function(){
        
            t=setInterval(move,500);
        })
    
        $("#slowBtn").click(function(){
        
            t=setInterval(move,2000);
        })
    
        $("#restart").click(function(){
        
            location.reload();
        })

于是基本上这个demo所有功能都实现了

### js文件： ###

同样需要注意下命名：

$(function () {
        
        //放所有身体的数组
        var bodyarr=[];
        //放整个蛇的数组
        var nodes=[];
        //蛇移动的速度,默认为中速
        var t=setInterval(move,500);
    
        //刷新页面时，不仅要产生地图，而且还要产生 蛇头 和 一个食物
        //封装一个方法，用于创建div元素 放入地图
        function createDiv(color) {
        
            var div = document.createElement("div");   //创建一个div节点
            div.style.width = "25px";
            div.style.height = "25px";
            div.style.position="absolute";  //为了改变位置，并不独立成行 
            //位置是随机的     使用js随机数
            //Math.random() 产生一个[0,1)的随机数
            div.style.left=parseInt(Math.random()*10)*25+"px";
            div.style.top=parseInt(Math.random()*10)*25+"px";
            div.style.backgroundColor=color;
            $("#map").append(div);
            
            //返回创建出的div
            return div;
        }
        //蛇头的移动方向 ，假设默认移动方向向左
        //四个方向 左 右 上 下
        var headNode=createDiv("red");  //创建一个蛇头
        nodes.push(headNode);
        headNode.value="右";
    
        var foodNode=createDiv("blue");  //创建一个食物 
    
    
        function move(){
        
    
            //身体移动
            if(bodyarr.length>0){
        
                //身体跟随前一块移动  ,逆序遍历
                for(var i=bodyarr.length-1;i>=0;i--){
        
                    switch(bodyarr[i].value){
        
                        case "左":
                            bodyarr[i].style.left=parseInt(bodyarr[i].style.left)-25+"px";
                            break;
                        case "右":
                            bodyarr[i].style.left=parseInt(bodyarr[i].style.left)+25+"px";
                            break;
                        case "上":
                            bodyarr[i].style.top=parseInt(bodyarr[i].style.top)-25+"px";
                            break;
                        case "下":
                            bodyarr[i].style.top=parseInt(bodyarr[i].style.top)+25+"px";
                            break;
                    }
                    if(i==0){
        
                        bodyarr[i].value=headNode.value;
                    }
                    else{
        
                        bodyarr[i].value=bodyarr[i-1].value;
                    }
                }
            }
    
            //判断当前蛇头的移动方向
            switch(headNode.value){
        
                case "左":
                    headNode.style.left=parseInt(headNode.style.left)-25+"px";
                    break;
                case "右":
                    headNode.style.left=parseInt(headNode.style.left)+25+"px";
                    break;
                case "上":
                    headNode.style.top=parseInt(headNode.style.top)-25+"px";
                    break;
                case "下":
                    headNode.style.top=parseInt(headNode.style.top)+25+"px";
                    break;
            }
    
            //离开地图,撞墙
            if(parseInt(headNode.style.left)<0||parseInt(headNode.style.left)>975
            ||parseInt(headNode.style.top)<0||parseInt(headNode.style.top)>475){
        
                clearInterval(t);
                alert("撞墙了,Game Over!");
            }
    
            //吃到自己的身体
            if(bodyarr.length>0){
        
                for(var i=0;i<bodyarr.length;i++){
        
                    if(bodyarr[i].style.left==headNode.style.left&&bodyarr[i].style.top==headNode.style.top){
        
                        clearInterval(t); 
                        alert("咬到身体了,Game Over!");
                        break;
                    }
                }
            }
    
            //碰撞检测       即：两个元素重合
            //吃到食物,身体加一
            if(headNode.style.left==foodNode.style.left&&headNode.style.top==foodNode.style.top){
        
                var bodyNode=createDiv("yellow");
                var lastNode;      
                if(bodyarr.length>0){
        
                    lastNode=bodyarr[bodyarr.length-1];
                }
                else{
        
                    lastNode=headNode;
                }
    
                switch(lastNode.value){
        
                    case "左":
                        bodyNode.style.left=parseInt(lastNode.style.left)+25+"px";
                        bodyNode.style.top=lastNode.style.top;
                        break;
                    case "右":
                        bodyNode.style.left=parseInt(lastNode.style.left)-25+"px";
                        bodyNode.style.top=lastNode.style.top;
                        break;
                    case "上":
                        bodyNode.style.top=parseInt(lastNode.style.top)+25+"px";
                        bodyNode.style.left=lastNode.style.left;
                        break;
                    case "下":
                        bodyNode.style.top=parseInt(lastNode.style.top)-25+"px";
                        bodyNode.style.left=lastNode.style.left;
                        break;
                }
                bodyNode.value=lastNode.value;
                bodyarr.push(bodyNode);
                nodes.push(bodyNode);
    
                //得分增加
                $("#score").text(parseInt($("#score").text())+10);
    
                //更新食物位置,防止食物与蛇重合
                var x=parseInt(Math.random()*10)*25;
                var y=parseInt(Math.random()*10)*25;
                for(var i=0;i<nodes.length;i++){
        
                    if(parseInt(nodes[i].style.left)==x&&parseInt(nodes[i].style.top)==y){
        
                        x=parseInt(Math.random()*10)*25;
                        y=parseInt(Math.random()*10)*25;
                        i=-1;
                    }
                }
                foodNode.style.left=x+"px";
                foodNode.style.top=y+"px";
            }
        }
    
        //通过键盘的按键，来改变蛇头的移动方向
        //不同的键值对应不同的键
        $(document).keydown(function(e){
              //e表示事件对象
            //console.log(e.keyCode);
            switch(e.keyCode){
        
                case 37:
                    headNode.value="左"
                    break;
                case 39:
                    headNode.value="右"
                    break;
                case 38:
                    headNode.value="上"
                    break;
                case 40:
                    headNode.value="下"
                    break;
            }
        })
    
    
        //对按钮实现相关功能
        $("#quickBtn").click(function(){
        
            t=setInterval(move,100);
        })
    
        $("#midBtn").click(function(){
        
            t=setInterval(move,500);
        })
    
        $("#slowBtn").click(function(){
        
            t=setInterval(move,2000);
        })
    
        $("#restart").click(function(){
        
            location.reload();
        })
    
    })

大佬不妨留个赞再走呗。

[Link 1]: https://download.csdn.net/download/boliu147258/12328695
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JvbGl1MTQ3MjU4_size_16_color_FFFFFF_t_70]: /images/20230528/3864a043ec7c4840a2d282375fd33689.png
[https_www.cnblogs.com_summit7ca_p_6944215.html]: https://www.cnblogs.com/summit7ca/p/6944215.html