C++创意编程实战：用EasyX图形库打造会动的豌豆射手

1. 从零拆解一个会动的豌豆射手项目整体设计思路1.1 这个项目到底在做什么C创意编程--基于EasyX库图形库--豌豆射手这个标题第一次看到的时候我就觉得挺有意思。它本质上是一个用C配合EasyX图形库在Windows窗口里画出一个植物大战僵尸风格的豌豆射手并且让它具备基本的动画和交互能力的小项目。说白了就是用代码画出一个会呼吸、会摇头、会吐豌豆的角色。很多人学C学到指针、类、继承之后会陷入一个尴尬期——语法都懂但不知道能干什么。控制台里打印个九九乘法表、写个学生成绩管理系统做完就扔了毫无成就感。这个项目恰好填补了这个空白它把C的面向对象能力和图形化输出结合起来让你能亲眼看到自己写的代码在屏幕上活过来。适合的人群也很明确学过C基础语法变量、循环、函数、类想找一个有视觉反馈的练手项目的人或者对游戏开发感兴趣想从2D小项目入门的人。EasyX这个库在这里扮演的角色相当于给你提供了一套画笔和画布。它封装了Windows底层的GDI绘图接口你不需要去啃Win32 API那一大堆窗口过程、消息循环的细节直接调用initgraph开窗口、circle画圆、putimage贴图就行。对于创意编程来说这种低门槛的图形库非常合适能让你把精力放在创意和逻辑上而不是耗在环境配置和底层接口上。1.2 为什么选EasyX而不是别的方案做C图形编程可选的路子其实不少SDL、SFML、OpenGL、Qt甚至直接用Win32 API。那为什么这个项目选EasyX我分析下来有几个很实际的原因。第一是上手成本极低。EasyX的安装就是下载一个头文件和库文件扔到编译器对应的目录里然后#include graphics.h就能用。相比之下SDL要配置一堆链接库OpenGL要理解渲染管线Qt要学信号槽机制对刚学完C基础的人来说光是环境配置就能劝退一半人。第二是中文文档友好。EasyX的官方文档和社区教程基本都是中文的函数命名也直观setfillcolor、solidcircle、outtextxy看名字就知道干什么。这对初学者来说太重要了不用一边查词典一边写代码。第三是即时反馈强。EasyX是直接在窗口上绘图的你写一行circle(100, 100, 50)运行就能看到一个圆。这种即时反馈对创意编程的体验提升是巨大的你能快速试错、快速调整。当然EasyX也有它的局限只支持Windows平台性能上不适合做大型游戏3D能力基本没有。但对于豌豆射手这种2D小项目来说完全够用甚至可以说是量身定做的。1.3 项目的核心模块划分在动手写代码之前我习惯先把项目拆成几个独立的模块这样写起来思路清晰调试也方便。这个豌豆射手项目我把它拆成四个核心模块窗口与渲染模块负责初始化图形窗口、设置背景、控制帧率、处理双缓冲。这是整个项目的地基。角色模块用类来封装豌豆射手的属性位置、状态、动画帧和行为绘制、更新、射击。动画模块管理角色的帧动画让豌豆射手有呼吸和摇头的动态效果。交互与逻辑模块处理鼠标点击、键盘输入以及豌豆的发射、飞行、碰撞检测。这种模块化拆分的思路其实和正经游戏引擎的架构是一致的渲染、实体、动画、逻辑分离。你在小项目里养成这个习惯以后做复杂项目时就不会把所有代码堆在main函数里。提示不要一上来就想着把豌豆射手的图片画得多精美。先用几何图形圆、矩形、椭圆把角色搭出来跑通逻辑再考虑贴图美化。这是我在多个图形项目里总结出的经验——逻辑先行美术后补。2. 环境搭建与EasyX核心接口解析2.1 开发环境的准备与配置先说环境。这个项目我推荐用Visual Studio社区版就够免费。EasyX对VS的支持是最好的安装包直接双击它会自动检测你电脑上的VS版本一键安装到对应目录。如果你用的是其他编译器比如Dev-C或者CodeBlocks配置起来会麻烦一些需要手动把graphics.h和easyx.h放到include目录把EasyXa.lib或EasyXw.lib放到lib目录还要在项目设置里链接。安装完成后写个最简单的测试代码验证一下#include graphics.h #include conio.h int main() { initgraph(800, 600); setbkcolor(WHITE); cleardevice(); setfillcolor(GREEN); solidcircle(400, 300, 50); _getch(); closegraph(); return 0; }运行后如果弹出一个白底窗口中间有个绿色圆说明环境没问题。这里有个细节initgraph的宽高参数是窗口的客户区大小不包括标题栏和边框。cleardevice用背景色清屏这一步很重要不然窗口里可能是花屏的。关于字符集EasyX有EasyXa.lib多字节字符集和EasyXw.libUnicode字符集两个版本。VS默认用Unicode所以一般链接EasyXw.lib。如果你在项目属性里改了字符集记得对应调整否则会出现链接错误。这个坑我踩过当时排查了半天才发现是字符集不匹配。2.2 绘图接口的分类与选用EasyX的绘图接口大致可以分成几类理解这个分类对后面画豌豆射手很有帮助。几何图形类circle圆、solidcircle填充圆、rectangle矩形、solidrectangle填充矩形、ellipse椭圆、solidellipse填充椭圆、line线、arc弧。这些是画豌豆射手身体、头部、炮口的基础。颜色与样式类setlinecolor线条颜色、setfillcolor填充颜色、setlinestyle线宽和样式、setbkcolor背景色。颜色用RGB(r, g, b)宏来指定每个分量0到255。文字类outtextxy在指定位置输出文字、settextcolor文字颜色、settextstyle字体、大小、粗细。图像类loadimage加载图片、putimage贴图、GetImage从屏幕抓取图像。后面做贴图美化时会用到。双缓冲相关BeginBatchDraw、FlushBatchDraw、EndBatchDraw。这三个是解决画面闪烁的关键后面会详细讲。画豌豆射手的时候我建议先用几何图形组合。比如头部是一个大圆炮口是一个小圆或者椭圆身体是一个椭圆叶子用两个旋转的椭圆或者多边形。这样即使没有美术素材也能做出一个辨识度不错的角色。2.3 坐标系统与绘图逻辑EasyX的坐标系统和大多数2D图形库一样原点在窗口左上角x轴向右y轴向下。这一点和数学里的笛卡尔坐标系不同刚开始可能会不习惯。比如你想让一个物体向上移动y坐标要减小而不是增大。这个坐标系对画角色来说其实挺方便的因为屏幕上的元素本来就是从上往下排布的。但涉及到角度计算的时候要注意比如你要让豌豆沿着某个角度飞出去用sin和cos算位移时y方向要取负值才是视觉上的向上。另外EasyX的绘图是有状态的。你设置了填充色后面所有的填充图形都用这个颜色直到你再次修改。这个特性用好了能减少重复代码但用不好就会出现我明明没改颜色怎么画出来是红的这种问题。我的习惯是在画每个独立部件之前显式地设置一次颜色避免状态污染。// 画头部 setfillcolor(RGB(80, 180, 80)); solidcircle(headX, headY, headR); // 画炮口显式重设颜色 setfillcolor(RGB(60, 140, 60)); solidcircle(mouthX, mouthY, mouthR);3. 豌豆射手的角色建模与动画实现3.1 用类封装角色属性面向对象是C的核心这个项目正好拿来练手。我把豌豆射手封装成一个Peashooter类属性包括位置、大小、动画状态、射击冷却等方法包括绘制、更新、射击。class Peashooter { private: int x, y; // 角色中心位置 int headRadius; // 头部半径 int bodyWidth, bodyHeight; float breathePhase; // 呼吸动画相位 float headAngle; // 头部摆动角度 int shootCooldown; // 射击冷却计时 bool isShooting; // 是否正在射击 public: Peashooter(int startX, int startY); void update(); // 每帧更新状态 void draw(); // 绘制角色 void shoot(); // 触发射击 int getX() const { return x; } int getY() const { return y; } };这样封装的好处是角色的所有状态和行为都集中在一个类里main函数只需要调用update和draw就行。如果以后要加第二个豌豆射手直接再实例化一个对象即可代码复用性很高。构造函数里初始化各个属性breathePhase初始为0shootCooldown初始为0isShooting为false。这些初始值的设定看似简单但很关键——如果shootCooldown不初始化它可能是个随机值导致角色一上来就不能射击。3.2 呼吸动画的实现原理让角色活起来最简单有效的方法就是加一个呼吸动画让身体轻微地上下缩放或者让头部轻微地上下移动。原理就是用正弦函数来驱动一个周期性的偏移量。void Peashooter::update() { // 呼吸相位每帧递增形成周期 breathePhase 0.05f; if (breathePhase 2 * 3.14159f) { breathePhase - 2 * 3.14159f; } // 用sin函数生成-1到1之间的偏移乘以幅度得到实际偏移 float breatheOffset sin(breathePhase) * 3.0f; // 头部摆动用另一个频率 headAngle sin(breathePhase * 0.7f) * 0.1f; // 射击冷却递减 if (shootCooldown 0) { shootCooldown--; } }这里breathePhase每帧加0.05大约125帧完成一个周期。如果帧率是60那就是大约2秒一次呼吸节奏比较自然。sin函数返回-1到1乘以3就是上下浮动3个像素幅度不大但能明显感觉到活着。头部摆动用了一个不同的频率乘以0.7这样呼吸和摆头不会完全同步看起来更自然。如果两个动画完全同步会显得很机械。这是动画制作里的一个小技巧多个周期性动画用不同的频率能产生更有机的效果。3.3 绘制角色的分层顺序绘制角色的时候顺序很重要。后画的会覆盖先画的所以要遵循从后到前的原则。豌豆射手的绘制顺序我一般是这样先画身体最底层再画叶子在身体两侧然后画头部在身体上方最后画炮口和眼睛最上层细节void Peashooter::draw() { float breatheOffset sin(breathePhase) * 3.0f; // 1. 身体椭圆 setfillcolor(RGB(90, 170, 70)); setlinecolor(RGB(60, 120, 50)); setlinestyle(PS_SOLID, 2); solidellipse(x - bodyWidth/2, y - bodyHeight/2 breatheOffset, x bodyWidth/2, y bodyHeight/2 breatheOffset); // 2. 叶子两个旋转的椭圆用多边形近似 setfillcolor(RGB(70, 150, 60)); // 左叶 POINT leftLeaf[] {{x - bodyWidth/2, y}, {x - bodyWidth/2 - 25, y - 15}, {x - bodyWidth/2 - 30, y 5}, {x - bodyWidth/2, y 10}}; solidpolygon(leftLeaf, 4); // 右叶类似... // 3. 头部圆 int headY y - bodyHeight/2 - headRadius breatheOffset; setfillcolor(RGB(100, 190, 80)); solidcircle(x, headY, headRadius); // 4. 炮口小圆 setfillcolor(RGB(70, 140, 60)); solidcircle(x headRadius - 5, headY - 5, 12); // 5. 眼睛两个小白点加黑点 setfillcolor(WHITE); solidcircle(x - 8, headY - 8, 5); solidcircle(x 8, headY - 8, 5); setfillcolor(BLACK); solidcircle(x - 8, headY - 8, 2); solidcircle(x 8, headY - 8, 2); }solidpolygon这个函数用来画多边形参数是点数组和点的个数。用它来画叶子比用椭圆更灵活因为叶子本来就不是标准椭圆形状。点的坐标需要根据身体位置动态计算这样角色移动时叶子会跟着走。注意solidpolygon的点数组必须是POINT类型而且点的顺序要按顺时针或逆时针排列不能交叉否则填充会出现奇怪的形状。我第一次用的时候点顺序搞错了画出来的叶子像个蝴蝶结。3.4 射击动画与状态切换射击动画是让豌豆射手张嘴吐豆的关键。我的做法是射击时炮口短暂放大同时生成一颗豌豆从炮口飞出。炮口的放大用一个计时器控制持续几帧后恢复。void Peashooter::shoot() { if (shootCooldown 0) return; // 冷却中不能射击 isShooting true; shootCooldown 30; // 冷却30帧约0.5秒 // 实际生成豌豆的逻辑放在外部管理 } void Peashooter::update() { // ... 前面的呼吸动画 if (isShooting) { // 炮口放大效果用一个短计时 shootAnimTimer; if (shootAnimTimer 8) { isShooting false; shootAnimTimer 0; } } }绘制炮口时根据isShooting状态调整半径int mouthRadius isShooting ? 16 : 12; solidcircle(mouthX, mouthY, mouthRadius);这样射击时炮口会鼓一下配合豌豆飞出视觉上就很连贯。冷却时间设为30帧是为了防止玩家疯狂点击导致豌豆刷屏。这个数值可以根据实际手感调整我试过20帧和40帧30帧感觉比较舒服。4. 豌豆的发射、飞行与碰撞逻辑4.1 豌豆对象的生命周期管理豌豆不能只画一颗玩家可能连续射击屏幕上同时存在多颗豌豆。所以需要一个容器来管理所有活跃的豌豆每颗豌豆有自己的位置、速度、存活状态。struct Pea { float x, y; float speedX; bool alive; }; std::vectorPea peas;用std::vector来存豌豆每帧遍历更新位置飞出屏幕的标记为alive false然后统一清理。这种标记删除的方式比边遍历边删除安全避免了迭代器失效的问题。void updatePeas() { for (auto pea : peas) { if (!pea.alive) continue; pea.x pea.speedX; if (pea.x 850) { // 飞出右边界 pea.alive false; } } // 清理死亡的豌豆 peas.erase(std::remove_if(peas.begin(), peas.end(), [](const Pea p) { return !p.alive; }), peas.end()); }std::remove_if配合erase是C里删除容器元素的经典写法比手写循环删除高效且安全。这个技巧在实际项目中非常常用值得记住。4.2 发射位置与速度的计算豌豆的发射位置应该在炮口处速度方向是水平向右。但炮口位置会随着呼吸动画上下浮动所以发射时要用当前的炮口位置而不是固定的坐标。void firePea() { Pea p; p.x peashooter.getX() 35; // 炮口右侧 p.y peashooter.getY() - 45; // 炮口高度 p.speedX 8.0f; // 每帧移动8像素 p.alive true; peas.push_back(p); }速度设为8像素每帧在60帧率下就是480像素每秒横穿800像素的窗口大约1.7秒节奏比较合适。如果设得太慢豌豆飞得拖沓太快又看不清。这个数值我调过几次8是比较舒服的。发射位置的计算要和绘制时的炮口位置一致否则会出现豌豆从奇怪的地方冒出来的问题。我的建议是把炮口位置的计算封装成一个函数绘制和发射都调用它保证一致性。POINT getMouthPos() const { float breatheOffset sin(breathePhase) * 3.0f; int headY y - bodyHeight/2 - headRadius breatheOffset; return {x headRadius - 5, headY - 5}; }4.3 碰撞检测与命中反馈如果项目里加了目标比如僵尸或者靶子就需要碰撞检测。最简单的是圆形碰撞判断两颗豌豆和目标的距离是否小于半径之和。bool checkCollision(const Pea pea, const Target target) { float dx pea.x - target.x; float dy pea.y - target.y; float distSq dx * dx dy * dy; float radiusSum peaRadius target.radius; return distSq radiusSum * radiusSum; }这里用距离的平方比较避免开方运算是个常见的性能优化。虽然在这个小项目里性能不是问题但养成这个习惯没坏处。命中后目标可以播放一个受击动画比如闪烁或者缩小豌豆标记为死亡。如果目标有血量就减血血量为0时移除。void handleCollisions() { for (auto pea : peas) { if (!pea.alive) continue; for (auto target : targets) { if (!target.alive) continue; if (checkCollision(pea, target)) { pea.alive false; target.hp--; target.hitFlash 5; // 受击闪烁5帧 if (target.hp 0) { target.alive false; } break; // 一颗豌豆只命中一个目标 } } } }break很重要不然一颗豌豆可能同时命中多个重叠的目标导致伤害计算错误。5. 双缓冲与帧率控制让画面不闪不卡5.1 画面闪烁的根源与解决方案刚开始写EasyX动画的人几乎都会遇到画面闪烁的问题。原因是每次cleardevice清屏后你一个一个地画图形这些绘制操作是直接显示在屏幕上的。清屏的瞬间屏幕是空白的然后图形一个个出现人眼就看到了闪烁。解决办法是双缓冲先在内存里画好一整帧再一次性贴到屏幕上。EasyX提供了批量绘制接口来实现这个。BeginBatchDraw(); // 开始批量绘制 while (true) { cleardevice(); // ... 所有绘制操作 FlushBatchDraw(); // 把这一帧一次性显示出来 } EndBatchDraw(); // 结束批量绘制BeginBatchDraw之后所有的绘图操作都画在内存缓冲里FlushBatchDraw才真正显示。这样每帧都是完整的画面不会闪烁。提示BeginBatchDraw和EndBatchDraw要配对使用FlushBatchDraw在循环里每帧调用一次。如果你忘了FlushBatchDraw屏幕上会一直是一片空白因为绘制都在内存里没显示出来。这个坑我踩过当时还以为代码写错了。5.2 帧率控制的几种方式不控制帧率的话循环会以CPU的最大速度运行可能每秒几百帧导致动画快得看不清CPU占用也高。控制帧率有几种方式方式一Sleep固定延时。最简单每帧结束Sleep(16)大约60帧。缺点是如果某帧计算耗时波动实际帧率会不稳定。while (true) { // ... 更新和绘制 FlushBatchDraw(); Sleep(16); }方式二基于时间戳的动态延时。记录每帧开始的时间计算这一帧实际耗时用目标帧时间减去实际耗时作为延时。这样即使计算耗时波动平均帧率也能稳定。#include chrono auto lastTime std::chrono::steady_clock::now(); const int targetFrameMs 16; while (true) { auto frameStart std::chrono::steady_clock::now(); // ... 更新和绘制 FlushBatchDraw(); auto frameEnd std::chrono::steady_clock::now(); auto elapsed std::chrono::duration_caststd::chrono::milliseconds( frameEnd - frameStart).count(); if (elapsed targetFrameMs) { Sleep(targetFrameMs - elapsed); } }我一般用方式二虽然代码多一点但帧率稳定动画看起来更顺滑。对于这个豌豆射手项目60帧足够了不需要追求更高。5.3 消息循环与窗口响应EasyX的窗口需要处理消息否则窗口会卡死无法拖动、无法关闭。EasyX提供了peekmessage来非阻塞地获取消息。ExMessage msg; while (true) { while (peekmessage(msg, EX_MOUSE | EX_KEY)) { if (msg.message WM_LBUTTONDOWN) { // 处理鼠标点击 peashooter.shoot(); firePea(); } if (msg.message WM_KEYDOWN msg.vkcode VK_ESCAPE) { // 按ESC退出 closegraph(); return 0; } } // ... 更新和绘制 }peekmessage的第二个参数指定要接收的消息类型EX_MOUSE是鼠标消息EX_KEY是键盘消息。用peekmessage而不是getmessage是因为前者非阻塞不会卡住动画循环。鼠标点击触发射击这个交互很直观。你也可以加键盘控制比如空格键射击方向键移动角色。msg.vkcode是虚拟键码VK_SPACE是空格VK_LEFT是左方向键。6. 常见问题排查与实战避坑指南6.1 编译与链接问题速查环境配置阶段最容易出问题我整理了一个速查表问题现象可能原因解决方法找不到graphics.h头文件没放对位置确认graphics.h和easyx.h在编译器的include目录链接错误unresolved external库文件没链接或字符集不匹配检查项目属性里的附加依赖项确认EasyXw.lib或EasyXa.lib与字符集对应运行时报错缺少DLL库文件版本不对重新安装EasyX选择与VS版本匹配的安装包窗口一闪而过没有_getch或消息循环加_getch()暂停或写完整的消息循环字符集这个问题特别隐蔽。VS默认用Unicode如果你手动改成了多字节但链接的还是EasyXw.lib就会报链接错误。反过来也一样。我的建议是保持VS默认设置用EasyXw.lib不要乱改。6.2 动画与绘制的典型坑坑一画面闪烁。前面讲过用双缓冲解决。但还有一种情况如果你在BeginBatchDraw之前就画了东西那部分不会被缓冲还是会闪。所以所有绘制都要在BeginBatchDraw之后。坑二角色抖动。如果角色的位置用整数而动画偏移用浮点数可能会出现抖动。比如x是整数breatheOffset是浮点数相加后赋给整数坐标时会截断导致位置跳变。解决办法是位置也用浮点数绘制时再转成整数。float x, y; // 用浮点数存位置 // 绘制时转换 int drawX static_castint(x); int drawY static_castint(y breatheOffset);坑三颜色状态污染。前面提过EasyX的绘图是有状态的。如果你画完一个红色图形后忘了改回颜色后面的图形都会是红色。我的习惯是每个部件绘制前都显式设置颜色虽然代码多一点但不会出错。坑四solidpolygon填充异常。点顺序不对会导致填充区域奇怪。确保点是按顺时针或逆时针顺序排列的不能交叉。画叶子的时候我建议先在纸上画个草图标出点的顺序再写代码。6.3 性能与体验优化技巧技巧一限制豌豆数量。如果玩家疯狂点击屏幕上可能有几百颗豌豆虽然不至于卡顿但视觉上很乱。可以加个上限比如最多同时存在20颗超过就不再生成。if (peas.size() 20) { firePea(); }技巧二用GetImage缓存静态背景。如果背景很复杂每帧重画很浪费。可以先把背景画好用GetImage抓取成图像对象之后每帧直接putimage贴上去。IMAGE bg; // 第一次画好背景后 GetImage(bg, 0, 0, 800, 600); // 之后每帧 putimage(0, 0, bg);技巧三动画帧率与逻辑帧率分离。如果动画需要更细腻可以每帧更新动画但逻辑比如冷却计时按固定时间间隔更新。不过对于这个小项目统一帧率就够了不用搞太复杂。技巧四加个简单的粒子效果。豌豆命中目标时生成几个小圆点向四周飞散能大幅提升打击感。粒子就是一些有速度、有生命周期的点更新和绘制逻辑和豌豆类似。struct Particle { float x, y, vx, vy; int life; bool alive; };命中时生成5到8个粒子速度随机方向生命20帧左右每帧位置更新、生命递减生命为0就移除。这个效果代码量不大但视觉提升明显。6.4 从几何图形到贴图的升级路径用几何图形搭出来的豌豆射手虽然能跑通逻辑但美观度有限。如果你想进一步提升可以走贴图路线。步骤是准备豌豆射手的各个部件图片PNG格式带透明通道用loadimage加载图片用putimage贴图透明部分用putimage的掩码版本或者AlphaBlendEasyX的loadimage支持PNG但透明通道的处理需要额外设置。简单的方法是使用putimage的SRCAND和SRCPAINT组合或者用AlphaBlend函数做alpha混合。IMAGE headImg; loadimage(headImg, _T(head.png)); // 带透明贴图 putimage(x, y, headImg, NOTSRCERASE); putimage(x, y, headImg, SRCINVERT);不过贴图会引入资源管理的问题图片路径、加载失败处理、内存释放等。对于练手项目我建议先用几何图形把逻辑跑通贴图作为进阶挑战。逻辑和贴图是解耦的换贴图不影响游戏逻辑这也是模块化设计的好处。7. 项目扩展方向与个人实操体会7.1 可以继续深挖的几个方向这个豌豆射手项目跑通之后其实还有很多可以扩展的地方我列几个我觉得有意思的方向。方向一加入僵尸角色和完整对战。给僵尸写一个类似的类让它从右往左走豌豆命中扣血僵尸走到左边就游戏结束。这样就变成了一个完整的塔防小游戏。僵尸的行走动画可以用左右摇摆实现受击时闪红。方向二多种植物和子弹类型。比如加一个寒冰射手豌豆命中后让僵尸减速加一个双发射手一次吐两颗豌豆。这需要把Peashooter类抽象成基类不同植物继承并重写shoot方法。这是练习多态的好机会。方向三关卡和波次系统。设计一个简单的关卡数据结构定义每波僵尸的数量、类型、出现时间。用一个计时器驱动波次推进。这涉及到数据驱动的设计思想比硬编码灵活得多。方向四音效和背景音乐。EasyX本身不带音频功能但可以配合Windows的PlaySound或者第三方库。射击音效、命中音效、背景音乐能大幅提升游戏体验。方向五存档和排行榜。把最高分写到文件里下次启动读取。这涉及到文件IO是C的基础技能正好练手。7.2 我在这个项目里踩过的坑说几个我实际踩过的坑都是文档里不会写的。第一个坑是坐标计算的一致性。我一开始绘制炮口和发射豌豆用的是两套坐标计算结果豌豆总是从炮口旁边冒出来。后来把炮口位置封装成一个函数两边都调用问题就解决了。这个教训是任何会被多处使用的计算都要封装成单一来源。第二个坑是浮点数累积误差。我用breathePhase 0.05f跑久了之后相位值越来越大虽然我做了取模但浮点数的取模在边界上可能有微小误差。后来改成用帧计数器对周期取模再换算成相位就稳定了。第三个坑是消息处理的顺序。我一开始把消息处理放在绘制之后结果点击响应有一帧的延迟。后来把消息处理放在每帧的最前面响应就即时了。这个顺序在游戏循环里很重要先处理输入再更新逻辑最后绘制。第四个坑是**std::vector的迭代器失效**。我一开始在遍历豌豆的循环里直接erase导致程序崩溃。后来改用remove_if加erase或者先标记再统一删除就安全了。这个坑在C里非常经典值得牢记。7.3 给初学者的几点实在建议如果你正准备动手做这个项目我有几点建议。先把最小可运行版本跑起来。不要一上来就想着做完整功能先让一个圆在窗口里动起来再加呼吸动画再加射击再加豌豆。每加一个功能就运行一次确保没问题再加下一个。这种增量开发的方式能让你随时知道是哪一步出了问题。善用调试输出。EasyX项目里printf到控制台不太方便但你可以用outtextxy在窗口上直接输出调试信息比如豌豆数量、帧率、角色坐标。调完之后再删掉。这个技巧在图形项目里特别实用。不要怕重构。我第一版的代码全堆在main函数里写了三百多行改起来很痛苦。后来重构成类代码清晰多了。小项目也要有架构意识这是从能跑到好维护的关键一步。多看别人的代码。EasyX社区有很多开源的小游戏项目看看别人怎么组织代码、怎么处理动画、怎么管理资源。看多了自然就有感觉了。但不要照抄要理解每一行的意图然后用自己的方式写出来。保持耐心。图形编程的调试比控制台程序麻烦因为你看不到中间变量。但当你看到自己写的豌豆射手在屏幕上摇头晃脑、吐着豌豆的时候那种成就感是控制台程序给不了的。这个项目不大但足够让你体会到用代码创造生命的乐趣。