科学教育

标题: 李沐阳贪吃蛇 [打印本页]
作者: 李沐阳    时间: 2025-10-11 14:58
标题: 李沐阳贪吃蛇
帮我生成一个贪吃蛇的网页代码
作者: kaia    时间: 2025-10-11 14:58
当我们创建一个贪吃蛇游戏的网页时，通常需要使用HTML、CSS和JavaScript来实现。以下是一个简单的贪吃蛇游戏的网页代码示例：

1. 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 class="game-container">
  11.     <canvas id="gameCanvas"></canvas>
  12. </div>
  13. <script src="script.js"></script>
  14. </body>
  15. </html>
复制代码


2. CSS部分(style.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. }

  13. #gameCanvas {
  14.     border: 1px solid #000;
  15. }
复制代码


3. JavaScript部分(script.js)：
  1. const canvas = document.getElementById("gameCanvas");
  2. const ctx = canvas.getContext("2d");

  4. const tileSize = 20;
  5. const canvasSize = 600;

  7. canvas.width = canvasSize;
  8. canvas.height = canvasSize;

  10. let snake = [
  11.     { x: 10, y: 10 },
  12.     { x: 10, y: 11 },
  13.     { x: 10, y: 12 }
  14. ];

  16. let food = { x: 15, y: 15 };

  18. function drawSnake() {
  19.     ctx.fillStyle = "green";
  20.     snake.forEach(part => ctx.fillRect(part.x * tileSize, part.y * tileSize, tileSize, tileSize));
  21. }

  23. function drawFood() {
  24.     ctx.fillStyle = "red";
  25.     ctx.fillRect(food.x * tileSize, food.y * tileSize, tileSize, tileSize);
  26. }

  28. function moveSnake() {
  29.     const head = { x: snake[0].x, y: snake[0].y };
  30.     if (head.x === food.x && head.y === food.y) {
  31.         snake.push({ ...snake[snake.length - 1] });
  32.         food.x = Math.floor(Math.random() * (canvasSize / tileSize));
  33.         food.y = Math.floor(Math.random() * (canvasSize / tileSize));
  34.     }
  35.     for (let i = snake.length - 1; i > 0; i--) {
  36.         snake[i] = { ...snake[i - 1] };
  37.     }
  38.     switch (direction) {
  39.         case "up":
  40.             head.y--;
  41.             break;
  42.         case "down":
  43.             head.y++;
  44.             break;
  45.         case "left":
  46.             head.x--;
  47.             break;
  48.         case "right":
  49.             head.x++;
  50.             break;
  51.     }
  52.     snake[0] = head;
  53. }

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

  59. function draw() {
  60.     clearCanvas();
  61.     moveSnake();
  62.     drawSnake();
  63.     drawFood();
  64. }

  66. let direction = "right";

  68. document.addEventListener("keydown", (e) => {
  69.     if (e.key === "ArrowUp" && direction !== "down") direction = "up";
  70.     if (e.key === "ArrowDown" && direction !== "up") direction = "down";
  71.     if (e.key === "ArrowLeft" && direction !== "right") direction = "left";
  72.     if (e.key === "ArrowRight" && direction !== "left") direction = "right";
  73. });

  75. setInterval(draw, 100);
复制代码


通过将上述代码保存为相应文件（如index.html、style.css和script.js），在浏览器中打开index.html文件，即可运行简单的贪吃蛇游戏。玩家可以通过↑ ↓ ← →键控制蛇的移动，吃到食物后蛇会变长，若蛇撞墙或撞到自己则游戏结束。希望这个简单的示例能帮助你开始制作贪吃蛇游戏！



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