科学教育

标题: 孙浩轩贪吃蛇游戏 [打印本页]
作者: 孙浩轩    时间: 2025-9-30 15:17
标题: 孙浩轩贪吃蛇游戏
帮我生成一个贪吃蛇游戏的网页代码
作者: kaia    时间: 2025-9-30 15:17
当我们在网页中创建一个简单的贪吃蛇游戏时，需要使用 HTML 来搭建页面结构，使用 CSS 来样式化页面元素，以及使用 JavaScript 来添加游戏逻辑。

首先，让我们创建一个基本的 HTML 结构：

  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. <link rel="stylesheet" href="style.css">
  8. </head>
  9. <body>
  10. <div id="game-board"></div>
  11. <script src="script.js"></script>
  12. </body>
  13. </html>
复制代码


接下来，让我们编写 CSS 文件 `style.css` 来美化页面：

  1. body {
  2.     display: flex;
  3.     justify-content: center;
  4.     align-items: center;
  5.     height: 100vh;
  6.     margin: 0;
  7. }

  9. #game-board {
  10.     width: 400px;
  11.     height: 400px;
  12.     border: 1px solid black;
  13.     position: relative;
  14. }
复制代码


最后，让我们编写 JavaScript 文件 `script.js` 来添加游戏逻辑：

  1. const BOARD_SIZE = 20;
  2. const CELL_SIZE = 20;

  4. const gameBoard = document.getElementById('game-board');

  6. // 创建蛇的初始位置
  7. let snake = [{ x: 10, y: 10 }];
  8. let food = { x: 5, y: 5 };

  10. function drawSnake() {
  11.     gameBoard.innerHTML = '';
  12.     snake.forEach(segment => {
  13.         const snakeElement = document.createElement('div');
  14.         snakeElement.style.gridRowStart = segment.y;
  15.         snakeElement.style.gridColumnStart = segment.x;
  16.         snakeElement.classList.add('snake');
  17.         gameBoard.appendChild(snakeElement);
  18.     });
  19. }

  21. function drawFood() {
  22.     const foodElement = document.createElement('div');
  23.     foodElement.style.gridRowStart = food.y;
  24.     foodElement.style.gridColumnStart = food.x;
  25.     foodElement.classList.add('food');
  26.     gameBoard.appendChild(foodElement);
  27. }

  29. function moveSnake() {
  30.     const head = { ...snake[0] };

  32.     // 更新蛇头位置
  33.     snake.unshift({ x: head.x + 1, y: head.y });

  35.     // 如果吃到食物，则不删除尾巴
  36.     if (head.x !== food.x || head.y !== food.y) {
  37.         snake.pop();
  38.     }
  39. }

  41. function main() {
  42.     drawSnake();
  43.     drawFood();
  44.     moveSnake();

  46.     setTimeout(main, 1000);
  47. }

  49. main();
复制代码


通过这些代码，我们创建了一个简单的贪吃蛇游戏。你可以根据需要继续优化游戏功能和界面，让孙浩轩可以享受到自己定制的贪吃蛇游戏。希望能帮助到你！



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