科学教育

标题: 廖晗瑞 [打印本页]
作者: 廖晗瑞    时间: 2024-8-14 18:54
标题: 廖晗瑞
帮我生成一个完善的贪吃蛇游戏

作者: kaia    时间: 2024-8-14 18:55
你好，廖晗瑞！我们来一起创建一个简单的贪吃蛇游戏吧！这个过程会很有趣，也能让你学到不少网页编程知识。

我们需要用到HTML、CSS和JavaScript这三种语言。下面我会一步一步带你实现这个小游戏。

### 第一步：HTML结构

HTML是用来建立网页骨架的。我们先创建一个小框架包含游戏画布和基本元件。

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>贪吃蛇游戏</title>
  6.     <link rel="stylesheet" href="styles.css">
  7. </head>
  8. <body>
  9.     <h1>贪吃蛇游戏</h1>
  10.     <canvas id="gameCanvas" width="400" height="400"></canvas>
  11.     <script src="script.js"></script>
  12. </body>
  13. </html>
复制代码


这个HTML页面设置了一个400x400像素的画布，我们将在这上面进行绘制游戏画面。

### 第二步：CSS样式

CSS用来美化我们的网页。虽然贪吃蛇游戏主要靠画布渲染内容，但我们还是可以加一些简单的样式。

  1. /* styles.css */
  2. body {
  3.     text-align: center;
  4.     font-family: Arial, sans-serif;
  5. }

  7. canvas {
  8.     border: 1px solid black;
  9.     background-color: #f5f5f5;
  10. }
复制代码


这个CSS代码只是简单地设置了一些页面和画布的样式，让它们看起来更整洁和美观。

### 第三步：JavaScript逻辑

JavaScript是让游戏动起来的关键部分。我们来编写控制贪吃蛇游戏的逻辑代码。

  1. // script.js
  2. window.onload = function() {
  3.     const canvas = document.getElementById("gameCanvas");
  4.     const ctx = canvas.getContext("2d");

  6.     // 设置初始游戏变量
  7.     let snake = [{ x: 10, y: 10 }];
  8.     let direction = { x: 1, y: 0 };
  9.     let food = { x: Math.floor(Math.random() * 20), y: Math.floor(Math.random() * 20) };
  10.     let score = 0;

  12.     // 每隔100毫秒更新游戏状态
  13.     setInterval(updateGame, 100);

  15.     // 更新游戏状态
  16.     function updateGame() {
  17.         // 移动蛇的位置
  18.         const head = { x: snake[0].x + direction.x, y: snake[0].y + direction.y };
  19.         snake.unshift(head);
  20.         if (head.x === food.x && head.y === food.y) {
  21.             score++;
  22.             food = { x: Math.floor(Math.random() * 20), y: Math.floor(Math.random() * 20) };
  23.         } else {
  24.             snake.pop();
  25.         }

  27.         // 检查碰撞
  28.         if (head.x < 0 || head.x >= 20 || head.y < 0 || head.y >= 20 || snakeCollision(head)) {
  29.             resetGame();
  30.         }

  32.         // 清理并重新绘制画布
  33.         ctx.clearRect(0, 0, canvas.width, canvas.height);
  34.         drawSnake();
  35.         drawFood();
  36.     }

  38.     // 绘制蛇
  39.     function drawSnake() {
  40.         ctx.fillStyle = "green";
  41.         snake.forEach(part => {
  42.             ctx.fillRect(part.x * 20, part.y * 20, 20, 20);
  43.         });
  44.     }

  46.     // 绘制食物
  47.     function drawFood() {
  48.         ctx.fillStyle = "red";
  49.         ctx.fillRect(food.x * 20, food.y * 20, 20, 20);
  50.     }

  52.     // 检查蛇是否撞到自身
  53.     function snakeCollision(head) {
  54.         for (let i = 1; i < snake.length; i++) {
  55.             if (snake[i].x === head.x && snake[i].y === head.y) {
  56.                 return true;
  57.             }
  58.         }
  59.         return false;
  60.     }

  62.     // 重置游戏
  63.     function resetGame() {
  64.         alert("Game Over! Your score is " + score);
  65.         snake = [{ x: 10, y: 10 }];
  66.         direction = { x: 1, y: 0 };
  67.         food = { x: Math.floor(Math.random() * 20), y: Math.floor(Math.random() * 20) };
  68.         score = 0;
  69.     }

  71.     // 监听键盘事件
  72.     document.addEventListener("keydown", function(event) {
  73.         switch(event.keyCode) {
  74.             case 37:
  75.                 if (direction.x !== 1) {
  76.                     direction = { x: -1, y: 0 };
  77.                 }
  78.                 break;
  79.             case 38:
  80.                 if (direction.y !== 1) {
  81.                     direction = { x: 0, y: -1 };
  82.                 }
  83.                 break;
  84.             case 39:
  85.                 if (direction.x !== -1) {
  86.                     direction = { x: 1, y: 0 };
  87.                 }
  88.                 break;
  89.             case 40:
  90.                 if (direction.y !== -1) {
  91.                     direction = { x: 0, y: 1 };
  92.                 }
  93.                 break;
  94.         }
  95.     });
  96. };
复制代码


这个JavaScript代码中：
- `updateGame`函数每隔100毫秒更新游戏状态。
- `drawSnake`和`drawFood`函数负责在画布上绘制蛇和食物。
- `snakeCollision`函数检查蛇是否撞到自己。
- `resetGame`函数重置游戏。
- `document.addEventListener("keydown", ...)`用来监听方向键的按键事件，控制蛇的移动方向。

将这些代码粘贴到相应的文件（HTML的`index.html`，CSS的`styles.css`，JavaScript 的`script.js`里）中，然后打开`index.html`文件，就可以看到你的贪吃蛇游戏啦！

如果你有任何问题或需要进一步的帮助，请随时告诉我！祝你玩的愉快！



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