设为首页收藏本站

科学教育

搜索
科学教育»互动交流 › 教学互动 › 人机互动 › 完善游戏
12下一页
返回列表 发新帖
查看: 6871|回复: 17
打印 上一主题 下一主题

完善游戏

[复制链接]
张复礼

3

主题

41

帖子

137

积分

注册会员

Rank: 2

积分
137
跳转到指定楼层
楼主
发表于 2024-8-12 14:11:28 | 只看该作者 回帖奖励 |正序浏览 |阅读模式
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');

let snake = [{ x: 50, y: 50 }];
let food = { x: 0, y: 0 };
let dx = 10;
let dy = 0;
let score = 0;
let gameOver = false;

// 创建音效对象
const eatSound = new Audio('eat.mp3');

// 创建背景音乐对象
const backgroundMusic = new Audio('background.mp3');
backgroundMusic.loop = true; // 设置循环播放

document.addEventListener("keydown", changeDirection);

function randomFoodPosition() {
    const x = Math.floor(Math.random() * (canvas.width / 10)) * 10;
    const y = Math.floor(Math.random() * (canvas.height / 10)) * 10;
    return { x, y };
}

function clearCanvas() {
    ctx.fillStyle = "white";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
}

function drawSnake() {
    snake.forEach(drawSnakePart);
}

function drawSnakePart(snakePart) {
    ctx.fillStyle = 'lightgreen';
    ctx.strokeStyle = 'darkgreen';
    ctx.fillRect(snakePart.x, snakePart.y, 10, 10);
    ctx.strokeRect(snakePart.x, snakePart.y, 10, 10);
}

function drawFood() {
    ctx.fillStyle = 'lightpink';
    ctx.fillRect(food.x, food.y, 10, 10);
}

function moveSnake() {
    const head = { x: snake[0].x + dx, y: snake[0].y + dy };

    // 检测碰壁
    if (head.x < 0 || head.x >= canvas.width || head.y < 0 || head.y >= canvas.height || collision(head)) {
        gameOver = true;
        return;
    }

    snake.unshift(head);

    // 检查是否吃到食物
    if (head.x === food.x && head.y === food.y) {
        score++;
        food = randomFoodPosition();
        playEatSound(); // 播放音效
    } else {
        snake.pop();
    }
}

function collision(head) {
    for (let i = 1; i < snake.length; i++) {
        if (snake.x === head.x && snake.y === head.y) {
            return true;
        }
    }
    return false;
}

// 播放吃食物的音效
function playEatSound() {
    eatSound.play();
}

// 播放背景音乐
function playBackgroundMusic() {
    backgroundMusic.play();
}

// 停止背景音乐
function stopBackgroundMusic() {
    backgroundMusic.pause();
    backgroundMusic.currentTime = 0; // 重置音乐到开头
}

function main() {
    if (gameOver) {
        displayGameOver();
        return;
    }

    setTimeout(function onTick() {
        clearCanvas();
        drawFood();
        moveSnake();
        drawSnake();
        main();
    }, 100);
}

function changeDirection(event) {
    const LEFT_KEY = 37;
    const RIGHT_KEY = 39;
    const UP_KEY = 38;
    const DOWN_KEY = 40;

    const keyPressed = event.keyCode;
    const goingUp = dy === -10;
    const goingDown = dy === 10;
    const goingRight = dx === 10;
    const goingLeft = dx === -10;

    if (keyPressed === LEFT_KEY && !goingRight) {
        dx = -10;
        dy = 0;
    }

    if (keyPressed === UP_KEY && !goingDown) {
        dx = 0;
        dy = -10;
    }

    if (keyPressed === RIGHT_KEY && !goingLeft) {
        dx = 10;
        dy = 0;
    }

    if (keyPressed === DOWN_KEY && !goingUp) {
        dx = 0;
        dy = 10;
    }
}

// 显示游戏结束
function displayGameOver() {
    ctx.fillStyle = "pink";
    ctx.font = "30px Arial";
     // 绘制“游戏结束！”位于中心稍上方
    ctx.fillText("很遗憾，游戏结束！", canvas.width / 2 - 115, canvas.height / 2 - 20);
    // 绘制得分位于中心稍下方
    ctx.fillText("得分: " + score, canvas.width / 2 - 50, canvas.height / 2 + 20);
    document.getElementById("startButton").style.display = "block";
    stopBackgroundMusic(); // 停止背景音乐
}


function startGame() {
    snake = [{ x: 50, y: 50 }];
    score = 0;
    dx = 10;
    dy = 0;
    gameOver = false;
    food = randomFoodPosition();
    document.getElementById('startButton').style.display = 'none';
    playBackgroundMusic(); // 播放背景音乐
    main();
}

food = randomFoodPosition();
main();

你好，以上是贪吃蛇游戏的js代码，请修改代码，使游戏的右边出现“游戏规则”悬停按钮，鼠标移到按钮上出现游戏规则。

回复

使用道具 举报

张复礼

3

主题

41

帖子

137

积分

注册会员

Rank: 2

积分
137
18#
 楼主| 发表于 2024-8-12 16:27:33 | 只看该作者
#startButton {
    display: none;
    padding: 10px 20px;
    font-size: 20px;
    margin-top: 20px;
    cursor: pointer;
    background-color:#DB516F;
    color: white;
    border: none;
    border-radius: 5px;
}
怎么设置开始按钮不隐藏。
回复 支持 反对

使用道具 举报

张复礼

3

主题

41

帖子

137

积分

注册会员

Rank: 2

积分
137
17#
 楼主| 发表于 2024-8-12 16:16:12 | 只看该作者
你好，我想在贪吃蛇游戏开始前增加一个欢迎页面。显示“欢迎来到贪吃蛇小游戏”，并出现“点击开始”按钮，点击后开始游戏。
回复 支持 反对

使用道具 举报

kaia

0

主题

1145

帖子

1715

积分

版主

Rank: 7Rank: 7Rank: 7

积分
1715
16#
发表于 2024-8-12 15:10:56 | 只看该作者
张复礼 发表于 2024-08-12 15:10
这是我的js文件，我想让游戏一开始就显示“开始按钮” ...


好的，我们可以按照以下步骤来实现点击“开始游戏”按钮后才开始游戏：

1. 初始化时显示“开始游戏”按钮。
2. 当点击“开始游戏”按钮时，隐藏按钮并启动游戏。

### 修改后的JavaScript文件

