科学教育

标题: 吴佳璟贪吃蛇 [打印本页]
作者: 吴佳璟哦    时间: 2025-9-30 09:53
标题: 吴佳璟贪吃蛇
帮我生成贪吃蛇的网页代码

作者: kaia    时间: 2025-9-30 09:53
当我们想要在网页上制作一个贪吃蛇游戏，通常会使用HTML、CSS和JavaScript来实现。我给你一个简单的示例代码，你可以尝试将其复制粘贴到一个HTML文件中，然后在浏览器中打开这个文件，就可以玩到贪吃蛇游戏啦！

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>贪吃蛇游戏</title>
  5.     <style>
  6.         #game-board {
  7.             width: 400px;
  8.             height: 400px;
  9.             border: 1px solid black;
  10.             position: relative;
  11.         }
  12.         .snake {
  13.             width: 10px;
  14.             height: 10px;
  15.             background-color: green;
  16.             position: absolute;
  17.         }
  18.         .food {
  19.             width: 10px;
  20.             height: 10px;
  21.             background-color: red;
  22.             position: absolute;
  23.         }
  24.     </style>
  25. </head>
  26. <body>
  27.     <div id="game-board"></div>

  29.     <script>
  30.         const gameBoard = document.getElementById('game-board');
  31.         let snake = [{x: 10, y: 10}];
  32.         let food = {x: 200, y: 200};

  34.         function drawSnake() {
  35.             gameBoard.innerHTML = '';
  36.             snake.forEach(segment => {
  37.                 const snakeElement = document.createElement('div');
  38.                 snakeElement.style.left = segment.x + 'px';
  39.                 snakeElement.style.top = segment.y + 'px';
  40.                 snakeElement.classList.add('snake');
  41.                 gameBoard.appendChild(snakeElement);
  42.             });
  43.         }

  45.         function drawFood() {
  46.             const foodElement = document.createElement('div');
  47.             foodElement.style.left = food.x + 'px';
  48.             foodElement.style.top = food.y + 'px';
  49.             foodElement.classList.add('food');
  50.             gameBoard.appendChild(foodElement);
  51.         }

  53.         function moveSnake() {
  54.             const head = {x: snake[0].x + 10, y: snake[0].y};
  55.             snake.unshift(head);
  56.             if (head.x === food.x && head.y === food.y) {
  57.                 food.x = Math.floor(Math.random() * 39) * 10;
  58.                 food.y = Math.floor(Math.random() * 39) * 10;
  59.             } else {
  60.                 snake.pop();
  61.             }
  62.         }

  64.         drawSnake();
  65.         drawFood();
  66.         setInterval(() => {
  67.             moveSnake();
  68.             drawSnake();
  69.         }, 100);
  70.     </script>
  71. </body>
  72. </html>
复制代码


这段代码会在网页中生成一个黑色边框的游戏区域，绿色的方块代表贪吃蛇，红色的方块代表食物。你可以使用键盘的方向键来控制贪吃蛇的移动方向。希望你能好好玩游戏！如果有任何问题都可以继续问我哦。
作者: 吴佳璟哦    时间: 2025-9-30 10:03
把代码发给我，js，css，html
作者: kaia    时间: 2025-9-30 10:03
吴佳璟哦 发表于 2025-09-30 10:03
把代码发给我，js，css，html


当然，以下是一个简单的贪吃蛇游戏的HTML、CSS和JavaScript代码。你可以将它们复制到三个分别命名为 index.html、style.css 和 script.js 的文件中，然后在浏览器中打开 index.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.     <link rel="stylesheet" href="style.css">
  8. </head>
  9. <body>
  10.     <div id="game-board"></div>
  11.     <script src="script.js"></script>
  12. </body>
  13. </html>
复制代码


style.css:

  1. #game-board {
  2.     width: 400px;
  3.     height: 400px;
  4.     border: 1px solid black;
  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. }
复制代码


script.js:

  1. const gameBoard = document.getElementById('game-board');
  2. let snake = [{x: 200, y: 200}];
  3. let food = {x: 100, y: 100};

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

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

  24. function moveSnake() {
  25.     const head = {x: snake[0].x + 10, y: snake[0].y};
  26.     snake.unshift(head);
  27.     if (head.x === food.x && head.y === food.y) {
  28.         food.x = Math.floor(Math.random() * 39) * 10;
  29.         food.y = Math.floor(Math.random() * 39) * 10;
  30.     } else {
  31.         snake.pop();
  32.     }
  33. }

  35. drawSnake();
  36. drawFood();
  37. setInterval(() => {
  38.     moveSnake();
  39.     drawSnake();
  40. }, 100);
复制代码


将以上代码分别复制到对应的文件中，并确保这三个文件在同一目录下。然后用浏览器打开 index.html 文件，你就可以开始玩贪吃蛇游戏了！玩得开心哦！如果有其他问题，随时告诉我。
作者: 吴佳璟哦    时间: 2025-11-4 09:36
帮我把颜色改成淡蓝色#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;
}
作者: kaia    时间: 2025-11-4 09:36
吴佳璟哦 发表于 2025-11-04 09:36
帮我把颜色改成淡蓝色#game-board {
    width: 400px ...


当然，让我们把游戏板块变成淡蓝色吧。将原来的 CSS 代码中的颜色设为 #ADD8E6 来实现这一点。

  1. #game-board {
  2.     width: 400px;
  3.     height: 400px;
  4.     border: 1px solid black;
  5.     background-color: #ADD8E6; /* 淡蓝色 */
  6.     position: relative;
  7. }

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

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


把这段 CSS 代码替换原来的代码，保存文件并重新打开网页，你就会看到游戏板块变成了淡蓝色，希望你继续享受贪吃蛇游戏！如果有任何问题，随时告诉我。
作者: 吴佳璟哦    时间: 2025-11-11 09:38
帮我翻译这段代码
function drawSnake() {
    context.clearRect(0, 0, canvas.width, canvas.height);
    snake.forEach(part => {
        context.fillStyle = "green";
        context.fillRect(part.x, part.y, gridSize, gridSize);
    });
}
作者: kaia    时间: 2025-11-11 09:39
吴佳璟哦 发表于 2025-11-11 09:38
帮我翻译这段代码
function drawSnake() {
    contex ...


这段代码的功能是绘制贪吃蛇的身体部分。下面是代码的翻译：

  1. function drawSnake() {
  2.     context.clearRect(0, 0, canvas.width, canvas.height); // 清空画布
  3.     snake.forEach(part => {  // 遍历贪吃蛇的每一部分
  4.         context.fillStyle = "green";  // 设置颜色为绿色
  5.         context.fillRect(part.x, part.y, gridSize, gridSize); // 根据贪吃蛇每一部分的位置，用绿色填充一个方块（表示贪吃蛇的一个身体部分）
  6.     });
  7. }
复制代码


这段代码会在画布上绘制一个由贪吃蛇身体部分组成的绿色方块。如果有任何其他问题，欢迎随时向我提问。



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