科学教育

标题: 吴一轩贪吃蛇 [打印本页]

作者: 吴一轩 时间: 2025-11-6 11:57
标题: 吴一轩贪吃蛇

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>贪吃蛇游戏</title>
<style>
      body {
         font-family: 'Arial', sans-serif;
         display: flex;
         flex-direction: column;
         align-items: center;
         background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
         min-height: 100vh;
         margin: 0;
         padding: 20px;
      }
      #game-container {
         display: flex;
         flex-direction: column;
         align-items: center;
         gap: 20px;
      }
      #game-board {
         display: grid;
         grid-template-columns: repeat(20, 20px);
         grid-template-rows: repeat(20, 20px);
         gap: 1px;
         background-color: #333;
         border: 3px solid #444;
         border-radius: 5px;
         box-shadow: 0 10px 20px rgba(0,0,0,0.2);
      }
      .cell {
         width: 20px;
         height: 20px;
         background-color: #444;
      }
      .snake {
         background-color: #4CAF50;
         border-radius: 2px;
      }
      .food {
         background-color: #f44336;
         border-radius: 50%;
      }
      #score-panel {
         display: flex;
         justify-content: space-between;
         width: 100%;
         max-width: 400px;
         background-color: white;
         padding: 15px;
         border-radius: 8px;
         box-shadow: 0 4px 8px rgba(0,0,0,0.1);
      }
      #controls {
         display: flex;
         gap: 10px;
      }
      button {
         padding: 8px 15px;
         background-color: #4CAF50;
         color: white;
         border: none;
         border-radius: 4px;
         cursor: pointer;
         transition: background-color 0.3s;
      }
      button:hover {
         background-color: #45a049;
      }
      #game-over {
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
         background-color: rgba(0,0,0,0.8);
         color: white;
         padding: 20px;
         border-radius: 8px;
         text-align: center;
         display: none;
      }
</style>
</head>
<body>
<div id="game-container">
      <h1>贪吃蛇游戏</h1>
      <div id="score-panel">
         <div>得分: <span id="score">0</span></div>
         <div>最高分: <span id="high-score">0</span></div>
         <div id="controls">
            <button id="start-btn">开始游戏</button>
            <button id="pause-btn">暂停</button>
         </div>
      </div>
      <div id="game-board"></div>
</div>
<div id="game-over">
      <h2>游戏结束!</h2>
      <p>你的得分: <span id="final-score">0</span></p>
      <button id="restart-btn">重新开始</button>
</div>

