chouka/第05课-卡片名字与布局.md

第 5 课：卡片名字与布局

本课目标：给每种稀有度配上具体的卡片名字（火龙、冰狼、雷霆龙……），让抽卡真正像游戏。学会把界面分区布局，更整齐好看。

复习：第 3～4 课只显示稀有度等级；命令行时期你已掌握 std::string 数组。

---

1. 这一课要搞懂什么

从"普通卡"到"小火龙"

以前的结果：

★ 稀有卡 ★

本课的结果：

★ 稀有卡 ★
   冰霜之狼

设计思路：每种稀有度维护一个卡片名字数组，随机抽到某档 → 再随机从该档的卡片里挑一张。

卡片表设计

稀有度	卡片名数组	数量
普通	小火龙、水跃鱼、绿草龟、小电鼠、土拨仔	5 张
稀有	烈焰飞龙、冰霜之狼、暗影豹、风暴鹰、水晶鹿	5 张
超稀有	雷霆神龙、凤凰王、深海巨兽	3 张

界面分区

本课把窗口分成三个区域，比之前全部控件堆在一起更好看：

┌─────────────────────────────┐
│      操作区（按钮）          │  ← 顶部
├─────────────────────────────┤
│                             │
│      结果显示区              │  ← 中部大面积
│                             │
├─────────────────────────────┤
│      统计/信息区             │  ← 底部
└─────────────────────────────┘

---

2. 完整示例程序

保存为 lesson_gui_5.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;

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

    if (r < 70) {
        result = "☆ 普通卡 ☆";
        card_name = normal_cards[std::rand() % 5];
        result_box->labelcolor(fl_rgb_color(128, 128, 128));
    } else if (r < 95) {
        result = "★ 稀有卡 ★";
        card_name = rare_cards[std::rand() % 5];
        result_box->labelcolor(FL_BLUE);
    } else {
        result = "★★★ 超稀有卡！！ ★★★";
        card_name = super_cards[std::rand() % 3];
        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();
}

---

3. 新知识点

多组卡片数组

std::string normal_cards[5] = { "小火龙", "水跃鱼", ... };
std::string rare_cards[5] = { ... };
std::string super_cards[3] = { ... };

• 三组独立数组，每组长度可以不同
• 访问：normal_cards[rand() % 5] —— 随机选一张普通卡

box() —— 控件边框样式

result_box->box(FL_DOWN_BOX);   // 凹陷效果，像一张卡片
stats_box->box(FL_FLAT_BOX);    // 扁平

常用样式：

样式	效果
FL_NO_BOX	无边框
FL_FLAT_BOX	平面（默认）
FL_UP_BOX	凸起
FL_DOWN_BOX	凹陷
FL_EMBOSSED_BOX	浮雕

color() —— 控件背景色

stats_box->color(fl_rgb_color(230, 230, 230));

给控件设置背景颜色。注意：color() 是背景色，labelcolor() 是文字颜色。

---

4. 本课课堂小练习

1. 把三组卡片名字全部换成你自己喜欢的（宝可梦、数码宝贝、自创的都行）。
2. 给超稀有卡多加 2 张，改数组长度和相关 % N。
3. 试三种不同的 box() 样式，看哪个最好看。

---

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