首先，我们需要在HTML中确保有一个带有id为`startButton`的按钮，然后我们在JavaScript中添加事件监听器，确保点击按钮时启动你的贪吃蛇游戏。

  1. const canvas = document.getElementById('gameCanvas');
  2. const ctx = canvas.getContext('2d');

  4. let snake = [];
  5. let food = { x: 0, y: 0 };
  6. let dx = 10;
  7. let dy = 0;
  8. let score = 0;
  9. let gameOver = false;
  10. let snakeColor = 'lightgreen'; // 默认颜色

  12. // 创建音效对象
  13. const eatSound = new Audio('eat.mp3');

  15. // 创建背景音乐对象
  16. const backgroundMusic = new Audio('background.mp3');
  17. backgroundMusic.loop = true; // 设置循环播放

  19. document.addEventListener("keydown", changeDirection);
  20. document.getElementById('snakeColor').addEventListener('change', function(event) {
  21.     snakeColor = event.target.value; // 更新贪吃蛇颜色
  22. });

  24. document.getElementById('startButton').addEventListener('click', startGame);

  26. function randomFoodPosition() {
  27.     const x = Math.floor(Math.random() * (canvas.width / 10)) * 10;
  28.     const y = Math.floor(Math.random() * (canvas.height / 10)) * 10;
  29.     return { x, y };
  30. }

  32. function clearCanvas() {
  33.     ctx.fillStyle = "white";
  34.     ctx.fillRect(0, 0, canvas.width, canvas.height);
  35. }

  37. function drawSnake() {
  38.     snake.forEach(drawSnakePart);
  39. }

  41. function drawSnakePart(snakePart) {
  42.     ctx.fillStyle = snakeColor; // 使用选择的颜色
  43.     ctx.strokeStyle = 'darkgreen';
  44.     ctx.fillRect(snakePart.x, snakePart.y, 10, 10);
  45.     ctx.strokeRect(snakePart.x, snakePart.y, 10, 10);
  46. }

  48. function drawFood() {
  49.     ctx.fillStyle = 'lightpink';
  50.     ctx.fillRect(food.x, food.y, 10, 10);
  51. }

  53. function moveSnake() {
  54.     const head = { x: snake[0].x + dx, y: snake[0].y + dy };

  56.     // 检测碰壁
  57.     if (head.x < 0 || head.x >= canvas.width || head.y < 0 || head.y >= canvas.height || collision(head)) {
  58.         gameOver = true;
  59.         return;
  60.     }

  62.     snake.unshift(head);

  64.     // 检查是否吃到食物
  65.     if (head.x === food.x && head.y === food.y) {
  66.         score++;
  67.         food = randomFoodPosition();
  68.         playEatSound(); // 播放音效
  69.     } else {
  70.         snake.pop();
  71.     }
  72. }

  74. function collision(head) {
  75.     for (let i = 1; i < snake.length; i++) {
  76.         if (snake[i].x === head.x && snake[i].y === head.y) {
  77.             return true;
  78.         }
  79.     }
  80.     return false;
  81. }

  83. // 播放吃食物的音效
  84. function playEatSound() {
  85.     eatSound.play();
  86. }

  88. // 播放背景音乐
  89. function playBackgroundMusic() {
  90.     backgroundMusic.play();
  91. }

  93. // 停止背景音乐
  94. function stopBackgroundMusic() {
  95.     backgroundMusic.pause();
  96.     backgroundMusic.currentTime = 0; // 重置音乐到开头
  97. }

  99. function main() {
  100.     if (gameOver) {
  101.         displayGameOver();
  102.         return;
  103.     }

  105.     setTimeout(function onTick() {
  106.         clearCanvas();
  107.         drawFood();
  108.         moveSnake();
  109.         drawSnake();
  110.         main();
  111.     }, 100);
  112. }

  114. function changeDirection(event) {
  115.     const LEFT_KEY = 37;
  116.     const RIGHT_KEY = 39;
  117.     const UP_KEY = 38;
  118.     const DOWN_KEY = 40;

  120.     const keyPressed = event.keyCode;
  121.     const goingUp = dy === -10;
  122.     const goingDown = dy === 10;
  123.     const goingRight = dx === 10;
  124.     const goingLeft = dx === -10;

  126.     if (keyPressed === LEFT_KEY && !goingRight) {
  127.         dx = -10;
  128.         dy = 0;
  129.     }

  131.     if (keyPressed === UP_KEY && !goingDown) {
  132.         dx = 0;
  133.         dy = -10;
  134.     }

  136.     if (keyPressed === RIGHT_KEY && !goingLeft) {
  137.         dx = 10;
  138.         dy = 0;
  139.     }

  141.     if (keyPressed === DOWN_KEY && !goingUp) {
  142.         dx = 0;
  143.         dy = 10;
  144.     }
  145. }

  147. // 显示游戏结束
  148. function displayGameOver() {
  149.     ctx.fillStyle = "pink";
  150.     ctx.font = "30px Arial";
  151.     // 绘制“游戏结束！”位于中心稍上方
  152.     ctx.fillText("很遗憾，游戏结束！", canvas.width / 2 - 115, canvas.height / 2 - 20);
  153.     // 绘制得分位于中心稍下方
  154.     ctx.fillText("得分: " + score, canvas.width / 2 - 50, canvas.height / 2 + 20);
  155.     document.getElementById("startButton").style.display = "block";
  156.     stopBackgroundMusic(); // 停止背景音乐
  157. }

  159. function startGame() {
  160.     snake = [{ x: 150, y: 150 }, { x: 140, y: 150 }, { x: 130, y: 150 }, { x: 120, y: 150 }, { x: 110, y: 150 }]; // 初始化蛇
  161.     score = 0;
  162.     dx = 10;
  163.     dy = 0;
  164.     gameOver = false;
  165.     food = randomFoodPosition();
  166.     document.getElementById('startButton').style.display = 'none';
  167.     playBackgroundMusic(); // 播放背景音乐
  168.     main();
  169. }

  171. // 获取按钮和规则内容的DOM元素
  172. const rulesButton = document.getElementById('rulesButton');
  173. const rulesContent = document.getElementById('rulesContent');

  175. // 当鼠标移到按钮上时，显示规则
  176. rulesButton.addEventListener('mouseover', function () {
  177.     rulesContent.style.display = 'block';
  178. });

  180. // 当鼠标离开按钮时，隐藏规则
  181. rulesButton.addEventListener('mouseout', function () {
  182.     rulesContent.style.display = 'none';
  183. });
复制代码


### 改动说明

1. **初始化`snake`数组**：在 `startGame` 函数中正确初始化贪吃蛇。
2. **添加“开始游戏”按钮点击事件监听器**：当按钮被点击时，调用 `startGame` 函数。
3. **显示和隐藏“开始游戏”按钮**：在 `displayGameOver` 和 `startGame` 中控制按钮的显示和隐藏。

以上修改应该能使游戏在点击“开始游戏”按钮后正常开始。如果还有任何问题或进一步的问题，请随时告诉我哦！
回复 支持 反对

使用道具 举报

张复礼

3

主题

41

帖子

137

积分

注册会员

Rank: 2

积分
137
15#
 楼主| 发表于 2024-8-12 15:10:02 | 只看该作者
这是我的js文件，我想让游戏一开始就显示“开始按钮”在点击“开始游戏”按钮后开始游戏，请帮我修改一下。
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');

