科学教育

标题: 贪吃蛇游戏 [打印本页]
作者: QianJY    时间: 2025-9-30 09:41
标题: 贪吃蛇游戏
帮我生成一个贪吃蛇游戏的网页代码
作者: kaia    时间: 2025-9-30 09:41
当我们创建一个贪吃蛇游戏网页时，通常会使用 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.     #game-board {
  9.         width: 400px;
  10.         height: 400px;
  11.         border: 1px solid black;
  12.         position: relative;
  13.     }
  14.    
  15.     .snake {
  16.         width: 20px;
  17.         height: 20px;
  18.         background-color: green;
  19.         position: absolute;
  20.     }
  21.    
  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 board = document.getElementById('game-board');
  35.         let snake = [{ x: 200, y: 200 }];
  36.         let food = { x: 0, y: 0 };
  37.         let direction = 'right';

  39.         function createSnake() {
  40.             snake.forEach(segment => {
  41.                 const snakeElement = document.createElement('div');
  42.                 snakeElement.style.left = segment.x + 'px';
  43.                 snakeElement.style.top = segment.y + 'px';
  44.                 snakeElement.classList.add('snake');
  45.                 board.appendChild(snakeElement);
  46.             });
  47.         }

  49.         function updateSnake() {
  50.             const head = { x: snake[0].x, y: snake[0].y };
  51.             switch (direction) {
  52.                 case 'up':
  53.                     head.y -= 20;
  54.                     break;
  55.                 case 'down':
  56.                     head.y += 20;
  57.                     break;
  58.                 case 'left':
  59.                     head.x -= 20;
  60.                     break;
  61.                 case 'right':
  62.                     head.x += 20;
  63.                     break;
  64.             }
  65.         
  66.             snake.unshift(head);
  67.             if (head.x === food.x && head.y === food.y) {
  68.                 generateFood();
  69.             } else {
  70.                 snake.pop();
  71.             }
  72.         }

  74.         function generateFood() {
  75.             food.x = Math.floor(Math.random() * 20) * 20;
  76.             food.y = Math.floor(Math.random() * 20) * 20;

  78.             const foodElement = document.createElement('div');
  79.             foodElement.style.left = food.x + 'px';
  80.             foodElement.style.top = food.y + 'px';
  81.             foodElement.classList.add('food');
  82.             board.appendChild(foodElement);
  83.         }

  85.         function gameLoop() {
  86.             updateSnake();
  87.             render();
  88.         }

  90.         function render() {
  91.             const boardChildren = Array.from(board.children);
  92.             boardChildren.forEach(child => child.remove());

  94.             createSnake();
  95.         }

  97.         generateFood();
  98.         createSnake();
  99.         setInterval(gameLoop, 100);
  100.     </script>
  101. </body>
  102. </html>
复制代码


这段代码创建了一个简单的贪吃蛇游戏界面，玩家可以控制蛇的移动方向，吃到食物会变长。游戏会定时更新蛇的位置并重新渲染在页面上。你可以把这段代码复制粘贴到一个新建的 HTML 文件中，用浏览器打开就可以看到这个简单的贪吃蛇游戏了。如果想要添加更多功能和特效，可以继续扩展这个基础版本。希望你能享受编程的乐趣！



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