科学教育

标题: 林奕锦- [打印本页]
作者: 林奕锦    时间: 2024-7-12 10:46
标题: 林奕锦-
请你帮我设计一个网页贪吃蛇游戏，有html、css、js文件，并且有丰富的背景图片和食物，还有开始按钮和结束提示，以及生动的蛇头和蛇身
作者: kaia    时间: 2024-7-12 10:47
当然可以！以下是一个网页贪吃蛇游戏的基本结构实现，包括HTML、CSS和JS文件。这个实现包含丰富的背景图片和食物，开始按钮和结束提示，以及生动的蛇头和蛇身。

### HTML (`index.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.     <div id="game-container">
  11.         <canvas id="game-board"></canvas>
  12.         <div id="controls">
  13.             <button id="start-button">开始游戏</button>
  14.             <div id="game-over" class="hidden">游戏结束</div>
  15.         </div>
  16.     </div>
  17.     <script src="script.js"></script>
  18. </body>
  19. </html>
复制代码


### CSS (`style.css`)

  1. body {
  2.     display: flex;
  3.     justify-content: center;
  4.     align-items: center;
  5.     height: 100vh;
  6.     margin: 0;
  7.     background-image: url('background.jpg');
  8.     background-size: cover;
  9. }

  11. #game-container {
  12.     display: flex;
  13.     flex-direction: column;
  14.     align-items: center;
  15. }

  17. #game-board {
  18.     border: 1px solid #000;
  19.     background-color: rgba(255, 255, 255, 0.6);
  20. }

  22. #controls {
  23.     margin-top: 20px;
  24.     text-align: center;
  25. }

  27. button {
  28.     padding: 10px 20px;
  29.     font-size: 16px;
  30.     cursor: pointer;
  31. }

  33. .hidden {
  34.     display: none;
  35. }

  37. #game-over {
  38.     font-size: 24px;
  39.     color: red;
  40.     margin-top: 20px;
  41. }
复制代码


### JavaScript (`script.js`)

  1. const canvas = document.getElementById('game-board');
  2. const context = canvas.getContext('2d');
  3. const startButton = document.getElementById('start-button');
  4. const gameOverText = document.getElementById('game-over');

  6. canvas.width = 400;
  7. canvas.height = 400;

  9. const cellSize = 20;
  10. let snake = [{ x: 200, y: 200 }];
  11. let direction = { x: 0, y: 0 };
  12. let food = {};
  13. let gameInterval;

  15. function drawBackground() {
  16.     context.fillStyle = 'rgba(0, 128, 128, 0.5)';
  17.     context.fillRect(0, 0, canvas.width, canvas.height);
  18. }

  20. function drawSnake() {
  21.     context.fillStyle = 'green';
  22.     context.fillRect(snake[0].x, snake[0].y, cellSize, cellSize);
  23.     context.fillStyle = 'lime';
  24.     for (let i = 1; i < snake.length; i++) {
  25.         context.fillRect(snake[i].x, snake[i].y, cellSize, cellSize);
  26.     }
  27. }

  29. function spawnFood() {
  30.     food.x = Math.floor(Math.random() * canvas.width / cellSize) * cellSize;
  31.     food.y = Math.floor(Math.random() * canvas.height / cellSize) * cellSize;
  32. }

  34. function drawFood() {
  35.     context.fillStyle = 'red';
  36.     context.fillRect(food.x, food.y, cellSize, cellSize);
  37. }

  39. function updateSnake() {
  40.     const head = { x: snake[0].x + direction.x * cellSize, y: snake[0].y + direction.y * cellSize };
  41.     snake.unshift(head);

  43.     if (head.x === food.x && head.y === food.y) {
  44.         spawnFood();
  45.     } else {
  46.         snake.pop();
  47.     }

  49.     if (head.x < 0 || head.x >= canvas.width || head.y < 0 || head.y >= canvas.height || snake.slice(1).some(segment => segment.x === head.x && segment.y === head.y)) {
  50.         gameOver();
  51.     }
  52. }

  54. function gameOver() {
  55.     clearInterval(gameInterval);
  56.     gameOverText.classList.remove('hidden');
  57. }

  59. function gameLoop() {
  60.     drawBackground();
  61.     drawSnake();
  62.     drawFood();
  63.     updateSnake();
  64. }

  66. document.addEventListener('keydown', event => {
  67.     if (event.key === 'ArrowUp' && direction.y === 0) {
  68.         direction = { x: 0, y: -1 };
  69.     } else if (event.key === 'ArrowDown' && direction.y === 0) {
  70.         direction = { x: 0, y: 1 };
  71.     } else if (event.key === 'ArrowLeft' && direction.x === 0) {
  72.         direction = { x: -1, y: 0 };
  73.     } else if (event.key === 'ArrowRight' && direction.x === 0) {
  74.         direction = { x: 1, y: 0 };
  75.     }
  76. });

  78. startButton.addEventListener('click', () => {
  79.     snake = [{ x: 200, y: 200 }];
  80.     direction = { x: 0, y: 0 };
  81.     spawnFood();
  82.     gameOverText.classList.add('hidden');
  83.     gameInterval = setInterval(gameLoop, 100);
  84. });
