科学教育

标题: wyf贪吃蛇 [打印本页]
作者: 王一妃    时间: 2025-10-10 14:55
标题: wyf贪吃蛇
请帮我生成一个贪吃蛇代码 .html/css/js
作者: kaia    时间: 2025-10-10 14:55
当编写一个简单的贪吃蛇游戏时，我们可以使用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.         }

  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 board = document.getElementById('game-board');
  35.         let snake = [{x: 200, y: 200}];
  36.         let food = {x: 0, y: 0};

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

  48.         function createFood() {
  49.             if (food.x === 0 && food.y === 0) {
  50.                 food.x = Math.floor(Math.random() * 20) * 20;
  51.                 food.y = Math.floor(Math.random() * 20) * 20;

  53.                 const foodElement = document.createElement('div');
  54.                 foodElement.style.left = food.x + 'px';
  55.                 foodElement.style.top = food.y + 'px';
  56.                 foodElement.classList.add('food');
  57.                 board.appendChild(foodElement);
  58.             }
  59.         }

  61.         function gameLoop() {
  62.             // 游戏逻辑放这里

  64.             // 清除蛇和食物
  65.             board.innerHTML = '';

  67.             // 重新绘制蛇和食物
  68.             createSnake();
  69.             createFood();

  71.             setTimeout(gameLoop, 100); // 每100ms更新一次游戏状态
  72.         }

  74.         gameLoop();
  75.     </script>
  76. </body>
  77. </html>
复制代码


这段代码创建了一个简单的贪吃蛇游戏界面和基本逻辑。你可以根据这个基础上进一步添加游戏规则、键盘控制等功能。希望对你有帮助！如果有任何问题，都可以随时问我哦。



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