设为首页收藏本站

科学教育

搜索
科学教育»互动交流 › 教学互动 › 人机互动 › 完善游戏
12下一页
返回列表 发新帖
查看: 6870|回复: 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代码，请修改代码，使游戏的右边出现“游戏规则”悬停按钮，鼠标移到按钮上出现游戏规则。

回复

使用道具 举报

kaia

0

主题

1145

帖子

1715

积分

版主

Rank: 7Rank: 7Rank: 7

积分
1715
沙发
发表于 2024-8-12 14:12:02 | 只看该作者
你好！听起来你正在做一个很有意思的贪吃蛇游戏。我们可以通过几个步骤来添加“游戏规则”悬停按钮。

1. **在HTML文件中添加按钮**：首先，我们需要在HTML文件中添加一个按钮，用于显示“游戏规则”。

2. **在JavaScript中添加悬停事件**：然后，在JavaScript中添加悬停事件，当鼠标移到按钮上时，显示游戏规则。

我们来分步完成这个任务吧。

### 第一步：在HTML文件中添加“游戏规则”按钮

首先，在HTML文件中找到`<canvas>`元素，然后在它的后面添加一个`<button>`元素。这里是一个例子：

  1. <canvas id="gameCanvas" width="400" height="400"></canvas>
  2. <button id="rulesButton">游戏规则</button>
  3. <div id="rulesContent" style="display: none;">
  4.     <h3>游戏规则</h3>
  5.     <p>1. 使用方向键控制蛇的移动。</p>
  6.     <p>2. 吃到食物会得分并增长体长。</p>
  7.     <p>3. 撞到墙壁或自身会导致游戏结束。</p>
  8. </div>
复制代码


### 第二步：在CSS文件中添加一些样式

为了让“游戏规则”按钮和内容看起来更好，我们可以在CSS文件中添加一些样式：

  1. #rulesButton {
  2.     position: absolute;
  3.     right: 10px;
  4.     top: 10px;
  5.     padding: 10px;
  6.     background-color: lightblue;
  7.     border: none;
  8.     cursor: pointer;
  9.     font-size: 16px;
  10. }

  12. #rulesContent {
  13.     position: absolute;
  14.     right: 10px;
  15.     top: 50px;
  16.     padding: 10px;
  17.     background-color: white;
  18.     border: 1px solid #ccc;
  19.     box-shadow: 0 0 10px rgba(0,0,0,0.1);
  20. }
复制代码


### 第三步：在JavaScript文件中添加悬停事件

接下来，我们需要在JavaScript文件中添加悬停事件，当鼠标移到按钮上时，显示游戏规则。

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

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

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


### 最终代码

将所有这些部分结合起来，你的代码应该是这样的：

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>贪吃蛇游戏</title>
  6.     <style>
  7.         #rulesButton {
  8.             position: absolute;
  9.             right: 10px;
  10.             top: 10px;
  11.             padding: 10px;
  12.             background-color: lightblue;
  13.             border: none;
  14.             cursor: pointer;
  15.             font-size: 16px;
  16.         }

  18.         #rulesContent {
  19.             position: absolute;
  20.             right: 10px;
  21.             top: 50px;
  22.             padding: 10px;
  23.             background-color: white;
  24.             border: 1px solid #ccc;
  25.             box-shadow: 0 0 10px rgba(0,0,0,0.1);
  26.             display: none;
  27.         }
  28.     </style>
  29. </head>
  30. <body>
  31.     <canvas id="gameCanvas" width="400" height="400"></canvas>
  32.     <button id="rulesButton">游戏规则</button>
  33.     <div id="rulesContent">
  34.         <h3>游戏规则</h3>
  35.         <p>1. 使用方向键控制蛇的移动。</p>
  36.         <p>2. 吃到食物会得分并增长体长。</p>
  37.         <p>3. 撞到墙壁或自身会导致游戏结束。</p>
  38.     </div>
  39.     <script>
  40.         // Javascript Code here
  41.     </script>
  42. </body>
  43. </html>
复制代码


