科学教育

标题: 朱雨轩贪吃蛇 [打印本页]
作者: 朱雨轩1    时间: 2025-9-30 09:55
标题: 朱雨轩贪吃蛇
帮我生成一个贪吃蛇小游戏
作者: kaia    时间: 2025-9-30 09:55
当我们要创建一个贪吃蛇的小游戏时，需要使用网页编程语言，比如HTML、CSS和JavaScript。我来教你一个简单的方法：

首先，我们创建一个HTML文件，并添加必要的HTML结构：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>贪吃蛇游戏</title>
  8.     <style>
  9.         #game-board {
  10.             width: 400px;
  11.             height: 400px;
  12.             border: 1px solid black;
  13.             position: relative;
  14.         }

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

  23.         .food {
  24.             width: 20px;
  25.             height: 20px;
  26.             background-color: red;
  27.             position: absolute;
  28.         }
  29.     </style>
  30. </head>
  31. <body>
  32.     <div id="game-board"></div>
  33.     <script src="snake.js"></script>
  34. </body>
  35. </html>
复制代码


接着，我们创建一个JavaScript文件，命名为`snake.js`，在里面编写贪吃蛇的逻辑代码：
  1. const board = document.getElementById("game-board");
  2. const snake = [{ x: 200, y: 200 }];
  3. let direction = "right";
  4. let food = { x: 0, y: 0 };

  6. function generateFood() {
  7.     food.x = Math.floor(Math.random() * 20) * 20;
  8.     food.y = Math.floor(Math.random() * 20) * 20;

  10.     const foodElement = document.createElement("div");
  11.     foodElement.className = "food";
  12.     foodElement.style.left = food.x + "px";
  13.     foodElement.style.top = food.y + "px";
  14.     board.appendChild(foodElement);
  15. }

  17. function updateSnake() {
  18.     const snakeHead = snake[0];
  19.     let newHead = { x: snakeHead.x, y: snakeHead.y };

  21.     if (direction === "up") {
  22.         newHead.y -= 20;
  23.     } else if (direction === "down") {
  24.         newHead.y += 20;
  25.     } else if (direction === "left") {
  26.         newHead.x -= 20;
  27.     } else if (direction === "right") {
  28.         newHead.x += 20;
  29.     }

  31.     snake.unshift(newHead);

  33.     const snakeElements = document.querySelectorAll(".snake");
  34.     for (let i = 0; i < snakeElements.length; i++) {
  35.         snakeElements[i].remove();
  36.     }

  38.     for (let i = 0; i < snake.length; i++) {
  39.         const segment = document.createElement("div");
  40.         segment.className = "snake";
  41.         segment.style.left = snake[i].x + "px";
  42.         segment.style.top = snake[i].y + "px";
  43.         board.appendChild(segment);
  44.     }
  45. }

  47. generateFood();
  48. updateSnake();

  50. setInterval(() => {
  51.     updateSnake();
  52. }, 1000);
复制代码


这样，我们就创建了一个简单的贪吃蛇小游戏。你可以尝试运行这段代码，看看效果如何。希望对你有帮助！如果有什么问题，随时问我哦~
作者: 朱雨轩1    时间: 2025-9-30 10:04
要再加上CSS
作者: kaia    时间: 2025-9-30 10:04
朱雨轩1 发表于 2025-09-30 10:04
要再加上CSS


当然，下面是一个简单的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-board {
  11.     width: 400px;
  12.     height: 400px;
  13.     border: 1px solid #333;
  14.     position: relative;
  15. }

  17. .snake {
  18.     width: 20px;
  19.     height: 20px;
  20.     background-color: #2ecc71;
  21.     position: absolute;
  22. }

  24. .food {
  25.     width: 20px;
  26.     height: 20px;
  27.     background-color: #e74c3c;
  28.     position: absolute;
  29. }
复制代码


把这段CSS样式代码加入到你的HTML文件内的`<style>`标签中，之后你的贪吃蛇小游戏会看起来更美观一些。希望可以帮到你！如果有其他问题，欢迎继续提问哦~



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