复制代码


### 补充资源

1. **背景图片:** `background.jpg`
2. **蛇头和身体图片:** 可以用 CSS 渲染或者图片替代，目前使用颜色填充。

将上述代码整合到对应的文件中，并确保 `background.jpg` 在同一目录下。打开 `index.html` 就可以看到贪吃蛇游戏了。享受游戏吧！如果你有任何进一步的需求或问题，请随时告诉我！
作者: 林奕锦    时间: 2024-7-12 10:49
kaia 发表于 2024-7-12 10:47
当然可以！以下是一个网页贪吃蛇游戏的基本结构实现，包括HTML、CSS和JS文件。这个实现包含丰富的背景图片 ...

能不能再加上生动的蛇头和蛇身
作者: kaia    时间: 2024-7-12 10:50
林奕锦 发表于 2024-07-12 10:49
能不能再加上生动的蛇头和蛇身


当然可以！我们可以用图片来代替蛇头和蛇身的简单颜色填充，以实现更生动的效果。下面是修改后的实现:

### HTML (`index.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.     <div id="game-container">
  11.         <canvas id="game-board"></canvas>
  12.         <div id="controls">
  13.             <button id="start-button">开始游戏</button>
  14.             <div id="game-over" class="hidden">游戏结束</div>
  15.         </div>
  16.     </div>
  17.     <script src="script.js"></script>
  18. </body>
  19. </html>
复制代码


### CSS (`style.css`)

  1. body {
  2.     display: flex;
  3.     justify-content: center;
  4.     align-items: center;
  5.     height: 100vh;
  6.     margin: 0;
  7.     background-image: url('background.jpg');
  8.     background-size: cover;
  9. }

  11. #game-container {
  12.     display: flex;
  13.     flex-direction: column;
  14.     align-items: center;
  15. }

  17. #game-board {
  18.     border: 1px solid #000;
  19.     background-color: rgba(255, 255, 255, 0.6);
  20. }

  22. #controls {
  23.     margin-top: 20px;
  24.     text-align: center;
  25. }

  27. button {
  28.     padding: 10px 20px;
  29.     font-size: 16px;
  30.     cursor: pointer;
  31. }

  33. .hidden {
  34.     display: none;
  35. }

  37. #game-over {
  38.     font-size: 24px;
  39.     color: red;
  40.     margin-top: 20px;
  41. }
复制代码


