科学教育

标题: 黄景铄贪吃蛇游戏 [打印本页]
作者: 黄景铄    时间: 2025-9-30 09:53
标题: 黄景铄贪吃蛇游戏
帮我生成一个贪吃蛇游戏的网页代码
作者: kaia    时间: 2025-9-30 09:53
当创建一个贪吃蛇游戏网页时，我们需要使用HTML、CSS和JavaScript来实现。这里我为你提供一个简单的贪吃蛇游戏的网页代码：

  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.     body {
  9.         display: flex;
  10.         justify-content: center;
  11.         align-items: center;
  12.         height: 100vh;
  13.         margin: 0;
  14.     }
  15.     #game-board {
  16.         width: 400px;
  17.         height: 400px;
  18.         border: 2px solid black;
  19.         position: relative;
  20.     }
  21. </style>
  22. </head>
  23. <body>
  24. <div id="game-board"></div>

  26. <script>
  27.     const board = document.getElementById('game-board');
  28.     const boardWidth = 20;
  29.     const boardHeight = 20;
  30.     const blockSize = 20;

  32.     const snake = [{x: 10, y: 10}];
  33.     let food = {x: 5, y: 5};
  34.     let dx = 1;
  35.     let dy = 0;

  37.     function draw() {
  38.         board.innerHTML = '';
  39.         snake.forEach(segment => {
  40.             const snakeElement = document.createElement('div');
  41.             snakeElement.style.gridArea = `${segment.y + 1} / ${segment.x + 1}`;
  42.             snakeElement.style.width = `${blockSize}px`;
  43.             snakeElement.style.height = `${blockSize}px`;
  44.             snakeElement.style.backgroundColor = 'green';
  45.             board.appendChild(snakeElement);
  46.         });

  48.         const foodElement = document.createElement('div');
  49.         foodElement.style.gridArea = `${food.y + 1} / ${food.x + 1}`;
  50.         foodElement.style.width = `${blockSize}px`;
  51.         foodElement.style.height = `${blockSize}px`;
  52.         foodElement.style.backgroundColor = 'red';
  53.         board.appendChild(foodElement);
  54.     }

  56.     function update() {
  57.         const head = {x: snake[0].x + dx, y: snake[0].y + dy};
  58.         snake.unshift(head);
  59.         if (head.x === food.x && head.y === food.y) {
  60.             food.x = Math.floor(Math.random() * boardWidth);
  61.             food.y = Math.floor(Math.random() * boardHeight);
  62.         } else {
  63.             snake.pop();
  64.         }
  65.     }

  67.     function gameLoop() {
  68.         update();
  69.         draw();
  70.         setTimeout(gameLoop, 200);
  71.     }

  73.     document.addEventListener('keydown', event => {
  74.         const key = event.key;
  75.         switch(key) {
  76.             case 'ArrowUp':
  77.                 dx = 0;
  78.                 dy = -1;
  79.                 break;
  80.             case 'ArrowDown':
  81.                 dx = 0;
  82.                 dy = 1;
  83.                 break;
  84.             case 'ArrowLeft':
  85.                 dx = -1;
  86.                 dy = 0;
  87.                 break;
  88.             case 'ArrowRight':
  89.                 dx = 1;
  90.                 dy = 0;
  91.                 break;
  92.         }
  93.     });

  95.     gameLoop();
  96. </script>
  97. </body>
  98. </html>
复制代码


你可以将这段代码复制粘贴到一个新建的HTML文件中，然后保存并在浏览器中打开，就可以看到一个简单的贪吃蛇游戏啦！记得按方向键控制蛇的移动，尽量让蛇吃到红色的食物哦！希望你玩得开心！
作者: 黄景铄    时间: 2025-9-30 10:02
帮我分别生成HTML,CSS,JS
作者: kaia    时间: 2025-9-30 10:02
黄景铄 发表于 2025-09-30 10:02
帮我分别生成HTML,CSS,JS


当创建一个贪吃蛇游戏的网页时，我们需要使用HTML、CSS和JavaScript来实现。以下是分别生成HTML、CSS、JavaScript的代码：

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


### CSS文件（styles.css）：
  1. body {
  2.     display: flex;
  3.     justify-content: center;
  4.     align-items: center;
  5.     height: 100vh;
  6.     margin: 0;
  7. }
  8. #game-board {
  9.     width: 400px;
  10.     height: 400px;
  11.     border: 2px solid black;
  12.     position: relative;
  13. }
复制代码


### JavaScript文件（script.js）：
  1. const board = document.getElementById('game-board');
  2. const boardWidth = 20;
  3. const boardHeight = 20;
  4. const blockSize = 20;

  6. const snake = [{x: 10, y: 10}, {x: 10, y: 11}];
  7. let food = {x: 5, y: 5};
  8. let dx = 1;
  9. let dy = 0;

  11. function draw() {
  12.     board.innerHTML = '';
  13.     snake.forEach(segment => {
  14.         const snakeElement = document.createElement('div');
  15.         snakeElement.style.gridArea = `${segment.y + 1} / ${segment.x + 1}`;
  16.         snakeElement.style.width = `${blockSize}px`;
  17.         snakeElement.style.height = `${blockSize}px`;
  18.         snakeElement.style.backgroundColor = 'green';
  19.         board.appendChild(snakeElement);
  20.     });

  22.     const foodElement = document.createElement('div');
  23.     foodElement.style.gridArea = `${food.y + 1} / ${food.x + 1}`;
  24.     foodElement.style.width = `${blockSize}px`;
  25.     foodElement.style.height = `${blockSize}px`;
  26.     foodElement.style.backgroundColor = 'red';
  27.     board.appendChild(foodElement);
  28. }

  30. function update() {
  31.     const head = {x: snake[0].x + dx, y: snake[0].y + dy};
  32.     snake.unshift(head);
  33.     if (head.x === food.x && head.y === food.y) {
  34.         food.x = Math.floor(Math.random() * boardWidth);
  35.         food.y = Math.floor(Math.random() * boardHeight);
  36.     } else {
  37.         snake.pop();
  38.     }
  39. }

  41. function gameLoop() {
  42.     update();
  43.     draw();
  44.     setTimeout(gameLoop, 200);
  45. }

  47. document.addEventListener('keydown', event => {
  48.     const key = event.key;
  49.     switch(key) {
  50.         case 'ArrowUp':
  51.             dx = 0;
  52.             dy = -1;
  53.             break;
  54.         case 'ArrowDown':
  55.             dx = 0;
  56.             dy = 1;
  57.             break;
  58.         case 'ArrowLeft':
  59.             dx = -1;
  60.             dy = 0;
  61.             break;
  62.         case 'ArrowRight':
  63.             dx = 1;
  64.             dy = 0;
  65.             break;
  66.     }
  67. });

  69. gameLoop();
复制代码


将这些代码分别保存到名为index.html、styles.css和script.js的文件中。然后在浏览器中打开index.html文件，你就可以玩这个简单的贪吃蛇游戏啦！希望你喜欢！



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