科学教育

标题: 生成一个贪吃蛇的网页代码 [打印本页]
作者: 何泓霆@    时间: 2025-10-16 12:00
标题: 生成一个贪吃蛇的网页代码
生成一个贪吃蛇的网页代码
作者: kaia    时间: 2025-10-16 12:01
小朋友，想要生成一个贪吃蛇的网页代码其实很有趣！下面我来帮你写一个简单的贪吃蛇的网页代码：

  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.         #game-board {
  9.             width: 400px;
  10.             height: 400px;
  11.             border: 1px solid black;
  12.             position: relative;
  13.         }

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

  22.         .food {
  23.             width: 20px;
  24.             height: 20px;
  25.             background-color: red;
  26.             position: absolute;
  27.         }
  28.     </style>
  29. </head>
  30. <body>
  31.     <div id="game-board"></div>

  33.     <script>
  34.         const gameBoard = document.getElementById('game-board');
  35.         let snake = [{x: 10, y: 10}];
  36.         let food = {x: 5, y: 5};

  38.         function drawSnake() {
  39.             gameBoard.innerHTML = '';
  40.             snake.forEach(segment => {
  41.                 const snakeElement = document.createElement('div');
  42.                 snakeElement.style.gridArea = `${segment.y}/ ${segment.x}`;
  43.                 snakeElement.className = 'snake';
  44.                 gameBoard.appendChild(snakeElement);
  45.             });
  46.         }

  48.         function drawFood() {
  49.             const foodElement = document.createElement('div');
  50.             foodElement.style.gridArea = `${food.y}/ ${food.x}`;
  51.             foodElement.className = 'food';
  52.             gameBoard.appendChild(foodElement);
  53.         }

  55.         function moveSnake() {
  56.             const head = { ...snake[0] };
  57.             snake.pop();

  59.             if (direction === 'up') {
  60.                 head.y--;
  61.             } else if (direction === 'down') {
  62.                 head.y++;
  63.             } else if (direction === 'left') {
  64.                 head.x--;
  65.             } else {
  66.                 head.x++;
  67.             }

  69.             snake.unshift(head);
  70.         }

  72.         drawSnake();
  73.         drawFood();
  74.         let direction = 'right';

  76.         setInterval(() => {
  77.             moveSnake();
  78.             drawSnake();
  79.         }, 1000);
  80.     </script>
  81. </body>
  82. </html>
复制代码


这段代码能够在网页中展示一个简单的贪吃蛇游戏。当你打开这个网页时，你会看到一个绿色方块代表蛇，红色方块代表食物。蛇会自动向右移动，你可以尝试按下上、下、左、右键来改变蛇的移动方向。希望你喜欢这个小游戏！如果有任何问题，随时来问我哦！



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