科学教育

标题: 帮我生成一个贪吃蛇的代码 [打印本页]
作者: 洪薯片    时间: 2025-11-4 09:05
标题: 帮我生成一个贪吃蛇的代码
帮我生成一个贪吃蛇的代码
作者: kaia    时间: 2025-11-4 09:05
当然可以！生成一个简单的贪吃蛇游戏代码，你可以在网页上运行。这里给你一个基础的代码：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <title>贪吃蛇小游戏</title>
  5.   <style>
  6.     #gameBoard {
  7.       width: 400px;
  8.       height: 400px;
  9.       border: 1px solid black;
  10.     }

  12.     .snake {
  13.       width: 10px;
  14.       height: 10px;
  15.       background-color: green;
  16.       position: absolute;
  17.     }

  19.     #food {
  20.       width: 10px;
  21.       height: 10px;
  22.       background-color: red;
  23.       position: absolute;
  24.     }
  25.   </style>
  26. </head>
  27. <body>
  28.   <h1>贪吃蛇小游戏</h1>
  29.   <div id="gameBoard"></div>
  30.   
  31.   <script>
  32.     const gameBoard = document.getElementById('gameBoard');
  33.     let snake = [{x: 200, y: 200}];
  34.     let food = {x: 0, y: 0};
  35.     let direction = 'right';

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

  48.     function randomFood() {
  49.       food.x = Math.floor(Math.random() * 40) * 10;
  50.       food.y = Math.floor(Math.random() * 40) * 10;

  52.       const foodElement = document.createElement('div');
  53.       foodElement.style.left = food.x + 'px';
  54.       foodElement.style.top = food.y + 'px';
  55.       foodElement.id = 'food';
  56.       gameBoard.appendChild(foodElement);
  57.     }

  59.     function moveSnake() {
  60.       const head = {x: snake[0].x, y: snake[0].y};

  62.       if (direction === 'right') {
  63.         head.x += 10;
  64.       } else if (direction === 'left') {
  65.         head.x -= 10;
  66.       } else if (direction === 'up') {
  67.         head.y -= 10;
  68.       } else if (direction === 'down') {
  69.         head.y += 10;
  70.       }

  72.       snake.unshift(head);

  74.       if (head.x === food.x && head.y === food.y) {
  75.         randomFood();
  76.       } else {
  77.         snake.pop();
  78.       }
  79.     }

  81.     function changeDirection(event) {
  82.       const key = event.key;
  83.       
  84.       if ((key === 'ArrowRight' || key === 'd') && direction !== 'left') {
  85.         direction = 'right';
  86.       } else if ((key === 'ArrowLeft' || key === 'a') && direction !== 'right') {
  87.         direction = 'left';
  88.       } else if ((key === 'ArrowUp' || key === 'w') && direction !== 'down') {
  89.         direction = 'up';
  90.       } else if ((key === 'ArrowDown' || key === 's') && direction !== 'up') {
  91.         direction = 'down';
  92.       }
  93.     }

  95.     randomFood();
  96.    
  97.     setInterval(() => {
  98.       moveSnake();
  99.       drawSnake();
  100.     }, 100);

  102.     document.addEventListener('keydown', changeDirection);
  103.   </script>
  104. </body>
  105. </html>
复制代码


你可以将以上代码复制粘贴到一个HTML文件中，并在浏览器中打开运行。这个简单的贪吃蛇游戏会在一个方块内自动移动，按键盘上的方向键或WASD键可以改变蛇的移动方向。吃到红色的食物会让蛇变长。希望你玩得开心！
作者: 洪薯片    时间: 2025-11-4 09:06

将字体设为红色
作者: kaia    时间: 2025-11-4 09:06
洪薯片 发表于 2025-11-04 09:06
将字体设为红色


要将字体设为红色，你可以在CSS样式表中添加以下代码：

  1. body {
  2.   color: red;
  3. }
复制代码


将这段代码添加到已有的CSS样式中，这样整个页面的字体颜色就会变成红色了。希望对你有帮助！



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