王桃桃2

ZLJ

你好，我有一个贪吃蛇的小游戏代码，可以帮我分析和改编一下代码吗？

kaia

ZLJ 发表于 2024-07-18 16:52
你好，我刚学习了代码的控制结构，我想给贪吃蛇增加游 ...

当然可以！在贪吃蛇游戏中增加游戏暂停和继续的功能是一个非常好的练习。我们可以通过添加一个新的按钮来实现这个功能，并在JavaScript代码中控制游戏的暂停和继续状态。

### 修改思路

1. **HTML**：添加一个“暂停/继续”按钮。
2. **CSS**：对新按钮进行样式设置。
3. **JavaScript**：添加控制游戏暂停和继续逻辑的功能。

### HTML部分

在你的HTML中添加一个新的“暂停/继续”按钮：



    贪吃蛇游戏
   


    欢迎来到贪吃蛇游戏！

   
   
   
        游戏结束
        很遗憾！得分: 0
        开始游戏
   
   
     查看规则
   
        游戏规则：
        
            用方向键控制蛇的移动。
            吃到食物得分并延长蛇身。
            撞到墙壁或自己的身体则游戏结束。

   
   
    暂停/继续
   




### CSS部分

对新按钮进行样式设置：

/* styles.css */
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #000;
    flex-direction: column;
}

canvas {
    border: 1px solid #fff;
}

#gameOver {
    position: absolute;
    text-align: center;
    color: white;
}

button {
    padding: 10px 20px;
    font-size: 16px;
    color: black;
    background-color: #9370DB;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

/* 新增规则样式 */
#gameRules {
    color: white;
    margin-top: 20px;
    background: rgba(0, 0, 0, 0.7);
    padding: 10px;
    border-radius: 5px;
    display: none; /* 默认隐藏 */
}

### JavaScript部分

在JavaScript中添加控制游戏暂停和继续逻辑的功能：

// script.js
const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");

canvas.width = 400;
canvas.height = 400;

const box = 20;
let snake;
let food;
let d;
let score;
let game;
let isPaused = false; // 新增一个状态变量表示游戏是否暂停

// 获取音频元素
const eatSound = document.getElementById("eatSound");

// 播放音效函数
function playEatSound() {
    eatSound.currentTime = 0; // 每次播放前重置播放时间
    eatSound.play();
}

// 初始化游戏
function initGame() {
    snake = ; // 初始蛇的位置
    food = {
        x: Math.floor(Math.random() * 19 + 1) * box,
        y: Math.floor(Math.random() * 19 + 1) * box
    };
    score = 0;
    d = null;
}

// 启动游戏
function startGame() {
    document.getElementById("gameOver").style.display = "none";
    initGame();
    if (game) clearInterval(game);
    game = setInterval(draw, 500); // 设置游戏速度为500毫秒
}

// 暂停/继续游戏
function togglePause() {
    if (isPaused) {
        game = setInterval(draw, 500); // 继续游戏
        isPaused = false;
    } else {
        clearInterval(game); // 暂停游戏
        isPaused = true;
    }
}

// 监听键盘事件
document.addEventListener("keydown", direction);
function direction(event) {
    if (event.keyCode == 37 && d !== "RIGHT") {
        d = "LEFT";
    } else if (event.keyCode == 38 && d !== "DOWN") {
        d = "UP";
    } else if (event.keyCode == 39 && d !== "LEFT") {
        d = "RIGHT";
    } else if (event.keyCode == 40 && d !== "UP") {
        d = "DOWN";
    }
}

function collision(newHead, array) {
    for (let i = 0; i < array.length; i++) {
        if (newHead.x === array.x && newHead.y === array.y) {
            return true;
        }
    }
    return false;
}

// 绘制游戏
function draw() {
    ctx.fillStyle = "#000";
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    for (let i = 0; i < snake.length; i++) {
        ctx.fillStyle = (i === 0) ? "green" : "white";
        ctx.fillRect(snake.x, snake.y, box, box);

        ctx.strokeStyle = "red";
        ctx.strokeRect(snake.x, snake.y, box, box);
    }

    ctx.fillStyle = "red";
    ctx.fillRect(food.x, food.y, box, box);

    let snakeX = snake.x;
    let snakeY = snake.y;

    if (d === "LEFT") snakeX -= box;
    if (d === "UP") snakeY -= box;
    if (d === "RIGHT") snakeX += box;
    if (d === "DOWN") snakeY += box;

    if (snakeX === food.x && snakeY === food.y) {
        score += 1; // 每次吃到食物时分数增加1
        
        // 播放音效
        playEatSound();

        food = {
            x: Math.floor(Math.random() * 19 + 1) * box,
            y: Math.floor(Math.random() * 19 + 1) * box
        };
    } else {
        snake.pop();
    }

    let newHead = { x: snakeX, y: snakeY };

    if (snakeX < 0 || snakeY < 0 || snakeX >= canvas.width || snakeY >= canvas.height || collision(newHead, snake)) {
        clearInterval(game);
        document.getElementById("score").innerText = score;
        document.getElementById("gameOver").style.display = "block";
        return;
    }

    snake.unshift(newHead);

    ctx.fillStyle = "white";
    ctx.font = "45px Changa one";
    ctx.fillText(score, 2 * box, 1.6 * box);
}