<script>
      document.addEventListener('DOMContentLoaded', () => {
         const GRID_SIZE = 20;
         const CELL_SIZE = 20;
         const board = document.getElementById('game-board');
         const scoreDisplay = document.getElementById('score');
         const highScoreDisplay = document.getElementById('high-score');
         const startBtn = document.getElementById('start-btn');
         const pauseBtn = document.getElementById('pause-btn');
         const restartBtn = document.getElementById('restart-btn');
         const gameOverDisplay = document.getElementById('game-over');
         const finalScoreDisplay = document.getElementById('final-score');

         let snake = [{x: 10, y: 10}];
         let food = generateFood();
         let direction = 'RIGHT';
         let nextDirection = 'RIGHT';
         let gameInterval;
         let speed = 150;
         let score = 0;
         let highScore = localStorage.getItem('snakeHighScore') || 0;
         let isPaused = false;
         let isGameRunning = false;

         highScoreDisplay.textContent = highScore;
         function initBoard() {
            board.innerHTML = '';
            for (let i = 0; i < GRID_SIZE * GRID_SIZE; i++) {
                  const cell = document.createElement('div');
                  cell.classList.add('cell');
                  board.appendChild(cell);
            }
         }
         function generateFood() {
            let newFood;
            do {
                  newFood = {
                     x: Math.floor(Math.random() * GRID_SIZE),
                     y: Math.floor(Math.random() * GRID_SIZE)
                  };
            } while (snake.some(segment => segment.x === newFood.x && segment.y === newFood.y));
            return newFood;
         }

         function draw() {
            const cells = document.querySelectorAll('.cell');
            cells.forEach(cell => {
                  cell.classList.remove('snake', 'food');
            });
            snake.forEach(segment => {
                  const index = segment.y * GRID_SIZE + segment.x;
                  if (index >= 0 && index < cells.length) {
                     cells[index].classList.add('snake');
                  }
            });
            const foodIndex = food.y * GRID_SIZE + food.x;
            if (foodIndex >= 0 && foodIndex < cells.length) {
                  cells[foodIndex].classList.add('food');
            }
         }
         function update() {
            if (isPaused) return;

            direction = nextDirection;
            const head = {...snake[0]};
            switch (direction) {
                  case 'UP':
                     head.y--;
                     break;
                  case 'DOWN':
                     head.y++;
                     break;
                  case 'LEFT':
                     head.x--;
                     break;
                  case 'RIGHT':
                     head.x++;
                     break;
            }

            if (
                  head.x < 0 || head.x >= GRID_SIZE ||
                  head.y < 0 || head.y >= GRID_SIZE ||
                  snake.some(segment => segment.x === head.x && segment.y === head.y)
            ) {
                  gameOver();
                  return;
            }

            snake.unshift(head);

            // 检查是否吃到食物
            if (head.x === food.x && head.y === food.y) {
                  score += 10;
                  scoreDisplay.textContent = score;
                  food = generateFood();

                  // 每得100分加速
                  if (score % 100 === 0 && speed > 50) {
                     speed -= 10;
                     clearInterval(gameInterval);
                     gameInterval = setInterval(update, speed);
                  }
            } else {
                  snake.pop();
            }

            draw();
         }

               function startGame() {
            if (isGameRunning) return;

            initBoard();
            snake = [{x: 10, y: 10}];
            food = generateFood();
            direction = 'RIGHT';
            nextDirection = 'RIGHT';
            score = 0;
            scoreDisplay.textContent = score;
            speed = 150;
            isPaused = false;
            isGameRunning = true;
            gameOverDisplay.style.display = 'none';

            draw();
            gameInterval = setInterval(update, speed);
         }
         function togglePause() {
            isPaused = !isPaused;
            pauseBtn.textContent = isPaused ? '继续' : '暂停';
         }
         function gameOver() {
            clearInterval(gameInterval);
            isGameRunning = false;

            if (score > highScore) {
                  highScore = score;
                  localStorage.setItem('snakeHighScore', highScore);
                  highScoreDisplay.textContent = highScore;
            }

            finalScoreDisplay.textContent = score;
            gameOverDisplay.style.display = 'block';
         }
         startBtn.addEventListener('click', startGame);
         pauseBtn.addEventListener('click', togglePause);
         restartBtn.addEventListener('click', startGame);

         document.addEventListener('keydown', e => {
            if (!isGameRunning) return;

            switch (e.key) {
                  case 'ArrowUp':
                     if (direction !== 'DOWN') nextDirection = 'UP';
                     break;
                  case 'ArrowDown':
                     if (direction !== 'UP') nextDirection = 'DOWN';
                     break;
                  case 'ArrowLeft':
                     if (direction !== 'RIGHT') nextDirection = 'LEFT';
                     break;
                  case 'ArrowRight':
                     if (direction !== 'LEFT') nextDirection = 'RIGHT';
                     break;
                  case ' ':
                     togglePause();
                     break;
            }
         });
         initBoard();
      });
</script>
</body>
</html>

作者: kaia 时间: 2025-11-6 11:57
嗨，我是你的学伴小助手！让我们一起来看看这个贪吃蛇游戏的源代码。

1. **CSS部分**：这部分主要是对整个游戏页面的样式设置，包括背景颜色、字体样式、游戏板块的布局等。其中，`.cell`类定义了每个格子的样式，`.snake`类定义了蛇的样式，`.food`类定义了食物的样式等等。

2. **HTML部分**：这部分是游戏界面的展示，包括得分显示、按钮功能等。当游戏结束时会显示游戏结束的界面，并展示得分以及重新开始按钮。

3. **JavaScript部分**：这部分是游戏的逻辑部分，主要包括初始化游戏板、生成食物、移动蛇身、判断游戏结束等功能。在游戏开始时会初始化蛇和食物位置，根据用户输入的方向进行移动，判断是否吃到食物并更新得分，还有暂停、重新开始游戏等功能。

如果你想玩这个游戏，可以点击“开始游戏”按钮，然后可以使用键盘上的方向键控制蛇的移动方向，尝试吃到食物并不断增加得分。记得避免蛇头碰到边界或者碰到自己的身体哦！

希望我的解释对你有帮助，有任何问题都可以继续问我哦！一起加油玩游戏吧！????????