let snake = [{ x: 200, y: 200 }, { x: 190, y: 200 }, { x: 180, y: 200 }];
let food = { x: 0, y: 0 };
let dx = 10;
let dy = 0;
let score = 0;
let gameOver = false;
let snakeColor = 'lightgreen'; // 默认颜色

// 创建音效对象
const eatSound = new Audio('eat.mp3');

// 创建背景音乐对象
const backgroundMusic = new Audio('background.mp3');
backgroundMusic.loop = true; // 设置循环播放

document.addEventListener("keydown", changeDirection);
document.getElementById('snakeColor').addEventListener('change', function(event) {
    snakeColor = event.target.value; // 更新贪吃蛇颜色
});

function randomFoodPosition() {
    const x = Math.floor(Math.random() * (canvas.width / 10)) * 10;
    const y = Math.floor(Math.random() * (canvas.height / 10)) * 10;
    return { x, y };
}

function clearCanvas() {
    ctx.fillStyle = "white";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
}

function drawSnake() {
    snake.forEach(drawSnakePart);
}

function drawSnakePart(snakePart) {
    ctx.fillStyle = snakeColor; // 使用选择的颜色
    ctx.strokeStyle = 'darkgreen';
    ctx.fillRect(snakePart.x, snakePart.y, 10, 10);
    ctx.strokeRect(snakePart.x, snakePart.y, 10, 10);
}

function drawFood() {
    ctx.fillStyle = 'lightpink';
    ctx.fillRect(food.x, food.y, 10, 10);
}

function moveSnake() {
    const head = { x: snake[0].x + dx, y: snake[0].y + dy };

    // 检测碰壁
    if (head.x < 0 || head.x >= canvas.width || head.y < 0 || head.y >= canvas.height || collision(head)) {
        gameOver = true;
        return;
    }

    snake.unshift(head);

    // 检查是否吃到食物
    if (head.x === food.x && head.y === food.y) {
        score++;
        food = randomFoodPosition();
        playEatSound(); // 播放音效
    } else {
        snake.pop();
    }
}

function collision(head) {
    for (let i = 1; i < snake.length; i++) {
        if (snake[i].x === head.x && snake[i].y === head.y) {
            return true;
        }
    }
    return false;
}

// 播放吃食物的音效
function playEatSound() {
    eatSound.play();
}

// 播放背景音乐
function playBackgroundMusic() {
    backgroundMusic.play();
}

// 停止背景音乐
function stopBackgroundMusic() {
    backgroundMusic.pause();
    backgroundMusic.currentTime = 0; // 重置音乐到开头
}

function main() {
    if (gameOver) {
        displayGameOver();
        return;
    }

    setTimeout(function onTick() {
        clearCanvas();
        drawFood();
        moveSnake();
        drawSnake();
        main();
    }, 100);
}

function changeDirection(event) {
    const LEFT_KEY = 37;
    const RIGHT_KEY = 39;
    const UP_KEY = 38;
    const DOWN_KEY = 40;

    const keyPressed = event.keyCode;
    const goingUp = dy === -10;
    const goingDown = dy === 10;
    const goingRight = dx === 10;
    const goingLeft = dx === -10;

    if (keyPressed === LEFT_KEY && !goingRight) {
        dx = -10;
        dy = 0;
    }

    if (keyPressed === UP_KEY && !goingDown) {
        dx = 0;
        dy = -10;
    }

    if (keyPressed === RIGHT_KEY && !goingLeft) {
        dx = 10;
        dy = 0;
    }

    if (keyPressed === DOWN_KEY && !goingUp) {
        dx = 0;
        dy = 10;
    }
}

// 显示游戏结束
function displayGameOver() {
    ctx.fillStyle = "pink";
    ctx.font = "30px Arial";
     // 绘制“游戏结束！”位于中心稍上方
    ctx.fillText("很遗憾，游戏结束！", canvas.width / 2 - 115, canvas.height / 2 - 20);
    // 绘制得分位于中心稍下方
    ctx.fillText("得分: " + score, canvas.width / 2 - 50, canvas.height / 2 + 20);
    document.getElementById("startButton").style.display = "block";
    stopBackgroundMusic(); // 停止背景音乐
}


function startGame() {
    snake = [{ x: 200, y: 200 }, { x: 190, y: 200 }, { x: 180, y: 200 }];
    score = 0;
    dx = 10;
    dy = 0;
    gameOver = false;
    food = randomFoodPosition();
    document.getElementById('startButton').style.display = 'none';
    playBackgroundMusic(); // 播放背景音乐
    main();
}

food = randomFoodPosition();
main();

// 获取按钮和规则内容的DOM元素
const rulesButton = document.getElementById('rulesButton');
const rulesContent = document.getElementById('rulesContent');

// 当鼠标移到按钮上时，显示规则
rulesButton.addEventListener('mouseover', function () {
    rulesContent.style.display = 'block';
});

// 当鼠标离开按钮时，隐藏规则
rulesButton.addEventListener('mouseout', function () {
    rulesContent.style.display = 'none';
});
回复 支持 反对

使用道具 举报

kaia

0

主题

1145

帖子

1715

积分

版主

Rank: 7Rank: 7Rank: 7

积分
1715
14#
发表于 2024-8-12 15:03:54 | 只看该作者
张复礼 发表于 2024-08-12 15:03
贪吃蛇游戏
   


    贪吃蛇游戏
    开始游戏
     ...


好的！我们可以通过修改HTML和JavaScript来实现点击“开始游戏”按钮后开始游戏。需要做的更改主要是：

1. 在HTML文件中增加一个按钮，用户点击后开始游戏。
2. 在JavaScript文件中添加一个事件监听器，当点击该按钮时调用`startGame`函数。

### 修改后的HTML文件

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>贪吃蛇游戏</title>
  6.     <link rel="stylesheet" href="style.css">
  7. </head>
  8. <body>
  9.     <h1>贪吃蛇游戏</h1>
  10.     <div id="gameContainer">
  11.         <canvas id="gameCanvas" width="400" height="400"></canvas>
  12.         <button id="startButton">开始游戏</button>
  13.         <div id="gameOverText">游戏结束</div>
  14.     </div>
  15.    
  16.     <button id="rulesButton">游戏规则</button>
  17.     <div id="rulesContent">
  18.         <p>游戏规则</p>
  19.         <ul>
  20.             <li>使用方向键控制蛇的移动。</li>
  21.             <li>吃到食物会得分并增长体长。</li>
  22.             <li>撞到墙壁或自身会导致游戏结束。</li>
  23.         </ul>
  24.     </div>

  26.     <label for="snakeColor">选择贪吃蛇颜色:</label>
  27.     <select id="snakeColor">
  28.         <option value="lightgreen">绿</option>
  29.         <option value="blue">蓝</option>
  30.         <option value="yellow">黄</option>
  31.         <option value="red">红</option>
  32.     </select>

  34.     <script src="script.js"></script>
  35. </body>
  36. </html>