// 添加鼠标悬停事件
const viewRulesButton = document.getElementById('viewRulesButton');
const gameRules = document.getElementById('gameRules');

viewRulesButton.addEventListener('mouseenter', () => {
    gameRules.style.display = 'block';
});

viewRulesButton.addEventListener('mouseleave', () => {
    gameRules.style.display = 'none';
});

// 监听“暂停/继续”按钮点击事件
const pauseContinueButton = document.getElementById('pauseContinueButton');
pauseContinueButton.addEventListener('click', togglePause);

// 开始游戏
initGame();
startGame();

### 代码解释

1. **isPaused**：一个布尔值，用于存储游戏是否处于暂停状态。
2. **togglePause**：切换游戏暂停和继续状态的函数。
3. **事件监听器**：在“暂停/继续”按钮上添加一个点击事件监听器。

这样，当你点击“暂停/继续”按钮时，游戏将会暂停或继续。试试看，如果有任何问题或需要进一步的修改，请随时告诉我哦！

kaia

ZLJ 发表于 2024-07-18 16:52
你好，我刚学习了代码的控制结构，我想给贪吃蛇增加游 ...

当然可以！为了实现游戏的暂停和继续功能，我们可以添加一个按钮来切换游戏的状态，以及在JavaScript中控制游戏的运行和暂停。我们一起来实现这些功能吧！

### HTML部分

首先，在你的HTML文件中添加一个“暂停/继续”按钮：

1. <!DOCTYPE html>
   
2. <html lang="en">
   
3. <head>
   
4.     <meta charset="UTF-8">
   
5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
   
6.     <title>贪吃蛇游戏</title>
   
7.     <link rel="stylesheet" href="styles.css">
   
8. </head>
   
9. <body>
   
10. 
    
11.     <h1>贪吃蛇游戏</h1>
    
12. 
    
13.     <p>欢迎来到贪吃蛇游戏！</p>
    
14. 
    
15.     <canvas id="gameCanvas"></canvas>
    
16. 
    
17.     <div id="gameOver" style="display:none;">
    
18.         <h2>游戏结束</h2>
    
19.         <p>很遗憾！得分: <span id="score">0</span></p>
    
20.         <button onclick="startGame()">开始游戏</button>
    
21.     </div>
    
22. 
    
23.     <button id="pauseButton">暂停</button>
    
24.     <button id="viewRulesButton">查看规则</button>
    
25.     <div id="gameRules" style="display:none;">
    
26.         <h3>游戏规则：</h3>
    
27.         <ul>
    
28.             <li>用方向键控制蛇的移动。</li>
    
29.             <li>吃到食物得分并延长蛇身。</li>
    
30.             <li>撞到墙壁或自己的身体则游戏结束。</li>
    
31.         </ul>
    
32.     </div>
    
33. 
    
34.     <audio id="eatSound" src="audio/eat.mp3"></audio>
    
35.     <script src="script.js"></script>
    
36. 
    
37. </body>
    
38. </html>

复制代码

### CSS部分

CSS部分保持不变，继续使用已有的样式。

1. /* styles.css */
   
2. body {
   
3.     display: flex;
   
4.     justify-content: center;
   
5.     align-items: center;
   
6.     height: 100vh;
   
7.     margin: 0;
   
8.     background-color: #000;
   
9.     flex-direction: column;
   
10. }
    
11. 
    
12. canvas {
    
13.     border: 1px solid #fff;
    
14. }
    
15. 
    
16. #gameOver {
    
17.     position: absolute;
    
18.     text-align: center;
    
19.     color: white;
    
20. }
    
21. 
    
22. button {
    
23.     padding: 10px 20px;
    
24.     font-size: 16px;
    
25.     color: black;
    
26.     background-color: #9370DB;
    
27.     border: none;
    
28.     border-radius: 5px;
    
29.     cursor: pointer;
    
30. }
    
31. 
    
32. /* 新增规则样式 */
    
33. #gameRules {
    
34.     color: white;
    
35.     margin-top: 20px;
    
36.     background: rgba(0, 0, 0, 0.7);
    
37.     padding: 10px;
    
38.     border-radius: 5px;
    
39. }

复制代码

### JavaScript部分

在JavaScript中，添加暂停和继续功能。

1. // script.js
   
2. const canvas = document.getElementById("gameCanvas");
   
3. const ctx = canvas.getContext("2d");
   
4. 
   
5. canvas.width = 400;
   
6. canvas.height = 400;
   
7. 
   
8. const box = 20;
   
9. let snake;
   
10. let food;
    
11. let d;
    
12. let score;
    
13. let game;
    
14. let gamePaused = false; // 添加一个变量来表示游戏是否暂停
    
15. 
    
16. // 获取音频元素
    