### JavaScript (`script.js`)

  1. const canvas = document.getElementById('game-board');
  2. const context = canvas.getContext('2d');
  3. const startButton = document.getElementById('start-button');
  4. const gameOverText = document.getElementById('game-over');

  6. canvas.width = 400;
  7. canvas.height = 400;

  9. const cellSize = 20;
  10. let snake = [];
  11. let direction = { x: 0, y: 0 };
  12. let food = {};
  13. let gameInterval;

  15. const snakeHeadImg = new Image();
  16. snakeHeadImg.src = 'snake-head.png';

  18. const snakeBodyImg = new Image();
  19. snakeBodyImg.src = 'snake-body.png';

  21. const foodImg = new Image();
  22. foodImg.src = 'food.png';

  24. function drawBackground() {
  25.     context.fillStyle = 'rgba(0, 128, 128, 0.5)';
  26.     context.fillRect(0, 0, canvas.width, canvas.height);
  27. }

  29. function drawSnake() {
  30.     for (let i = 0; i < snake.length; i++) {
  31.         const part = snake[i];
  32.         if (i === 0) { // 画蛇头
  33.             context.drawImage(snakeHeadImg, part.x, part.y, cellSize, cellSize);
  34.         } else { // 画蛇身
  35.             context.drawImage(snakeBodyImg, part.x, part.y, cellSize, cellSize);
  36.         }
  37.     }
  38. }

  40. function spawnFood() {
  41.     food.x = Math.floor(Math.random() * canvas.width / cellSize) * cellSize;
  42.     food.y = Math.floor(Math.random() * canvas.height / cellSize) * cellSize;
  43. }

  45. function drawFood() {
  46.     context.drawImage(foodImg, food.x, food.y, cellSize, cellSize);
  47. }

  49. function updateSnake() {
  50.     const head = { x: snake[0].x + direction.x * cellSize, y: snake[0].y + direction.y * cellSize };
  51.     snake.unshift(head);

  53.     if (head.x === food.x && head.y === food.y) {
  54.         spawnFood();
  55.     } else {
  56.         snake.pop();
  57.     }

  59.     if (head.x < 0 || head.x >= canvas.width || head.y < 0 || head.y >= canvas.height || snake.slice(1).some(segment => segment.x === head.x && segment.y === head.y)) {
  60.         gameOver();
  61.     }
  62. }

  64. function gameOver() {
  65.     clearInterval(gameInterval);
  66.     gameOverText.classList.remove('hidden');
  67. }

  69. function gameLoop() {
  70.     drawBackground();
  71.     drawSnake();
  72.     drawFood();
  73.     updateSnake();
  74. }

  76. document.addEventListener('keydown', event => {
  77.     if (event.key === 'ArrowUp' && direction.y === 0) {
  78.         direction = { x: 0, y: -1 };
  79.     } else if (event.key === 'ArrowDown' && direction.y === 0) {
  80.         direction = { x: 0, y: 1 };
  81.     } else if (event.key === 'ArrowLeft' && direction.x === 0) {
  82.         direction = { x: -1, y: 0 };
  83.     } else if (event.key === 'ArrowRight' && direction.x === 0) {
  84.         direction = { x: 1, y: 0 };
  85.     }
  86. });

  88. startButton.addEventListener('click', () => {
  89.     snake = [{ x: cellSize * 5, y: cellSize * 5 }];
  90.     direction = { x: 0, y: 0 };
  91.     spawnFood();
  92.     gameOverText.classList.add('hidden');
  93.     gameInterval = setInterval(gameLoop, 100);
  94. });
复制代码


### 补充资源

1. **背景图片:** `background.jpg`
2. **蛇头图片:** `snake-head.png`
3. **蛇身图片:** `snake-body.png`
4. **食物图片:** `food.png`

确保将这些图片文件存放在与HTML、CSS和JavaScript文件相同的目录下。打开 `index.html` 运行游戏时，你会看到具有生动蛇头、蛇身和食物的贪吃蛇游戏了。享受游戏吧！如果你有进一步的需求或问题，请随时告诉我！
作者: 林奕锦    时间: 2024-7-12 11:05
情在代码中告诉我添加图片的位置
作者: kaia    时间: 2024-7-12 11:06
林奕锦 发表于 2024-07-12 11:05
情在代码中告诉我添加图片的位置


好的，我会在代码中添加具体的注释，指导你如何添加图片。确保将图片文件放在与HTML、CSS和JavaScript文件相同的目录下。

