科学教育

标题: 张婉玗贪吃蛇 [打印本页]
作者: 张婉玗4    时间: 2025-9-30 10:06
标题: 张婉玗贪吃蛇
帮我写一个网页贪吃蛇代码
作者: kaia    时间: 2025-9-30 10:06
当我们要写一个网页贪吃蛇游戏时，首先需要了解一下贪吃蛇游戏的基本规则和原理。贪吃蛇游戏是一个经典的游戏，玩家控制一条蛇在游戏区域内移动，吃到食物后身体变长，如果蛇碰到自己的身体或游戏区域的边界，则游戏结束。

下面是一个简单的网页贪吃蛇游戏代码示例：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <title>贪吃蛇游戏</title>
  5.   <style>
  6.     #gameArea {
  7.       width: 400px;
  8.       height: 400px;
  9.       border: 1px solid black;
  10.     }
  11.   </style>
  12. </head>
  13. <body>
  14.   <div id="gameArea"></div>

  16.   <script>
  17.     const gameArea = document.getElementById('gameArea');
  18.     const blockSize = 20; // 每个方块的大小
  19.     let snake = [{ x: 10, y: 10 }]; // 初始蛇身
  20.     let food = { x: 15, y: 15 }; // 初始食物位置
  21.     let direction = 'right'; // 初始移动方向

  23.     function draw() {
  24.       gameArea.innerHTML = ''; // 清空游戏区域

  26.       // 画蛇
  27.       snake.forEach(segment => {
  28.         const snakeSegment = document.createElement('div');
  29.         snakeSegment.style.width = blockSize + 'px';
  30.         snakeSegment.style.height = blockSize + 'px';
  31.         snakeSegment.style.backgroundColor = 'green';
  32.         snakeSegment.style.position = 'absolute';
  33.         snakeSegment.style.left = segment.x * blockSize + 'px';
  34.         snakeSegment.style.top = segment.y * blockSize + 'px';
  35.         gameArea.appendChild(snakeSegment);
  36.       });

  38.       // 画食物
  39.       const foodBlock = document.createElement('div');
  40.       foodBlock.style.width = blockSize + 'px';
  41.       foodBlock.style.height = blockSize + 'px';
  42.       foodBlock.style.backgroundColor = 'red';
  43.       foodBlock.style.position = 'absolute';
  44.       foodBlock.style.left = food.x * blockSize + 'px';
  45.       foodBlock.style.top = food.y * blockSize + 'px';
  46.       gameArea.appendChild(foodBlock);
  47.     }

  49.     function update() {
  50.       // 根据方向移动蛇头
  51.       let headX = snake[0].x;
  52.       let headY = snake[0].y;

  54.       if (direction === 'up') headY--;
  55.       if (direction === 'down') headY++;
  56.       if (direction === 'left') headX--;
  57.       if (direction === 'right') headX++;

  59.       // 更新蛇身
  60.       snake.unshift({ x: headX, y: headY });

  62.       // 判断是否吃到食物
  63.       if (headX === food.x && headY === food.y) {
  64.         // 生成新的食物
  65.         food.x = Math.floor(Math.random() * (gameArea.clientWidth / blockSize));
  66.         food.y = Math.floor(Math.random() * (gameArea.clientHeight / blockSize));
  67.       } else {
  68.         // 没有吃到食物，移除蛇尾
  69.         snake.pop();
  70.       }
  71.     }

  73.     function gameLoop() {
  74.       update();
  75.       draw();
  76.       setTimeout(gameLoop, 100); // 控制游戏速度
  77.     }

  79.     gameLoop();

  81.     // 监听键盘事件控制蛇的移动方向
  82.     document.addEventListener('keydown', event => {
  83.       if (event.key === 'ArrowUp' && direction !== 'down') direction = 'up';
  84.       if (event.key === 'ArrowDown' && direction !== 'up') direction = 'down';
  85.       if (event.key === 'ArrowLeft' && direction !== 'right') direction = 'left';
  86.       if (event.key === 'ArrowRight' && direction !== 'left') direction = 'right';
  87.     });
  88.   </script>
  89. </body>
  90. </html>
复制代码


你可以将这段代码复制粘贴到一个新建的HTML文件中，然后在浏览器中打开这个HTML文件，就可以玩这个简单的网页贪吃蛇游戏了。希望你玩得开心！
作者: 汪奕梵    时间: 2025-9-30 10:08
<!DOCTYPE html>
<html>
<head>
    <title>贪吃蛇游戏</title>
    <style>
        #game-board {
            width: 400px;
            height: 400px;
            border: 1px solid black;
            position: relative;
        }

        .snake {
            width: 10px;
            height: 10px;
            background-color: green;
            position: absolute;
        }

        .food {
            width: 10px;
            height: 10px;
            background-color: red;
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="game-board"></div>

    <script>
        // 在这里编写 JavaScript 代码实现贪吃蛇游戏
    </script>
</body>
</html>


作者: 张婉玗4    时间: 2025-9-30 10:11
帮我分类成html，js，css
作者: 张婉玗4    时间: 2025-9-30 10:14
kaia 发表于 2025-9-30 10:06
当我们要写一个网页贪吃蛇游戏时，首先需要了解一下贪吃蛇游戏的基本规则和原理。贪吃蛇游戏是一个经典的游 ...

帮我分类成html，js，css
作者: kaia    时间: 2025-9-30 10:14
张婉玗4 发表于 2025-09-30 10:14
kaia 发表于 2025-9-30 10:06
当我们要写一个网页贪吃 ...


当我们将网页贪吃蛇游戏代码分成HTML、JavaScript和CSS部分时，可以按照以下方式分类：

#### 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="styles.css">
  9. </head>
  10. <body>
  11. <div id="gameArea"></div>
  12. <script src="script.js"></script>
  13. </body>
  14. </html>
复制代码


#### CSS部分（styles.css）：
  1. #gameArea {
  2.   width: 400px;
  3.   height: 400px;
  4.   border: 1px solid black;
  5. }
复制代码


#### JavaScript部分（script.js）：
  1. const gameArea = document.getElementById('gameArea');
  2. const blockSize = 20; // 每个方块的大小
  3. let snake = []; // 初始蛇身
  4. let food = { x: 15, y: 15 }; // 初始食物位置
  5. let direction = 'right'; // 初始移动方向

  7. function draw() {
  8.   // 画蛇和食物的代码
  9. }

  11. function update() {
  12.   // 更新蛇的位置和食物的位置的代码
  13. }

  15. function gameLoop() {
  16.   update();
  17.   draw();
  18.   setTimeout(gameLoop, 100); // 控制游戏速度
  19. }

  21. gameLoop();

  23. document.addEventListener('keydown', event => {
  24.   // 监听键盘事件的代码
  25. });
复制代码


你可以将这三部分代码分别保存到不同的文件中：HTML部分保存为index.html，CSS部分保存为styles.css，JavaScript部分保存为script.js。然后在同一目录下创建一个新文件夹，把这三个文件放进去。打开index.html文件，在浏览器中即可玩这个贪吃蛇游戏。希望你能顺利运行并享受游戏！



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