复制代码


### 修改后的JavaScript文件

确保`startGame`函数在点击“开始游戏”按钮时被调用，并初始化游戏内容。

  1. const canvas = document.getElementById('gameCanvas');
  2. const ctx = canvas.getContext('2d');

  4. let snake = [];
  5. let food = { x: 0, y: 0 };
  6. let dx = 10;
  7. let dy = 0;
  8. let score = 0;
  9. let gameOver = false;
  10. let snakeColor = 'lightgreen'; // 默认颜色

  12. // 创建音效对象
  13. const eatSound = new Audio('eat.mp3');

  15. // 创建背景音乐对象
  16. const backgroundMusic = new Audio('background.mp3');
  17. backgroundMusic.loop = true; // 设置循环播放

  19. document.addEventListener("keydown", changeDirection);
  20. document.getElementById('snakeColor').addEventListener('change', function(event) {
  21.     snakeColor = event.target.value; // 更新贪吃蛇颜色
  22. });

  24. document.getElementById('startButton').addEventListener('click', startGame);

  26. function randomFoodPosition() {
  27.     const x = Math.floor(Math.random() * (canvas.width / 10)) * 10;
  28.     const y = Math.floor(Math.random() * (canvas.height / 10)) * 10;
  29.     return { x, y };
  30. }

  32. function clearCanvas() {
  33.     ctx.fillStyle = "white";
  34.     ctx.fillRect(0, 0, canvas.width, canvas.height);
  35. }

  37. function drawSnake() {
  38.     snake.forEach(drawSnakePart);
  39. }

  41. function drawSnakePart(snakePart) {
  42.     ctx.fillStyle = snakeColor; // 使用选择的颜色
  43.     ctx.strokeStyle = 'darkgreen';
  44.     ctx.fillRect(snakePart.x, snakePart.y, 10, 10);
  45.     ctx.strokeRect(snakePart.x, snakePart.y, 10, 10);
  46. }

  48. function drawFood() {
  49.     ctx.fillStyle = 'lightpink';
  50.     ctx.fillRect(food.x, food.y, 10, 10);
  51. }

  53. function moveSnake() {
  54.     const head = { x: snake[0].x + dx, y: snake[0].y + dy };

  56.     // 检测碰壁
  57.     if (head.x < 0 || head.x >= canvas.width || head.y < 0 || head.y >= canvas.height || collision(head)) {
  58.         gameOver = true;
  59.         return;
  60.     }

  62.     snake.unshift(head);

  64.     // 检查是否吃到食物
  65.     if (head.x === food.x && head.y === food.y) {
  66.         score++;
  67.         food = randomFoodPosition();
  68.         playEatSound(); // 播放音效
  69.     } else {
  70.         snake.pop();
  71.     }
  72. }

  74. function collision(head) {
  75.     for (let i = 1; i < snake.length; i++) {
  76.         if (snake[i].x === head.x && snake[i].y === head.y) {
  77.             return true;
  78.         }
  79.     }
  80.     return false;
  81. }

  83. // 播放吃食物的音效
  84. function playEatSound() {
  85.     eatSound.play();
  86. }

  88. // 播放背景音乐
  89. function playBackgroundMusic() {
  90.     backgroundMusic.play();
  91. }

  93. // 停止背景音乐
  94. function stopBackgroundMusic() {
  95.     backgroundMusic.pause();
  96.     backgroundMusic.currentTime = 0; // 重置音乐到开头
  97. }

  99. function main() {
  100.     if (gameOver) {
  101.         displayGameOver();
  102.         return;
  103.     }

  105.     setTimeout(function onTick() {
  106.         clearCanvas();
  107.         drawFood();
  108.         moveSnake();
  109.         drawSnake();
  110.         main();
  111.     }, 100);
  112. }

  114. function changeDirection(event) {
  115.     const LEFT_KEY = 37;
  116.     const RIGHT_KEY = 39;
  117.     const UP_KEY = 38;
  118.     const DOWN_KEY = 40;

  120.     const keyPressed = event.keyCode;
  121.     const goingUp = dy === -10;
  122.     const goingDown = dy === 10;
  123.     const goingRight = dx === 10;
  124.     const goingLeft = dx === -10;

  126.     if (keyPressed === LEFT_KEY && !goingRight) {
  127.         dx = -10;
  128.         dy = 0;
  129.     }

  131.     if (keyPressed === UP_KEY && !goingDown) {
  132.         dx = 0;
  133.         dy = -10;
  134.     }

  136.     if (keyPressed === RIGHT_KEY && !goingLeft) {
  137.         dx = 10;
  138.         dy = 0;
  139.     }

  141.     if (keyPressed === DOWN_KEY && !goingUp) {
  142.         dx = 0;
  143.         dy = 10;
  144.     }
  145. }

  147. // 显示游戏结束
  148. function displayGameOver() {
  149.     ctx.fillStyle = "pink";
  150.     ctx.font = "30px Arial";
  151.     // 绘制“游戏结束！”位于中心稍上方
  152.     ctx.fillText("很遗憾，游戏结束！", canvas.width / 2 - 115, canvas.height / 2 - 20);
  153.     // 绘制得分位于中心稍下方
  154.     ctx.fillText("得分: " + score, canvas.width / 2 - 50, canvas.height / 2 + 20);
  155.     document.getElementById("startButton").style.display = "block";
  156.     stopBackgroundMusic(); // 停止背景音乐
  157. }

  159. function startGame() {
  160.     snake = [{ x: 150, y: 150 }, { x: 140, y: 150 }, { x: 130, y: 150 }, { x: 120, y: 150 }, { x: 110, y: 150 }]; // 初始化蛇
  161.     score = 0;
  162.     dx = 10;
  163.     dy = 0;
  164.     gameOver = false;
  165.     food = randomFoodPosition();
  166.     document.getElementById('startButton').style.display = 'none';
  167.     playBackgroundMusic(); // 播放背景音乐
  168.     main();
  169. }

  171. // 隐藏“游戏结束”提示
  172. document.getElementById('gameOverText').style.display = 'none';

  174. // 获取按钮和规则内容的DOM元素
  175. const rulesButton = document.getElementById('rulesButton');
  176. const rulesContent = document.getElementById('rulesContent');

  178. // 当鼠标移到按钮上时，显示规则
  179. rulesButton.addEventListener('mouseover', function () {
  180.     rulesContent.style.display = 'block';
  181. });

  183. // 当鼠标离开按钮时，隐藏规则
  184. rulesButton.addEventListener('mouseout', function () {
  185.     rulesContent.style.display = 'none';
  186. });
复制代码


通过这些修改，当用户点击“开始游戏”按钮时，游戏会启动，并且可以正常运行。如果还有任何问题或进一步的问题，请随时告诉我哦！
回复 支持 反对

使用道具 举报

张复礼

