科学教育

标题: 张嫣然 [打印本页]
作者: 张嫣然    时间: 2025-10-14 09:41
标题: 张嫣然
帮我写一个贪吃蛇代码
作者: kaia    时间: 2025-10-14 09:41
当然可以帮你写一个简单的贪吃蛇游戏代码！我们可以使用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.     #game-board {
  9.       width: 400px;
  10.       height: 400px;
  11.       border: 1px solid black;
  12.     }
  13.     .snake {
  14.       width: 20px;
  15.       height: 20px;
  16.       background-color: green;
  17.       position: absolute;
  18.     }
  19.     .food {
  20.       width: 20px;
  21.       height: 20px;
  22.       background-color: red;
  23.       position: absolute;
  24.     }
  25.   </style>
  26. </head>
  27. <body>
  28.   <div id="game-board"></div>
  29.   <script>
  30.     const board = document.getElementById('game-board');
  31.     const snake = [{x: 200, y: 200}];
  32.     let food = {x: 0, y: 0};
  33.     let direction = 'right';

  35.     function createSnake() {
  36.       snake.forEach(segment => {
  37.         const snakeElement = document.createElement('div');
  38.         snakeElement.className = 'snake';
  39.         snakeElement.style.left = segment.x + 'px';
  40.         snakeElement.style.top = segment.y + 'px';
  41.         board.appendChild(snakeElement);
  42.       });
  43.     }

  45.     function createFood() {
  46.       food.x = Math.floor(Math.random() * 20) * 20;
  47.       food.y = Math.floor(Math.random() * 20) * 20;

  49.       const foodElement = document.createElement('div');
  50.       foodElement.className = 'food';
  51.       foodElement.style.left = food.x + 'px';
  52.       foodElement.style.top = food.y + 'px';
  53.       board.appendChild(foodElement);
  54.     }

  56.     function moveSnake() {
  57.       let headX = snake[0].x;
  58.       let headY = snake[0].y;

  60.       if (direction === 'right') {
  61.         headX += 20;
  62.       } else if (direction === 'left') {
  63.         headX -= 20;
  64.       } else if (direction === 'down') {
  65.         headY += 20;
  66.       } else if (direction === 'up') {
  67.         headY -= 20;
  68.       }

  70.       const newHead = {x: headX, y: headY};
  71.       snake.unshift(newHead);

  73.       if (headX === food.x && headY === food.y) {
  74.         createFood();
  75.       } else {
  76.         snake.pop();
  77.       }

  79.       updateSnake();
  80.     }

  82.     function updateSnake() {
  83.       const snakeElements = document.querySelectorAll('.snake');
  84.       snakeElements.forEach((element, index) => {
  85.         element.style.left = snake[index].x + 'px';
  86.         element.style.top = snake[index].y + 'px';
  87.       });
  88.     }

  90.     function changeDirection(event) {
  91.       const key = event.key;

  93.       if ((key === 'ArrowRight' || key === 'd') && direction !== 'left') {
  94.         direction = 'right';
  95.       } else if ((key === 'ArrowLeft' || key === 'a') && direction !== 'right') {
  96.         direction = 'left';
  97.       } else if ((key === 'ArrowDown' || key === 's') && direction !== 'up') {
  98.         direction = 'down';
  99.       } else if ((key === 'ArrowUp' || key === 'w') && direction !== 'down') {
  100.         direction = 'up';
  101.       }
  102.     }

  104.     createSnake();
  105.     createFood();
  106.     setInterval(moveSnake, 100);
  107.     document.addEventListener('keydown', changeDirection);
  108.   </script>
  109. </body>
  110. </html>
复制代码


你可以将这段代码复制粘贴到一个HTML文件中，然后在浏览器中打开，就可以开始玩这个简单的贪吃蛇游戏了！游戏板的大小为400x400像素，蛇每隔100毫秒移动一次。通过方向键或WASD控制蛇的移动方向，让蛇吃到红色的食物。祝玩得开心！
作者: 黄思齐是你爹    时间: 2025-10-14 14:21
你真棒
作者: 张嫣然    时间: 2025-11-4 09:39
帮我把css提取出来



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