### HTML (`index.html`)

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>贪吃蛇游戏</title>
  7.     <link rel="stylesheet" href="style.css">
  8. </head>
  9. <body>
  10.     <div id="game-container">
  11.         <canvas id="game-board"></canvas>
  12.         <div id="controls">
  13.             <button id="start-button">开始游戏</button>
  14.             <div id="game-over" class="hidden">游戏结束</div>
  15.         </div>
  16.     </div>
  17.     <script src="script.js"></script>
  18. </body>
  19. </html>
复制代码


### CSS (`style.css`)

  1. body {
  2.     display: flex;
  3.     justify-content: center;
  4.     align-items: center;
  5.     height: 100vh;
  6.     margin: 0;
  7.     background-image: url('background.jpg'); /* 背景图片 */
  8.     background-size: cover;
  9. }

  11. #game-container {
  12.     display: flex;
  13.     flex-direction: column;
  14.     align-items: center;
  15. }

  17. #game-board {
  18.     border: 1px solid #000;
  19.     background-color: rgba(255, 255, 255, 0.6);
  20. }

  22. #controls {
  23.     margin-top: 20px;
  24.     text-align: center;
  25. }

  27. button {
  28.     padding: 10px 20px;
  29.     font-size: 16px;
  30.     cursor: pointer;
  31. }

  33. .hidden {
  34.     display: none;
  35. }

  37. #game-over {
  38.     font-size: 24px;
  39.     color: red;
  40.     margin-top: 20px;
  41. }
复制代码


### JavaScript (`script.js`)

  1. const canvas = document.getElementById('game-board');
  2. const context = canvas.getContext('2d');
  3. const startButton = document.getElementById('start-button');
  4. const gameOverText = document.getElementById('game-over');

  6. canvas.width = 400;
  7. canvas.height = 400;

  9. const cellSize = 20;
  10. let snake = [{ x: 2 * cellSize, y: 2 * cellSize }]; // 初始位置
  11. let direction = { x: 0, y: 0 };
  12. let food = {};
  13. let gameInterval;

  15. // 加载蛇头和蛇身图像
  16. const snakeHeadImg = new Image();
  17. snakeHeadImg.src = 'snake-head.png'; // 蛇头图片位置

  19. const snakeBodyImg = new Image();
  20. snakeBodyImg.src = 'snake-body.png'; // 蛇身图片位置

  22. // 加载食物图像
  23. const foodImg = new Image();
  24. foodImg.src = 'food.png'; // 食物图片位置

  26. function drawBackground() {
  27.     context.fillStyle = 'rgba(0, 128, 128, 0.5)';
  28.     context.fillRect(0, 0, canvas.width, canvas.height);
  29. }

  31. function drawSnake() {
  32.     for (let i = 0; i < snake.length; i++) {
  33.         const part = snake[i];
  34.         if (i === 0) { // 画蛇头
  35.             context.drawImage(snakeHeadImg, part.x, part.y, cellSize, cellSize);
  36.         } else { // 画蛇身
  37.             context.drawImage(snakeBodyImg, part.x, part.y, cellSize, cellSize);
  38.         }
  39.     }
  40. }

  42. function spawnFood() {
  43.     food.x = Math.floor(Math.random() * canvas.width / cellSize) * cellSize;
  44.     food.y = Math.floor(Math.random() * canvas.height / cellSize) * cellSize;
  45. }

  47. function drawFood() {
  48.     context.drawImage(foodImg, food.x, food.y, cellSize, cellSize);
  49. }

  51. function updateSnake() {
  52.     const head = { x: snake[0].x + direction.x * cellSize, y: snake[0].y + direction.y * cellSize };
  53.     snake.unshift(head);

  55.     if (head.x === food.x && head.y === food.y) {
  56.         spawnFood();
  57.     } else {
  58.         snake.pop();
  59.     }

  61.     if (head.x < 0 || head.x >= canvas.width || head.y < 0 || head.y >= canvas.height || snake.slice(1).some(segment => segment.x === head.x && segment.y === head.y)) {
  62.         gameOver();
  63.     }
  64. }

  66. function gameOver() {
  67.     clearInterval(gameInterval);
  68.     gameOverText.classList.remove('hidden');
  69. }

  71. function gameLoop() {
  72.     drawBackground();
  73.     drawSnake();
  74.     drawFood();
  75.     updateSnake();
  76. }

  78. document.addEventListener('keydown', event => {
  79.     if (event.key === 'ArrowUp' && direction.y === 0) {
  80.         direction = { x: 0, y: -1 };
  81.     } else if (event.key === 'ArrowDown' && direction.y === 0) {
  82.         direction = { x: 0, y: 1 };
  83.     } else if (event.key === 'ArrowLeft' && direction.x === 0) {
  84.         direction = { x: -1, y: 0 };
  85.     } else if (event.key === 'ArrowRight' && direction.x === 0) {
  86.         direction = { x: 1, y: 0 };
  87.     }
  88. });

  90. startButton.addEventListener('click', () => {
  91.     snake = [{ x: 2 * cellSize, y: 2 * cellSize }];
  92.     direction = { x: 0, y: 0 };
  93.     spawnFood();
  94.     gameOverText.classList.add('hidden');
  95.     gameInterval = setInterval(gameLoop, 100);
  96. });