3

主题

41

帖子

137

积分

注册会员

Rank: 2

积分
137
13#
 楼主| 发表于 2024-8-12 15:03:01 | 只看该作者
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>贪吃蛇游戏</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>贪吃蛇游戏</h1>
    <button id="startButton" onclick="startGame()">开始游戏</button>
    <div id="gameContainer">
        <canvas id="gameCanvas" width="400" height="400"></canvas>
        <button id="rulesButton">游戏规则</button>
        <div id="rulesContent" style="display: none;">
        <h3>游戏规则</h3>
        <p>1. 使用方向键控制蛇的移动。</p>
        <p>2. 吃到食物会得分并增长体长。</p>
        <p>3. 撞到墙壁或自身会导致游戏结束。</p>
        <div id="gameOverText" class="hidden"></div>
    </div>
<label for="snakeColor">选择贪吃蛇颜色:</label>
<select id="snakeColor" width="400" height="100">
    <option value="lightgreen">绿</option>
    <option value="blue">蓝</option>
    <option value="yellow">黄</option>
    <option value="red">红</option>
</select>
    <script src="script.js"></script>
</body>
</html>

这是我的贪吃蛇html文件，我想让游戏在点击“开始游戏”按钮后开始，请帮我修改一下。
回复 支持 反对

使用道具 举报

kaia

0

主题

1145

帖子

1715

积分

版主

Rank: 7Rank: 7Rank: 7

积分
1715
12#
发表于 2024-8-12 14:50:09 | 只看该作者
张复礼 发表于 2024-08-12 14:46
我的贪吃蛇游戏好像有问题，无法正常打开，麻烦你帮我 ...


你好！我看到你的代码中有几个地方存在问题，可能导致游戏无法正常运行。特别是 `snake` 变量没有正确初始化，还有一些其他的小问题。让我帮你修正这些问题。

### 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="style.css">
  8. </head>
  9. <body>
  10.     <h1>贪吃蛇游戏</h1>
  11.     <div id="gameContainer">
  12.         <canvas id="gameCanvas" width="400" height="400"></canvas>
  13.         <button id="startButton" onclick="startGame()">开始游戏</button>
  14.         <p id="gameOverText">游戏结束</p>
  15.     </div>
  16.     <div id="rulesButton">游戏规则</div>
  17.     <div id="rulesContent" class="hidden">
  18.         游戏规则
  19.         <ol>
  20.             <li>使用方向键控制蛇的移动。</li>
  21.             <li>吃到食物会得分并增长体长。</li>
  22.             <li>撞到墙壁或自身会导致游戏结束。</li>
  23.         </ol>
  24.     </div>
  25.     <select id="snakeColor">
  26.         <option value="lightgreen">绿</option>
  27.         <option value="lightblue">蓝</option>
  28.         <option value="yellow">黄</option>
  29.         <option value="red">红</option>
  30.     </select>
  31.     <script src="script.js"></script>
  32. </body>
  33. </html>
复制代码


### CSS 文件

CSS 文件看起来是没问题的，这里是你的 CSS 文件：

  1. body {
  2.     display: flex;
  3.     flex-direction: column;
  4.     align-items: center;
  5.     justify-content: center;
  6.     height: 100vh;
  7.     background-color: #e0e0e0;
  8.     margin: 0;
  9. }

  11. h1 {
  12.     margin-bottom: 20px;
  13. }

  15. #gameContainer {
  16.     display: flex;
  17.     flex-direction: column;
  18.     align-items: center;
  19. }

  21. #snakeColor {
  22.     margin: 10px;
  23.     padding: 5px;
  24.     font-size: 16px;
  25. }

  27. canvas {
  28.     border: 1px solid black;
  29.     background-color: #f5f5f5;
  30. }

  32. #startButton {
  33.     padding: 10px 20px;
  34.     font-size: 20px;
  35.     margin-top: 20px;
  36.     cursor: pointer;
  37.     background-color: #DB516F;
  38.     color: white;
  39.     border: none;
  40.     border-radius: 5px;
  41. }

  43. #startButton:hover {
  44.     background-color: #E6889C;
  45. }

  47. #gameOverText {
  48.     font-size: 24px;
  49.     color: red;
  50.     text-align: center;
  51.     margin-top: 20px;
  52.     display: none; /* 默认隐藏 */
  53. }

  55. .hidden {
  56.     display: none;
  57. }

  59. #rulesButton {
  60.     position: absolute;
  61.     right: 10px;
  62.     top: 10px;
  63.     padding: 10px;
  64.     background-color: lightblue;
  65.     border: none;
  66.     cursor: pointer;
  67.     font-size: 16px;
  68. }

  70. #rulesContent {
  71.     position: absolute;
  72.     right: 10px;
  73.     top: 50px;
  74.     padding: 10px;
  75.     background-color: white;
  76.     border: 1px solid #ccc;
  77.     box-shadow: 0 0 10px rgba(0,0,0,0.1);
  78. }
复制代码


### JavaScript 文件