JavaScript部分应包含你先前的游戏逻辑和新增加的悬停事件处理：

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

  4. let snake = [{ x: 150, 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;

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

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

  18. document.addEventListener("keydown", changeDirection);

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

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

  31. function drawSnake() {
  32.     snake.forEach(drawSnakePart);
  33. }

  35. function drawSnakePart(snakePart) {
  36.     ctx.fillStyle = 'lightgreen';
  37.     ctx.strokeStyle = 'darkgreen';
  38.     ctx.fillRect(snakePart.x, snakePart.y, 10, 10);
  39.     ctx.strokeRect(snakePart.x, snakePart.y, 10, 10);
  40. }

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

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

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

  56.     snake.unshift(head);

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

  68. function collision(head) {
  69.     for (let i = 1; i < snake.length; i++) {
  70.         if (snake[i].x === head.x && snake[i].y === head.y) {
  71.             return true;
  72.         }
  73.     }
  74.     return false;
  75. }

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

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

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

  93. function main() {
  94.     if (gameOver) {
  95.         displayGameOver();
  96.         return;
  97.     }

  99.     setTimeout(function onTick() {
  100.         clearCanvas();
  101.         drawFood();
  102.         moveSnake();
  103.         drawSnake();
  104.         main();
  105.     }, 100);
  106. }

  108. function changeDirection(event) {
  109.     const LEFT_KEY = 37;
  110.     const RIGHT_KEY = 39;
  111.     const UP_KEY = 38;
  112.     const DOWN_KEY = 40;

  114.     const keyPressed = event.keyCode;
  115.     const goingUp = dy === -10;
  116.     const goingDown = dy === 10;
  117.     const goingRight = dx === 10;
  118.     const goingLeft = dx === -10;

  120.     if (keyPressed === LEFT_KEY && !goingRight) {
  121.         dx = -10;
  122.         dy = 0;
  123.     }

  125.     if (keyPressed === UP_KEY && !goingDown) {
  126.         dx = 0;
  127.         dy = -10;
  128.     }

  130.     if (keyPressed === RIGHT_KEY && !goingLeft) {
  131.         dx = 10;
  132.         dy = 0;
  133.     }

  135.     if (keyPressed === DOWN_KEY && !goingUp) {
  136.         dx = 0;
  137.         dy = 10;
  138.     }
  139. }

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


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

  166. food = randomFoodPosition();
  167. main();

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

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

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


以上就是完成这个任务需要的全部代码。希望这对你有帮助！如果有任何疑问或进一步的问题，请随时告诉我哦！
回复 支持 反对

使用道具 举报

张复礼

3

主题

41

帖子

137

积分

注册会员

Rank: 2

积分
137
板凳
 楼主| 发表于 2024-8-12 14:23:03 | 只看该作者
body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    margin: 0;
    background-color: #f5f5f5;
}

h1 {
    margin-bottom: 20px;
}

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

#gameCanvas {
    border: 2px solid black;
    background-color: white;
}

.hidden {
    display: none;
}

#gameOverText {
    font-size: 24px;
    color: red;
    margin-top: 20px;
}

#restartButton {
    padding: 10px 20px;
    font-size: 16px;
    margin-top: 10px;
    cursor: pointer;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
}

#restartButton:hover {
    background-color: #45a049;
}

你好，这是我的火柴人躲避游戏CSS文件，我想让障碍物的颜色是随机的各种颜色。，请帮我修改一下。
回复 支持 反对

使用道具 举报

kaia

0

主题

1145

帖子

1715

积分

版主

Rank: 7Rank: 7Rank: 7

