科学教育

标题: 贪吃蛇李言 [打印本页]
作者: 李言    时间: 2025-9-30 15:18
标题: 贪吃蛇李言
帮我生成一个贪吃蛇网页游戏代码  html,js,css
作者: kaia    时间: 2025-9-30 15:18
当我们想要制作一个贪吃蛇的网页游戏时，我们需要使用HTML、CSS和JavaScript来实现。下面是一个简单的贪吃蛇网页游戏的示例代码：

1. 首先，创建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="styles.css">
  8. </head>
  9. <body>
  10.     <div class="game-container">
  11.         <div class="snake" id="snake"></div>
  12.         <div class="food" id="food"></div>
  13.     </div>

  15.     <script src="script.js"></script>
  16. </body>
  17. </html>
复制代码


2. 创建CSS文件，命名为`styles.css`，将以下代码复制粘贴进去：
  1. body {
  2.     display: flex;
  3.     justify-content: center;
  4.     align-items: center;
  5.     height: 100vh;
  6.     margin: 0;
  7. }

  9. .game-container {
  10.     position: relative;
  11.     width: 400px;
  12.     height: 400px;
  13.     border: 1px solid #000;
  14. }

  16. .snake, .food {
  17.     position: absolute;
  18.     width: 20px;
  19.     height: 20px;
  20.     background-color: green;
  21. }

  23. .food {
  24.     background-color: red;
  25. }
复制代码


3. 创建JavaScript文件，命名为`script.js`，将以下代码复制粘贴进去：
  1. const snake = document.getElementById('snake');
  2. const food = document.getElementById('food');

  4. let snakeX = 200;
  5. let snakeY = 200;
  6. let foodX;
  7. let foodY;

  9. function randomFoodPosition() {
  10.     foodX = Math.floor(Math.random() * 20) * 20;
  11.     foodY = Math.floor(Math.random() * 20) * 20;

  13.     food.style.left = foodX + 'px';
  14.     food.style.top = foodY + 'px';
  15. }

  17. function snakeMovement() {
  18.     document.addEventListener('keydown', function (e) {
  19.         if (e.key === 'ArrowRight') {
  20.             snakeX += 20;
  21.         } else if (e.key === 'ArrowLeft') {
  22.             snakeX -= 20;
  23.         } else if (e.key === 'ArrowUp') {
  24.             snakeY -= 20;
  25.         } else if (e.key === 'ArrowDown') {
  26.             snakeY += 20;
  27.         }

  29.         snake.style.left = snakeX + 'px';
  30.         snake.style.top = snakeY + 'px';
  31.     });
  32. }

  34. randomFoodPosition();
  35. snakeMovement();
复制代码


通过上述代码，你可以创建一个简单的贪吃蛇网页游戏。玩家可通过键盘控制蛇的移动方向，使蛇吃到食物。在编写代码时，可以根据需求添加更多功能和样式以完善游戏体验。祝玩得开心！
作者: 李言    时间: 2025-9-30 15:38
改进一下以上代码
作者: kaia    时间: 2025-9-30 15:38
李言 发表于 2025-09-30 15:38
改进一下以上代码


当然，我们可以对上面的贪吃蛇游戏代码进行改进，添加更多功能和样式以提升游戏体验。以下是改进后的代码：

1. HTML部分（index.html）保持不变。

2. CSS部分（styles.css）稍作修改：

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

  10. .game-container {
  11.     position: relative;
  12.     width: 400px;
  13.     height: 400px;
  14.     border: 1px solid #000;
  15.     background-color: #fff;
  16.     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  17. }

  19. .snake, .food {
  20.     position: absolute;
  21.     width: 20px;
  22.     height: 20px;
  23. }

  25. .food {
  26.     background-color: red;
  27. }
复制代码