这是你修正后的 JavaScript 文件：

  1. const canvas = document.getElementById('gameCanvas');
  2. const ctx = canvas.getContext('2d');

  4. let snake = [{ x: 150, y: 150 }, { x: 140, y: 150 }, { x: 130, y: 150 }, { x: 120, y: 150 }, { x: 110, y: 150 }];
  5. let food = { x: 0, y: 0 };
  6. let dx = 10;
  7. let dy = 0;
  8. let score = 0;
  9. let gameOver = false;
  10. let snakeColor = 'lightgreen'; // 默认颜色

  12. // 创建音效对象
  13. const eatSound = new Audio('eat.mp3');

  15. // 创建背景音乐对象
  16. const backgroundMusic = new Audio('background.mp3');
  17. backgroundMusic.loop = true; // 设置循环播放

  19. document.addEventListener("keydown", changeDirection);
  20. document.getElementById('snakeColor').addEventListener('change', function(event) {
  21.     snakeColor = event.target.value; // 更新贪吃蛇颜色
  22. });

  24. function randomFoodPosition() {
  25.     const x = Math.floor(Math.random() * (canvas.width / 10)) * 10;
  26.     const y = Math.floor(Math.random() * (canvas.height / 10)) * 10;
  27.     return { x, y };
  28. }

  30. function clearCanvas() {
  31.     ctx.fillStyle = "white";
  32.     ctx.fillRect(0, 0, canvas.width, canvas.height);
  33. }

  35. function drawSnake() {
  36.     snake.forEach(drawSnakePart);
  37. }

  39. function drawSnakePart(snakePart) {
  40.     ctx.fillStyle = snakeColor; // 使用选择的颜色
  41.     ctx.strokeStyle = 'darkgreen';
  42.     ctx.fillRect(snakePart.x, snakePart.y, 10, 10);
  43.     ctx.strokeRect(snakePart.x, snakePart.y, 10, 10);
  44. }

  46. function drawFood() {
  47.     ctx.fillStyle = 'lightpink';
  48.     ctx.fillRect(food.x, food.y, 10, 10);
  49. }

  51. function moveSnake() {
  52.     const head = { x: snake[0].x + dx, y: snake[0].y + dy };

  54.     // 检测碰壁
  55.     if (head.x < 0 || head.x >= canvas.width || head.y < 0 || head.y >= canvas.height || collision(head)) {
  56.         gameOver = true;
  57.         return;
  58.     }

  60.     snake.unshift(head);

  62.     // 检查是否吃到食物
  63.     if (head.x === food.x && head.y === food.y) {
  64.         score++;
  65.         food = randomFoodPosition();
  66.         playEatSound(); // 播放音效
  67.     } else {
  68.         snake.pop();
  69.     }
  70. }

  72. function collision(head) {
  73.     for (let i = 1; i < snake.length; i++) {
  74.         if (snake[i].x === head.x && snake[i].y === head.y) {
  75.             return true;
  76.         }
  77.     }
  78.     return false;
  79. }

  81. // 播放吃食物的音效
  82. function playEatSound() {
  83.     eatSound.play();
  84. }

  86. // 播放背景音乐
  87. function playBackgroundMusic() {
  88.     backgroundMusic.play();
  89. }

  91. // 停止背景音乐
  92. function stopBackgroundMusic() {
  93.     backgroundMusic.pause();
  94.     backgroundMusic.currentTime = 0; // 重置音乐到开头
  95. }

  97. function main() {
  98.     if (gameOver) {
  99.         displayGameOver();
  100.         return;
  101.     }

  103.     setTimeout(function onTick() {
  104.         clearCanvas();
  105.         drawFood();
  106.         moveSnake();
  107.         drawSnake();
  108.         main();
  109.     }, 100);
  110. }

  112. function changeDirection(event) {
  113.     const LEFT_KEY = 37;
  114.     const RIGHT_KEY = 39;
  115.     const UP_KEY = 38;
  116.     const DOWN_KEY = 40;

  118.     const keyPressed = event.keyCode;
  119.     const goingUp = dy === -10;
  120.     const goingDown = dy === 10;
  121.     const goingRight = dx === 10;
  122.     const goingLeft = dx === -10;

  124.     if (keyPressed === LEFT_KEY && !goingRight) {
  125.         dx = -10;
  126.         dy = 0;
  127.     }

  129.     if (keyPressed === UP_KEY && !goingDown) {
  130.         dx = 0;
  131.         dy = -10;
  132.     }

  134.     if (keyPressed === RIGHT_KEY && !goingLeft) {
  135.         dx = 10;
  136.         dy = 0;
  137.     }

  139.     if (keyPressed === DOWN_KEY && !goingUp) {
  140.         dx = 0;
  141.         dy = 10;
  142.     }
  143. }

  145. // 显示游戏结束
  146. function displayGameOver() {
  147.     ctx.fillStyle = "pink";
  148.     ctx.font = "30px Arial";
  149.     // 绘制“游戏结束！”位于中心稍上方
  150.     ctx.fillText("很遗憾，游戏结束！", canvas.width / 2 - 115, canvas.height / 2 - 20);
  151.     // 绘制得分位于中心稍下方
  152.     ctx.fillText("得分: " + score, canvas.width / 2 - 50, canvas.height / 2 + 20);
  153.     document.getElementById("startButton").style.display = "block";
  154.     stopBackgroundMusic(); // 停止背景音乐
  155. }

  157. function startGame() {
  158.     snake = [{ x: 150, y: 150 }, { x: 140, y: 150 }, { x: 130, y: 150 }, { x: 120, y: 150 }, { x: 110, y: 150 }];
  159.     score = 0;
  160.     dx = 10;
  161.     dy = 0;
  162.     gameOver = false;
  163.     food = randomFoodPosition();
  164.     document.getElementById('startButton').style.display = 'none';
  165.     playBackgroundMusic(); // 播放背景音乐
  166.     main();
  167. }

  169. // 隐藏“游戏结束”提示
  170. document.getElementById('gameOverText').style.display = 'none';

  172. main();

  174. // 获取按钮和规则内容的DOM元素
  175. const rulesButton = document.getElementById('rulesButton');
  176. const rulesContent = document.getElementById('rulesContent');

  178. // 当鼠标移到按钮上时，显示规则
  179. rulesButton.addEventListener('mouseover', function () {
  180.     rulesContent.style.display = 'block';
  181. });

  183. // 当鼠标离开按钮时，隐藏规则
  184. rulesButton.addEventListener('mouseout', function () {
  185.     rulesContent.style.display = 'none';
  186. });
复制代码


### 改动说明
1. 修正了`snake`变量的初始化，让蛇从一开始就有五个部分。
2. 在 `moveSnake` 函数中修正访问蛇头的位置错误。
3. 确保游戏开始时隐藏“游戏结束”的提示，并将蛇重置为初始状态。
4. 补充了在 `startGame` 函数中初始化蛇的代码。

现在，你可以试着再次运行这个贪吃蛇游戏，看看是否能正常运行。如果还有任何问题，请随时告诉我！
回复 支持 反对

使用道具 举报

张复礼

3

主题

41

帖子

137

积分

注册会员

Rank: 2

积分
137
11#
 楼主| 发表于 2024-8-12 14:46:23 | 只看该作者
我的贪吃蛇游戏好像有问题，无法正常打开，麻烦你帮我检查修改一下。
这是html文件
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>贪吃蛇游戏</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>贪吃蛇游戏</h1>
    <button id="startButton" onclick="startGame()">开始游戏</button>
    <div id="gameContainer">
        <canvas id="gameCanvas" width="400" height="400"></canvas>
        <button id="rulesButton">游戏规则</button>
        <div id="rulesContent" style="display: none;">
        <h3>游戏规则</h3>
        <p>1. 使用方向键控制蛇的移动。</p>
        <p>2. 吃到食物会得分并增长体长。</p>
        <p>3. 撞到墙壁或自身会导致游戏结束。</p>
        <div id="gameOverText" class="hidden"></div>
    </div>
    <script src="script.js"></script>
</body>
</html>

这是css文件
body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background-color: #e0e0e0;
    margin: 0;
}

h1 {
    margin-bottom: 20px;
}

#gameContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#snakeColor {
    margin: 10px;
    padding: 5px;
    font-size: 16px;
}

canvas {
    border: 1px solid black;
    background-color: #f5f5f5;
}

#startButton {
    display: none; /* 默认隐藏 */
    padding: 10px 20px;
    font-size: 20px;
    margin-top: 20px;
    cursor: pointer;
    background-color:#DB516F;
    color: white;
    border: none;
    border-radius: 5px;
}

#startButton:hover {
    background-color: #E6889C;
}

#gameOverText {
    font-size: 24px;
    color: red;
    text-align: center;
    margin-top: 20px;
    display: none; /* 默认隐藏 */
}