17. const eatSound = document.getElementById("eatSound");
    
18. 
    
19. // 播放音效函数
    
20. function playEatSound() {
    
21.     eatSound.currentTime = 0; // 每次播放前重置播放时间
    
22.     eatSound.play();
    
23. }
    
24. 
    
25. // 初始化游戏
    
26. function initGame() {
    
27.     snake = [{ x: 9 * box, y: 10 * box }]; // 初始蛇的位置
    
28.     food = {
    
29.         x: Math.floor(Math.random() * 19 + 1) * box,
    
30.         y: Math.floor(Math.random() * 19 + 1) * box
    
31.     };
    
32.     score = 0;
    
33.     d = null;
    
34. }
    
35. 
    
36. // 启动游戏
    
37. function startGame() {
    
38.     document.getElementById("gameOver").style.display = "none";
    
39.     initGame();
    
40.     if (game) clearInterval(game);
    
41.     game = setInterval(draw, 500); // 设置游戏速度为500毫秒
    
42. }
    
43. 
    
44. // 暂停/继续游戏
    
45. function togglePause() {
    
46.     if (gamePaused) {
    
47.         game = setInterval(draw, 500); // 恢复游戏
    
48.         document.getElementById("pauseButton").innerText = "暂停";
    
49.     } else {
    
50.         clearInterval(game); // 暂停游戏
    
51.         document.getElementById("pauseButton").innerText = "继续";
    
52.     }
    
53.     gamePaused = !gamePaused;
    
54. }
    
55. 
    
56. // 监听键盘事件
    
57. document.addEventListener("keydown", direction);
    
58. function direction(event) {
    
59.     if (event.keyCode == 37 && d !== "RIGHT") {
    
60.         d = "LEFT";
    
61.     } else if (event.keyCode == 38 && d !== "DOWN") {
    
62.         d = "UP";
    
63.     } else if (event.keyCode == 39 && d !== "LEFT") {
    
64.         d = "RIGHT";
    
65.     } else if (event.keyCode == 40 && d !== "UP") {
    
66.         d = "DOWN";
    
67.     }
    
68. }
    
69. 
    
70. function collision(newHead, array) {
    
71.     for (let i = 0; i < array.length; i++) {
    
72.         if (newHead.x === array[i].x && newHead.y === array[i].y) {
    
73.             return true;
    
74.         }
    
75.     }
    
76.     return false;
    
77. }
    
78. 
    
79. // 绘制游戏
    
80. function draw() {
    
81.     ctx.fillStyle = "#000";
    
82.     ctx.fillRect(0, 0, canvas.width, canvas.height);
    
83. 
    
84.     for (let i = 0; i < snake.length; i++) {
    
85.         ctx.fillStyle = (i === 0) ? "green" : "white";
    
86.         ctx.fillRect(snake[i].x, snake[i].y, box, box);
    
87. 
    
88.         ctx.strokeStyle = "red";
    
89.         ctx.strokeRect(snake[i].x, snake[i].y, box, box);
    
90.     }
    
91. 
    
92.     ctx.fillStyle = "red";
    
93.     ctx.fillRect(food.x, food.y, box, box);
    
94. 
    
95.     let snakeX = snake[0].x;
    
96.     let snakeY = snake[0].y;
    
97. 
    
98.     if (d === "LEFT") snakeX -= box;
    
99.     if (d === "UP") snakeY -= box;
    
100.     if (d === "RIGHT") snakeX += box;
     
101.     if (d === "DOWN") snakeY += box;
     
102. 
     
103.     if (snakeX === food.x && snakeY === food.y) {
     
104.         score += 1; // 每次吃到食物时分数增加1
     
105.         
     
106.         // 播放音效
     
107.         playEatSound();
     
108. 
     
109.         food = {
     
110.             x: Math.floor(Math.random() * 19 + 1) * box,
     
111.             y: Math.floor(Math.random() * 19 + 1) * box
     
112.         };
     
113.     } else {
     
114.         snake.pop();
     
115.     }
     
116. 
     
117.     let newHead = { x: snakeX, y: snakeY };
     
118. 
     
119.     if (snakeX < 0 || snakeY < 0 || snakeX >= canvas.width || snakeY >= canvas.height || collision(newHead, snake)) {
     
120.         clearInterval(game);
     
121.         document.getElementById("score").innerText = score;
     
122.         document.getElementById("gameOver").style.display = "block";
     
123.         return;
     
124.     }
     
125. 
     
126.     snake.unshift(newHead);
     
127. 
     
128.     ctx.fillStyle = "white";
     
129.     ctx.font = "45px Changa one";
     
130.     ctx.fillText(score, 2 * box, 1.6 * box);
     
131. }
     
132. 
     
133. // 添加鼠标悬停事件
     
134. const viewRulesButton = document.getElementById('viewRulesButton');
     
135. const gameRules = document.getElementById('gameRules');
     
136. 
     
137. viewRulesButton.addEventListener('mouseenter', () => {
     
138.     gameRules.style.display = 'block';
     
139. });
     
