科学教育

标题: 帮我复制一个贪吃蛇 [打印本页]
作者: 应雨桐    时间: 2025-9-30 15:18
标题: 帮我复制一个贪吃蛇
帮我复制一个贪吃蛇
作者: kaia    时间: 2025-9-30 15:18
好的，我们可以用网页编程来实现一个简单的贪吃蛇游戏。首先，我们需要使用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.     <style>
  8.         #game-board {
  9.             width: 400px;
  10.             height: 400px;
  11.             border: 1px solid black;
  12.             position: relative;
  13.         }

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

  22.         .food {
  23.             width: 20px;
  24.             height: 20px;
  25.             background-color: red;
  26.             position: absolute;
  27.         }
  28.     </style>
  29. </head>
  30. <body>
  31.     <div id="game-board"></div>
  32.     <script src="snake.js"></script>
  33. </body>
  34. </html>
复制代码


接着，在同一目录下创建一个JavaScript文件（命名为snake.js），用来实现贪吃蛇的逻辑：
  1. const gameBoard = document.getElementById('game-board');
  2. let snake = [{ x: 10, y: 10 }];
  3. let food = { x: 5, y: 5 };
  4. let direction = { x: 0, y: 0 };

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

  17. function drawFood() {
  18.     const foodElement = document.createElement('div');
  19.     foodElement.style.gridRowStart = food.y;
  20.     foodElement.style.gridColumnStart = food.x;
  21.     foodElement.classList.add('food');
  22.     gameBoard.appendChild(foodElement);
  23. }

  25. function moveSnake() {
  26.     const head = { x: snake[0].x + direction.x, y: snake[0].y + direction.y };
  27.     snake.unshift(head);

  29.     if (head.x === food.x && head.y === food.y) {
  30.         food.x = Math.floor(Math.random() * 20);
  31.         food.y = Math.floor(Math.random() * 20);
  32.     } else {
  33.         snake.pop();
  34.     }
  35. }

  37. function changeDirection(event) {
  38.     switch(event.key) {
  39.         case 'ArrowUp':
  40.             direction = { x: 0, y: -1 };
  41.             break;
  42.         case 'ArrowDown':
  43.             direction = { x: 0, y: 1 };
  44.             break;
  45.         case 'ArrowLeft':
  46.             direction = { x: -1, y: 0 };
  47.             break;
  48.         case 'ArrowRight':
  49.             direction = { x: 1, y: 0 };
  50.             break;
  51.     }
  52. }

  54. document.addEventListener('keydown', changeDirection);

  56. setInterval(() => {
  57.     moveSnake();
  58.     drawSnake();
  59.     drawFood();
  60. }, 100);
复制代码


保存以上代码后，用浏览器打开HTML文件，你就可以开始玩贪吃蛇游戏了！用方向键控制蛇的移动，让它吃到红色食物并不断变长。希望你尽情享受这个简单的贪吃蛇游戏！如果有任何问题，都可以随时问我哦~



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