科学教育

标题: 朱语汐贪吃蛇 [打印本页]
作者: Zhuyuxi    时间: 2025-10-15 15:02
标题: 朱语汐贪吃蛇
帮我生成一个贪吃蛇网页代码
作者: kaia    时间: 2025-10-15 15:02
当我们说要生成一个贪吃蛇的网页代码时，实际上是在编写一个简单的网页游戏。首先，我们需要使用 HTML 来构建页面的结构，然后使用 CSS 来设计页面的样式，最后使用 JavaScript 来编写游戏的逻辑。

下面是一个简单的贪吃蛇游戏的网页代码：

  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. <style>
  8.     body {
  9.         display: flex;
  10.         justify-content: center;
  11.         align-items: center;
  12.         height: 100vh;
  13.         margin: 0;
  14.     }
  15.     #game-board {
  16.         width: 400px;
  17.         height: 400px;
  18.         border: 1px solid black;
  19.         position: relative;
  20.     }
  21.     .snake {
  22.         width: 20px;
  23.         height: 20px;
  24.         background-color: green;
  25.         position: absolute;
  26.     }
  27.     .food {
  28.         width: 20px;
  29.         height: 20px;
  30.         background-color: red;
  31.         position: absolute;
  32.     }
  33. </style>
  34. </head>
  35. <body>
  36. <div id="game-board"></div>
  37. <script>
  38.     const gameBoard = document.getElementById('game-board');
  39.     let snake = [{x: 200, y: 200}];
  40.     let food = {x: 100, y: 100};
  41.     let dx = 0;
  42.     let dy = 0;

  44.     function drawSnake() {
  45.         gameBoard.innerHTML = '';
  46.         snake.forEach(segment => {
  47.             const snakeElement = document.createElement('div');
  48.             snakeElement.style.left = segment.x + 'px';
  49.             snakeElement.style.top = segment.y + 'px';
  50.             snakeElement.classList.add('snake');
  51.             gameBoard.appendChild(snakeElement);
  52.         });
  53.     }

  55.     function drawFood() {
  56.         const foodElement = document.createElement('div');
  57.         foodElement.style.left = food.x + 'px';
  58.         foodElement.style.top = food.y + 'px';
  59.         foodElement.classList.add('food');
  60.         gameBoard.appendChild(foodElement);
  61.     }

  63.     function moveSnake() {
  64.         const head = {x: snake[0].x + dx, y: snake[0].y + dy};
  65.         snake.unshift(head);
  66.         if (head.x === food.x && head.y === food.y) {
  67.             // 吃到食物，蛇变长
  68.             food.x = Math.floor(Math.random() * 20) * 20;
  69.             food.y = Math.floor(Math.random() * 20) * 20;
  70.         } else {
  71.             snake.pop();
  72.         }
  73.     }

  75.     function main() {
  76.         drawSnake();
  77.         drawFood();
  78.         moveSnake();
  79.     }

  81.     setInterval(main, 100);
  82. </script>
  83. </body>
  84. </html>
复制代码


在这段代码中，我们创建了一个 400x400 的游戏板，并定义了蛇和食物的样式，通过 JavaScript 实现了贪吃蛇游戏的基本逻辑：控制蛇的移动、食物的生成以及蛇的长度增加等功能。希望你能够根据这个例子做出属于自己的贪吃蛇网页游戏！



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