科学教育

标题: 楼梓毓贪吃蛇游戏 [打印本页]
作者: 楼梓毓1    时间: 2025-9-30 10:04
标题: 楼梓毓贪吃蛇游戏
帮我做一个有HTML，CSS，JS的贪吃蛇游戏代码
作者: kaia    时间: 2025-9-30 10:04
当然可以！让我们一步步来创建一个简单的贪吃蛇游戏吧。

首先，我们需要三个文件：一个 HTML 文件、一个 CSS 文件和一个 JS 文件。在 HTML 文件中，我们将创建游戏区域；在 CSS 文件中，我们将设置样式；在 JS 文件中，我们将编写游戏的逻辑。

### 1. 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 class="game-area" id="gameArea">
  11.         <!-- 游戏区域 -->
  12.     </div>
  13.    
  14.     <script src="script.js"></script>
  15. </body>
  16. </html>
复制代码


### 2. CSS 文件 (`style.css`)

  1. .game-area {
  2.     width: 400px;
  3.     height: 400px;
  4.     border: 1px solid #000;
  5.     position: relative;
  6. }

  8. .snake {
  9.     width: 10px;
  10.     height: 10px;
  11.     background-color: green;
  12.     position: absolute;
  13. }

  15. .food {
  16.     width: 10px;
  17.     height: 10px;
  18.     background-color: red;
  19.     position: absolute;
  20. }
复制代码


### 3. JS 文件 (`script.js`)

  1. const gameArea = document.getElementById('gameArea');
  2. let snake = [{x: 10, y: 10}];
  3. let food = {x: 200, y: 200};
  4. let direction = 'right';

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

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

  25. function update() {
  26.     // 更新蛇的位置
  27.     const head = {x: snake[0].x, y: snake[0].y};
  28.    
  29.     if (direction === 'right') {
  30.         head.x += 10;
  31.     } else if (direction === 'left') {
  32.         head.x -= 10;
  33.     } else if (direction === 'up') {
  34.         head.y -= 10;
  35.     } else if (direction === 'down') {
  36.         head.y += 10;
  37.     }
  38.    
  39.     snake.unshift(head);
  40.    
  41.     // 检查是否吃到食物
  42.     if (head.x === food.x && head.y === food.y) {
  43.         // 生成新的食物
  44.         food.x = Math.floor(Math.random() * 40) * 10;
  45.         food.y = Math.floor(Math.random() * 40) * 10;
  46.     } else {
  47.         snake.pop();
  48.     }
  49.    
  50.     // 更新画面
  51.     drawSnake();
  52.     drawFood();
  53. }

  55. setInterval(update, 100);

  57. document.addEventListener('keydown', event => {
  58.     const key = event.key;
  59.     if (key === 'ArrowUp' && direction !== 'down') {
  60.         direction = 'up';
  61.     } else if (key === 'ArrowDown' && direction !== 'up') {
  62.         direction = 'down';
  63.     } else if (key === 'ArrowLeft' && direction !== 'right') {
  64.         direction = 'left';
  65.     } else if (key === 'ArrowRight' && direction !== 'left') {
  66.         direction = 'right';
  67.     }
  68. });
复制代码


这就是一个简单的贪吃蛇游戏代码！你可以复制这些代码并将它们分别保存到名为 `index.html`、`style.css` 和 `script.js` 的文件中，然后用浏览器打开 `index.html` 文件即可开始游戏。希望你玩得开心！如果有任何问题，都可以随时问我哦。



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