作者: 吴一轩 时间: 2025-11-6 11:58
帮我改一下颜色

作者: kaia 时间: 2025-11-6 11:58

吴一轩发表于 2025-11-06 11:58
帮我改一下颜色

当然可以！如果你想要改变游戏界面的颜色，可以通过修改CSS部分中的颜色数值来实现。以下是一些常见的颜色代码，你可以根据自己的喜好进行调整：

1. 如果你想将背景颜色改为粉色，可以将 `#f5f7fa` 修改为 `#FFC0CB`。
2. 如果你想将蛇身的颜色改为蓝色，可以将 `#4CAF50` 修改为 `#4169E1`。
3. 如果你想将食物的颜色改为橙色，可以将 `#f44336` 修改为 `#FFA500`。

记得在修改完颜色之后刷新页面，看效果是否符合你的期待哦！希望这样能让你更喜欢这个贪吃蛇游戏的界面。如果有任何其他想法或问题，都可以告诉我哦！一起来打造一个独一无二的贪吃蛇游戏吧！????????

作者: 吴一轩 时间: 2025-11-6 11:59
帮我改一下颜色

作者: kaia 时间: 2025-11-6 11:59

吴一轩发表于 2025-11-06 11:59
帮我改一下颜色

当然可以！以下是一个修改后的CSS部分，你可以直接复制替换原始代码中的对应部分来改变游戏界面的颜色：

body {
font-family: 'Arial', sans-serif;
display: flex;
flex-direction: column;
align-items: center;
background: linear-gradient(135deg, #FFA07A 0%, #87CEFA 100%); /* 背景颜色修改为橙色和淡蓝色 */
min-height: 100vh;
margin: 0;
padding: 20px;
}
.snake {
background-color: #4169E1; /* 蛇身颜色修改为蓝色 */
}
.food {
background-color: #FFA500; /* 食物颜色修改为橙色 */
}

复制代码

将这段修改后的CSS代码粘贴到你原始代码的对应位置，然后刷新页面，新的颜色效果就会生效了！希望你喜欢这些新的颜色选择。如果还有其他想要修改的地方或者有其他问题，都可以随时告诉我哦！玩游戏要开心哦！????????

作者: 吴一轩 时间: 2025-11-6 12:00
代码显示一下

作者: kaia 时间: 2025-11-6 12:00

吴一轩发表于 2025-11-06 12:00
代码显示一下

复制代码

以上是修改后的代码片段，你可以将这段代码粘贴到你的 HTML 文件中，通过浏览器打开查看新的颜色效果。希望这次改动符合你的期待！如果有其他需求或问题，随时告诉我哦！祝你玩得开心！????????

作者: 吴一轩 时间: 2025-11-13 11:44
function drawSnake() {
context.clearRect(0, 0, canvas.width, canvas.height);
snake.forEach(part => {
context.fillStyle = "green";
context.fillRect(part.x, part.y, gridSize, gridSize);
});
}

作者: kaia 时间: 2025-11-13 11:44

吴一轩发表于 2025-11-13 11:44
function drawSnake() {
context.clearRect(0, 0, ...

这段代码看起来是用来绘制贪吃蛇的身体部分的函数。让我解释一下这段代码：

- `context.clearRect(0, 0, canvas.width, canvas.height);`：这行代码是在每次绘制前清除画布，确保之前的绘制内容被清除，以便重新绘制新的蛇身体。
- `snake.forEach(part => {...});`：这个部分是遍历贪吃蛇的身体部分（每一节），对每一节进行绘制。
- `context.fillStyle = "green";`：这行代码将填充颜色设置为绿色，即贪吃蛇的身体颜色。
- `context.fillRect(part.x, part.y, gridSize, gridSize);`：这行代码使用 `fillRect()` 方法在指定位置 `part.x, part.y` 处绘制一个正方形，大小为 `gridSize * gridSize`，即表示贪吃蛇的每一节身体。

如果你想修改贪吃蛇的身体颜色，只需将 `"green"` 替换为其他颜色值，比如 `"blue"`、`"#FFA500"`（橙色）等。例如，要将贪吃蛇的身体颜色改为蓝色，你可以将代码修改为 `context.fillStyle = "blue";`。

希望这样的解释对你有帮助！如果还有其他问题或者需要进一步解释，请随时告诉我哦！一起努力学习编程吧！????????

欢迎光临科学教育 (http://sci-edu.net/)

Powered by Discuz! X3.2