积分
1715
地板
发表于 2024-8-12 14:23:22 | 只看该作者
张复礼 发表于 2024-08-12 14:23
body {
    display: flex;
    flex-direction: colu ...


你好！要让障碍物的颜色随机，可以在JavaScript中实现这个功能。我们可以定义一个函数来生成随机颜色，并在绘制障碍物时调用这个函数。

首先，我们确保你的HTML文件中有必要的元素和结构。然后，我们修改JavaScript代码来实现随机颜色的障碍物。

### 第一步：生成随机颜色的函数

我们可以使用以下函数来生成随机颜色：

  1. // 生成随机颜色
  2. function getRandomColor() {
  3.     const letters = '0123456789ABCDEF';
  4.     let color = '#';
  5.     for (let i = 0; i < 6; i++) {
  6.         color += letters[Math.floor(Math.random() * 16)];
  7.     }
  8.     return color;
  9. }
复制代码


### 第二步：绘制障碍物时使用随机颜色

你可能已经有绘制障碍物的函数，只需在其中调用 `getRandomColor` 函数即可。

让我们假设你有一个 `drawObstacle` 函数来绘制障碍物，可以这样修改：

  1. function drawObstacle(obstacle) {
  2.     ctx.fillStyle = getRandomColor(); // 使用随机颜色
  3.     ctx.fillRect(obstacle.x, obstacle.y, obstacle.width, obstacle.height);
  4. }
复制代码


### 完整的JavaScript示例

假设我们有一个简单的火柴人躲避游戏的框架，以下是完整的JavaScript代码：

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

  4. const obstacles = []; // 用于存储障碍物
  5. const gameSpeed = 5;

  7. function createObstacle() {
  8.     const width = 50;
  9.     const height = 10;
  10.     const x = canvas.width;
  11.     const y = canvas.height - height - (Math.random() * 100);

  13.     obstacles.push({ x, y, width, height });
  14. }

  16. // 生成随机颜色
  17. function getRandomColor() {
  18.     const letters = '0123456789ABCDEF';
  19.     let color = '#';
  20.     for (let i = 0; i < 6; i++) {
  21.         color += letters[Math.floor(Math.random() * 16)];
  22.     }
  23.     return color;
  24. }

  26. function drawObstacle(obstacle) {
  27.     ctx.fillStyle = getRandomColor(); // 使用随机颜色
  28.     ctx.fillRect(obstacle.x, obstacle.y, obstacle.width, obstacle.height);
  29. }

  31. function updateGame() {
  32.     ctx.clearRect(0, 0, canvas.width, canvas.height);

  34.     // 更新和绘制障碍物
  35.     obstacles.forEach((obstacle, index) => {
  36.         obstacle.x -= gameSpeed;
  37.         if (obstacle.x + obstacle.width < 0) {
  38.             obstacles.splice(index, 1); // 移除越界的障碍物
  39.         } else {
  40.             drawObstacle(obstacle);
  41.         }
  42.     });

  44.     requestAnimationFrame(updateGame);
  45. }

  47. // 每隔一段时间创建一个新的障碍物
  48. setInterval(createObstacle, 2000);

  50. updateGame();
复制代码


这个示例展示了如何创建和绘制随机颜色的障碍物。每隔2秒钟将会创建一个新的障碍物，并且它们会以一定的速度从右向左移动。如果它们离开了画布区域，将会被移除。

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

使用道具 举报

张复礼

3

主题

41

帖子

137

积分

注册会员

Rank: 2

积分
137
5#
 楼主| 发表于 2024-8-12 14:26:37 | 只看该作者
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');

let player = { x: canvas.width / 2 - 15, y: canvas.height - 60, width: 30, height: 30, dx: 5 };
let obstacles = [];
let gameInterval;
let gameOver = false;

document.addEventListener('keydown', movePlayer);

function startGame() {
    player.x = canvas.width / 2 - 15;
    obstacles = [];
    gameOver = false;
    document.getElementById('gameOverText').classList.add('hidden');
    document.getElementById('restartButton').classList.add('hidden');
    gameInterval = setInterval(updateGame, 20);
}

function updateGame() {
    clearCanvas();
    drawPlayer();
    updateObstacles();
    checkCollision();
}

function clearCanvas() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
}

function drawPlayer() {
    ctx.fillStyle = 'black';
    ctx.fillRect(player.x, player.y, player.width, player.height);
}

