科学教育

标题: 丁香仪贪吃蛇 [打印本页]
作者: 丁香仪    时间: 2025-9-30 10:15
标题: 丁香仪贪吃蛇
帮我发出贪吃蛇的代码css.js.html.
作者: kaia    时间: 2025-9-30 10:15
当然可以！让我们一步步来创建一个简单的贪吃蛇游戏。

首先，我们需要创建三个文件：index.html（用来显示游戏画面）、style.css（用来设置游戏样式）、script.js（用来控制游戏逻辑）。

### 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 class="game-area"></div>
  11. <script src="script.js"></script>
  12. </body>
  13. </html>
复制代码


### style.css
  1. * {
  2.     box-sizing: border-box;
  3. }

  5. body {
  6.     margin: 0;
  7.     padding: 0;
  8.     display: flex;
  9.     justify-content: center;
  10.     align-items: center;
  11.     height: 100vh;
  12.     background-color: #f0f0f0;
  13. }

  15. .game-area {
  16.     width: 400px;
  17.     height: 400px;
  18.     border: 1px solid #333;
  19.     position: relative;
  20. }
复制代码


### script.js
  1. const gameArea = document.querySelector('.game-area');
  2. const gridSize = 20;
  3. const gridNum = 20;
  4. const snake = [{x: 10, y: 10}];
  5. let direction = 'right';

  7. function createGrid() {
  8.     for (let i = 0; i < gridNum; i++) {
  9.         for (let j = 0; j < gridNum; j++) {
  10.             const grid = document.createElement('div');
  11.             grid.classList.add('grid');
  12.             grid.style.width = `${gridSize}px`;
  13.             grid.style.height = `${gridSize}px`;
  14.             grid.style.top = `${i * gridSize}px`;
  15.             grid.style.left = `${j * gridSize}px`;
  16.             gameArea.appendChild(grid);
  17.         }
  18.     }
  19. }

  21. function updateSnake() {
  22.     const head = {x: snake[0].x, y: snake[0].y};
  23.    
  24.     switch (direction) {
  25.         case 'up':
  26.             head.y--;
  27.             break;
  28.         case 'down':
  29.             head.y++;
  30.             break;
  31.         case 'left':
  32.             head.x--;
  33.             break;
  34.         case 'right':
  35.             head.x++;
  36.             break;
  37.     }
  38.    
  39.     snake.unshift(head);
  40.     snake.pop();
  41. }

  43. function updateGameArea() {
  44.     gameArea.innerHTML = '';
  45.     createGrid();

  47.     snake.forEach(part => {
  48.         const snakePart = document.createElement('div');
  49.         snakePart.classList.add('snake');
  50.         snakePart.style.width = `${gridSize}px`;
  51.         snakePart.style.height = `${gridSize}px`;
  52.         snakePart.style.top = `${part.y * gridSize}px`;
  53.         snakePart.style.left = `${part.x * gridSize}px`;
  54.         gameArea.appendChild(snakePart);
  55.     });
  56. }

  58. function main() {
  59.     updateSnake();
  60.     updateGameArea();
  61. }

  63. createGrid();
  64. setInterval(main, 100);
复制代码


将这些代码分别粘贴到对应的文件中，并把它们放在同一个文件夹中。打开index.html文件，你就可以在浏览器上看到一个简单的贪吃蛇游戏了！通过方向键控制蛇移动，尽量吃到食物加长蛇身，但要避免撞到墙或自己哦。希望你能喜欢这个小游戏！如果有什么问题，随时来问我哦。



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