140. 
     
141. viewRulesButton.addEventListener('mouseleave', () => {
     
142.     gameRules.style.display = 'none';
     
143. });
     
144. 
     
145. // 添加暂停按钮点击事件
     
146. document.getElementById('pauseButton').addEventListener('click', togglePause);
     
147. 
     
148. // 开始游戏
     
149. initGame();
     
150. startGame();

复制代码

### 代码解释

1. **HTML**：
   - 在HTML中添加了一个“暂停”按钮 `<button id="pauseButton">暂停</button>`。

2. **JavaScript**：
   - 添加了一个 `gamePaused` 变量以表示游戏是否处于暂停状态。
   - 定义了 `togglePause` 函数，用来切换游戏的暂停和继续状态：
     - 如果游戏暂停，则重新启动计时器并将按钮文本设置为“暂停”。
     - 如果游戏在运行，则清除计时器并将按钮文本设置为“继续”。
   - 为“暂停”按钮添加点击事件监听器，调用 `togglePause` 函数。

这样，当你点击“暂停”按钮时，游戏会暂停；再次点击该按钮，游戏会继续。试试看，如果有任何问题或进一步的需求，请随时告诉我哦！

kaia

ZLJ 发表于 2024-07-18 16:55
你好，我刚学习了代码的控制结构，我想给贪吃蛇增加游 ...

当然可以！首先，我们要理解如何用代码来实现暂停和继续的功能。其实，这个过程就像是我们在游戏中按下“暂停”按钮，然后用另一个按钮来恢复游戏。

### 步骤一：添加监听键盘事件
我们需要让程序知道什么时候按下了“暂停”键和“继续”键。一般情况下，我们会用键盘的某些特定按键来控制，比如“P”键用来暂停，“R”键用来恢复。

### 步骤二：建立标识符
我们需要一个变量来表示游戏是暂停的还是正在进行的。这就好像在问自己：“现在的游戏状态是暂停还是在运行呢？”

### 步骤三：修改游戏的主循环
我们还要调整贪吃蛇游戏的主循环，让它能够根据我们设定的状态来决定是否继续运行。

下面是一个简单的示例代码，假设你已经有一个基本的贪吃蛇游戏了。我们只需要在你的代码基础上添加这些部分：

1. // 假设这是你贪吃蛇游戏的已有代码
   
2. let isPaused = false; // 游戏是否暂停的标志
   
3. 
   
4. // 监听键盘事件
   
5. document.addEventListener('keydown', function(event) {
   
6.     if (event.key === 'p' || event.key === 'P') {
   
7.         // 按下P键，暂停游戏
   
8.         isPaused = true;
   
9.     } else if (event.key === 'r' || event.key === 'R') {
   
10.         // 按下R键，继续游戏
    
11.         isPaused = false;
    
12.     }
    
13. });
    
14. 
    
15. // 游戏的主循环
    
16. function gameLoop() {
    
17.     if (!isPaused) {
    
18.         // 只有在游戏未暂停时，才进行更新和绘制
    
19.         updateGame(); // 更新蛇的位置和食物等游戏状态
    
20.         drawGame(); // 绘制游戏画面
    
21.     }
    
22.    
    
23.     requestAnimationFrame(gameLoop); // 下一帧继续循环
    
24. }
    
25. 
    
26. // 更新游戏函数
    
27. function updateGame() {
    
28.     // 更新贪吃蛇的位置、判断碰撞等等
    
29. }
    
30. 
    
31. // 绘制游戏函数
    
32. function drawGame() {
    
33.     // 将贪吃蛇和食物绘制到屏幕上
    
34. }
    
35. 
    
36. // 启动游戏
    
37. requestAnimationFrame(gameLoop);

复制代码

在这个示例中，我们做了以下几件事：

1. **设置标识符`isPaused`**：用来标记当前游戏是否处于暂停状态。
2. **监听键盘事件**：当用户按下“P”键时，游戏变为暂停状态；当用户按下“R”键时，游戏恢复运行。
3. **修改游戏主循环`gameLoop`**：如果游戏没有暂停（`isPaused`为false），则更新并绘制游戏。否则不做任何更新或绘制工作。

这样，你的贪吃蛇游戏就可以通过按下特定按键来暂停和继续了。希望这能帮到你！如果你还有其他问题，随时来问我哦！

ZLJ

你好，我刚学习了代码的控制结构，我想给贪吃蛇增加游戏暂停和继续的功能，你可以帮我修改吗？@ai

ZLJ

kaia 发表于 2024-7-18 15:13
当然可以！我们可以使用鼠标悬停事件来实现这个功能。当鼠标移动到“查看规则”按钮上时，显示游戏规则的 ...

你好，我刚学习了代码的控制结构，我想给贪吃蛇增加游戏暂停和继续的功能，你可以帮我修改吗？

kaia

ZLJ 发表于 2024-07-18 15:12
我还想用鼠标悬停事件实现一个功能，这个功能是当我鼠 ...