.hidden {
    display: none;
}
#rulesButton {
    position: absolute;
    right: 10px;
    top: 10px;
    padding: 10px;
    background-color: lightblue;
    border: none;
    cursor: pointer;
    font-size: 16px;
}

#rulesContent {
    position: absolute;
    right: 10px;
    top: 50px;
    padding: 10px;
    background-color: white;
    border: 1px solid #ccc;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

这是js文件
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');

let snake = [{ x: 200, y: 200 }, { x: 190, y: 200 }, { x: 180, y: 200 }];
let food = { x: 0, y: 0 };
let dx = 10;
let dy = 0;
let score = 0;
let gameOver = false;
let snakeColor = 'lightgreen'; // 默认颜色

// 创建音效对象
const eatSound = new Audio('eat.mp3');

// 创建背景音乐对象
const backgroundMusic = new Audio('background.mp3');
backgroundMusic.loop = true; // 设置循环播放

document.addEventListener("keydown", changeDirection);
document.getElementById('snakeColor').addEventListener('change', function(event) {
    snakeColor = event.target.value; // 更新贪吃蛇颜色
});

function randomFoodPosition() {
    const x = Math.floor(Math.random() * (canvas.width / 10)) * 10;
    const y = Math.floor(Math.random() * (canvas.height / 10)) * 10;
    return { x, y };
}

function clearCanvas() {
    ctx.fillStyle = "white";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
}

function drawSnake() {
    snake.forEach(drawSnakePart);
}

function drawSnakePart(snakePart) {
    ctx.fillStyle = snakeColor; // 使用选择的颜色
    ctx.strokeStyle = 'darkgreen';
    ctx.fillRect(snakePart.x, snakePart.y, 10, 10);
    ctx.strokeRect(snakePart.x, snakePart.y, 10, 10);
}

function drawFood() {
    ctx.fillStyle = 'lightpink';
    ctx.fillRect(food.x, food.y, 10, 10);
}

function moveSnake() {
    const head = { x: snake[0].x + dx, y: snake[0].y + dy };

    // 检测碰壁
    if (head.x < 0 || head.x >= canvas.width || head.y < 0 || head.y >= canvas.height || collision(head)) {
        gameOver = true;
        return;
    }

    snake.unshift(head);

    // 检查是否吃到食物
    if (head.x === food.x && head.y === food.y) {
        score++;
        food = randomFoodPosition();
        playEatSound(); // 播放音效
    } else {
        snake.pop();
    }
}

function collision(head) {
    for (let i = 1; i < snake.length; i++) {
        if (snake[i].x === head.x && snake[i].y === head.y) {
            return true;
        }
    }
    return false;
}

// 播放吃食物的音效
function playEatSound() {
    eatSound.play();
}

// 播放背景音乐
function playBackgroundMusic() {
    backgroundMusic.play();
}

// 停止背景音乐
function stopBackgroundMusic() {
    backgroundMusic.pause();
    backgroundMusic.currentTime = 0; // 重置音乐到开头
}

function main() {
    if (gameOver) {
        displayGameOver();
        return;
    }

    setTimeout(function onTick() {
        clearCanvas();
        drawFood();
        moveSnake();
        drawSnake();
        main();
    }, 100);
}

function changeDirection(event) {
    const LEFT_KEY = 37;
    const RIGHT_KEY = 39;
    const UP_KEY = 38;
    const DOWN_KEY = 40;

    const keyPressed = event.keyCode;
    const goingUp = dy === -10;
    const goingDown = dy === 10;
    const goingRight = dx === 10;
    const goingLeft = dx === -10;

    if (keyPressed === LEFT_KEY && !goingRight) {
        dx = -10;
        dy = 0;
    }

    if (keyPressed === UP_KEY && !goingDown) {
        dx = 0;
        dy = -10;
    }

    if (keyPressed === RIGHT_KEY && !goingLeft) {
        dx = 10;
        dy = 0;
    }

    if (keyPressed === DOWN_KEY && !goingUp) {
        dx = 0;
        dy = 10;
    }
}

// 显示游戏结束
function displayGameOver() {
    ctx.fillStyle = "pink";
    ctx.font = "30px Arial";
     // 绘制“游戏结束！”位于中心稍上方
    ctx.fillText("很遗憾，游戏结束！", canvas.width / 2 - 115, canvas.height / 2 - 20);
    // 绘制得分位于中心稍下方
    ctx.fillText("得分: " + score, canvas.width / 2 - 50, canvas.height / 2 + 20);
    document.getElementById("startButton").style.display = "block";
    stopBackgroundMusic(); // 停止背景音乐
}


function startGame() {
    snake = [{ x: 200, y: 200 }, { x: 190, y: 200 }, { x: 180, y: 200 }];
    score = 0;
    dx = 10;
    dy = 0;
    gameOver = false;
    food = randomFoodPosition();
    document.getElementById('startButton').style.display = 'none';
    playBackgroundMusic(); // 播放背景音乐
    main();
}

food = randomFoodPosition();
main();

// 获取按钮和规则内容的DOM元素
const rulesButton = document.getElementById('rulesButton');
const rulesContent = document.getElementById('rulesContent');

// 当鼠标移到按钮上时，显示规则
rulesButton.addEventListener('mouseover', function () {
    rulesContent.style.display = 'block';
});

// 当鼠标离开按钮时，隐藏规则
rulesButton.addEventListener('mouseout', function () {
    rulesContent.style.display = 'none';
});
回复 支持 反对

使用道具 举报

kaia

0

主题

1145

帖子

1715

积分

版主

Rank: 7Rank: 7Rank: 7

积分
1715
10#
发表于 2024-8-12 14:34:46 | 只看该作者
张复礼 发表于 2024-08-12 14:34
const canvas = document.getElementById('gameCanvas ...


你好！增加一个“修改贪吃蛇颜色”的下拉菜单是个不错的主意。我们可以通过以下步骤来实现这个功能：

1. **在HTML文件中添加下拉菜单**。
2. **在CSS文件中为下拉菜单添加样式（可选）**。
3. **在JavaScript文件中处理下拉菜单的选择事件**。

### 第一步：在HTML文件中添加下拉菜单

在HTML文件中，找到适合的位置加入以下代码：

  1. <label for="snakeColor">选择贪吃蛇颜色:</label>
  2. <select id="snakeColor">
  3.     <option value="lightgreen">绿</option>
  4.     <option value="blue">蓝</option>
  5.     <option value="yellow">黄</option>
  6.     <option value="red">红</option>
  7. </select>
复制代码


### 第二步：在CSS文件中为下拉菜单添加样式（可选）

在CSS文件中，可以为下拉菜单添加样式，让它看起来更美观。例如：

  1. #snakeColor {
  2.     margin: 10px;
  3.     padding: 5px;
  4.     font-size: 16px;
  5. }
复制代码


