清泛IT社区

标题: 不到20个积木块，我用App Inventor 2给女儿做了个接星星小游戏 [打印本页]

作者: App Inventor 2 时间: 1 小时前
标题: 不到20个积木块，我用App Inventor 2给女儿做了个接星星小游戏
周末带女儿去科技馆，她玩了一个"接星星"的互动投影游戏，回来就缠着我："爸爸，做一个能装在手机上的接星星App吧！"刚好最近在研究App Inventor 2的精灵动画组件，于是决定用一上午把这个小游戏做出来——没想到过程比想的顺利不少。

需求分析

女儿的"需求"其实很简单：
1. 星星从屏幕上方不断掉落
2. 底部有一个篮子可以左右移动
3. 接住星星加分，没接住就掉血
4. 分数越高越好玩

说白了就是一个经典的"跌落物体接住"小游戏，这类游戏的核心就是精灵运动逻辑——这恰好是Sprite动画组件的看家本领。

技术方案

App Inventor 2提供了三种与动画直接相关的组件：

• 画布（Canvas）：游戏舞台，所有精灵必须在画布上
• 图像精灵（ImageSprite）：可以用图片作为外观的运动对象
• 球形精灵（Ball）：圆形精灵，适合做小球、子弹、星星等

我的方案很直接：
• 用画布作为游戏主界面
• 星星用球形精灵（Ball）实现，修改填充色为黄色，缩小半径充当"星星"
• 篮子用图像精灵（ImageSprite），加载一张篮子图片作为外观
• 再搭配一个时钟组件（Clock）做定时控制

关键实现

第一步：搭建界面

在组件面板中依次拖入：
1. 一个Canvas（设置宽为"填充父容器"，高为400px，背景色为深蓝色）
2. 一个ImageSprite（放到Canvas里面，设置图片为篮子素材，名称为"Basket"）
3. 一个Ball（放到Canvas里面，设置半径12px，填充色#FFD700金色，名称为"Star"）
4. 一个Clock（放到屏幕下方，不显示）

第二步：让星星掉下来

核心逻辑——让球形精灵定时移动。Ball组件有个关键属性组合：

• Speed（速度）：每次移动的像素数
• Interval（间隔）：每次移动的时间间隔（毫秒）
• Heading（方向）：移动角度（180°=向下）
• Enabled（启用）：是否移动

当 Screen1.初始化
  设置 Star.速度为 5
  设置 Star.间隔为 50
  设置 Star.方向为 180  // 向下
  设置 Star.启用为真

就这么几行，星星就开始往下掉了。不过掉到屏幕底部就没了——我们需要检测"到达边缘"事件。

第三步：边界检测与重新生成

Ball组件自带一个 到达边缘时 事件：

当 Star.到达边缘时(边缘数值)
  调用 Star.移动到指定位置(x: 随机整数从1到(Canvas.宽度 - 50), y: 10)
  设置分数为分数 - 1
  如果分数 < 0
调用 Notifier.显示警告("游戏结束！")

同时，当星星到达底部时，随机生成一个新的X坐标位置，让它从顶部重新落下，模拟"不断掉落的星星"。

第四步：篮子跟随手指移动

ImageSprite同样支持触摸响应。我用画布的 被拖动时 事件来控制篮子的位置：

当 Canvas1.被拖动时(起点X,起点Y,前点X,前点Y,当前X,当前Y,有精灵被拖动)
  调用 Basket.移动到指定位置(x: 当前X - Basket.宽度 / 2, y: Canvas1.高度 - Basket.高度)

这里的关键技巧是当前X - Basket.宽度 / 2，让篮子中心对齐手指位置，体验更自然。

第五步：碰撞检测

Ball和ImageSprite之间可以互相检测碰撞。Ball的 被碰撞时 事件：

当 Star.被碰撞时(其他精灵)
  设置分数为分数 + 1
  调用 Star.移动到指定位置(x: 随机整数从1到(Canvas.宽度 - 50), y: 10)
  调用 Star.反弹(0)  // 反弹处理
  调用 Sound1.播放()

这个事件自动检测精灵之间的碰撞，无需自己写任何碰撞算法。App Inventor 2的引擎内部已经实现了矩形碰撞检测。

踩过的坑

坑1：Z坐标的问题
一开始篮子和星星重叠时，星星显示在篮子上面，看起来像是星星穿过了篮子。后来设置了 Basket.Z坐标为2，Star.Z坐标为1，让篮子始终显示在前层，视觉上就像稳稳地"接住"了。

坑2：性能抖动
星星下落速度设置太快（Speed=15+Interval=30），低端手机上出现了明显的卡顿。调整为Speed=5+Interval=50后就流畅了。Ball组件文档也提到：间隔越小位置更新越频繁，但性能消耗也越大。

坑3：边缘数值的含义
Ball组件的"到达边缘时"事件返回一个边缘数值：北=1、东北=2、东=3、东南=4、南=-1、西南=-2、西=-3、西北=-4。一开始直接用这个值传给反弹方法，结果星星到处乱弹。后来判断如果边缘数值是 -1（南/底部），就理解是"没接住"，重置位置重新掉落。

最终效果

最终成品是一个完整的"接星星"小游戏：
• 金色星星不断从顶部落下
• 手指拖动底部篮子左右移动
• 接住星星播放音效加1分
• 没接住扣分，扣到0游戏结束
• 游戏过程中星星下落速度会随分数增加逐步加快

女儿试玩后开心得不行，自己玩了半小时还叫来小伙伴一起比分数。最让我意外的是，整个游戏的核心逻辑只用了不到20个积木块——App Inventor 2对精灵碰撞、移动、边界检测的高度封装，让游戏开发的门槛低得超乎想象。

复盘感悟

1. 精灵组件是游戏开发的基石：Ball和ImageSprite搭配Canvas，足以实现90%的2D小游戏需求
2. 属性组合创造出丰富效果：仅靠Speed+Interval+Heading三个属性搭配不同值，就能实现加速、变速、弹射等效果
3. 碰撞事件是零代码的：不需要写任何碰撞检测算法，组件自带"被碰撞时"事件开箱即用
4. 性能调优不能忘：Interval不是越小越好，需要在视觉流畅性和设备性能之间找平衡

如果你想进一步拓展，可以添加多个Ball实现"多星同屏掉落"，或者用ImageSprite做不同道具（加分星、减速星、炸弹），甚至用TinyDB保存最高分排行榜——画布精灵引擎的潜力远超你的想象。

> 文档参考：https://www.fun123.cn/reference/components/animation.html

欢迎光临清泛IT社区 (https://bbs.tsingfun.com/)