当然可以！我们可以使用鼠标悬停事件来实现这个功能。当鼠标移动到“查看规则”按钮上时，显示游戏规则的文字；当鼠标移开时，隐藏这些文字。

### HTML部分

在你的HTML中添加一个新的按钮和一个用于显示游戏规则的`div`。比如，可以在现有的HTML代码中添加如下内容：

1. <!DOCTYPE html>
   
2. <html lang="zh-CN">
   
3. <head>
   
4.     <meta charset="UTF-8">
   
5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
   
6.     <link rel="stylesheet" href="styles.css">
   
7.     <title>贪吃蛇游戏</title>
   
8. </head>
   
9. <body>
   
10.     <h1>贪吃蛇游戏</h1>
    
11.     <canvas id="gameCanvas"></canvas>
    
12.     <div id="gameOver" style="display:none;">
    
13.         <h2>游戏结束</h2>
    
14.         <p>很遗憾！得分: <span id="score">0</span></p>
    
15.         <button onclick="startGame()">开始游戏</button>
    
16.     </div>
    
17.    
    
18.     <!-- 新增查看规则按钮和规则文字 -->
    
19.     <button id="viewRulesButton">查看规则</button>
    
20.     <div id="gameRules" style="display:none;">
    
21.         <p>游戏规则：</p>
    
22.         <ul>
    
23.             <li>用方向键控制蛇的移动。</li>
    
24.             <li>吃到食物得分并延长蛇身。</li>
    
25.             <li>撞到墙壁或自己的身体则游戏结束。</li>
    
26.         </ul>
    
27.     </div>
    
28. 
    
29.     <!-- 增加音效文件 -->
    
30.     <audio id="eatSound" src="audio/eat.mp3"></audio>
    
31. 
    
32.     <script src="script.js"></script>
    
33. </body>
    
34. </html>

复制代码

### CSS部分

添加一些CSS以美化显示的规则文字：

1. /* styles.css */
   
2. body {
   
3.     display: flex;
   
4.     justify-content: center;
   
5.     align-items: center;
   
6.     height: 100vh;
   
7.     margin: 0;
   
8.     background-color: #000;
   
9.     flex-direction: column;
   
10. }
    
11. 
    
12. canvas {
    
13.     border: 1px solid #fff;
    
14. }
    
15. 
    
16. #gameOver {
    
17.     position: absolute;
    
18.     text-align: center;
    
19.     color: white;
    
20. }
    
21. 
    
22. button {
    
23.     padding: 10px 20px;
    
24.     font-size: 16px;
    
25.     color: black;
    
26.     background-color: #9370DB;
    
27.     border: none;
    
28.     border-radius: 5px;
    
29.     cursor: pointer;
    
30. }
    
31. 
    
32. /* 新增规则样式 */
    
33. #gameRules {
    
34.     color: white;
    
35.     margin-top: 20px;
    
36.     background: rgba(0, 0, 0, 0.7);
    
37.     padding: 10px;
    
38.     border-radius: 5px;
    
39. }

复制代码

### JavaScript部分

接下来，在JavaScript中添加鼠标悬停事件的监听：

1. // script.js
   
2. const canvas = document.getElementById("gameCanvas");
   
3. const ctx = canvas.getContext("2d");
   
4. 
   
5. canvas.width = 400;
   
6. canvas.height = 400;
   
7. 
   
8. const box = 20;
   
9. let snake;
   
10. let food;
    
11. let d;
    
12. let score;
    
13. let game;
    
14. 
    
15. // 获取音频元素
    
16. const eatSound = document.getElementById("eatSound");
    
17. 
    
18. // 播放音效函数
    
19. function playEatSound() {
    
20.     eatSound.currentTime = 0; // 每次播放前重置播放时间
    
21.     eatSound.play();
    
22. }
    
23. 
    
24. // 初始化游戏
    
25. function initGame() {
    
26.     snake = ; // 初始蛇的位置
    
27.     food = {
    
28.         x: Math.floor(Math.random() * 19 + 1) * box,
    
29.         y: Math.floor(Math.random() * 19 + 1) * box
    
30.     };
    
31.     score = 0;
    
32.     d = null;
    
33. }
    
34. 
    
35. // 启动游戏
    
36. function startGame() {
    
37.     document.getElementById("gameOver").style.display = "none";
    
38.     initGame();
    
39.     if (game) clearInterval(game);
    
40.     game = setInterval(draw, 500); // 设置游戏速度为500毫秒
    
41. }
    
42. 
    
43. // 监听键盘事件
    
44. document.addEventListener("keydown", direction);
    
45. function direction(event) {
    
46.     if (event.keyCode == 37 && d !== "RIGHT") {
    
47.         d = "LEFT";
    
48.     } else if (event.keyCode == 38 && d !== "DOWN") {
    
49.         d = "UP";
    
50.     } else if (event.keyCode == 39 && d !== "LEFT") {
    
51.         d = "RIGHT";
    
52.     } else if (event.keyCode == 40 && d !== "UP") {
    
53.         d = "DOWN";
    
54.     }
    
55. }
    
