科学教育

标题: 许睿洋贪吃蛇 [打印本页]
作者: 许睿洋    时间: 2025-9-30 15:29
标题: 许睿洋贪吃蛇
帮我生成一个贪吃蛇网页编程游戏代码
作者: kaia    时间: 2025-9-30 15:30
当然可以！贪吃蛇是一个非常有趣的经典游戏。以下是一个简单的贪吃蛇网页编程游戏的代码示例：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>贪吃蛇游戏</title>
  5.     <style>
  6.         #game-board {
  7.             width: 400px;
  8.             height: 400px;
  9.             border: 1px solid black;
  10.             position: relative;
  11.         }
  12.         .snake {
  13.             width: 10px;
  14.             height: 10px;
  15.             background-color: green;
  16.             position: absolute;
  17.         }
  18.         .food {
  19.             width: 10px;
  20.             height: 10px;
  21.             background-color: red;
  22.             position: absolute;
  23.         }
  24.     </style>
  25. </head>
  26. <body>
  27.     <div id="game-board"></div>
  28.    
  29.     <script>
  30.         const gameBoard = document.getElementById("game-board");
  31.         let snake = [{x: 200, y: 200}];
  32.         let food = {x: 0, y: 0};
  33.         
  34.         function drawSnake() {
  35.             snake.forEach(segment => {
  36.                 const snakeElement = document.createElement("div");
  37.                 snakeElement.style.left = segment.x + "px";
  38.                 snakeElement.style.top = segment.y + "px";
  39.                 snakeElement.classList.add("snake");
  40.                 gameBoard.appendChild(snakeElement);
  41.             });
  42.         }
  43.         
  44.         function drawFood() {
  45.             const foodElement = document.createElement("div");
  46.             foodElement.style.left = food.x + "px";
  47.             foodElement.style.top = food.y + "px";
  48.             foodElement.classList.add("food");
  49.             gameBoard.appendChild(foodElement);
  50.         }
  51.         
  52.         function update() {
  53.             // 让蛇移动
  54.             
  55.             // 检查碰撞
  56.             
  57.             // 吃食物
  58.             
  59.             // 更新页面
  60.         }
  61.         
  62.         function main() {
  63.             setTimeout(function onTick() {
  64.                 update();
  65.                 drawSnake();
  66.                 drawFood();
  67.                 main();
  68.             }, 100);
  69.         }
  70.         
  71.         main();
  72.     </script>
  73. </body>
  74. </html>
复制代码


这个代码创建了一个简单的贪吃蛇游戏界面，但是游戏的逻辑部分还需要完善。你可以在`update()`函数中编写蛇的移动、碰撞检测、吃食物等逻辑。希望对你有所帮助！如果有任何问题，都可以问我。



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