科学教育

标题: 帮我生成一个贪吃蛇的网页代码 [打印本页]
作者: 许茗淏    时间: 2025-9-30 15:25
标题: 帮我生成一个贪吃蛇的网页代码
帮我生成一个贪吃蛇的网页代码
作者: kaia    时间: 2025-9-30 15:25
当然可以！贪吃蛇是一个经典的小游戏，让我们一起来生成一个简单的贪吃蛇游戏网页代码吧！

首先，我们需要使用HTML、CSS和JavaScript来创建这个贪吃蛇游戏。

### HTML部分
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>贪吃蛇游戏</title>
  6.     <link rel="stylesheet" href="style.css">
  7. </head>
  8. <body>
  9.     <div id="gameArea"></div>
  10.     <script src="script.js"></script>
  11. </body>
  12. </html>
复制代码


### CSS部分（style.css）
  1. #gameArea {
  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. }
复制代码


### JavaScript部分（script.js）
  1. const gameArea = document.getElementById('gameArea');
  2. const snakeArray = [{x: 10, y: 10}];
  3. let food = {x: 0, y: 0};
  4. let direction = 'right';

  6. function createFood() {
  7.     food.x = Math.floor(Math.random() * 39) * 10;
  8.     food.y = Math.floor(Math.random() * 39) * 10;
  9.    
  10.     const foodElement = document.createElement('div');
  11.     foodElement.className = 'food';
  12.     foodElement.style.left = food.x + 'px';
  13.     foodElement.style.top = food.y + 'px';
  14.     gameArea.appendChild(foodElement);
  15. }

  17. function updateSnake() {
  18.     const head = {x: snakeArray[0].x, y: snakeArray[0].y};

  20.     switch (direction) {
  21.         case 'up':
  22.             head.y -= 10;
  23.             break;
  24.         case 'down':
  25.             head.y += 10;
  26.             break;
  27.         case 'left':
  28.             head.x -= 10;
  29.             break;
  30.         case 'right':
  31.             head.x += 10;
  32.             break;
  33.     }

  35.     snakeArray.unshift(head);

  37.     if (head.x === food.x && head.y === food.y) {
  38.         createFood();
  39.     } else {
  40.         snakeArray.pop();
  41.     }

  43.     renderSnake();
  44. }

  46. function renderSnake() {
  47.     gameArea.innerHTML = '';
  48.    
  49.     snakeArray.forEach(segment => {
  50.         const snakeElement = document.createElement('div');
  51.         snakeElement.className = 'snake';
  52.         snakeElement.style.left = segment.x + 'px';
  53.         snakeElement.style.top = segment.y + 'px';
  54.         gameArea.appendChild(snakeElement);
  55.     });
  56. }

  58. createFood();
  59. setInterval(updateSnake, 100);
复制代码


现在，你可以创建一个文件夹，将以上代码分别保存为`index.html`、`style.css`和`script.js`。打开`index.html`文件，你就可以看到一个简单的贪吃蛇游戏页面了！记得按照上下左右键来控制蛇的移动哦！希望你玩得开心！如果有其他问题，欢迎随时问我哦！



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