56. 
    
57. function collision(newHead, array) {
    
58.     for (let i = 0; i < array.length; i++) {
    
59.         if (newHead.x === array[i].x && newHead.y === array[i].y) {
    
60.             return true;
    
61.         }
    
62.     }
    
63.     return false;
    
64. }
    
65. 
    
66. // 绘制游戏
    
67. function draw() {
    
68.     ctx.fillStyle = "#000";
    
69.     ctx.fillRect(0, 0, canvas.width, canvas.height);
    
70. 
    
71.     for (let i = 0; i < snake.length; i++) {
    
72.         ctx.fillStyle = (i === 0) ? "green" : "white";
    
73.         ctx.fillRect(snake[i].x, snake[i].y, box, box);
    
74. 
    
75.         ctx.strokeStyle = "red";
    
76.         ctx.strokeRect(snake[i].x, snake[i].y, box, box);
    
77.     }
    
78. 
    
79.     ctx.fillStyle = "red";
    
80.     ctx.fillRect(food.x, food.y, box, box);
    
81. 
    
82.     let snakeX = snake[0].x;
    
83.     let snakeY = snake[0].y;
    
84. 
    
85.     if (d === "LEFT") snakeX -= box;
    
86.     if (d === "UP") snakeY -= box;
    
87.     if (d === "RIGHT") snakeX += box;
    
88.     if (d === "DOWN") snakeY += box;
    
89. 
    
90.     if (snakeX === food.x && snakeY === food.y) {
    
91.         score += 1; // 每次吃到食物时分数增加1
    
92.         
    
93.         // 播放音效
    
94.         playEatSound();
    
95. 
    
96.         food = {
    
97.             x: Math.floor(Math.random() * 19 + 1) * box,
    
98.             y: Math.floor(Math.random() * 19 + 1) * box
    
99.         };
    
100.     } else {
     
101.         snake.pop();
     
102.     }
     
103. 
     
104.     let newHead = { x: snakeX, y: snakeY };
     
105. 
     
106.     if (snakeX < 0 || snakeY < 0 || snakeX >= canvas.width || snakeY >= canvas.height || collision(newHead, snake)) {
     
107.         clearInterval(game);
     
108.         document.getElementById("score").innerText = score;
     
109.         document.getElementById("gameOver").style.display = "block";
     
110.         return;
     
111.     }
     
112. 
     
113.     snake.unshift(newHead);
     
114. 
     
115.     ctx.fillStyle = "white";
     
116.     ctx.font = "45px Changa one";
     
117.     ctx.fillText(score, 2 * box, 1.6 * box);
     
118. }
     
119. 
     
120. // 添加鼠标悬停事件
     
121. const viewRulesButton = document.getElementById('viewRulesButton');
     
122. const gameRules = document.getElementById('gameRules');
     
123. 
     
124. viewRulesButton.addEventListener('mouseenter', () => {
     
125.     gameRules.style.display = 'block';
     
126. });
     
127. 
     
128. viewRulesButton.addEventListener('mouseleave', () => {
     
129.     gameRules.style.display = 'none';
     
130. });
     
131. 
     
132. // 开始游戏
     
133. initGame();
     
134. startGame();

复制代码

### 代码解释

1. **HTML**：
   - 新增了一个“查看规则”按钮和一个用于显示游戏规则的`div`元素。

2. **CSS**：
   - 为显示规则的`div`添加了一些样式，使其外观更好看。

3. **JavaScript**：
   - 新增了两个事件监听器，分别监听“查看规则”按钮的鼠标进入和离开事件。
   - 当鼠标进入按钮区域时，显示游戏规则；当鼠标离开按钮区域时，隐藏游戏规则。

这样，当你将鼠标移动到“查看规则”按钮上时，就会显示出游戏规则的文字啦！试试看，如果有任何问题或进一步的需求，请随时告诉我哦！

ZLJ

kaia 发表于 2024-7-18 14:16
当然可以！我们可以创建一个专门播放音效的函数，然后在蛇吃到食物时调用这个函数。以下是修改后的代码： ...

我还想用鼠标悬停事件实现一个功能，这个功能是当我鼠标移动到一个新的“查看规则”按钮上时，出现游戏规则的文字。

kaia

ZLJ 发表于 2024-07-18 14:15
你好，可以用函数帮我实现蛇吃到食物之后出现音效吗？ ...

当然可以！我们可以创建一个专门播放音效的函数，然后在蛇吃到食物时调用这个函数。以下是修改后的代码：

### HTML部分

在HTML中添加一个音频元素，放置在适当的位置：

1. <!DOCTYPE html>
   
2. <html lang="zh-CN">
   
3. <head>
   
4.     <meta charset="UTF-8">
   
5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
   
6.     <title>贪吃蛇游戏</title>
   
7.     <link rel="stylesheet" href="styles.css">
   
8. </head>
   
9. <body>
   
10.     <h1>欢迎来到贪吃蛇游戏！</h1>
    
11.     <canvas id="gameCanvas"></canvas>
    
