save code

2026-05-16 11:09:02 +08:00
parent 478b3451a1
commit a169ceb263
45 changed files with 2226 additions and 0 deletions
@@ -0,0 +1,167 @@
+# 用 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（目标平台）**：
+```bash
+brew install fltk
+```
+
+**Windows（开发用）**：
+已通过 vcpkg 安装：`vcpkg install fltk --triplet x64-windows`
+
+### 编译命令模板
+
+每个项目的 `CMakeLists.txt` 模板（保存为项目文件夹下）：
+```cmake
+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 编译**：
+```bash
+cmake -B build && cmake --build build && ./build/gacha
+```
+
+**Windows 编译**（需指定 vcpkg toolchain）：
+```bash
+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 程序像"一直等着你来的游戏机"。
+
+---
+
+*每课详细步骤见对应文档。*