<div id="game-board"></div>

  /* 将 body 的 display 属性设置为 flex，使其可以垂直和水平居中 */
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
            padding: 0;
            background-color: #f5f5f5;
        }
        /* 游戏区域的样式 */
        #game-board {
            width: 400px;
            height: 400px;
            border: 1px solid black;
            position: relative;
            /*border-radius: 50%; !*圆形*!*/
        }

<div id="game-over">
    <h2>游戏结束！</h2>
    <p>你的得分是 <span id="score"></span> 分。</p>
    <button id="restart-btn">重新开始</button>
</div>
<div id="game-rule">
    <p>游戏规则：</p>
    <p>1. 使用方向键控制小蛇的移动方向，吃掉食物增加得分。</p>
    <p>2. 小蛇撞墙或者撞到自己的身体，游戏结束。</p>
    <p>3. 点击重新开始按钮可以重新开始游戏。</p>
</div>

/* 游戏结束界面的样式 */
        #game-over {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: none;
        }

        /* 重新开始按钮的样式 */
        #restart-btn {
            background-color: #00bcd4;
            border: none;
            border-radius: 8px;
            color: white;
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
            margin-top: 20px;
        }

        /* 游戏规则的样式 */
        #game-rule {
            margin-top: 20px;
            font-size: 16px;
            text-align: center;
            color: #666;
        }

// 获取游戏板的元素
var gameBoard = document.getElementById("game-board");

// 创建表示蛇的div元素，并添加snake类名
var snake = document.createElement("div");
snake.classList.add("snake");

// 将蛇元素添加到游戏板中
gameBoard.appendChild(snake);

// 创建表示食物的div元素，并添加food类名
var food = document.createElement("div");
food.classList.add("food");

// 将食物元素添加到游戏板中
gameBoard.appendChild(food);

// 随机生成食物的位置
var foodX = Math.floor(Math.random() * 20) * 20;
var foodY = Math.floor(Math.random() * 20) * 20;

// 设置食物元素的top和left属性
food.style.top = foodY + "px";
food.style.left = foodX + "px";

// 设置蛇的初始位置
var snakeX = 0;
var snakeY = 0;

/* 蛇的样式 */
        .snake {
            width: 20px;
            height: 20px;
            border: 1px solid black;
            background-color:  orangered; // 橙色
            position: absolute;
            top: 0;
            left: 0;
            /*border-radius: 50%; !*圆形*!*/
        }

        /* 食物的样式 */
        .food {
            width: 20px;
            height: 20px;
            /*width: 25px;*/
            /*height: 25px;*/
            background-color: #01FE00; // 浅绿色
            position: absolute;
            top: 0;
            left: 0;
            /*border-radius: 50%; !*圆形*!*/
        }

    var speed = 200;  // 初始化为200，后面需要用到，值越低速度越高
    var direction = "right";  // 当前方向，因为是简单的键盘控制方向，只有上、下、左、右四个方向
    var snakeBody = [snake]; //组装蛇的数据
    var score = 0;

document.addEventListener("keydown", function (event) {
        if (event.keyCode === 37 && direction !== "right") {
            direction = "left";
        } else if (event.keyCode === 38 && direction !== "down") {
            direction = "up";
        } else if (event.keyCode === 39 && direction !== "left") {
            direction = "right";
        } else if (event.keyCode === 40 && direction !== "up") {
            direction = "down";
        }
    });

// 游戏结束函数
function gameOver() {
    // 清除移动蛇的定时器
    clearTimeout(moveSnakeTimeout);

    // 获取游戏结束界面的元素
    var gameOverDiv = document.getElementById("game-over");
    var scoreSpan = document.getElementById("score");

    // 显示游戏得分
    scoreSpan.innerText = score;

    // 显示游戏结束界面
    gameOverDiv.style.display = "block";
}

// 检查蛇是否超出游戏边界
    if (snakeX < 0 || snakeX >= 400 || snakeY < 0 || snakeY >= 400) {
        // 游戏结束
        gameOver();
        return;
    }

// 获取重新开始按钮
var restartBtn = document.getElementById("restart-btn");

// 添加点击事件监听器
restartBtn.addEventListener("click", function () {
    // 获取游戏结束界面的元素
    var gameOverDiv = document.getElementById("game-over");

    // 隐藏游戏结束界面
    gameOverDiv.style.display = "none";

    // 重置游戏状态，初始化之前定义的参数
    snakeX = 0;
    snakeY = 0;
    direction = "right";
    score = 0;

    // 移除多余的蛇身体部分
    var currentSnakeLength = snakeBody.length;
    for (var i = 1; i < currentSnakeLength; i++) {
        gameBoard.removeChild(snakeBody[1]); //这里移除游戏界面中蛇的身体结构
        snakeBody.splice(1, 1); //这里用数组中的第一个位置开始移除数组中的一个袁术。
    }

    // 重置蛇头的位置
    snake.style.top = 0;
    snake.style.left = 0;

    // 随机生成新的食物位置
    foodX = Math.floor(Math.random() * 20) * 20;
    foodY = Math.floor(Math.random() * 20) * 20;
    food.style.top = foodY + "px";
    food.style.left = foodX + "px";

    // 开始新的游戏
    moveSnake();
});