12.    
    
13.     <div id="gameOver" style="display: none;">
    
14.         <h2>游戏结束</h2>
    
15.         <p>很遗憾！得分: <span id="score">0</span></p>
    
16.         <button onclick="startGame()">开始游戏</button>
    
17.     </div>
    
18. 
    
19.     <audio id="eatSound" src="audio/eat.mp3"></audio>
    
20. 
    
21.     <script src="script.js"></script>
    
22. </body>
    
23. </html>

复制代码

### CSS部分

这里保持不变。

1. /* styles.css */
   
2. body {
   
3.     display: flex;
   
4.     justify-content: center;
   
5.     align-items: center;
   
6.     height: 100vh;
   
7.     margin: 0;
   
8.     background-color: #000;
   
9.     flex-direction: column;
   
10. }
    
11. 
    
12. canvas {
    
13.     border: 1px solid #fff;
    
14. }
    
15. 
    
16. #gameOver {
    
17.     position: absolute;
    
18.     text-align: center;
    
19.     color: white;
    
20. }
    
21. 
    
22. button {
    
23.     padding: 10px 20px;
    
24.     font-size: 16px;
    
25.     color: black;
    
26.     background-color: #9370DB;
    
27.     border: none;
    
28.     border-radius: 5px;
    
29.     cursor: pointer;
    
30. }

复制代码

### JavaScript部分

在JavaScript中编写一个函数来播放音效，并在蛇吃到食物时调用它：

1. // script.js
   
2. const canvas = document.getElementById("gameCanvas");
   
3. const ctx = canvas.getContext("2d");
   
4. 
   
5. canvas.width = 400;
   
6. canvas.height = 400;
   
7. 
   
8. const box = 20;
   
9. let snake;
   
10. let food;
    
11. let d;
    
12. let score;
    
13. let game;
    
14. 
    
15. // 获取音频元素
    
16. const eatSound = document.getElementById("eatSound");
    
17. 
    
18. // 播放音效函数
    
19. function playEatSound() {
    
20.     eatSound.currentTime = 0; // 每次播放前重置播放时间
    
21.     eatSound.play();
    
22. }
    
23. 
    
24. // 初始化游戏
    
25. function initGame() {
    
26.     snake = [{x: 9 * box, y: 10 * box}]; // 初始蛇的位置
    
27.     food = {
    
28.         x: Math.floor(Math.random() * 19 + 1) * box,
    
29.         y: Math.floor(Math.random() * 19 + 1) * box
    
30.     };
    
31.     score = 0;
    
32.     d = null;
    
33. }
    
34. 
    
35. // 启动游戏
    
36. function startGame() {
    
37.     document.getElementById("gameOver").style.display = "none";
    
38.     initGame();
    
39.     if (game) clearInterval(game);
    
40.     game = setInterval(draw, 500); // 设置游戏速度为500毫秒
    
41. }
    
42. 
    
43. // 监听键盘事件
    
44. document.addEventListener("keydown", direction);
    
45. function direction(event) {
    
46.     if (event.keyCode == 37 && d !== "RIGHT") {
    
47.         d = "LEFT";
    
48.     } else if (event.keyCode == 38 && d !== "DOWN") {
    
49.         d = "UP";
    
50.     } else if (event.keyCode == 39 && d !== "LEFT") {
    
51.         d = "RIGHT";
    
52.     } else if (event.keyCode == 40 && d !== "UP") {
    
53.         d = "DOWN";
    
54.     }
    
55. }
    
56. 
    
57. function collision(newHead, array) {
    
58.     for (let i = 0; i < array.length; i++) {
    
59.         if (newHead.x === array[i].x && newHead.y === array[i].y) {
    
60.             return true;
    
61.         }
    
62.     }
    
63.     return false;
    
64. }
    
65. 
    
66. // 绘制游戏
    
67. function draw() {
    
68.     ctx.fillStyle = "#000";
    
69.     ctx.fillRect(0, 0, canvas.width, canvas.height);
    
70. 
    
71.     for (let i = 0; i < snake.length; i++) {
    
72.         ctx.fillStyle = (i === 0) ? "green" : "white";
    
73.         ctx.fillRect(snake[i].x, snake[i].y, box, box);
    
74. 
    
75.         ctx.strokeStyle = "red";
    
76.         ctx.strokeRect(snake[i].x, snake[i].y, box, box);
    
77.     }
    
78. 
    
79.     ctx.fillStyle = "red";
    
80.     ctx.fillRect(food.x, food.y, box, box);
    
81. 
    
82.     let snakeX = snake[0].x;
    
83.     let snakeY = snake[0].y;
    
84. 
    
85.     if (d === "LEFT") snakeX -= box;
    
86.     if (d === "UP") snakeY -= box;
    
87.     if (d === "RIGHT") snakeX += box;
    
88.     if (d === "DOWN") snakeY += box;
    
89. 
    
90.     if (snakeX === food.x && snakeY === food.y) {
    
91.         score += 1; // 每次吃到食物时分数增加1
    
92.         
    
93.         // 播放音效
    
94.         playEatSound();
    
95. 
    
96.         food = {
    
97.             x: Math.floor(Math.random() * 19 + 1) * box,
    
98.             y: Math.floor(Math.random() * 19 + 1) * box
    
99.         };
    
100.     } else {
     
101.         snake.pop();
     
102.     }
     
103. 
     
104.     let newHead = { x: snakeX, y: snakeY };
     
105. 
     
106.     if (snakeX < 0 || snakeY < 0 || snakeX >= canvas.width || snakeY >= canvas.height || collision(newHead, snake)) {
     
107.         clearInterval(game);
     
108.         document.getElementById("score").innerText = score;
     
109.         document.getElementById("gameOver").style.display = "block";
     
110.         return;
     
111.     }
     
112. 
     
113.     snake.unshift(newHead);
     
114. 
     
115.     ctx.fillStyle = "white";
     
116.     ctx.font = "45px Changa one";
     
117.     ctx.fillText(score, 2 * box, 1.6 * box);
     
118. }
     
