xsl/chouka
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

save code

Browse Source
This commit is contained in:
Feast
2026-05-16 12:05:04 +08:00
parent a169ceb263
commit d092dfb4a6
23 changed files with 2291 additions and 1343 deletions
Download Patch File Download Diff File Expand all files Collapse all files
第05课-卡片名字与布局.md
+215 -171
View File
@@ -1,86 +1,108 @@
# 第 5 课：卡片名字与布局
**本课目标**：给每种稀有度配上具体的卡片名字（火龙、冰狼、雷霆龙……），让抽卡真正像游戏。学会把界面分区布局，更整齐好看。
**复习**：第 3～4 课只显示稀有度等级；命令行时期你已掌握 `std::string` 数组。
> **本课目标**：给每种稀有度配上具体的卡片名字（小火龙、冰霜之狼、雷霆神龙……）。再把界面分区，让窗口整齐漂亮。
>
> **预计时间**：35~45 分钟
>
> **学完之后**：你能用数组管理一组"内容"，并用 `box()`/`color()` 让窗口有层次感。
---
## 1. 这一课要搞懂什么
## 0. 上课前先理理
### 从"普通卡"到"小火龙"
### 从 "★ 稀有卡 ★" 到 "★ 稀有卡 ★ 冰霜之狼"
以前的结果：
```
★ 稀有卡 ★
```
本课的结果：
```
★ 稀有卡 ★
冰霜之狼
```
**设计思路**：每种稀有度维护一个卡片名字数组，随机抽到某档 → 再随机从该档的卡片里挑一张。
### 卡片表设计
| 稀有度 | 卡片名数组 | 数量 |
|--------|-----------|------|
| 普通 | 小火龙、水跃鱼、绿草龟、小电鼠、土拨仔 | 5 张 |
| 稀有 | 烈焰飞龙、冰霜之狼、暗影豹、风暴鹰、水晶鹿 | 5 张 |
| 超稀有 | 雷霆神龙、凤凰王、深海巨兽 | 3 张 |
### 界面分区
本课把窗口分成三个区域，比之前全部控件堆在一起更好看：
设计思路两步走：
```
┌─────────────────────────────┐
│ 操作区（按钮） │ ← 顶部
├─────────────────────────────┤
│ │
│ 结果显示区 │ ← 中部大面积
│ │
├─────────────────────────────┤
│ 统计/信息区 │ ← 底部
└─────────────────────────────┘
1. 随机决定稀有度（这一步和第 3、4 课一样）
2. 从这一档的卡片数组里再随机选一张
```
### 卡牌表设计
| 稀有度 | 卡片名 | 张数 |
|--------|--------|------|
| 普通 | 小火龙、水跃鱼、绿草龟、小电鼠、土拨仔 | 5 |
| 稀有 | 烈焰飞龙、冰霜之狼、暗影豹、风暴鹰、水晶鹿 | 5 |
| 超稀有 | 雷霆神龙、凤凰王、深海巨兽 | 3 |
### 界面分区目标
```
┌────────────────────────────┐
│ [单抽] [十连抽] │ ← 顶部：操作区
├────────────────────────────┤
│ │
│ ★ 稀有卡 ★ │ ← 中部：结果区（凹陷边框）
│ 冰霜之狼 │
│ │
├────────────────────────────┤
│ 单抽：普通 0 稀有 1 超 0 │ ← 底部：统计区（灰色背景）
└────────────────────────────┘
```
### 这一课认识 2 个新朋友
| 名字 | 干什么 |
|---------------|---------------------------------------------|
| 多组数组 | 每档稀有度一个数组，下标随机选 |
| `box()` | 控件的边框样式（凹陷、凸起、扁平……） |
| `color()` | 控件的**背景色**（注意和 `labelcolor` 文字色 区分） |
---
## 2. 完整示例程序
## 1. 起步：先看现状
保存为 `lesson_gui_5.cpp`：
打开 `lesson_gui_5.cpp`。骨架是第 4 课结束的样子——但是变量 `info_box` 之后要改名 `stats_box`。先编译看看：
```bash
cmake -B build -DLESSON=5
cmake --build build && ./build/gacha5
```
### ✅ 检查点 1
- [ ] 和第 4 课一样：单抽、十连抽都能用，结果只有"普通/稀有/超稀有"
---
## 2. 步骤 1：定义三组卡片数组
### 🤔 先想一下
- 每档数组长度可以不一样吗？（可以！）
- 怎么从数组里"随机取一张"？
### ✏️ 在所有函数之外（include 下面）加（替换对应 TODO）：
```cpp
#include <FL/Fl.H>
#include <FL/Fl_Window.H>
#include <FL/Fl_Button.H>
#include <FL/Fl_Box.H>
#include <cstdlib>
#include <ctime>
#include <string>
// ===== 卡片数据 =====
// 普通卡名字
std::string normal_cards[5] = {
"小火龙", "水跃鱼", "绿草龟", "小电鼠", "土拨仔"
};
// 稀有卡名字
std::string rare_cards[5] = {
"烈焰飞龙", "冰霜之狼", "暗影豹", "风暴鹰", "水晶鹿"
};
// 超稀有卡名字
std::string super_cards[3] = {
"雷霆神龙", "凤凰王", "深海巨兽"
};
```
// ===== 全局控件 =====
Fl_Box *result_box;
Fl_Box *stats_box;
### ▶️ 编译运行
// ===== 单抽回调 =====
### ✅ 检查点 2
- [ ] 编译没报错（即使还没用到这些数组）
- [ ] 程序行为同前
---
## 3. 步骤 2：让单抽显示具体卡名
### 🤔 先想一下
- "普通卡数组有 5 张，要随机选一张"——表达式是？（答案：`normal_cards[std::rand() % 5]`）
- 超稀有数组只有 3 张，对应的取模数是？
### ✏️ 把 `draw_one_callback` 函数体**整体替换**成：
```cpp
void draw_one_callback(Fl_Widget *w, void *data) {
int r = std::rand() % 100;
std::string result = "";
@@ -100,150 +122,172 @@ void draw_one_callback(Fl_Widget *w, void *data) {
result_box->labelcolor(FL_RED);
}
// 拼接：稀有度 + 换行 + 卡片名
// 拼成两行：稀有度 + 换行 + 卡片名
std::string display = result + "\n " + card_name + "\n";
result_box->labelsize(24);
result_box->label(display.c_str());
stats_box->label("单抽模式");
}
// ===== 十连抽回调 =====
void draw_ten_callback(Fl_Widget *w, void *data) {
std::string all = "";
int rare_count = 0;
int super_count = 0;
for (int i = 1; i <= 10; i++) {
int r = std::rand() % 100;
all += "第" + std::to_string(i) + "抽：";
if (r < 70) {
all += "普通 " + normal_cards[std::rand() % 5];
} else if (r < 95) {
all += "★稀有 " + rare_cards[std::rand() % 5];
rare_count++;
} else {
all += "★★★超稀有 " + super_cards[std::rand() % 3];
super_count++;
}
all += "\n";
}
result_box->labelsize(15);
result_box->label(all.c_str());
result_box->labelcolor(FL_BLACK);
char stats[100];
std::sprintf(stats, "十连：普通 %d | 稀有 %d | 超稀有 %d",
10 - rare_count - super_count, rare_count, super_count);
stats_box->label(stats);
stats_box->labelcolor(super_count > 0 ? FL_RED : FL_BLUE);
}
int main() {
std::srand(std::time(nullptr));
Fl_Window *window = new Fl_Window(420, 520, "抽卡世界 - 第5课");
// ===== 操作区 =====
Fl_Button *btn1 = new Fl_Button(40, 15, 150, 45, "🎴 抽一张");
btn1->labelsize(18);
btn1->callback(draw_one_callback);
Fl_Button *btn10 = new Fl_Button(230, 15, 150, 45, "🎴🎴 十连抽");
btn10->labelsize(18);
btn10->callback(draw_ten_callback);
// ===== 结果显示区 =====
result_box = new Fl_Box(20, 80, 380, 350, "点击按钮开始抽卡！");
result_box->labelsize(22);
result_box->align(FL_ALIGN_TOP | FL_ALIGN_LEFT);
result_box->box(FL_DOWN_BOX); // 凹陷边框，像卡片
// ===== 统计区 =====
stats_box = new Fl_Box(20, 445, 380, 40, "等待抽卡...");
stats_box->labelsize(14);
stats_box->box(FL_FLAT_BOX);
stats_box->color(fl_rgb_color(230, 230, 230)); // 浅灰背景
window->end();
window->show();
return Fl::run();
}
```
> 注意：暂时把 `info_box->label(...)` 拿掉了，下一步再统一处理统计行。
### ▶️ 编译运行
### ✅ 检查点 3
- [ ] 点单抽 → 看到两行：稀有度 + 卡片名
- [ ] 多点几次：同一档里的卡片名会随机变化
---
## 3. 新知识点
## 4. 步骤 3：让十连抽也显示卡名
### 多组卡片数组
### ✏️ 把 `draw_ten_callback` 里的 `for` 循环**整体替换**成：
```cpp
std::string normal_cards[5] = { "小火龙", "水跃鱼", ... };
std::string rare_cards[5] = { ... };
std::string super_cards[3] = { ... };
for (int i = 1; i <= 10; i++) {
int r = std::rand() % 100;
all += "第" + std::to_string(i) + "抽：";
if (r < 70) {
all += "普通 " + normal_cards[std::rand() % 5];
} else if (r < 95) {
all += "★稀有 " + rare_cards[std::rand() % 5];
rare_count++;
} else {
all += "★★★超稀有 " + super_cards[std::rand() % 3];
super_count++;
}
all += "\n";
}
```
- 三组独立数组，每组长度可以不同
- 访问：`normal_cards[rand() % 5]` —— 随机选一张普通卡
只是在每个分支末尾把卡名拼了上去。
### `box()` —— 控件边框样式
### ▶️ 编译运行
### ✅ 检查点 4
- [ ] 十连抽 10 行结果，每行都有卡名
- [ ] 同一档里卡名随机变化
---
## 5. 步骤 4：分区布局，让界面变好看 ⭐
现在界面看着像草稿。我们用 `box()` 和 `color()` 给它分区。
顺手做一件清理：把 `info_box` 改名 `stats_box`（语义更准——它显示的是统计而不是单次信息）。
### ✏️ 改 4 处
**(1) 全局变量改名**（替换对应 TODO）：
```cpp
result_box->box(FL_DOWN_BOX); // 凹陷效果，像一张卡片
stats_box->box(FL_FLAT_BOX); // 扁平
Fl_Box *stats_box;
```
（删掉原来的 `Fl_Box *info_box;`）
**(2) 用编辑器**把整个文件里**所有 `info_box`** 替换成 `stats_box`（两个回调函数里都有用）。
**(3) 改窗口高度**：
```cpp
Fl_Window *window = new Fl_Window(420, 520, "抽卡世界 - 第5课");
```
常用样式：
**(4) 把 `result_box` 和原来的 `info_box` 创建代码换成新版（替换 main 里相关 3 段）**：
```cpp
result_box = new Fl_Box(20, 80, 380, 350, "点击按钮开始抽卡！");
result_box->labelsize(22);
result_box->align(FL_ALIGN_TOP | FL_ALIGN_LEFT);
result_box->box(FL_DOWN_BOX); // ← 凹陷边框，像卡片
stats_box = new Fl_Box(20, 445, 380, 40, "等待抽卡...");
stats_box->labelsize(14);
stats_box->box(FL_FLAT_BOX);
stats_box->color(fl_rgb_color(230, 230, 230)); // ← 浅灰背景
```
也别忘了改按钮位置（让它们和新的窗口宽度匹配）：
```cpp
Fl_Button *btn1 = new Fl_Button(40, 15, 150, 45, "抽一张");
Fl_Button *btn10 = new Fl_Button(230, 15, 150, 45, "十连抽");
```
### 💡 新工具：`box()` 和 `color()`
```cpp
result_box->box(FL_DOWN_BOX); // 边框样式：凹陷
stats_box->color(fl_rgb_color(230, 230, 230)); // 背景色
```
常用边框样式：
| 样式 | 效果 |
|------|------|
| `FL_NO_BOX` | 无边框 |
| `FL_FLAT_BOX` | 平面（默认） |
| `FL_NO_BOX` | 没有边框（默认） |
| `FL_FLAT_BOX` | 扁平、有背景 |
| `FL_UP_BOX` | 凸起 |
| `FL_DOWN_BOX` | 凹陷 |
| `FL_EMBOSSED_BOX` | 浮雕 |
### `color()` —— 控件背景色
⚠ **别混淆**：`color()` 是**背景色**，`labelcolor()` 是**文字色**。
```cpp
stats_box->color(fl_rgb_color(230, 230, 230));
### ▶️ 编译运行
### ✅ 检查点 5
- [ ] 中间是个**凹陷框**，结果显示在里面
- [ ] 底部是**灰底**的统计区
- [ ] 单抽 / 十连抽都还能用
- [ ] 整体看起来"像个游戏"了
🎉 **第 5 课通关！**
---
## 6. 玩一玩
1. 把三组卡片名全换成你自己的主题（宝可梦、数码宝贝、三国武将、星座……）。
2. 超稀有再加 2 张，**别忘了改取模数** `% 3` → `% 5`。
3. 把 `FL_DOWN_BOX` 改成 `FL_UP_BOX`、`FL_EMBOSSED_BOX` 试试。
4. 改窗口背景色：在 `Fl_Window` 创建后加 `window->color(fl_rgb_color(245, 245, 255));`。
5. **思考题**：如果数组长度从 5 改成 8，`rand() % 5` 不改会怎样？
---
## 7. 课后挑战（选做）
- **A. 图鉴按钮**：再加一个按钮 "图鉴"，点了把三组数组里所有卡名拼成长字符串显示出来。
- **B. 突出超稀有**：在单抽回调里，如果抽到超稀有就把 `result_box->box(FL_UP_BOX);`（凸起感）；其他档恢复 `FL_DOWN_BOX`。
- **C. 思考题**：现在两个回调里都有"判断 `r` → 选卡名"的相似代码。能写一个函数 `std::string get_card(int &rarity)`，让两个回调都调用它吗？（这是第 6 课会做的事，可以提前试）
---
## 8. 卡住了？常见小问题
| 现象 | 多半是 |
|------|-------|
| 数组越界崩溃 | `% N` 没和数组长度对齐 |
| 同档卡名总是同一个 | `rand() % N` 放错位置，或一次抽卡里调多次但漏写 |
| 编译报 `stats_box` 未定义 | 改名时漏了某处的 `info_box` |
| 文字看不见但背景能看到 | `labelcolor` 和 `color` 设成同色了 |
| 凹陷框看不见 | `result_box->box(FL_DOWN_BOX);` 没加 |
---
## 9. 偷看老师答案
```bash
cmake -B build -DLESSON=5 -DUSE_SOLUTION=ON
cmake --build build && ./build/gacha5
```
给控件设置背景颜色。注意：`color()` 是背景色，`labelcolor()` 是文字颜色。
---
## 4. 本课课堂小练习
## 10. 下一课预告
1. 把三组卡片名字全部换成你自己喜欢的（宝可梦、数码宝贝、自创的都行）。
2. 给超稀有卡多加 2 张，改数组长度和相关 `% N`。
3. 试三种不同的 `box()` 样式，看哪个最好看。
第 6 课是**大作业**：把前面所有功能组合起来——加**金币系统**（每抽消耗金币）、**累计统计**、**重置/退出按钮**，做一个真正像样的抽卡游戏。
---
> 📝 学完记得在 `学习进度与状态-GUI.md` 里把第 5 课打勾。
## 5. 本课课后作业（选做）
- 加一个"查看图鉴"按钮（先用文字列表显示所有卡片，不要求图片）。提示：把所有卡名拼成一个长字符串显示。
- 在单抽结果中，如果抽到超稀有，把 `result_box` 的 `box()` 临时改成 `FL_UP_BOX`（凸起效果，突出显示）。
- 把窗口背景色改一下：`window->color(fl_rgb_color(245, 245, 255));`
---
## 6. 常见小问题
- **`normal_cards` 越界**：`% 5` 对应数组长度 5；如果改了数组长度，别忘了改取余的数。
- **卡片名全一样**：检查 `rand() % N` 是否写在需要它的地方——每抽一次应该调一次。
- **窗口不够大**：加了更多内容后，适当增大窗口和控件的尺寸。
---
## 7. 下一课预告
第 6 课把前面所有内容整合成一个**完整的抽卡游戏**——多个按钮（单抽/十连/退出）、金币系统、累计统计。这是本教程的大作业。
---
*学完请在 `学习进度与状态-GUI.md` 里更新第 5 课的状态。*
**下一课文档**：`第06课-完整抽卡游戏.md`
**下一课**：`第06课-完整抽卡游戏.md`