科学教育

标题: 2021 [打印本页]
作者: yue    时间: 2025-11-11 14:07
标题: 2021
贪吃蛇游戏网页代码js
作者: kaia    时间: 2025-11-11 14:07
当我们编写一个简单的贪吃蛇游戏网页时，我们需要使用 HTML、CSS 和 JavaScript。下面是一个简单的示例代码：

### HTML部分：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>贪吃蛇游戏</title>
  8.     <link rel="stylesheet" href="style.css">
  9. </head>
  10. <body>
  11.     <div id="game-area"></div>
  12.     <script src="script.js"></script>
  13. </body>
  14. </html>
复制代码


### CSS部分（style.css）：
  1. #game-area {
  2.     width: 400px;
  3.     height: 400px;
  4.     border: 1px solid black;
  5. }
  6. .snake-part {
  7.     width: 10px;
  8.     height: 10px;
  9.     background-color: green;
  10.     position: absolute;
  11. }
  12. .food {
  13.     width: 10px;
  14.     height: 10px;
  15.     background-color: red;
  16.     position: absolute;
  17. }
复制代码


### JavaScript部分（script.js）：
  1. const gameArea = document.getElementById('game-area');
  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(part => {
  9.         const snakePart = document.createElement('div');
  10.         snakePart.className = 'snake-part';
  11.         snakePart.style.left = part.x + 'px';
  12.         snakePart.style.top = part.y + 'px';
  13.         gameArea.appendChild(snakePart);
  14.     });
  15. }

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

  25. function update() {
  26.     // 更新蛇的位置
  27.     const head = { x: snake[0].x, y: snake[0].y };
  28.     switch(direction) {
  29.         case 'up':
  30.             head.y -= 10;
  31.             break;
  32.         case 'down':
  33.             head.y += 10;
  34.             break;
  35.         case 'left':
  36.             head.x -= 10;
  37.             break;
  38.         case 'right':
  39.             head.x += 10;
  40.             break;
  41.     }

  43.     // 如果吃到食物
  44.     if(head.x === food.x && head.y === food.y) {
  45.         snake.unshift(food);
  46.         food.x = Math.floor(Math.random() * 40) * 10;
  47.         food.y = Math.floor(Math.random() * 40) * 10;
  48.     } else {
  49.         snake.pop();
  50.     }

  52.     snake.unshift(head);

  54.     // 绘制蛇和食物
  55.     drawSnake();
  56.     drawFood();
  57. }

  59. setInterval(update, 100);
复制代码


这段代码创建了一个简单的贪吃蛇游戏，蛇可以通过上下左右箭头键控制移动，吃到食物后会变长。希望这段代码能帮助你开始编写自己的贪吃蛇游戏网页！



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