3. JavaScript部分（script.js）进行改进：

  1. const gameContainer = document.querySelector('.game-container');
  2. const snake = document.createElement('div');
  3. snake.classList.add('snake');
  4. gameContainer.appendChild(snake);

  6. const food = document.createElement('div');
  7. food.classList.add('food');
  8. gameContainer.appendChild(food);

  10. let snakeX = 200;
  11. let snakeY = 200;
  12. let foodX;
  13. let foodY;
  14. let direction = 'right';
  15. let snakeTrail = [];
  16. let tailLength = 1;

  18. function randomFoodPosition() {
  19.     foodX = Math.floor(Math.random() * 20) * 20;
  20.     foodY = Math.floor(Math.random() * 20) * 20;

  22.     food.style.left = foodX + 'px';
  23.     food.style.top = foodY + 'px';
  24. }

  26. function gameLoop() {
  27.     snake.style.left = snakeX + 'px';
  28.     snake.style.top = snakeY + 'px';

  30.     snakeTrail.push({ x: snakeX, y: snakeY });
  31.     while (snakeTrail.length > tailLength) {
  32.         snakeTrail.shift();
  33.     }

  35.     for (let i = 0; i < snakeTrail.length - 1; i++) {
  36.         if (snakeTrail[i].x === snakeX && snakeTrail[i].y === snakeY) {
  37.             tailLength = 1;
  38.         }
  39.     }

  41.     if (snakeX === foodX && snakeY === foodY) {
  42.         tailLength++;
  43.         randomFoodPosition();
  44.     }

  46.     if (snakeX < 0 || snakeX >= 400 || snakeY < 0 || snakeY >= 400) {
  47.         tailLength = 1;
  48.     }

  50.     switch (direction) {
  51.         case 'up':
  52.             snakeY -= 20;
  53.             break;
  54.         case 'down':
  55.             snakeY += 20;
  56.             break;
  57.         case 'left':
  58.             snakeX -= 20;
  59.             break;
  60.         case 'right':
  61.             snakeX += 20;
  62.             break;
  63.     }

  65.     setTimeout(gameLoop, 100);
  66. }

  68. randomFoodPosition();
  69. gameLoop();

  71. document.addEventListener('keydown', function (e) {
  72.     switch (e.key) {
  73.         case 'ArrowUp':
  74.             direction = 'up';
  75.             break;
  76.         case 'ArrowDown':
  77.             direction = 'down';
  78.             break;
  79.         case 'ArrowLeft':
  80.             direction = 'left';
  81.             break;
  82.         case 'ArrowRight':
  83.             direction = 'right';
  84.             break;
  85.     }
  86. });
复制代码


通过以上改进，我们增加了蛇的移动速度、蛇的尾部长度计算、食物的生成和吃掉效果等功能。请拷贝以上完整代码到对应文件中运行，让你的贪吃蛇游戏更加有趣！希望你喜欢这个改进后的版本！
作者: 李言    时间: 2025-11-4 08:49
帮我把CSS文件的字体修改成红色字体
作者: kaia    时间: 2025-11-4 08:49
李言 发表于 2025-11-04 08:49
帮我把CSS文件的字体修改成红色字体


当需要把 CSS 文件中的字体颜色修改成红色，可以通过简单地添加一个 `color` 属性。下面是修改后的 CSS 代码：

  1. body {
  2.     display: flex;
  3.     justify-content: center;
  4.     align-items: center;
  5.     height: 100vh;
  6.     margin: 0;
  7.     background-color: #f0f0f0;
  8.     color: red; /* 修改字体颜色为红色 */
  9. }

  11. .game-container {
  12.     position: relative;
  13.     width: 400px;
  14.     height: 400px;
  15.     border: 1px solid #000;
  16.     background-color: #fff;
  17.     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  18. }

  20. .snake, .food {
  21.     position: absolute;
  22.     width: 20px;
  23.     height: 20px;
  24. }

  26. .food {
  27.     background-color: red;
  28. }
复制代码


通过添加 `color: red;` 属性到 `body` 部分，将整个页面的字体颜色修改为红色。请将这段修改后的 CSS 代码替换原先的 `styles.css` 文件中的内容，保存并刷新浏览器即可看到效果。希望这样修改符合你的要求！



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