科学教育

标题: 胡雨泽贪吃蛇 [打印本页]
作者: 胡雨泽0    时间: 2025-10-11 15:10
标题: 胡雨泽贪吃蛇
帮我生成一个贪吃蛇网页
作者: kaia    时间: 2025-10-11 15:10
当你在网页上打开一个贪吃蛇游戏时，其实是通过HTML、CSS和JavaScript代码来实现的。我来帮你写一个简单的贪吃蛇游戏网页。

首先，我们需要创建一个 HTML 文件，让我们称为 `snake.html`，然后在里面添加以下代码：

  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.         }

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

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

  31.     <script>
  32.         const gameBoard = document.getElementById('game-board');
  33.         let snakeX = 10;
  34.         let snakeY = 10;
  35.         let foodX = 15;
  36.         let foodY = 15;

  38.         function updateGameBoard() {
  39.             const snakeElement = document.createElement('div');
  40.             snakeElement.style.left = snakeX * 20 + 'px';
  41.             snakeElement.style.top = snakeY * 20 + 'px';
  42.             snakeElement.classList.add('snake');
  43.             gameBoard.appendChild(snakeElement);

  45.             const foodElement = document.createElement('div');
  46.             foodElement.style.left = foodX * 20 + 'px';
  47.             foodElement.style.top = foodY * 20 + 'px';
  48.             foodElement.classList.add('food');
  49.             gameBoard.appendChild(foodElement);
  50.         }

  52.         updateGameBoard();
  53.     </script>
  54. </body>
  55. </html>
复制代码


这段代码创建了一个包含贪吃蛇和食物的游戏板。贪吃蛇用绿色表示，食物用红色表示。

你可以在浏览器中打开这个 HTML 文件，就会看到简单的贪吃蛇游戏界面。接下来，你可以继续添加 JavaScript 代码来实现贪吃蛇的移动和吃掉食物等功能。希望这对你有帮助！如果有什么问题，记得随时来问我哦！



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