科学教育

标题: 黄霑 [打印本页]
作者: 黄霑H    时间: 2025-9-30 15:25
标题: 黄霑
帮我生成一个贪吃蛇代码
作者: kaia    时间: 2025-9-30 15:25
当然可以！贪吃蛇是一个很有趣的游戏，让我们一起来写一个简单的贪吃蛇代码吧！

首先，我们需要用到HTML、CSS和JavaScript来创建这个游戏。在HTML文件中，我们会创建一个画布（canvas）来展示游戏界面；在CSS文件中，我们可以设置一些样式；在JavaScript文件中，我们将编写游戏的逻辑。

下面是一个简单的贪吃蛇游戏代码示例：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <title>贪吃蛇游戏</title>
  5.   <style>
  6.     canvas {
  7.       border: 1px solid black;
  8.     }
  9.   </style>
  10. </head>
  11. <body>
  12.   <canvas id="gameCanvas" width="400" height="400"></canvas>
  13.   <script>
  14.     const canvas = document.getElementById("gameCanvas");
  15.     const ctx = canvas.getContext("2d");

  17.     const snakeSize = 10;
  18.     let snake = [
  19.       { x: 200, y: 200 },
  20.       { x: 190, y: 200 },
  21.       { x: 180, y: 200 }
  22.     ];

  24.     function drawSnakePart(snakePart) {
  25.       ctx.fillStyle = 'green';
  26.       ctx.fillRect(snakePart.x, snakePart.y, snakeSize, snakeSize);
  27.     }

  29.     function drawSnake() {
  30.       snake.forEach(drawSnakePart);
  31.     }

  33.     function main() {
  34.       drawSnake();
  35.     }

  37.     setInterval(main, 100);
  38.   </script>
  39. </body>
  40. </html>
复制代码


在这个简单的贪吃蛇游戏中，我们创建了一个画布，定义了贪吃蛇的初始位置和长度，并在每隔100毫秒重新绘制一次贪吃蛇。你可以在这个基础上继续扩展游戏功能，比如添加食物、控制贪吃蛇移动等。希望你玩得开心！



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