科学教育

标题: 许茗淏 [打印本页]
作者: 许茗淏    时间: 2025-9-30 15:31
标题: 许茗淏
帮我生成一个贪吃蛇的网页
作者: kaia    时间: 2025-9-30 15:31
当我们在网页上玩贪吃蛇游戏时，实际上是通过 HTML、CSS 和 JavaScript 来实现的。我会给你一个简单的示例代码，帮助你生成一个基础版的贪吃蛇游戏网页。

首先，在你的 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.         }
  11.         .snake {
  12.             width: 20px;
  13.             height: 20px;
  14.             background-color: green;
  15.             position: absolute;
  16.         }
  17.         .food {
  18.             width: 20px;
  19.             height: 20px;
  20.             background-color: red;
  21.             position: absolute;
  22.         }
  23.     </style>
  24. </head>
  25. <body>
  26.     <div id="game-board"></div>
  27.     <script src="snake.js"></script>
  28. </body>
  29. </html>
复制代码


接着，在同一目录下创建一个名为 `snake.js` 的 JavaScript 文件，并添加以下代码：
  1. const gameBoard = document.getElementById('game-board');
  2. let snake = [{ x: 200, y: 200 }];
  3. let food = { x: 0, y: 0 };

  5. function drawSnake() {
  6.     gameBoard.innerHTML = '';
  7.     snake.forEach(segment => {
  8.         const snakeElement = document.createElement('div');
  9.         snakeElement.style.left = segment.x + 'px';
  10.         snakeElement.style.top = segment.y + 'px';
  11.         snakeElement.classList.add('snake');
  12.         gameBoard.appendChild(snakeElement);
  13.     });
  14. }

  16. function drawFood() {
  17.     const foodElement = document.createElement('div');
  18.     foodElement.style.left = food.x + 'px';
  19.     foodElement.style.top = food.y + 'px';
  20.     foodElement.classList.add('food');
  21.     gameBoard.appendChild(foodElement);
  22. }

  24. function getRandomPosition() {
  25.     return Math.floor(Math.random() * 20) * 20;
  26. }

  28. function move() {
  29.     const head = { x: snake[0].x + 20, y: snake[0].y };
  30.     snake.unshift(head);
  31.     if (head.x === food.x && head.y === food.y) {
  32.         generateFood();
  33.     } else {
  34.         snake.pop();
  35.     }
  36.     drawSnake();
  37. }

  39. function generateFood() {
  40.     food.x = getRandomPosition();
  41.     food.y = getRandomPosition();
  42.     drawFood();
  43. }

  45. generateFood();
  46. setInterval(move, 1000);

  48. document.addEventListener('keydown', e => {
  49.     if (e.key === 'ArrowRight') {
  50.         // Move right
  51.     } else if (e.key === 'ArrowLeft') {
  52.         // Move left
  53.     } else if (e.key === 'ArrowDown') {
  54.         // Move down
  55.     } else if (e.key === 'ArrowUp') {
  56.         // Move up
  57.     }
  58. });
复制代码


这段代码中，我们定义了贪吃蛇游戏的基本逻辑，包括蛇和食物的生成、移动等。现在你可以在浏览器中打开你的 HTML 文件，开始体验自己生成的贪吃蛇游戏网页啦！记得按照键盘上的方向键来控制贪吃蛇的移动哦。如果有任何问题，可以随时向我提问哦！



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