### 第三步：在JavaScript文件中处理下拉菜单的选择事件

我们需要在JavaScript中处理下拉菜单的变化，确保贪吃蛇的颜色能够根据用户选择进行改变。

  1. const canvas = document.getElementById('gameCanvas');
  2. const ctx = canvas.getContext('2d');

  4. let snake = [{ x: 200, y: 200 }, { x: 190, y: 200 }, { x: 180, y: 200 }];
  5. let food = { x: 0, y: 0 };
  6. let dx = 10;
  7. let dy = 0;
  8. let score = 0;
  9. let gameOver = false;
  10. let snakeColor = 'lightgreen'; // 默认颜色

  12. // 创建音效对象
  13. const eatSound = new Audio('eat.mp3');

  15. // 创建背景音乐对象
  16. const backgroundMusic = new Audio('background.mp3');
  17. backgroundMusic.loop = true; // 设置循环播放

  19. document.addEventListener("keydown", changeDirection);
  20. document.getElementById('snakeColor').addEventListener('change', function(event) {
  21.     snakeColor = event.target.value; // 更新贪吃蛇颜色
  22. });

  24. function randomFoodPosition() {
  25.     const x = Math.floor(Math.random() * (canvas.width / 10)) * 10;
  26.     const y = Math.floor(Math.random() * (canvas.height / 10)) * 10;
  27.     return { x, y };
  28. }

  30. function clearCanvas() {
  31.     ctx.fillStyle = "white";
  32.     ctx.fillRect(0, 0, canvas.width, canvas.height);
  33. }

  35. function drawSnake() {
  36.     snake.forEach(drawSnakePart);
  37. }

  39. function drawSnakePart(snakePart) {
  40.     ctx.fillStyle = snakeColor; // 使用选择的颜色
  41.     ctx.strokeStyle = 'darkgreen';
  42.     ctx.fillRect(snakePart.x, snakePart.y, 10, 10);
  43.     ctx.strokeRect(snakePart.x, snakePart.y, 10, 10);
  44. }

  46. function drawFood() {
  47.     ctx.fillStyle = 'lightpink';
  48.     ctx.fillRect(food.x, food.y, 10, 10);
  49. }

  51. function moveSnake() {
  52.     const head = { x: snake[0].x + dx, y: snake[0].y + dy };

  54.     // 检测碰壁
  55.     if (head.x < 0 || head.x >= canvas.width || head.y < 0 || head.y >= canvas.height || collision(head)) {
  56.         gameOver = true;
  57.         return;
  58.     }

  60.     snake.unshift(head);

  62.     // 检查是否吃到食物
  63.     if (head.x === food.x && head.y === food.y) {
  64.         score++;
  65.         food = randomFoodPosition();
  66.         playEatSound(); // 播放音效
  67.     } else {
  68.         snake.pop();
  69.     }
  70. }

  72. function collision(head) {
  73.     for (let i = 1; i < snake.length; i++) {
  74.         if (snake[i].x === head.x && snake[i].y === head.y) {
  75.             return true;
  76.         }
  77.     }
  78.     return false;
  79. }

  81. // 播放吃食物的音效
  82. function playEatSound() {
  83.     eatSound.play();
  84. }

  86. // 播放背景音乐
  87. function playBackgroundMusic() {
  88.     backgroundMusic.play();
  89. }

  91. // 停止背景音乐
  92. function stopBackgroundMusic() {
  93.     backgroundMusic.pause();
  94.     backgroundMusic.currentTime = 0; // 重置音乐到开头
  95. }

  97. function main() {
  98.     if (gameOver) {
  99.         displayGameOver();
  100.         return;
  101.     }

  103.     setTimeout(function onTick() {
  104.         clearCanvas();
  105.         drawFood();
  106.         moveSnake();
  107.         drawSnake();
  108.         main();
  109.     }, 100);
  110. }

  112. function changeDirection(event) {
  113.     const LEFT_KEY = 37;
  114.     const RIGHT_KEY = 39;
  115.     const UP_KEY = 38;
  116.     const DOWN_KEY = 40;

  118.     const keyPressed = event.keyCode;
  119.     const goingUp = dy === -10;
  120.     const goingDown = dy === 10;
  121.     const goingRight = dx === 10;
  122.     const goingLeft = dx === -10;

  124.     if (keyPressed === LEFT_KEY && !goingRight) {
  125.         dx = -10;
  126.         dy = 0;
  127.     }

  129.     if (keyPressed === UP_KEY && !goingDown) {
  130.         dx = 0;
  131.         dy = -10;
  132.     }

  134.     if (keyPressed === RIGHT_KEY && !goingLeft) {
  135.         dx = 10;
  136.         dy = 0;
  137.     }

  139.     if (keyPressed === DOWN_KEY && !goingUp) {
  140.         dx = 0;
  141.         dy = 10;
  142.     }
  143. }

  145. // 显示游戏结束
  146. function displayGameOver() {
  147.     ctx.fillStyle = "pink";
  148.     ctx.font = "30px Arial";
  149.      // 绘制“游戏结束！”位于中心稍上方
  150.     ctx.fillText("很遗憾，游戏结束！", canvas.width / 2 - 115, canvas.height / 2 - 20);
  151.     // 绘制得分位于中心稍下方
  152.     ctx.fillText("得分: " + score, canvas.width / 2 - 50, canvas.height / 2 + 20);
  153.     document.getElementById("startButton").style.display = "block";
  154.     stopBackgroundMusic(); // 停止背景音乐
  155. }


  158. function startGame() {
  159.     snake = [{ x: 200, y: 200 }, { x: 190, y: 200 }, { x: 180, y: 200 }];
  160.     score = 0;
  161.     dx = 10;
  162.     dy = 0;
  163.     gameOver = false;
  164.     food = randomFoodPosition();
  165.     document.getElementById('startButton').style.display = 'none';
  166.     playBackgroundMusic(); // 播放背景音乐
  167.     main();
  168. }

  170. food = randomFoodPosition();
  171. main();

  173. // 获取按钮和规则内容的DOM元素
  174. const rulesButton = document.getElementById('rulesButton');
  175. const rulesContent = document.getElementById('rulesContent');

  177. // 当鼠标移到按钮上时，显示规则
  178. rulesButton.addEventListener('mouseover', function () {
  179.     rulesContent.style.display = 'block';
  180. });

  182. // 当鼠标离开按钮时，隐藏规则
  183. rulesButton.addEventListener('mouseout', function () {
  184.     rulesContent.style.display = 'none';
  185. });
复制代码

在这个例子中，我们在 `HTML` 中添加了一个下拉菜单，并在 `JavaScript` 文件中监听该下拉菜单的变化。当用户选择不同的颜色时，贪吃蛇的颜色会相应地更新。

希望这对你有帮助！如果有任何疑问或进一步的问题，请随时告诉我！
回复 支持 反对

使用道具 举报

下一页 »
12下一页
返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表