科学教育

标题: 曹语彤贪吃蛇 [打印本页]
作者: 曹语彤    时间: 2025-10-10 14:56
标题: 曹语彤贪吃蛇
帮我生成一个贪吃蛇游戏的代码，html,css,js。
作者: kaia    时间: 2025-10-10 14:56
当我们创建一个简单的贪吃蛇游戏时，代码会有一些复杂，但是我会尽量给你解释得简单易懂一些。

首先，我们需要在 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.     <canvas id="gameCanvas"></canvas>
  11.     <script src="script.js"></script>
  12. </body>
  13. </html>
复制代码


然后，在 CSS 文件中，我们可以设置画布的样式，例如：

  1. #gameCanvas {
  2.     display: block;
  3.     margin: 0 auto;
  4.     background-color: black;
  5. }
复制代码


最后，在 JavaScript 文件中编写游戏逻辑，让贪吃蛇能够移动、吃食物等。这段代码可能会比较长，我会尽量简要地介绍：

  1. const canvas = document.getElementById('gameCanvas');
  2. const ctx = canvas.getContext('2d');

  4. const snakeSize = 20;
  5. const canvasWidth = 600;
  6. const canvasHeight = 400;

  8. let snake = [{ x: 10, y: 10 }];
  9. let food = { x: 0, y: 0 };
  10. let dx = 0;
  11. let dy = 0;
  12. let score = 0;

  14. function drawSnakePart(snakePart) {
  15.     ctx.fillStyle = 'green';
  16.     ctx.fillRect(snakePart.x * snakeSize, snakePart.y * snakeSize, snakeSize, snakeSize);
  17. }

  19. function drawFood() {
  20.     ctx.fillStyle = 'red';
  21.     ctx.fillRect(food.x, food.y, snakeSize, snakeSize);
  22. }

  24. function moveSnake() {
  25.     const head = { x: snake[0].x + dx, y: snake[0].y + dy };
  26.     snake.unshift(head);

  28.     if (head.x === food.x && head.y === food.y) {
  29.         score++;
  30.         createFood();
  31.     } else {
  32.         snake.pop();
  33.     }
  34. }

  36. function createFood() {
  37.     food.x = Math.floor(Math.random() * (canvasWidth / snakeSize)) * snakeSize;
  38.     food.y = Math.floor(Math.random() * (canvasHeight / snakeSize)) * snakeSize;
  39. }

  41. function checkCollision() {
  42.     if (snake[0].x < 0 || snake[0].x >= canvasWidth / snakeSize ||
  43.         snake[0].y < 0 || snake[0].y >= canvasHeight / snakeSize) {
  44.         gameOver();
  45.     }

  47.     for (let i = 1; i < snake.length; i++) {
  48.         if (snake[i].x === snake[0].x && snake[i].y === snake[0].y) {
  49.             gameOver();
  50.         }
  51.     }
  52. }

  54. function gameOver() {
  55.     alert('游戏结束！你的得分是：' + score);
  56.     snake = [{ x: 10, y: 10 }];
  57.     score = 0;
  58.     dx = 0;
  59.     dy = 0;
  60.     createFood();
  61. }

  63. function updateGame() {
  64.     ctx.clearRect(0, 0, canvasWidth, canvasHeight);

  66.     moveSnake();
  67.     checkCollision();

  69.     drawFood();
  70.     snake.forEach(drawSnakePart);

  72.     setTimeout(() => {
  73.         requestAnimationFrame(updateGame);
  74.     }, 100);
  75. }

  77. createFood();
  78. updateGame();

  80. document.addEventListener('keydown', (e) => {
  81.     const keyPressed = e.key;

  83.     if (keyPressed === 'ArrowUp' && dy === 0) {
  84.         dx = 0;
  85.         dy = -1;
  86.     }

  88.     if (keyPressed === 'ArrowDown' && dy === 0) {
  89.         dx = 0;
  90.         dy = 1;
  91.     }

  93.     if (keyPressed === 'ArrowLeft' && dx === 0) {
  94.         dx = -1;
  95.         dy = 0;
  96.     }

  98.     if (keyPressed === 'ArrowRight' && dx === 0) {
  99.         dx = 1;
  100.         dy = 0;
  101.     }
  102. });
复制代码


这就是一个简单的贪吃蛇游戏的代码示例。希望我的解释对你有帮助，如果有任何问题都可以问我哦！



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