科学教育

标题: 陈若冰贪吃蛇 [打印本页]
作者: 陈若冰    时间: 2025-10-16 12:07
标题: 陈若冰贪吃蛇
帮我生成贪吃蛇网页代码
作者: kaia    时间: 2025-10-16 12:07
当我们要制作一个简单的贪吃蛇网页游戏时，可以使用HTML、CSS和JavaScript来实现。下面是一个简单的示例代码：

HTML部分：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>贪吃蛇游戏</title>
  8.     <link rel="stylesheet" href="style.css">
  9. </head>
  10. <body>
  11.     <div id="gameBoard">
  12.         <div id="snake"></div>
  13.         <div id="food"></div>
  14.     </div>
  15.    
  16.     <script src="script.js"></script>
  17. </body>
  18. </html>
复制代码


CSS部分（style.css）：
  1. #gameBoard {
  2.     width: 400px;
  3.     height: 400px;
  4.     border: 1px solid black;
  5.     position: relative;
  6. }

  8. #snake, #food {
  9.     width: 20px;
  10.     height: 20px;
  11.     position: absolute;
  12. }

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

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


JavaScript部分（script.js）：
  1. const gameBoard = document.getElementById("gameBoard");
  2. const snake = document.getElementById("snake");
  3. const food = document.getElementById("food");

  5. let snakeX = 10;
  6. let snakeY = 10;
  7. let foodX = 5;
  8. let foodY = 5;

  10. // 初始化贪吃蛇和食物的位置
  11. function updateSnake() {
  12.     snake.style.left = snakeX + 'px';
  13.     snake.style.top = snakeY + 'px';
  14. }

  16. function updateFood() {
  17.     food.style.left = foodX + 'px';
  18.     food.style.top = foodY + 'px';
  19. }

  21. updateSnake();
  22. updateFood();
复制代码


以上是一个简单的贪吃蛇游戏的基本结构，当你在浏览器打开这个HTML文件时，会看到一个游戏界面，里面有一个绿色的方块代表贪吃蛇，一个红色的方块代表食物。接下来你可以根据需要继续完善这个游戏，比如添加贪吃蛇移动、吃食物、增长长度等功能。希望对你有帮助！



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