本系列第 1/8 课，建议 45–60 分钟（估算）。基础课程可零基础开始；另外两个系列建议先完成编程基础。
这课解决什么
画布原点在左上角，x 向右、y 向下。列=floor(x/格宽)，行=floor(y/格高)，索引=行×4+列+1。边界先检查，才能避免右边缘被当成下一列。
先预测，再运行
x 恰好等于画布宽度时，是最后一列还是画布外？
先记下自己的答案，运行起始工程与完成工程比较；答案见文末。
开始实战
从空白工程开始，按下表拖入组件；也可先导入完成工程预测行为，再回到空白工程独立搭建。
完成工程可以查看答案；独立作业请保留自己的修改。
新增或调整的组件
| 实例名 | 组件 | 本课配置 |
|---|---|---|
标签_标题 |
标签 | Width=Fill parent；FontSize=24；TextColor=#183153；Text=记忆翻牌 · 第 1课 |
标签_状态 |
标签 | Width=Fill parent；FontSize=16；TextColor=#183153；Text=点击卡片 |
画布1 |
画布 | Width=280；Height=300；FontSize=20；BackgroundColor=#FFFFFF |
按钮_新局 |
按钮 | Width=Fill parent；BackgroundColor=#2563EB；TextColor=#FFFFFF；FontSize=16；Text=新局 |
逐步搭建
- 增加 280×300 的画布，按四列两行绘制八格。
- 每次绘制根据画布实际宽高计算格宽和格高，不固定点击阈值。
- Touched 中检查边界，再求行列与索引，翻开被点的卡片。
- 点击左上、右下、格边及画布外；改变画布宽度后重复检查。
图来自本课最终工程执行积木后的状态，为 HTML 近似预览；不是手机截图。
核心积木与数据流
下面是本课完成工程中的核心代码，包含所需全局变量和过程。可在块图中追踪数值，再回到工程对照完整事件；合并到已有工程时，同名事件合并处理。
global 牌 = []
global 翻面 = []
global 锁定 = false
global 宽 = 70
global 高 = 100
procedure 绘制() {
宽 = 画布1.Width / 4
高 = 画布1.Height / ceil(length(牌) / 4)
画布1.Clear()
for i = 1 to length(牌) {
var 列 = (i - 1) % 4
var 行 = floor((i - 1) / 4)
画布1.PaintColor = choose(翻面[i] = 2, -14575216, choose(翻面[i] = 1,-24576,-14268949))
画布1.DrawShape(list(list(列 * 宽 + 2,行 * 高 + 2),list((列 + 1) * 宽 - 2,行 * 高 + 2),list((列 + 1) * 宽 - 2,(行 + 1) * 高 - 2),list(列 * 宽 + 2,(行 + 1) * 高 - 2)),true)
画布1.PaintColor = -1
画布1.DrawText(choose(翻面[i] = 0,"?",牌[i]),(列 + 0.5) * 宽,(行 + 0.5) * 高)
}
}
when 画布1.Touched(x, y, touchedAnySprite) {
if x >= 0 and y >= 0 and x < 画布1.Width and y < 画布1.Height {
var i = floor(y / 高) * 4 + floor(x / 宽) + 1
if i <= length(牌) and not 锁定 {
翻面[i] = choose(翻面[i] = 0,1,0)
标签_状态.Text = join("卡片 ",i,"：",牌[i])
绘制()
}
}
}
中途检查与排错
本课以下控制与数据流已执行最终归档中的真实积木检查。请在伴侣或安装的 APK 中按相同场景操作，记录实际结果；自动检查通过不代表手机已实测。
- 开局8张卡片。
- 边界不越界。
排查时先确定出错的是输入、状态、数据读取还是显示；用标签暂时显示关键值，每次只改变一个条件。
界面图是积木执行后的画布近似预览；计时器、绘制与系统控件在设备上的实际表现仍需运行检查。
两个理解题与独立改造
- x 恰好等于画布宽度时，是最后一列还是画布外？
- 绘制和点击若使用不同列数，最先出现什么问题？
独立改造： 改为两列四行，解释索引公式要改哪里。
先完成自己的工程，再对照答案。检查成功路径，也检查空数据、重复操作和取消；写出你改动的规则。
查看预测与练习参考答案
预测： 画布外。本课有效范围是 0≤x<Width，0≤y<Height。
追踪： 用户点的格子与计算索引错位，边缘也可能越界；统一网格参数。
改造思路： 列数统一改为 2，格宽=Width/2，行数=ceil(牌数/2)，索引=行×2+列+1。绘制与点击必须使用同一列数。
完成与下一步
保存自己的工程并导出 .aia；给文件命名以区分本课作业和参考源码。请用自己的话解释本课知识，并展示一次失败输入的处理。
扫码添加客服咨询
