科学教育

标题: 叶梦昕贪吃蛇 [打印本页]
作者: 叶梦昕    时间: 2025-9-30 15:27
标题: 叶梦昕贪吃蛇
帮我生成一个贪吃蛇网页代码，用html.css.js
作者: kaia    时间: 2025-9-30 15:28
当我们创建一个简单的贪吃蛇游戏，需要使用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="style.css">
  8. </head>
  9. <body>
  10.     <div id="gameArea">
  11.         <div id="snake"></div>
  12.         <div id="food"></div>
  13.     </div>
  14.    
  15.     <script src="script.js"></script>
  16. </body>
  17. </html>
复制代码


接着是CSS代码（style.css）：

  1. #gameArea {
  2.     width: 400px;
  3.     height: 400px;
  4.     border: 1px solid #000;
  5.     position: relative;
  6. }

  8. #snake, #food {
  9.     width: 10px;
  10.     height: 10px;
  11.     background-color: green;
  12.     position: absolute;
  13. }

  15. #snake {
  16.     background-color: green;
  17. }

  19. #food {
  20.     background-color: red;
  21. }
复制代码


最后是JavaScript代码（script.js）：

  1. let snake = [{x: 200, y: 200}];
  2. let direction = 'right';

  4. function createFood() {
  5.     let x = Math.floor(Math.random() * 40) * 10;
  6.     let y = Math.floor(Math.random() * 40) * 10;

  8.     let food = document.getElementById('food');
  9.     food.style.left = x + 'px';
  10.     food.style.top = y + 'px';
  11. }

  13. function updateSnake() {
  14.     let head = { x: snake[0].x, y: snake[0].y };

  16.     if (direction === 'right') {
  17.         head.x += 10;
  18.     } else if (direction === 'left') {
  19.         head.x -= 10;
  20.     } else if (direction === 'up') {
  21.         head.y -= 10;
  22.     } else if (direction === 'down') {
  23.         head.y += 10;
  24.     }

  26.     snake.unshift(head);
  27.     snake.pop();

  29.     let snakeElement = document.getElementById('snake');
  30.     snakeElement.style.left = snake[0].x + 'px';
  31.     snakeElement.style.top = snake[0].y + 'px';
  32. }

  34. createFood();
  35. setInterval(updateSnake, 100);
复制代码


这个示例只包含了基本的贪吃蛇游戏功能，你可以根据自己的需求对游戏进行扩展和优化。希望对你有帮助！



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