使用豆包 MarsCode 实现《愤怒的小鸟》小游戏

一、前言

《愤怒的小鸟》是一款基于弹射物理原理的经典休闲游戏。玩家通过控制弹弓发射小鸟，击倒场景中的猪或障碍物。这个游戏以其简单上手却富有策略性的玩法风靡全球。

在本项目中，我们使用豆包 MarsCode 实现一个简化版《愤怒的小鸟》，使用画布（Canvas）、定时器、鼠标监听、数组及脚本节点等组件。通过图形化拖拽和 JavaScript 脚本结合，我们可以轻松搭建出一个包含抛物线飞行、碰撞检测、目标命中判定的趣味小游戏。

二、游戏设计与逻辑分析

本游戏主要包含以下几个模块：

弹弓机制：记录玩家鼠标按下与释放的位置，计算初速度和方向。
小鸟运动：模拟小鸟以一定初速度沿重力作用轨迹飞行。
碰撞检测：当小鸟接触目标方块（猪）或地面时触发碰撞响应。
胜利判定：成功击中所有目标即判定为胜利。

我们将在 MarsCode 中添加如下组件：

画布（Canvas） ：用于渲染场景。
定时器：驱动小鸟运动动画。
鼠标监听器：获取按下和释放坐标。
变量/数组：保存小鸟、目标、速度等状态。
脚本节点：用于实现逻辑计算和图像绘制。

三、画布初始化脚本

首先，在"画布"的 onLoad 事件中添加以下脚本，初始化游戏场景：

ini 复制代码

javascript
复制编辑
const ctx = canvas.getContext("2d");

// 全局变量
let bird = { x: 100, y: 400, vx: 0, vy: 0, isFlying: false };
let gravity = 0.5;
let targets = [
  { x: 600, y: 400, hit: false },
  { x: 650, y: 400, hit: false },
];

let isDragging = false;
let startX = 0, startY = 0;

// 绘制函数
function drawScene() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 地面
  ctx.fillStyle = "#ccc";
  ctx.fillRect(0, 450, canvas.width, 50);

  // 小鸟
  ctx.fillStyle = "red";
  ctx.beginPath();
  ctx.arc(bird.x, bird.y, 15, 0, Math.PI * 2);
  ctx.fill();

  // 弹弓线
  if (isDragging) {
    ctx.strokeStyle = "black";
    ctx.beginPath();
    ctx.moveTo(100, 400);
    ctx.lineTo(startX, startY);
    ctx.stroke();
  }

  // 目标（猪）
  targets.forEach(t => {
    if (!t.hit) {
      ctx.fillStyle = "green";
      ctx.beginPath();
      ctx.arc(t.x, t.y, 20, 0, Math.PI * 2);
      ctx.fill();
    }
  });
}

drawScene();

四、鼠标监听逻辑

接下来，在"鼠标监听器"组件中添加 onMouseDown 和 onMouseUp 事件绑定：

onMouseDown 脚本：

ini 复制代码

javascript
复制编辑
// 记录拖拽起点
isDragging = true;
startX = event.offsetX;
startY = event.offsetY;

onMouseUp 脚本：

ini 复制代码

javascript
复制编辑
if (!isDragging) return;

isDragging = false;

let dx = 100 - startX;
let dy = 400 - startY;

bird.vx = dx * 0.2;
bird.vy = dy * 0.2;
bird.isFlying = true;

这个逻辑计算出拉弓向量，并将其转为小鸟的速度（乘以缩放因子 0.2 控制力度），实现"弹射"效果。

五、定时器主循环逻辑

在"定时器"组件的 tick 事件中添加以下逻辑，用于模拟小鸟运动并判断碰撞：

ini 复制代码

javascript
复制编辑
if (bird.isFlying) {
  // 更新速度与位置
  bird.vy += gravity;
  bird.x += bird.vx;
  bird.y += bird.vy;

  // 落地检测
  if (bird.y >= 435) {
    bird.y = 435;
    bird.isFlying = false;
  }

  // 碰撞检测
  targets.forEach(t => {
    if (!t.hit) {
      const dx = bird.x - t.x;
      const dy = bird.y - t.y;
      const dist = Math.sqrt(dx * dx + dy * dy);
      if (dist < 30) {
        t.hit = true;
        bird.isFlying = false;
      }
    }
  });

  // 胜利判断
  if (targets.every(t => t.hit)) {
    timer.stop();
    alert("胜利！你击中了所有目标！");
  }
}

drawScene();

此脚本模拟了重力运动（vy += g），更新了位置，并检查了与目标猪的碰撞（利用圆形距离判断）。

六、补充功能建议

以下是一些可以继续扩展的建议功能：

1. 增加多只小鸟

使用数组 birds 来保存多只小鸟，每次发射一个，失败后切换下一只。

2. 添加障碍物

你可以在 drawScene() 中绘制矩形木块或石头，并判断小鸟是否碰撞，从而阻挡其路径。

3. 积分与关卡系统

记录每次命中得分，增加击中目标数量、弹弓位置等参数设计更复杂的地图。

七、总结与心得

通过本项目，我们在豆包 MarsCode 上成功实现了一个简化版《愤怒的小鸟》游戏。整个开发过程中，我们：

利用 画布组件 实现图形绘制；
使用 定时器组件 模拟物理运动；
借助 鼠标监听器 获取玩家操作；
通过 脚本节点 完成碰撞检测与逻辑判断。

MarsCode 提供了友好的可视化界面与丰富的 JS 扩展能力，使得即使没有完整前端经验的用户也能轻松上手制作互动游戏。如果你有创意、有想法，这个平台绝对值得一试！