119. 
     
120. // 开始游戏
     
121. initGame();
     
122. startGame();

复制代码

### 代码解释

1. **HTML**：
   - 在`<body>`中添加了一个`<audio>`元素，用于存放吃到食物时的音效。

2. **JavaScript**：
   - 新建了`playEatSound`函数，用于播放吃到食物时的音效。
   - 修改 `draw` 函数，在蛇吃到食物时调用 `playEatSound` 来播放音效。

这样，每当蛇吃到食物时，音效就会被播放。你可以根据需要调整音效和音频文件路径。试试看，如果有任何问题或进一步的需求，请随时告诉我哦！

ZLJ

kaia 发表于 2024-7-16 20:59
好的，王桃桃，我来解释一下你的JavaScript代码在游戏开始后的函数调用逻辑链是怎样的。

### 函数调用逻 ...

你好，可以用函数帮我实现蛇吃到食物之后出现音效吗？

kaia

ZLJ 发表于 2024-07-16 20:59
好的，我想知道在js里面的函数调用逻辑链是什么样的？ ...

好的，王桃桃，我来解释一下你的JavaScript代码在游戏开始后的函数调用逻辑链是怎样的。

### 函数调用逻辑链

1. **初始化和启动游戏**：
    - 页面加载完成后，`initGame()`和`startGame()`函数被依次调用。这两个函数是在脚本的最底部调用的。
   

1. initGame();
   
2.     startGame();

复制代码

2. **初始化游戏 `initGame()`**：
    - 设置蛇的初始位置和属性。
    - 随机生成食物的位置。
    - 将得分设为0，并初始化方向为`null`。

3. **启动游戏 `startGame()`**：
    - 隐藏“游戏结束”的信息。
    - 初始化游戏状态。
    - 如果之前有游戏在运行，则清除定时器。
    - 使用`setInterval(draw, 500)`每500毫秒调用一次`draw()`函数，这个定时器会让游戏画面不断更新。
   

1. game = setInterval(draw, 500); // 每500毫秒调用draw()一次

复制代码

4. **绘制游戏 `draw()`**：
    - 清空画布，用黑色填充。
    - 绘制蛇的每一节。
    - 绘制食物。
    - 根据当前方向移动蛇头。
    - 检查碰撞：是否撞墙或者咬到自己。如果发生碰撞，游戏结束，显示得分并停止定时器。
    - 检查是否吃到食物，如果是，则增加得分并生成新的食物。否则，将蛇尾移出。
    - 更新蛇头的位置。
    - 显示当前分数在画布上。

5. **方向控制 `direction(event)`**：
    - 根据按下的键修改蛇移动的方向（上、下、左、右）。
    - 通过事件监听器`document.addEventListener("keydown", direction);`绑定到键盘事件上。

### 更详细的顺序

1. **页面加载**：
    - 浏览器加载HTML、CSS和JavaScript文件。
    - JavaScript文件中的`initGame();`和`startGame();`首先被执行。

2. **initGame()** 被调用：
    - 设置蛇的初始位置。
    - 设置食物随机位置。
    - 初始化分数和方向。

3. **startGame()** 被调用：
    - 隐藏'gameOver'消息。
    - 再次初始化游戏（确保无误）。
    - 使用`setInterval`每500毫秒调用一次`draw()`函数。

4. **第一次调用 draw()**：
    - 用黑色填充整个画布（清理）。
    - 绘制蛇。
    - 绘制食物。
    - 根据当前方向移动蛇头。
    - 检查碰撞情况。
    - 检查是否吃到食物。
    - 在画布上显示当前得分。

5. **之后每500毫秒调用 draw()**：
    - 继续上述绘制操作，不断更新画面。

6. **用户按键事件**：
    - 当用户按下方向键时，`direction(event)`被调用，根据按键改变蛇的方向。

通过以上解释，你就能看到函数之间的调用关系和逻辑链了。如果还有任何具体函数或逻辑上的疑问，请随时告诉我哦，我会进一步帮你解析的！