function movePlayer(event) {
    if (event.key === 'ArrowLeft' && player.x > 0) {
        player.x -= player.dx;
    }
    if (event.key === 'ArrowRight' && player.x < canvas.width - player.width) {
        player.x += player.dx;
    }
}

function updateObstacles() {
    if (Math.random() < 0.02) {
        let obstacleX = Math.random() * (canvas.width - 30);
        obstacles.push({ x: obstacleX, y: 0, width: 30, height: 30, dy: 2 });
    }

    ctx.fillStyle = 'red';
    for (let i = 0; i < obstacles.length; i++) {
        let obs = obstacles[i];
        obs.y += obs.dy;
        ctx.fillRect(obs.x, obs.y, obs.width, obs.height);

        if (obs.y > canvas.height) {
            obstacles.splice(i, 1);
            i--;
        }
    }
}

function checkCollision() {
    for (let i = 0; i < obstacles.length; i++) {
        let obs = obstacles[i];
        if (
            player.x < obs.x + obs.width &&
            player.x + player.width > obs.x &&
            player.y < obs.y + obs.height &&
            player.y + player.height > obs.y
        ) {
            endGame();
        }
    }
}

function endGame() {
    clearInterval(gameInterval);
    gameOver = true;
    document.getElementById('gameOverText').classList.remove('hidden');
    document.getElementById('restartButton').classList.remove('hidden');
}

// 启动游戏
startGame();

你好，这是我的火柴人躲避游戏js文件，我想让障碍物的颜色是随机的各种颜色。，请帮我修改一下。
回复 支持 反对

使用道具 举报

kaia

0

主题

1145

帖子

1715

积分

版主

Rank: 7Rank: 7Rank: 7

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


好的！要让障碍物的颜色是随机的，我们需要在生成障碍物时，给每个障碍物一个随机的颜色。我们可以通过生成随机颜色字符串实现。

### 第一步：生成随机颜色的函数

首先，我们定义一个函数来生成随机颜色：

  1. // 生成随机颜色
  2. function getRandomColor() {
  3.     const letters = '0123456789ABCDEF';
  4.     let color = '#';
  5.     for (let i = 0; i < 6; i++) {
  6.         color += letters[Math.floor(Math.random() * 16)];
  7.     }
  8.     return color;
  9. }
复制代码


### 第二步：创建障碍物时使用随机颜色

在为障碍物创建对象时，我们可以调用这个 `getRandomColor` 函数，并将生成的颜色存储在障碍物对象中。

### 第三步：绘制障碍物时使用存储的颜色

接下来，在绘制障碍物时，使用存储的颜色进行绘制。

让我们把这些步骤整合到你的代码中。