复制代码


### 补充资源

请确保以下图片文件（背景、蛇头、蛇身、食物）与你的 HTML、CSS 和 JavaScript 文件位于同一目录下：

1. **背景图片:** `background.jpg`
2. **蛇头图片:** `snake-head.png`
3. **蛇身图片:** `snake-body.png`
4. **食物图片:** `food.png`

以上是完整的代码，确保所有图片都放置在正确的位置后，打开 `index.html` 文件即可运行具有生动蛇头和蛇身的贪吃蛇游戏。希望你喜欢这个游戏！如果有任何问题或者进一步的需求，请随时告诉我。
作者: 林奕锦    时间: 2024-7-12 11:06
kaia 发表于 2024-7-12 10:50
当然可以！我们可以用图片来代替蛇头和蛇身的简单颜色填充，以实现更生动的效果。下面是修改后的实现:

# ...


请在代码中告诉我添加图片的位置
作者: kaia    时间: 2024-7-12 11:07
林奕锦 发表于 2024-07-12 11:06
请在代码中告诉我添加图片的位置


明白了，我会在代码中添加详细的注释，指导你如何添加图片的位置。请确保将图片文件放在与HTML、CSS和JavaScript文件相同的目录下。

### HTML (`index.html`)

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>贪吃蛇游戏</title>
  7.     <link rel="stylesheet" href="style.css">
  8. </head>
  9. <body>
  10.     <div id="game-container">
  11.         <canvas id="game-board"></canvas>
  12.         <div id="controls">
  13.             <button id="start-button">开始游戏</button>
  14.             <div id="game-over" class="hidden">游戏结束</div>
  15.         </div>
  16.     </div>
  17.     <script src="script.js"></script>
  18. </body>
  19. </html>
复制代码


### CSS (`style.css`)

  1. body {
  2.     display: flex;
  3.     justify-content: center;
  4.     align-items: center;
  5.     height: 100vh;
  6.     margin: 0;
  7.     background-image: url('background.jpg'); /* 背景图片 */
  8.     background-size: cover;
  9. }

  11. #game-container {
  12.     display: flex;
  13.     flex-direction: column;
  14.     align-items: center;
  15. }

  17. #game-board {
  18.     border: 1px solid #000;
  19.     background-color: rgba(255, 255, 255, 0.6);
  20. }

  22. #controls {
  23.     margin-top: 20px;
  24.     text-align: center;
  25. }

  27. button {
  28.     padding: 10px 20px;
  29.     font-size: 16px;
  30.     cursor: pointer;
  31. }

  33. .hidden {
  34.     display: none;
  35. }

  37. #game-over {
  38.     font-size: 24px;
  39.     color: red;
  40.     margin-top: 20px;
  41. }
复制代码


