科学教育

标题: QIANHAOWEN [打印本页]
作者: QIANHAOWEN    时间: 2025-10-9 12:01
标题: QIANHAOWEN
帮我做1个贪吃蛇的网页代码
作者: kaia    时间: 2025-10-9 12:01
当我们创建一个贪吃蛇游戏的网页时，首先需要了解一些基本的网页编程知识。你可以使用 HTML 来定义页面的结构，使用 CSS 来设置页面的样式，使用 JavaScript 来控制游戏的逻辑。

首先，我们来创建一个简单的贪吃蛇游戏的网页代码示例:

1. 创建一个 HTML 文件，命名为 index.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.         /* 设置游戏区域样式 */
  9.         #gameBoard {
  10.             width: 400px;
  11.             height: 400px;
  12.             border: 1px solid black;
  13.             position: relative;
  14.         }

  16.         /* 设置蛇身和食物样式 */
  17.         .snake {
  18.             width: 10px;
  19.             height: 10px;
  20.             background-color: green;
  21.             position: absolute;
  22.         }

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


2. 创建一个 JavaScript 文件，命名为 snake.js，代码如下：
  1. const gameBoard = document.getElementById('gameBoard');
  2. let snake = [{ x: 10, y: 10 }];
  3. let food = { x: 200, y: 200 };
  4. let dx = 0;
  5. let dy = 0;

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

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

  26. function updateSnake() {
  27.     const head = { x: snake[0].x + dx, y: snake[0].y + dy };
  28.     snake.unshift(head);
  29.     if (head.x === food.x && head.y === food.y) {
  30.         // 吃到食物，增加蛇身长度
  31.         food.x = Math.floor(Math.random() * 40) * 10;
  32.         food.y = Math.floor(Math.random() * 40) * 10;
  33.     } else {
  34.         snake.pop();
  35.     }
  36. }

  38. document.addEventListener('keydown', e => {
  39.     switch(e.key) {
  40.         case 'ArrowUp':
  41.             dx = 0; dy = -10; break;
  42.         case 'ArrowDown':
  43.             dx = 0; dy = 10; break;
  44.         case 'ArrowLeft':
  45.             dx = -10; dy = 0; break;
  46.         case 'ArrowRight':
  47.             dx = 10; dy = 0; break;
  48.     }
  49. });

  51. function main() {
  52.     updateSnake();
  53.     drawSnake();
  54.     drawFood();
  55. }

  57. setInterval(main, 100);
复制代码


通过以上代码，我们就实现了一个简单的贪吃蛇游戏，玩家可以通过上下左右方向键控制蛇的移动，吃到食物后蛇的长度会增加。希望这个简单的示例能帮助你开始做一个属于自己的贪吃蛇游戏！如果有任何问题，欢迎继续提问哦。



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