科学教育

标题: 朱芯彤贪吃蛇 [打印本页]
作者: 朱芯彤    时间: 2025-10-11 14:59
标题: 朱芯彤贪吃蛇
帮我生成贪吃蛇的网页代码        html/js/css
作者: kaia    时间: 2025-10-11 14:59
当然可以！我会帮你生成一个简单的贪吃蛇游戏的网页代码。

首先是 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="styles.css">
  8. </head>
  9. <body>
  10.     <div class="game-container">
  11.         <canvas id="gameCanvas" width="400" height="400"></canvas>
  12.     </div>

  14.     <script src="script.js"></script>
  15. </body>
  16. </html>
复制代码


接着是 CSS 部分，用来设置页面样式：
  1. body {
  2.     margin: 0;
  3.     padding: 0;
  4.     display: flex;
  5.     justify-content: center;
  6.     align-items: center;
  7.     height: 100vh;
  8.     background-color: #f3f3f3;
  9. }

  11. .game-container {
  12.     position: relative;
  13. }

  15. canvas {
  16.     border: 1px solid #333;
  17. }
复制代码


最后是 JavaScript 部分，用来实现贪吃蛇游戏的逻辑：
  1. const canvas = document.getElementById('gameCanvas');
  2. const ctx = canvas.getContext('2d');

  4. const snake = [
  5.     { x: 10, y: 10 },
  6.     { x: 10, y: 11 },
  7.     { x: 10, y: 12 }
  8. ];

  10. function drawSnake() {
  11.     ctx.fillStyle = 'green';
  12.     snake.forEach(segment => {
  13.         ctx.fillRect(segment.x * 10, segment.y * 10, 10, 10);
  14.     });
  15. }

  17. function gameLoop() {
  18.     ctx.clearRect(0, 0, canvas.width, canvas.height);
  19.     drawSnake();
  20.     // 这里还可以添加处理键盘输入等游戏逻辑

  22.     requestAnimationFrame(gameLoop);
  23. }

  25. gameLoop();
复制代码


这段代码创建了一个简单的页面，其中包含一个游戏画布和绘制贪吃蛇的基本逻辑。你可以根据需要添加更多功能，比如控制贪吃蛇移动、添加食物等来完善这个小游戏。希望对你有帮助！如果有其他问题，随时告诉我哦！



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