### JavaScript (`script.js`)

  1. const canvas = document.getElementById('game-board');
  2. const context = canvas.getContext('2d');
  3. const startButton = document.getElementById('start-button');
  4. const gameOverText = document.getElementById('game-over');

  6. canvas.width = 400;
  7. canvas.height = 400;

  9. const cellSize = 20;
  10. let snake = [{ x: 200, y: 200 }];
  11. let direction = { x: 0, y: 0 };
  12. let food = {};
  13. let gameInterval;

  15. // 加载蛇头和蛇身图像
  16. const snakeHeadImg = new Image();
  17. snakeHeadImg.src = 'snake-head.png'; // 蛇头图片位置

  19. const snakeBodyImg = new Image();
  20. snakeBodyImg.src = 'snake-body.png'; // 蛇身图片位置

  22. // 加载食物图像
  23. const foodImg = new Image();
  24. foodImg.src = 'food.png'; // 食物图片位置

  26. function drawBackground() {
  27.     context.fillStyle = 'rgba(0, 128, 128, 0.5)';
  28.     context.fillRect(0, 0, canvas.width, canvas.height);
  29. }

  31. function drawSnake() {
  32.     for (let i = 0; i < snake.length; i++) {
  33.         const part = snake[i];
  34.         if (i === 0) { // 画蛇头
  35.             context.drawImage(snakeHeadImg, part.x, part.y, cellSize, cellSize);
  36.         } else { // 画蛇身
  37.             context.drawImage(snakeBodyImg, part.x, part.y, cellSize, cellSize);
  38.         }
  39.     }
  40. }

  42. function spawnFood() {
  43.     food.x = Math.floor(Math.random() * canvas.width / cellSize) * cellSize;
  44.     food.y = Math.floor(Math.random() * canvas.height / cellSize) * cellSize;
  45. }

  47. function drawFood() {
  48.     context.drawImage(foodImg, food.x, food.y, cellSize, cellSize);
  49. }

  51. function updateSnake() {
  52.     const head = { x: snake[0].x + direction.x * cellSize, y: snake[0].y + direction.y * cellSize };
  53.     snake.unshift(head);

  55.     if (head.x === food.x && head.y === food.y) {
  56.         spawnFood();
  57.     } else {
  58.         snake.pop();
  59.     }

  61.     if (head.x < 0 || head.x >= canvas.width || head.y < 0 || head.y >= canvas.height || snake.slice(1).some(segment => segment.x === head.x && segment.y === head.y)) {
  62.         gameOver();
  63.     }
  64. }

  66. function gameOver() {
  67.     clearInterval(gameInterval);
  68.     gameOverText.classList.remove('hidden');
  69. }

  71. function gameLoop() {
  72.     drawBackground();
  73.     drawSnake();
  74.     drawFood();
  75.     updateSnake();
  76. }

  78. document.addEventListener('keydown', event => {
  79.     if (event.key === 'ArrowUp' && direction.y === 0) {
  80.         direction = { x: 0, y: -1 };
  81.     } else if (event.key === 'ArrowDown' && direction.y === 0) {
  82.         direction = { x: 0, y: 1 };
  83.     } else if (event.key === 'ArrowLeft' && direction.x === 0) {
  84.         direction = { x: -1, y: 0 };
  85.     } else if (event.key === 'ArrowRight' && direction.x === 0) {
  86.         direction = { x: 1, y: 0 };
  87.     }
  88. });

  90. startButton.addEventListener('click', () => {
  91.     snake = [{ x: 200, y: 200 }];
  92.     direction = { x: 0, y: 0 };
  93.     spawnFood();
  94.     gameOverText.classList.add('hidden');
  95.     gameInterval = setInterval(gameLoop, 100);
  96. });
复制代码


### 补充资源

将以下图片文件放在与HTML、CSS和JavaScript文件相同的目录下：

1. **背景图片:** `background.jpg`
2. **蛇头图片:** `snake-head.png`
3. **蛇身图片:** `snake-body.png`
4. **食物图片:** `food.png`

将这些文件添加到同一个目录下后，打开 `index.html` 文件就可以运行具有生动蛇头和蛇身的贪吃蛇游戏了。如果有任何问题或者进一步的需求，请随时告诉我。



欢迎光临 科学教育 (http://sci-edu.net/) Powered by Discuz! X3.2