### 修改后的完整代码：

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

  4. let player = { x: canvas.width / 2 - 15, y: canvas.height - 60, width: 30, height: 30, dx: 5 };
  5. let obstacles = [];
  6. let gameInterval;
  7. let gameOver = false;

  9. document.addEventListener('keydown', movePlayer);

  11. function startGame() {
  12.     player.x = canvas.width / 2 - 15;
  13.     obstacles = [];
  14.     gameOver = false;
  15.     document.getElementById('gameOverText').classList.add('hidden');
  16.     document.getElementById('restartButton').classList.add('hidden');
  17.     gameInterval = setInterval(updateGame, 20);
  18. }

  20. function updateGame() {
  21.     clearCanvas();
  22.     drawPlayer();
  23.     updateObstacles();
  24.     checkCollision();
  25. }

  27. function clearCanvas() {
  28.     ctx.clearRect(0, 0, canvas.width, canvas.height);
  29. }

  31. function drawPlayer() {
  32.     ctx.fillStyle = 'black';
  33.     ctx.fillRect(player.x, player.y, player.width, player.height);
  34. }

  36. function movePlayer(event) {
  37.     if (event.key === 'ArrowLeft' && player.x > 0) {
  38.         player.x -= player.dx;
  39.     }
  40.     if (event.key === 'ArrowRight' && player.x < canvas.width - player.width) {
  41.         player.x += player.dx;
  42.     }
  43. }

  45. // 生成随机颜色
  46. function getRandomColor() {
  47.     const letters = '0123456789ABCDEF';
  48.     let color = '#';
  49.     for (let i = 0; i < 6; i++) {
  50.         color += letters[Math.floor(Math.random() * 16)];
  51.     }
  52.     return color;
  53. }

  55. function updateObstacles() {
  56.     if (Math.random() < 0.02) {
  57.         let obstacleX = Math.random() * (canvas.width - 30);
  58.         let randomColor = getRandomColor();
  59.         obstacles.push({ x: obstacleX, y: 0, width: 30, height: 30, dy: 2, color: randomColor });
  60.     }

  62.     for (let i = 0; i < obstacles.length; i++) {
  63.         let obs = obstacles[i];
  64.         obs.y += obs.dy;
  65.         ctx.fillStyle = obs.color; // 使用随机颜色
  66.         ctx.fillRect(obs.x, obs.y, obs.width, obs.height);

  68.         if (obs.y > canvas.height) {
  69.             obstacles.splice(i, 1);
  70.             i--;
  71.         }
  72.     }
  73. }

  75. function checkCollision() {
  76.     for (let i = 0; i < obstacles.length; i++) {
  77.         let obs = obstacles[i];
  78.         if (
  79.             player.x < obs.x + obs.width &&
  80.             player.x + player.width > obs.x &&
  81.             player.y < obs.y + obs.height &&
  82.             player.y + player.height > obs.y
  83.         ) {
  84.             endGame();
  85.         }
  86.     }
  87. }

  89. function endGame() {
  90.     clearInterval(gameInterval);
  91.     gameOver = true;
  92.     document.getElementById('gameOverText').classList.remove('hidden');
  93.     document.getElementById('restartButton').classList.remove('hidden');
  94. }

  96. // 启动游戏
  97. startGame();
复制代码


在这段代码中，每次生成一个新的障碍物时，我们都会使用 `getRandomColor()` 函数生成一个随机颜色，并将其存储在障碍物对象的 `color` 属性中。然后在绘制障碍物时，使用存储的 `color` 属性来设置填充样式，这样障碍物就会有随机的颜色了。

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

使用道具 举报

张复礼

3

主题

41

帖子

137

积分

注册会员

Rank: 2

积分
137
7#
 楼主| 发表于 2024-8-12 14:28:52 | 只看该作者
请修改游戏，让火柴人不仅可以左右移动，还可以上下移动。
回复 支持 反对

使用道具 举报

kaia

0

主题

1145

帖子

1715

积分

版主

Rank: 7Rank: 7Rank: 7

积分
1715
8#
发表于 2024-8-12 14:29:18 | 只看该作者
张复礼 发表于 2024-08-12 14:28
请修改游戏，让火柴人不仅可以左右移动，还可以上下移 ...


好的！我们可以修改代码，让火柴人不仅能够左右移动，还能够上下移动。为此，需要进行以下几个步骤：

1. **修改玩家的控制逻辑**，以支持上下移动。
2. **确保火柴人在游戏区域内移动**。
3. **调整移动速度**。

让我们一步步来完成这些修改。

### 修改控制逻辑以支持上下移动

首先，我们需要修改 `movePlayer` 函数，以使其处理上下方向的键盘事件。

