科学教育

标题: 丁樾 [打印本页]
作者: 605丁樾    时间: 2025-9-30 15:25
标题: 丁樾
帮我生成一个贪吃蛇游戏
作者: kaia    时间: 2025-9-30 15:26
当我们在网页上玩贪吃蛇游戏时，其实是通过 HTML、CSS 和 JavaScript 来实现的。让我来教你一个简单版本的贪吃蛇游戏吧！

首先，在 HTML 文件中创建一个画布（canvas），用于显示游戏内容：
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <title>贪吃蛇游戏</title>
  5.   <style>
  6.     canvas {
  7.       border: 1px solid #000;
  8.     }
  9.   </style>
  10. </head>
  11. <body>
  12.   <canvas id="gameCanvas" width="400" height="400"></canvas>
  13.   <script src="snake.js"></script>
  14. </body>
  15. </html>
复制代码


然后，创建一个 JavaScript 文件 `snake.js`，实现贪吃蛇游戏的逻辑：
  1. const canvas = document.getElementById('gameCanvas');
  2. const ctx = canvas.getContext('2d');

  4. const snakeSize = 10;
  5. let snake = [{ x: 20, y: 20 }];
  6. let food = { x: 0, y: 0 };
  7. let dx = 10;
  8. let dy = 0;

  10. function createFood() {
  11.   food.x = Math.floor(Math.random() * (canvas.width / 10)) * 10;
  12.   food.y = Math.floor(Math.random() * (canvas.height / 10)) * 10;
  13. }

  15. function drawSnakePart(part) {
  16.   ctx.fillStyle = '#00f';
  17.   ctx.fillRect(part.x, part.y, snakeSize, snakeSize);
  18. }

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

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

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

  36. function checkCollision() {
  37.   if (snake[0].x < 0 || snake[0].x >= canvas.width || snake[0].y < 0 || snake[0].y >= canvas.height) {
  38.     return true;
  39.   }

  41.   for (let i = 1; i < snake.length; i++) {
  42.     if (snake[0].x === snake[i].x && snake[0].y === snake[i].y) {
  43.       return true;
  44.     }
  45.   }

  47.   return false;
  48. }

  50. function update() {
  51.   if (checkCollision()) {
  52.     alert('游戏结束！');

  54.     snake = [{ x: 20, y: 20 }];
  55.     dx = 10;
  56.     dy = 0;
  57.   }

  59.   moveSnake();

  61.   ctx.clearRect(0, 0, canvas.width, canvas.height);
  62.   drawFood();
  63.   snake.forEach(drawSnakePart);

  65.   setTimeout(update, 100);
  66. }

  68. createFood();
  69. update();

  71. document.addEventListener('keydown', function(event) {
  72.   const keyPressed = event.key;

  74.   if (keyPressed === 'ArrowUp' && dy === 0) {
  75.     dx = 0;
  76.     dy = -10;
  77.   }

  79.   if (keyPressed === 'ArrowDown' && dy === 0) {
  80.     dx = 0;
  81.     dy = 10;
  82.   }

  84.   if (keyPressed === 'ArrowLeft' && dx === 0) {
  85.     dx = -10;
  86.     dy = 0;
  87.   }

  89.   if (keyPressed === 'ArrowRight' && dx === 0) {
  90.     dx = 10;
  91.     dy = 0;
  92.   }
  93. });
复制代码


这样，你就可以在浏览器中打开这个 HTML 文件，开始玩你自己生成的贪吃蛇游戏啦！希望你能玩得开心！



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