chouka/第04课-十连抽.md

第 4 课：十连抽

本课目标：加一个"十连抽"按钮，用 for 循环一口气抽 10 次，所有结果一起显示。学会在 GUI 里用循环 + 字符串拼接。

复习：第 3 课单抽；命令行时期你已掌握 for 循环和 string。

---

1. 这一课要搞懂什么

命令行 vs GUI 的多抽

命令行时代（第 6 课）：

for (int i = 1; i <= 10; i++) {
    int r = rand() % 100;
    cout << "第" << i << "抽：";
    // ... 判断稀有度 ...
}

每轮 cout 一行，10 行自动排队显示。

GUI 时代（本课）：

for (int i = 1; i <= 10; i++) {
    int r = rand() % 100;
    // 不能直接 "cout" → 要把结果攒起来，最后一次性 label
}

GUi 的 label() 每次都会覆盖旧内容。所以需要先把 10 行拼成一个大字符串，再一次性显示。

核心技巧：字符串拼接

std::string result = "";           // 空字符串
result += "第1抽：普通\n";         // 追加一行
result += "第2抽：稀有\n";         // 再追加
// ... 最后 label(result.c_str())

+= 像胶水，把一段段文字粘在一起。\n 是换行。

---

2. 程序结构

• 保留"单抽"按钮（第 3 课功能）
• 新增"十连抽"按钮 → 调用新的回调函数 draw_ten_callback
• 两个按钮共用一个结果框

3. 完整示例程序

保存为 lesson_gui_4.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>    // for std::string

// 全局变量
Fl_Box *result_box;
Fl_Box *info_box;

// 单抽回调
void draw_one_callback(Fl_Widget *w, void *data) {
    int r = std::rand() % 100;

    char info[50];
    std::sprintf(info, "单抽  |  点数：%d", r);
    info_box->label(info);

    if (r < 70) {
        result_box->label("☆ 普通卡 ☆");
        result_box->labelcolor(fl_rgb_color(128, 128, 128));
    } else if (r < 95) {
        result_box->label("★ 稀有卡 ★");
        result_box->labelcolor(FL_BLUE);
    } else {
        result_box->label("★★★ 超稀有卡！！ ★★★");
        result_box->labelcolor(FL_RED);
    }
}

// 十连抽回调
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 += "普通";
        } else if (r < 95) {
            all += "★稀有★";
            rare_count++;
        } else {
            all += "★★★超稀有★★★";
            super_count++;
        }

        all += "\n";  // 换行
    }

    // 用 sprintf 做统计信息
    char stats[100];
    std::sprintf(stats, "十连抽结果  |  稀有：%d  超稀有：%d",
                 rare_count, super_count);
    info_box->label(stats);
    // 统计信息变颜色：有超稀有时红色，否则蓝色
    if (super_count > 0) {
        info_box->labelcolor(FL_RED);
    } else if (rare_count > 0) {
        info_box->labelcolor(FL_BLUE);
    } else {
        info_box->labelcolor(fl_rgb_color(128, 128, 128));
    }

    result_box->labelsize(16);   // 十连字多，用小一点的字
    result_box->label(all.c_str());
    result_box->labelcolor(FL_BLACK);
}

int main() {
    std::srand(std::time(nullptr));

    // 窗口加高，容纳十连抽的内容
    Fl_Window *window = new Fl_Window(420, 480, "抽卡世界 - 第4课");

    // 单抽按钮
    Fl_Button *btn1 = new Fl_Button(50, 20, 140, 50, "🎴 抽一张");
    btn1->labelsize(18);
    btn1->callback(draw_one_callback);

    // 十连抽按钮
    Fl_Button *btn10 = new Fl_Button(230, 20, 140, 50, "🎴🎴 十连抽");
    btn10->labelsize(18);
    btn10->callback(draw_ten_callback);

    // 信息行
    info_box = new Fl_Box(30, 80, 360, 30, "");
    info_box->labelsize(14);

    // 结果区域（加大高度）
    result_box = new Fl_Box(30, 120, 360, 330, "点击按钮开始抽卡！");
    result_box->labelsize(20);
    result_box->align(FL_ALIGN_TOP | FL_ALIGN_LEFT);  // 左上对齐

    window->end();
    window->show();
    return Fl::run();
}

---

4. 新知识点

std::to_string(i) —— 数字变字符串

all += "第" + std::to_string(i) + "抽：";

std::to_string(5) 变成 "5"。在旧课程里你用 cout << i，GUI 里需要用 to_string 把数字变成字符串后才能用 + 拼接。

需要 #include <string>

align() —— 文字对齐方式

result_box->align(FL_ALIGN_TOP | FL_ALIGN_LEFT);

FL_ALIGN_TOP = 靠上，FL_ALIGN_LEFT = 靠左，| 表示"同时用"。

.c_str() —— 从 std::string 到 C 字符串

result_box->label(all.c_str());

FLTK 的 label() 需要 C 风格字符串（const char*），.c_str() 把 std::string 转换过去。

---

5. 本课课堂小练习

1. 把十连抽改成"五连抽"：改循环次数，改按钮文字。
2. 在十连抽的结果中，把"超稀有"那行用特殊符号标出来（比如加 >>> 或 !!!）。
3. 加一个"重置"按钮，清空结果显示区。

---

6. 本课课后作业（选做）

• 让单抽和十连抽共用一个判断稀有度的代码，不重复写两遍（提示：写一个函数返回稀有度名字，回调里调用它）。这是旧课程第 8 课"函数"的 GUI 版应用！
• 让窗口可以调整大小——试试 window->resizable(window) 的效果。
• 十连抽结果显示不下怎么办？试试把窗口再调大一点，把 result_box 也调大。

---

7. 常见小问题

• 十连抽结果只显示最后一行：检查是否在循环里反复调用了 result_box->label()（应该先拼完再统一 label）。
• to_string 报错：需要 #include <string>。
• .c_str() 不认识的报错：确认变量是 std::string 类型。
• 中文在十连结果中乱码：确认文件保存为 UTF-8。

---

8. 下一课预告

第 5 课给每档稀有度配上具体的卡片名字（皮卡丘、喷火龙…），用数组存储。还要学会让界面更整齐漂亮。

---

学完请在 学习进度与状态-GUI.md 里更新第 4 课的状态。

下一课文档：第05课-卡片名字与布局.md