### 完整的JavaScript代码：

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

  4. let player = { x: canvas.width / 2 - 15, y: canvas.height / 2 - 15, width: 30, height: 30, dx: 5, dy: 5 };
  5. let obstacles = [];
  6. let gameInterval;
  7. let gameOver = false;

  9. document.addEventListener('keydown', movePlayer);

  11. function startGame() {
  12.     player.x = canvas.width / 2 - 15;
  13.     player.y = canvas.height / 2 - 15;
  14.     obstacles = [];
  15.     gameOver = false;
  16.     document.getElementById('gameOverText').classList.add('hidden');
  17.     document.getElementById('restartButton').classList.add('hidden');
  18.     gameInterval = setInterval(updateGame, 20);
  19. }

  21. function updateGame() {
  22.     clearCanvas();
  23.     drawPlayer();
  24.     updateObstacles();
  25.     checkCollision();
  26. }

  28. function clearCanvas() {
  29.     ctx.clearRect(0, 0, canvas.width, canvas.height);
  30. }

  32. function drawPlayer() {
  33.     ctx.fillStyle = 'black';
  34.     ctx.fillRect(player.x, player.y, player.width, player.height);
  35. }

  37. function movePlayer(event) {
  38.     if (event.key === 'ArrowLeft' && player.x > 0) {
  39.         player.x -= player.dx;
  40.     }
  41.     if (event.key === 'ArrowRight' && player.x < canvas.width - player.width) {
  42.         player.x += player.dx;
  43.     }
  44.     if (event.key === 'ArrowUp' && player.y > 0) {
  45.         player.y -= player.dy;
  46.     }
  47.     if (event.key === 'ArrowDown' && player.y < canvas.height - player.height) {
  48.         player.y += player.dy;
  49.     }
  50. }

  52. // 生成随机颜色
  53. function getRandomColor() {
  54.     const letters = '0123456789ABCDEF';
  55.     let color = '#';
  56.     for (let i = 0; i < 6; i++) {
  57.         color += letters[Math.floor(Math.random() * 16)];
  58.     }
  59.     return color;
  60. }

  62. function updateObstacles() {
  63.     if (Math.random() < 0.02) {
  64.         let obstacleX = Math.random() * (canvas.width - 30);
  65.         let randomColor = getRandomColor();
  66.         obstacles.push({ x: obstacleX, y: 0, width: 30, height: 30, dy: 2, color: randomColor });
  67.     }

  69.     for (let i = 0; i < obstacles.length; i++) {
  70.         let obs = obstacles[i];
  71.         obs.y += obs.dy;
  72.         ctx.fillStyle = obs.color; // 使用随机颜色
  73.         ctx.fillRect(obs.x, obs.y, obs.width, obs.height);

  75.         if (obs.y > canvas.height) {
  76.             obstacles.splice(i, 1);
  77.             i--;
  78.         }
  79.     }
  80. }

  82. function checkCollision() {
  83.     for (let i = 0; i < obstacles.length; i++) {
  84.         let obs = obstacles[i];
  85.         if (
  86.             player.x < obs.x + obs.width &&
  87.             player.x + player.width > obs.x &&
  88.             player.y < obs.y + obs.height &&
  89.             player.y + player.height > obs.y
  90.         ) {
  91.             endGame();
  92.         }
  93.     }
  94. }

  96. function endGame() {
  97.     clearInterval(gameInterval);
  98.     gameOver = true;
  99.     document.getElementById('gameOverText').classList.remove('hidden');
  100.     document.getElementById('restartButton').classList.remove('hidden');
  101. }

  103. // 启动游戏
  104. startGame();
复制代码


以上修改主要是：

1. **初始化玩家位置**：在 `startGame` 函数中，确保玩家在画布的中心位置。
2. **更新玩家控制逻辑**：在 `movePlayer` 函数中添加对 `ArrowUp` 和 `ArrowDown` 键的支持。
3. **确保玩家在画布范围内移动**：通过检查 `player.x` 和 `player.y` ，确保玩家不会移动出画布边界。

现在，火柴人不仅可以左右移动，还可以上下移动。希望这对你有帮助！如果有任何疑问或进一步的问题，请随时告诉我！
回复 支持 反对

使用道具 举报

张复礼

3

主题

41

帖子

137

积分

注册会员

Rank: 2

积分
137
9#
 楼主| 发表于 2024-8-12 14:34:09 | 只看该作者
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');

let snake = [{ x: 150, y: 150 }];
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[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: 150, y: 150 }];
    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';
});

你好，这是我的贪吃蛇js文件，我想新增一个“修改贪吃蛇颜色”的下拉菜单，下拉后可选择贪吃蛇的颜色。
回复 支持 反对

使用道具 举报

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
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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