chouka/教程-FLTK抽卡游戏-GUI-6课.md

用 FLTK 做 GUI 抽卡游戏 · 6 课时教程

面向 11 岁左右 学习者，已完成命令行 C++ 10 课基础（变量、输入、随机、判断、循环、数组、函数、菜单）。本教程用 FLTK 框架 制作带窗口和按钮的抽卡游戏。

每课约 30～45 分钟，建议家长陪同。

---

前置条件（给家长）

孩子需已掌握：

• int、string 变量
• cin / cout
• rand() / srand()
• if / else if / else
• for 循环
• string 数组
• void 函数
• while 循环与 break

环境安装

Mac（目标平台）：

brew install fltk

Windows（开发用）： 已通过 vcpkg 安装：vcpkg install fltk --triplet x64-windows

编译命令模板

每个项目的 CMakeLists.txt 模板（保存为项目文件夹下）：

cmake_minimum_required(VERSION 3.14)
project(gacha_lesson LANGUAGES CXX)

set(CMAKE_CXX_STANDARD 17)

# Windows MSVC 中文支持
if(MSVC)
    add_compile_options("/utf-8")
endif()

find_package(FLTK CONFIG REQUIRED)

add_executable(gacha main.cpp)
target_link_libraries(gacha PRIVATE fltk)

Mac 编译：

cmake -B build && cmake --build build && ./build/gacha

Windows 编译（需指定 vcpkg toolchain）：

cmake -B build -DCMAKE_TOOLCHAIN_FILE=C:/vcpkg/scripts/buildsystems/vcpkg.cmake && cmake --build build --config Release && build\Release\gacha.exe

---

总说明

• 原则：每课都能跑出一个可见的窗口，逐步变好玩
• 抽卡：用随机数模拟概率，不涉及真实金钱
• FLTK 说明：FLTK 是一个轻量 GUI 库，不需要安装庞大框架，编译出的程序只有几 MB
• 跨平台：同一份代码在 Windows / Mac / Linux 都能编译运行

---

第 1 课：GUI 你好窗口

目标：创建第一个有窗口的程序，屏幕上出现欢迎语。

FLTK 新概念：Fl_Window（窗口）、Fl_Box（文字标签）、Fl::run()（事件循环）

对比旧知识：std::cout 把字打在命令行 → Fl_Box 把字显示在窗口里

详见：第01课-GUI你好窗口.md

---

第 2 课：按钮与回调

目标：放一个按钮，点击后文字会变化——理解"事件驱动"。

FLTK 新概念：Fl_Button（按钮）、callback（回调函数）、全局指针

核心思想：和命令行不同，GUI 程序"等"用户操作，而不是按顺序执行

详见：第02课-按钮与回调.md

---

第 3 课：随机抽卡——核心来了

目标：点击按钮 → 随机出普通/稀有/超稀有，显示在窗口里。

复用旧知识：rand() / srand()、if / else if / else

FLTK 新概念：在回调里更新控件、label() 方法

详见：第03课-随机抽卡.md

---

第 4 课：十连抽

目标：一个按钮抽 10 次，结果一起显示。

复用旧知识：for 循环、std::string 拼接

FLTK 新概念：多行显示（\n 换行）

详见：第04课-十连抽.md

---

第 5 课：卡片名字与布局

目标：给每种稀有度配上具体的卡片名字，让抽卡更有趣。学会让界面更整齐。

复用旧知识：std::string 数组、下标

FLTK 新概念：控件位置计算

详见：第05课-卡片名字与布局.md

---

第 6 课：完整抽卡游戏

目标：整合前面全部内容，做一个完整的抽卡游戏——多个按钮、金币系统、统计面板。

复用旧知识：全部旧知识

FLTK 新概念：多按钮协作、综合布局

详见：第06课-完整抽卡游戏.md

---

知识点对照表

课次	FLTK 新概念	复用的 C++ 知识
1	Fl_Window、Fl_Box、Fl::run()、new	main、#include
2	Fl_Button、callback、全局指针	void 函数
3	label() 更新、回调中用随机	rand/srand、if/else、%
4	多行 label、字符串拼接	for、std::string、+=
5	控件定位、Fl_Group	string 数组、下标、rand()%N
6	多按钮回调、综合布局	全部知识综合

---

给小朋友的 GUI 比喻

• 窗口 像一张画纸。
• 控件（Widget）像贴在画纸上的便利贴——文字标签、按钮。
• 回调函数 像"按钮被按时要做什么"的说明书。
• 事件循环（Fl::run()）像一个永不休息的保安，一直等用户操作。
• 命令行程序像"一口气读完的清单"，GUI 程序像"一直等着你来的游戏机"。

---

每课详细步骤见对应文档。