C++ on Nullshow的技术博客

【C++语法】智能指针

Fri, 17 Oct 2025 20:42:14 +0200

为什么需要智能指针？

先来看一个例子：

int div()
{
    int a, b;
    cin >> a >> b;
    if (b == 0)
        throw invalid_argument("Error: Divident is 0");

    return a / b;
}

void func()
{
    int* p = new int();
    cout << div() << endl;
    delete p;
}

int main()
{
    // 捕获异常
    try
    {
        func();
    }
    catch(exception& e)
    {
        cout << e.what() << endl;
    }
    return 0;
}

由于 div 函数中存在抛异常的行为，程序的正常执行流被打断了， div 没有执行完导致指针p没有被释放。一般异常是在最外层去捕的，但是面对上面的情况，在没有智能指针的情况下，只能在 func 中再次添加捕异常的代码，来避免指针p不被释放的问题：

int div()
{
    int a, b;
    cin >> a >> b;
    if (b == 0)
        throw invalid_argument("Error: Divident is 0");

    return a / b;
}

void func()
{
    int* p = new int();
    try	// 在func中加捕异常，避免p不被释放
    {
        cout << div() << endl;
    }
    catch (exception& e)	// 此处也可以写为捕获任意异常：catch (...)
    {
        delete p;
        p = nullptr;
        throw e;
    }
    
    delete p;
    p = nullptr;
}

int main()
{
    // 捕获异常
    try
    {
        func();
    }
    catch(exception& e)
    {
        cout << e.what() << endl;
    }
    return 0;
}

在涉及多个指针的代码时，为了防止内存泄漏就得层层添加抛异常的代码。于是，大佬们想出了一种更简洁优雅的方式处理：智能指针。

智能指针的基本原理

智能指针的实现原理非常简单：在构造函数的时候把指针保存起来，在析构函数的时候把指针释放。

template<class T>
class SmartPtr
{
public:
    SmartPtr(T* ptr)
        :_ptr(ptr)
    {}     
    
    ~SmartPtr()
    {
        if (_ptr)
        {
             delete _ptr;
            _ptr = nullptr;
        }
    }
    
private:
    T*_ptr;
};

于是，上述的不简洁优雅的代码在引入了智能指针后可以改为：

int div()
{
    int a, b;
    cin >> a >> b;
    if (b == 0)
        throw invalid_argument("Error: Divident is 0");

    return a / b;
}

void func()
{
    int* p = new int();
   
    // 不用捕异常，改用智能指针
    SmartPtr<int> sp(p);
    cout << div() << endl;
}

int main()
{
    // 捕获异常
    try
    {
        func();
    }
    catch(exception& e)
    {
        cout << e.what() << endl;
    }
    return 0;
}

不管最终有没有抛异常，p都被释放了。也就是说，借助了 SmartPtr 对象的 生命周期 解决了抛异常产生的内存泄漏问题（指针未被删除）。简而言之, SmartPtr 帮我们管理了资源的释放。无论函数是正常结束还是抛异常被中断执行，都会导致 sp 对象的生命周期到了以后，调用析构函数，从而释放p指针。我们实际上是 将资源托管给智能指针 管理，智能指针的构造函数保存资源，析构函数释放这个资源。

RAII

RAII（Resource Acquisition Is Initialization）是一种 利用对象生命周期来控制程序资源（如内存、文件句柄、网络连接、互斥锁等等）的技术。

也就是说，在对象构造时获取资源，接着控制对资源的访问使之在对象的生命周期内始终保持有效，最后在对象析构的时候释放资源。借此，我们实际上把管理一份资源的责任托管给了一个对象。

这种做法有两大好处：

不需要显式地释放资源
采用这种方式，对象所需的资源在其生命期内始终保持有效

这从某种程度上间接解决了C++没有垃圾回收机制的问题。

RAII是一种托管资源的思想，除了智能指针外，unique_lock 和 lock_guard 也是依托这种思想实现的

智能指针是基于RAII思想设计的一个类

智能指针的使用

上述的SmartPtr 还不能将其称为智能指针，因为它还不具有指针的行为。所以我们必须再添加一些代码，让它真正可以进行指针的相关操作：

template<class T>
class SmartPtr 
{
public:
	SmartPtr(T* ptr = nullptr)
		: _ptr(ptr)
	{}
	~SmartPtr()
	{
		if(_ptr)
        {
            delete _ptr;
            _ptr = nullptr;
        }	
	}
    
    // 重载操作符&和*，让SmartPtr具备指针的行为
	T& operator*() {return *_ptr;}
	T* operator->() {return _ptr;}
    
private:
	T* _ptr;
};

智能指针的潜在问题

先举例子：

int main()
{
    SmartPtr<int> sp1(new int());
    SmartPtr<int> sp2 = sp1;
    
    return 0;
}

sp1 和 sp2 指向了同一块空间，调用了两次析构函数，也就是说，同一个资源被释放了两次。

为了解决这个问题，智能指针提供了三个解决方案：

管理权转移 auto_ptr
防拷贝 unique_ptr
引用计数的共享拷贝 shared_ptr
- 会产生 循环引用 的问题，引入 weak_ptr 解决

`auto_ptr`

总的来说是一种比较失败的设计，背离了“指针”的行为，很多公司明确要求不能使用 auto_ptr。

`auto_ptr` 的实现原理

// C++98 管理权转移 auto_ptr
namespace my_smart_pointer
{
    template<class T>
    class auto_ptr
    {
    public:
    	auto_ptr(T* ptr)
   		 :_ptr(ptr)
    	{}
        
    	auto_ptr(auto_ptr<T>& sp)
    	:_ptr(sp._ptr)
    	{
            // 管理权转移
            sp._ptr = nullptr;
        }
        
        auto_ptr<T>& operator=(auto_ptr<T>& ap)
        {
            // 是否自己给自己赋值
            if (this != &ap)
            {
                // 释放当前对象中资源
                if (_ptr)
                {
                    delete _ptr;
                    _ptr = nullptr;
                }        	
                
                // 转移ap中资源到当前对象中
                _ptr = ap._ptr;
                ap._ptr = nullptr;
            }
            return *this;
        }
        
    	~auto_ptr()
        {
            if (_ptr)
            {
                cout << "delete:" << _ptr << endl;
                delete _ptr;
                _ptr = nullptr;
         	}
        }
        
        // 像指针一样使用
        T& operator*()
        {
        	return *_ptr;
        }
        
        T* operator->()
        {
       		return _ptr;
        }
        
    private:
        T* _ptr;
    };
}

可能会引发空指针错误：

// main.cpp
int main()
{
    std::auto_ptr<int> sp1(new int());
    std::auto_ptr<int> sp2(sp1); // 管理权转移

    // sp1悬空，不能再赋值了
    //*sp1 = 10; 
    *sp2 = 10;
    cout << *sp2 << endl;
    cout << *sp1 << endl;
    return 0;
}

`unique_ptr`

用了简单粗暴的方法：防止拷贝。推荐使用，但是如果存在需要拷贝的场景，那么就没法使用了。

`unique_ptr` 的实现原理

namespace my_smart_pointer
{
    template<class T>
    class unique_ptr
    {
    public:
        unique_ptr(T* ptr)
         :_ptr(ptr)
        {}
        ~unique_ptr()
        {
            if (_ptr)
            {
                cout << "delete:" << _ptr << endl;
                delete _ptr;
                _ptr = nullptr;
            }
        }
        // 像指针一样使用
        T& operator*()
        {
            return *_ptr;
        }
        T* operator->()
        {
            return _ptr;
        }
        
        unique_ptr(const unique_ptr<T>& sp) = delete;
        unique_ptr<T>& operator=(const unique_ptr<T>& sp) = delete;
        
    private:
        T* _ptr;
    };
}

`shared_ptr`

通过引用计数的方式实现多个 shared_ptr 对象之间共享资源。

`shared_ptr` 的实现原理

四个要点：

shared_ptr 在其内部，给每个资源都维护了着一份计数，用来记录该份资源被几个对象共享
在对象被销毁时(也就是析构函数调用)，就说明自己不使用该资源了，对象的引用计数减1
如果引用计数是0，就说明自己是最后一个使用该资源的对象，必须释放该资源
如果引用计数不是0，就说明除了自己还有其他对象在使用该份资源，不能释放该资源，否则其他对象就成野指针了

namespace my_smart_pointer
{
    template<class T>
    class shared_ptr
    {
    public:
        shared_ptr(T* ptr = nullptr)
            :_ptr(ptr)
            , _pRefCount(new int(1))
            {}

        shared_ptr(const shared_ptr<T>& sp)
            :_ptr(sp._ptr)
            , _pRefCount(sp._pRefCount)
            {
                ++(*_pRefCount);
            }
        
         ~shared_ptr()
        {
            Release();
        }

        shared_ptr<T>& operator=(const shared_ptr<T>& sp)
        {
            //if (this != &sp)
            if (_ptr != sp._ptr) 
            {
                Release();	// 先释放自己先前在管理着的资源
                _ptr = sp._ptr;
                _pRefCount = sp._pRefCount;
                ++(*_pRefCount);
            }
            return *this;
        }
        
        void Release()
        {
            if (--(*_pRefCount) == 0 && _ptr)
            {
                cout << "delete:" << _ptr << endl;
                delete _ptr;
                _ptr = nullptr;
                 
                delete _pRefCount;
                _pRefCount = nullptr;
            }
        }
        
        // 像指针一样使用
        T& operator*()
        {
            return *_ptr;
        }
        T* operator->()
        {
            return _ptr;
        }

    private:
        T* _ptr;
        int* _pRefCount;
    };
}

`shared_ptr`在拷贝赋值时的线程安全问题

因为其引用计数在堆上，如果存在两个线程t1和t2，其中的每个线程中各有一个智能指针同时拷贝赋值了同一个智能指针sp。可能会存在两个线程同时增加/减少引用计数，导致结果不对的情况。也就是下面这样子：

我们从两个方面来考虑 shared_ptr 的线程安全问题：

智能指针对象中引用计数是多个智能指针对象共享的，两个线程中智能指针的引用计数同时 ++ 或 --，这个操作不是原子的，引用计数原来是1，++ 了两次，可能还是2，这样引用计数就错乱了，会导致资源未释放或者程序崩溃的问题。所以智能指针中引用计数 ++ 、-- 是需要加锁的，也就是说引用计数的操作是线程安全的
智能指针管理的对象存放在堆上，两个线程中同时去访问，会导致线程安全问题

改写后的代码是这样的：

namespace my_smart_pointer
{
    template<class T>
    class shared_ptr
    {
    public:
        shared_ptr(T* ptr = nullptr)
            :_ptr(ptr)
        , _pRefCount(new int(1))
        , _pmtx(new mutex)
        {}

        shared_ptr(const shared_ptr<T>& sp)
        :_ptr(sp._ptr)
        , _pRefCount(sp._pRefCount)
        , _pmtx(sp._pmtx)
        {
            AddRef();
        }

        void Release()	// 减计数需要锁保护
        {
            _pmtx->lock();
            bool flag = false;
            if (--(*_pRefCount) == 0 && _ptr)
            {
                cout << "delete:" << _ptr << endl;
                delete _ptr;
                _ptr = nullptr;
                
                delete _pRefCount;
                _pRefCount = nullptr;
                flag = true;
            }

            _pmtx->unlock();

            if (flag == true)	
            {
                delete _pmtx;
                _pmtx = nullptr;
            }    
        }

        void AddRef()	// 加计数也需要锁保护
        {
            _pmtx->lock();
            ++(*_pRefCount);
            _pmtx->unlock();
        }

        shared_ptr<T>& operator=(const shared_ptr<T>& sp)
        {
            //if (this != &sp)
            if (_ptr != sp._ptr)
            {
                Release();

                _ptr = sp._ptr;
                _pRefCount = sp._pRefCount;
                _pmtx = sp._pmtx;
                AddRef();
            }
            return *this;
        }

        int use_count()
        {
            return *_pRefCount;
        }

        ~shared_ptr()
        {
            Release();
        }

        // 像指针一样使用
        T& operator*()
        {
            return *_ptr;
        }
        T* operator->()
        {
            return _ptr;
        }
        T* get() const
        {
            return _ptr;
        }
    private:
        T* _ptr;
        int* _pRefCount;
        mutex* _pmtx;
    };
}

C++库里的智能指针实现考虑了相关问题，是线程安全的。

`shared_ptr` 的缺陷：循环引用

什么是“循环引用”？

先来看一个场景：

struct ListNode
{
    int _data;
    shared_ptr<ListNode> _prev;
    shared_ptr<ListNode> _next;
    ~ListNode(){ cout << "~ListNode()" << endl; }
};

int main()
{
    shared_ptr<ListNode> node1(new ListNode);
    shared_ptr<ListNode> node2(new ListNode);
    cout << node1.use_count() << endl;
    cout << node2.use_count() << endl;
   
    // 循环引用，导致资源无法被释放
    node1->_next = node2;
    node2->_prev = node1;
    
    cout << node1.use_count() << endl;
    cout << node2.use_count() << endl;
    return 0;
}

在这个场景中，出现了这样的情况：

node1 和 node2 两个智能指针对象指向两个节点，引用计数变成1，我们不需要手动 delete
node1 的 _next 指向 node2，node2 的_prev指向 node1 ，两者的引用计数均变成2
当 node1 和 node2 析构时，引用计数均减到1，但是它们的 _next 还指向下一个节点，_prev 还指向上一个节点。也就是说 _next 析构了， node2 就释放了；_prev 析构了，node1 就释放了
但是 _next属于 node的成员，node1 释放了，_next 才会析构，而 node1 由 _prev 管理，_prev 属于 node2 成员，这就叫 循环引用，最终导致谁也不会被释放。是一个类似于“鸡生蛋还是蛋生鸡”的问题。

如何解决：`weak_ptr`

严格来说，weak_ptr 不是智能指针，因为它并没有依托RAII的思想，它只是具有指针的行为。它不负责释放资源，只是为了专门解决 shared_ptr 的循环引用问题而设计的。

结合前面的 shared_ptr 的实现，一个简化版的 weak_ptr 是这样的（C++库里的会复杂很多）：

namespace my_smart_pointer
{
    template<class T>
    class weak_ptr
    {
    public:
        weak_ptr()
        :_ptr(nullptr)
        {}

        weak_ptr(const shared_ptr<T>& sp)
        :_ptr(sp.get())
        {}

        weak_ptr<T>& operator=(const shared_ptr<T>& sp)
        {
            _ptr = sp.get();
            return *this;
        }

        T& operator*()
        {
            return *_ptr;
        }

        T* operator->()
        {
            return _ptr;
        }

    private:
        T* _ptr;
    };
}

于是，前面的场景例子中的代码可以改为使用 weak_ptr ，这样一来，node1->_next = node2; 和 node2->_prev = node1; 时 weak_ptr 的 _next 和 _prev 不会增加 node1和 node2 的引用计数，就避开了循环引用的问题。

struct ListNode
{
    int _data;
    weak_ptr<ListNode> _prev;	// 此处的 shared_ptr 改为 weak_ptr
    weak_ptr<ListNode> _next;
    ~ListNode(){ cout << "~ListNode()" << endl; }
};

int main()
{
    shared_ptr<ListNode> node1(new ListNode);
    shared_ptr<ListNode> node2(new ListNode);
    cout << node1.use_count() << endl;
    cout << node2.use_count() << endl;
    node1->_next = node2;
    node2->_prev = node1;
    cout << node1.use_count() << endl;
    cout << node2.use_count() << endl;
    
	return 0;
}

智能指针的发展历史

C++没有GC（垃圾回收机制），申请资源需要释放是一个问题，尤其是碰到异常安全的问题时，很难处理，稍不注意就会出现内存泄漏。内存泄漏会导致程序可用的内存越来越少，但是程序中很多的操作都是需要内存的，所以要尽量杜绝内存泄漏问题。

所以基于RAII的思想，引入了智能指针。

阶段一：

在C++98中首次推出 auto_ptr，但它的设计存在重大缺陷，不建议使用。

阶段二：

C++官方在接下来的十几年中没有作为，于是一帮大佬搞了一个非官方社区，写了一个叫做 boost 的库（包含很多内容）。在 boost 库中，他们重写了智能指针：

scoped_ptr / scoped_array （防拷贝版本）

shared_ptr / shared_array （引用计数版本）

weak_ptr （解决循环引用问题）

scoped_ptr 针对的是new出来的单个对象，对应的在析构函数中的释放用的是 delete

scoped_array 针对的是new出来的多个对象（数组），对应的在析构函数中的释放用的是 delete[]，并且运算符重载了 operator[]

阶段三：

C++11中引入了智能指针，参考了 boost 的实现，稍微改了一下。C++11中的“右值引用”、“移动语句”等也都参考了 boost 库。

定制删除器

C++官方库并未参考“boost”库中 scoped_array 和 shared_array 的实现，那么它是怎么处理new多个对象的情况的呢？我们可以通过写一个仿函数的删除器来实现：

// 仿函数的删除器
template<class T>
struct FreeFunc 
{
    void operator()(T* ptr)
    {
        cout << "free:" << ptr << endl;
        free(ptr);
	}
};

template<class T>
struct DeleteArrayFunc 
{
    void operator()(T* ptr)
    {
        cout << "delete[]" << ptr << endl;
        delete[] ptr;
    }
};

int main()
{
    FreeFunc<int> freeFunc;
    std::shared_ptr<int> sp1((int*)malloc(4), freeFunc);
    DeleteArrayFunc<int> deleteArrayFunc;
    std::shared_ptr<int> sp2((int*)malloc(4), deleteArrayFunc);
    std::shared_ptr<A> sp4(new A[10], [](A* p){delete[] p; });

    std::shared_ptr<FILE> sp5(fopen("test.txt", "w"), [](FILE* p)
    	{
        	fclose(p); 
        });
    
    return 0;
}

本质上，就是传一个实现释放方式的仿函数对象给智能指针。因为C++库里的智能指针默认的释放资源方式是单个对象的 delete，那么对于不是单个对象delete的情况，我们通过写仿函数的方式都可以分别应对实现。

知识补充一：RAII思想的应用 - 锁守卫

抛异常不仅可能引起内存泄漏的问题，还可能引起死锁问题，比如下面的场景：

#include <mutex>

int div()
{
    int a, b;
    cin >> a >> b;
    if (b == 0)
        throw invalid_argument("Error: Divident is 0");

    return a / b;
}

void func()
{
    mutex mtx;
    
    mtx.lock();
    cout << div() << endl;	// 如果div抛异常，会导致下面的unlock不执行（死锁）
	mtx.unlock();
}

int main()
{
    // 捕获异常
    try
    {
        func();
    }
    catch(exception& e)
    {
        cout << e.what() << endl;
    }
    return 0;
}

用RAII思想，将加锁和解锁放在一个类的构造函数中，即可解决上面的问题：

template<class Lock>
class LockGuard
{
public:
    LockGuard(Lock& lock)
        :_lock(lock)
    {
        _lock.lock();	// 将加锁放在构造函数中
    }
    
    ~LockGuard()
    {
        cout << "解锁" << endl;
        _lock.unlock();	// 将解锁放在析构函数中
    }
    
    // 不允许拷贝，不允许赋值
    LockGuard(LockGuard<Lock>&) = delete;
    LockGuard<Lock>& operator=(LockGuard<Lock>&) = delete;
    
private:
    Lock& _lock;	// 锁不允许拷贝，这是成员变量设为引用的一个例子
    				// 这样也可以确保程序所用的是同一把锁
}

将 LockGuard 类用于 func 函数中：

void func()
{
    mutex mtx;
    LockGuard<mutex> lock_guard(mtx);	// 使用LockGuard管理加锁和解锁

    cout << div() << endl;	
}

知识补充二：内存泄漏

什么是内存泄漏？

内存泄漏指因为疏忽、错误或者异常安全等原因，造成程序未能释放已经不再使用的内存/资源的情况。内存泄漏并不是指内存在物理上的消失，而是应用程序分配某段内存后，因为设计错误，失去了对该段内存的控制，因而造成了内存的浪费。

如果进程正常结束，那么这个内存也会释放。所以一般程序碰到内存泄漏，重启后就可以解决。

内存泄漏的危害

长期运行的程序出现内存泄漏，影响很大，如操作系统、后台服务之类的不能随便重启的程序，出现内存泄漏会导致响应越来越慢、最终卡死，或者很多服务操作失败（如容器存数据、打开文件、创建套接字、发送数据等都需要内存）。

如何避免造成内存泄漏问题

写C/ C++代码时小心谨慎
不容易处理的地方多使用智能指针去管理（事前预防）
如果怀疑已经存在内存泄漏，可以使用内存泄漏工具去检测（事后解决）
- 工具推荐：Valgrind（是Linux下的强大工具）

【从零开始的C++游戏开发】植物明星大乱斗之Gameplay层实现

Sun, 12 Oct 2025 09:17:30 +0200

这一篇将详细展示Gameplay的实现思路，并在结尾处附上项目的完整源码。如需回顾整个项目的概况和整体框架的实现，请阅读本站文章《植物明星大乱斗之框架设计》。

开发流程 - Gameplay层

主菜单界面和玩家选择界面的实现
- 问题1：此项目封装了摄像机类，那么负责游戏渲染的主摄像机应该放在哪里呢？
- 解决思路：将摄像机以参数的形式传递给渲染的函数
- 问题2：如何让文本看起来有立体效果？
  - 解决思路：渲染两遍文本（比如一遍在原始位置渲染白色，另一遍在斜下方偏移一点的地方渲染灰色）
- 问题3：如何让选择界面的背景上有滚动剪影的效果
  - 解决思路：同一张图片绘制两次
游戏局内场景搭建和物理模拟实现
- 问题1：如何模拟“重力”效果？
  - 解决思路：”重力“的体现为下坠+停止，封装平台类
- 问题2：如何对物理碰撞数据进行可视化检查？
  - 解决思路：实现一个简单的”调试模式“
- 问题3：玩家在某些下落情况下会出现突然向上瞬移的情况
  - 解决思路：确保上一帧玩家的脚底位置，决定是否要在这一帧修正玩家的脚底位置
- 问题4：玩家出现连环跳
  - 解决思路：确保玩家在竖直方向速度为0时，才能继续执行跳跃逻辑
子弹基类的实现
- 游戏玩法的本质是通过抛射物似的子弹给对手造成伤害
  - 思路：创建子弹基类，不同的具体子弹继承自这个基类
- 问题：子弹在碰撞后消失的逻辑该怎么写？
  - 解决思路：与玩家死亡播放动画的情况类似，使用回调函数解决
- 子弹删除逻辑的优化
豌豆子弹类的实现
日光炸弹类、超级日光炸弹类的实现
- 注意：爆炸动画时素材位置的偏移调整
攻击技能的实现
- 使用定时器来记录冷却时间
无敌帧的实现
- 思路：在播放动画时，间隔显示不同的图片：正常图片和纯白的剪影图片
玩家状态栏的实现（生命值、能量值）
粒子系统的实现
胜负检定和结算动效

关键步骤和解决思路 - Gameplay层

主菜单界面和角色选择界面的搭建

摄像机的处理

主摄像机怎么放比较好呢？

因为我们在此项目中封装了摄像机类，那么就需要确保每一个场景在执行渲染时，都可以获取到游戏的摄像机对象，从而根据它的位置实时渲染游戏画面。有三个思路实现：

思路 1：

将摄像机定义在场景内部，让它作为场景类的成员变量存在。但这样的设计就很难在不同场景间共享摄像机的数据了。

思路 2：

把摄像机对象定义为全局变量，和此项目中图片等资源一样，我们可以通过 extern 关键字获取它。不过，全局变量终究是一种杂乱的设计，与我们想要尽量封装数据、减少全局变量的目标相悖。

思路 3：

参考帧更新中将时间的流逝 delta 以参数的方式传递给函数的思路 void on_update(int delta) ，我们选择把摄像机对象也作为参数在渲染时传递进来 void on_draw(const Camera& camera)。

主菜单界面的实现

确定了摄像机的处理方法后，主菜单的完整代码是这样的：

extern IMAGE img_menu_background;
extern SceneManager scene_manager;

class MenuScene : public Scene
{
public:
	MenuScene() = default;
	~MenuScene() = default;

	// 重写Scene基类中必要的虚函数
	void on_enter()
	{
		mciSendString(_T("play bgm_menu repeat from 0"), NULL, 0, NULL);
	}
	void on_update(int delta)
	{
	
	}
	void on_draw(const Camera& camera)
	{
		putimage(0, 0, &img_menu_background);
	}
	void on_input(const ExMessage& msg)
	{
		if (msg.message == WM_KEYUP)
		{
			mciSendString(_T("play ui_confirm from 0"), NULL, 0, NULL);
			scene_manager.switch_to(SceneManager::SceneType::Selector);
		}
	}
	void on_exit()
	{

	}

private:

};

角色选择界面的实现

角色种类的设计技巧

我们首先用枚举定义了玩家可选择的角色种类。此处为什么要加上一个名为“无效”的玩家呢？它可以作为确保我们在实现选择玩家的时候，我们的选择不会越界。

enum class PlayerType
{
    Peashooter = 0,
    Sunflower,
    Invalid
};

以玩家1的向左切换为例，我们首先将玩家角色类型的枚举变量转为 int 类型并减小1，然后加上同样转为 int 类型的 Invalid 枚举，来确保这个值始终大于等于0。随后将这个得到的值对 Invalid 枚举对应的 int 类型进行取模，确保最终的结果不会大于或等于 Invalid 的值。最后，将这一波操作得到的 int 值再转为 PlayerType 枚举类后赋值给玩家1的角色类型变量。这样我们就可以确保在按下向左切换键后，玩家类型发生了变化，同时这个值还在枚举类的第一个值和最后一个值之间，即 [Peashooter, Invalid)的前闭后开区间。

case WM_KEYUP:
	switch (msg.vkcode)
	{
	case 0x41: // 'A'
		is_btn_1P_left_down = false;
		player_type_1 = (PlayerType)(((int)PlayerType::Invalid + (int)player_type_1 - 1) % (int)PlayerType::Invalid);
		mciSendString(_T("play ui_switch from 0"), NULL, 0, NULL);
		break;
     // ......
    }

将摄像机封装进Animation类

因为所有的动画渲染时都需要先获取摄像机的位置，并且这部分逻辑在所有渲染动画时都要使用。那么根据 面向对象的封装特性，我们干脆把获取摄像机位置、并与自身坐标作差的这部分逻辑，直接放到Animation类中，于是动画类的 on_draw方法需要改成 void on_draw(const Camera& camera, int x, int y) const 。

背景剪影滚动效果的实现

一种比较简单的实现思路是将这张图片渲染两次。我们想象一条用来定位的竖直线条，这根线条从矩形的左侧滚向矩形的右侧。当达到矩形右侧时，线条又会闪现回到矩形左侧。我们在线的左侧绘制一次图片，然后在线的右侧又绘制一次图片，这样就实现了图片的连续滚动效果。

数据更新部分具体的代码是这样的：

void on_update(int delta) 
{
	animation_peashooter.on_update(delta);
	animation_sunflower.on_update(delta);

	// 背景滚动效果
	selector_background_scroll_offset_x += 5;
	if (selector_background_scroll_offset_x >= img_peashooter_selector_background_left.getwidth())
    {
        selector_background_scroll_offset_x = 0;
    }
}

在绘制部分，我们首先需要重载一个 putimage_alpha 函数来对图片进行裁剪绘制：

inline void putimage_alpha(int dst_x, int dst_y, int width, int height, IMAGE* img, int src_x, int src_y)
{
	int w = width > 0 ? width : img->getwidth();
	int h = height > 0 ? height : img->getheight();

	AlphaBlend(GetImageHDC(GetWorkingImage()), dst_x, dst_y, w, h,
		GetImageHDC(img), src_x, src_y, w, h, { AC_SRC_OVER, 0 , 255, AC_SRC_ALPHA });
}

然后在玩家1的背景图上滚动玩家2的剪影，在玩家2的背景图上滚动玩家1的剪影。所以最终的绘制部分代码是这样的：

void on_draw(const Camera& camera) 
{
	IMAGE* img_P1_selector_background = nullptr;
	IMAGE* img_P2_selector_background = nullptr;
	
	// 互相为对方的滚动背景图赋值
	switch (player_type_2)
	{
	case PlayerType::Peashooter:
		img_P1_selector_background = &img_peashooter_selector_background_right;
		break;
	case PlayerType::Sunflower:
		img_P1_selector_background = &img_sunflower_selector_background_right;
		break;
	default:
		img_P1_selector_background = &img_peashooter_selector_background_right;
		break;
	}

	switch (player_type_1)
	{
	case PlayerType::Peashooter:
		img_P2_selector_background = &img_peashooter_selector_background_left;
		break;
	case PlayerType::Sunflower:
		img_P2_selector_background = &img_sunflower_selector_background_left;
		break;
	default:
		img_P2_selector_background = &img_peashooter_selector_background_left;
		break;
	}


	putimage(0, 0, &img_selector_background);

	// 绘制动态背景图
	putimage_alpha(getwidth() - selector_background_scroll_offset_x, 0, img_P2_selector_background);
	putimage_alpha(getwidth() - img_P2_selector_background->getwidth(), 0, img_P2_selector_background->getwidth() - selector_background_scroll_offset_x,
		0, img_P2_selector_background, selector_background_scroll_offset_x, 0);
	putimage_alpha(selector_background_scroll_offset_x - img_P1_selector_background->getwidth(), 0, img_P1_selector_background);
	putimage_alpha(selector_background_scroll_offset_x, 0, img_P1_selector_background->getwidth() - selector_background_scroll_offset_x,
		0, img_P1_selector_background, 0, 0);

	putimage_alpha(pos_img_VS.x, pos_img_VS.y, &img_VS);
    
    // ......
}

物理引擎的实现

平台类的设计

从功能入手考虑”平台“碰撞器的设计。在大多数2D平台类游戏的设计中，平台大多数被设计成 单向碰撞，也就是说，玩家从上方坠落时可以正常落到平台上；而当玩家从平台下方向上跳跃时，就可以穿过平台站立在平台上。所以我们只需要考虑玩家可以”站在哪里“即可，于是将平台碰撞器抽象为 一条线。

此处需要注意的是，虽然我们在碰撞器的结构体中已经记录了平台的位置，但是还是需要单独去记录平台的渲染位置。这是因为平台的图片素材是有厚度的，并且这些图片的最顶部不一定就是碰撞线所处的位置。一般来说，碰撞的检测线位于平台图片内部稍偏上一点 的地方，这样在画面上才更符合玩家的直觉。同时，这种平台类的设计也和我们总体的设计思路 数据逻辑和渲染分离 相一致。当我们在碰撞检测时，我们只需要关注CollisionShape 的数据部分；当我们进行绘图时，我们也只需要关注图片和绘制位置的信息即可。这就进一步实践了 解耦合。

为物理碰撞添加一个简单的调式模式，只需要在该模式下绘制出碰撞器的形状即可。最终，平台类的完整代码是这样的：

extern bool is_debug;

class Platform
{
public: 
	struct CollisionShape // 描述碰撞器形状
	{
		float y; 
		float x_left;
		float x_right;
	};

public:
	CollisionShape shape;
	// 数据逻辑和渲染分离，实现解耦合
	IMAGE* img = nullptr;
	POINT render_position = { 0 };

public:
	Platform() = default;
	~Platform() = default;

	void on_draw(const Camera& camera) const
	{
		putimage_alpha(camera, render_position.x, render_position.y, img);

		// 根据是否在debug模式来决定是否要绘制碰撞线
		if (is_debug)
		{
			setlinecolor(RGB(255, 0, 0));
			line(camera, (int)shape.x_left, (int)shape.y, (int)shape.x_right, (int)shape.y);
		}
	}
		
private:

};

玩家基类的设计

把所有玩家都具备的数据和逻辑封装在玩家基类中。而豌豆射手、向日葵等具体的角色，则分别继承自Player基类，实现自己的逻辑。

如何实例化玩家对象？

因为有两个类别的玩家角色，游戏中具体实例化哪个玩家类，取决于玩家在游戏的选角阶段选择了哪一个角色，所以我们需要在玩家角色选择界面执行这部分的逻辑。同时，我们还需要在游戏局内的场景中使用它们。所以最简单的思路就是把它和之前那些生命周期同样跨越多个场景的对象一样，定义在全局环境中。所以在角色选择界面的相关代码是这样的：

// SelectorScene.h
class SelectorScene : public Scene
{
public:
    // ......
    void on_exit() 
    {
        // 根据玩家选择的角色，实例化对应的玩家对象，用于Game Scene中
        switch (player_type_1)
        {
        case PlayerType::Peashooter:
            player_1 = new PeashooterPlayer();
            break;
        case PlayerType::Sunflower:
            player_1 = new SunflowerPlayer();
            break;
        }

        switch (player_type_2)
        {
        case PlayerType::Peashooter:
            player_2 = new PeashooterPlayer();
            break;
        case PlayerType::Sunflower:
            player_2 = new SunflowerPlayer();
            break;
        }
    }
    // ......
}

另外，我们还需要记录玩家在世界坐标中的位置 Vector2 position; 另外需要添加玩家角色的动画相关的定义，这些动画具体使用哪个图集渲染，放到具体的子类中实现。读取玩家的按键操作并将按键消息映射到对应的逻辑这部分代码也应该放到玩家基类中。那么与玩家键位控制相关的玩家序号该怎么写呢？在设计上，我们把 玩家序号 作为玩家对象的一个成员，只需要在按键操作时根据序号执行不同逻辑即可。

平台单向碰撞检测和重力模拟

重力模拟

在自由落体的过程中，有两个关键的值：重力加速度和物体当前的速度。在整个重力模拟的过程中，场景中的物体始终都在受到重力加速度的牵引，并且有着向着竖直方向加速的趋势。所以在玩家类中还需要定义重力常量 const float gravity = 1.6e-3f; 注意，这个数值看似很大，但其实是在游戏开发中很常见的情况。受限于我们游戏世界的尺寸、画面比例乃至于玩家手感的优化，重力极有可能被调整为一个“四不像”的数值，作为开发者，我们只需要让玩家等物体在这个值的影响下展现出正确的效果即可。和物理相关的所有代码，我们都会写在 void move_and_collide(int delta) 这个函数中。于是，重力的模拟只需要用两行代码即可实现：

// Player.h
// ......
protected:
	void move_and_collide(int delta)
    {
		velocity.y += gravity * delta;
		position += velocity * (float)delta;
    }
// ......

平台单向碰撞检测

玩家和平台的碰撞只需要判断直线和矩形是否在水平方向发生重合即可。具体方法：取二者最右边界的值和二者最左边界的值作差，如果结果小于二者宽度之和，那么这两个图形在水平方向上有重合部分，也就是说，玩家角色和该平台在水平方向上发生了碰撞：

竖直方向上的碰撞更为简单：只需要确保平台碰撞检测线的 y 坐标，是否处于玩家矩形的上下边界之间即可。而当玩家和平台在水平和竖直方向上都有重合时，我们才能判断二者发生了碰撞。

接下来，我们需要考虑如何对玩家的坐标进行修正了。既然玩家已经碰到了平台，那么玩家无论已经落下多少距离，都应该停在平台之上。如果我们只是简单粗暴地将玩家的脚底位置设置到平台上，那么在某些情况下可能会发生“穿模”的bug：玩家向上跳起，但是只有身体的一部分穿过了平台，然后开始下落，这时玩家的速度向下，同时和平台发生了碰撞，满足了目前代码的碰撞条件，如果此时直接将玩家设置到平台之上的话，那么会出现刚刚开始下落的玩家一瞬间被移到了平台之上。

所以，我们需要确保只有玩家的整个身体都穿过了平台，随后开始下落时，才能判断玩家和平台发生了碰撞。也就是说，我们需要先获取上一帧玩家脚底的位置，只有它位于平台上方了，并且这一帧满足我们先前讨论的所有条件，才会执行修正玩家脚底坐标的逻辑。于是，完善后的代码是这样的：

void move_and_collide(int delta)
{
    velocity.y += gravity * delta;
    position += velocity * (float)delta;

    // 碰撞检测
    if (velocity.y > 0)
    {
        for (const Platform& platform : platform_list)
        {
            const Platform::CollisionShape& shape = platform.shape;
            bool is_collide_x = (max(position.x + size.x, shape.x_right) - min(position.x, shape.x_left) <= size.x + (shape.x_right - shape.x_left));
            bool is_collide_y = (shape.y >= position.y && shape.y <= position.y + size.y);

            if (is_collide_x && is_collide_y)
            {
                // 需要根据前一帧的脚底位置是否高于平台位置，来判断要不要将玩家的最终位置放在平台上
                float delta_pos_y = velocity.y * delta;
                float last_tick_foot_pos_y = position.y + size.y - delta_pos_y;
                if (last_tick_foot_pos_y <= shape.y) // 玩家在上一帧跳跃高度高于平台
                {
                    position.y = shape.y - size.y;
                    velocity.y = 0;

                    break;
                }
            }
        }
    }
}

角色技能设计

玩家技能的程序功能需求

此项目中有两种玩家角色：豌豆射手和向日葵。这两种角色都有普通攻击和特殊攻击两种攻击方式。

豌豆射手：可以向自己的面朝的方向发射豌豆子弹，子弹命中对方可以积攒能量。能量值蓄满后可以释放特殊攻击技能，快速喷射出一连串的豌豆子弹。

向日葵：普通攻击向着自己面朝的斜上方抛射日光炸弹。日光炸弹会受重力影响呈不太容易瞄准的曲线运动，但它在击中敌人后造成的伤害和奖励的能量更高。向日葵同样可以在能量集满后释放特殊攻击技能——在对手的头顶出召唤出巨大的日光炸弹，这个大日光炸弹有着更大的伤害范围和更高额的能量回馈。

从游戏设计的角度，无论何种类型的玩家角色，其核心都是使用抛射物给对手造成伤害的玩法。于是，我们就可以对场景中所有的抛射物进行大一统，它们的差异无非是在动画贴图和伤害范围等数值上等等。我们可以创建Bullet基类，豌豆子弹和日光炸弹、超大型日光炸弹则分别继承这个子弹基类，然后实现各自具体的更新和渲染逻辑。

子弹碰到敌人后消失的逻辑实现

类似于在动画类设计时玩家死亡消失的思路，子弹在碰到敌人后就应该被立即设置为无效的状态，从而防止其在后续的帧更新时与敌人发生多次碰撞。但是由于我们需要播放豌豆子弹的破裂动画和日光炸弹的爆炸动画，所以不能立即将子弹对象从场景中删除。也就是说，场景中的每一个子弹对象都有三个阶段：正常状态、无效状态、可以被删除的状态。

正常状态 中，我们播放子弹的动画，并在每一帧中检测它与玩家的碰撞。当它与目标玩家发生碰撞后，进入到 无效状态，此时，我们不再对子弹进行碰撞检测，同时播放子弹销毁的动画。在动画播放结束后，子弹进入到可以被删除的状态，从而在场景更新时被移除掉。所以子弹的成员变量可以这样设计：

// Bullet.h
protected:
	Vector2 size;						// 子弹碰撞器尺寸
	Vector2 position;					// 子弹位置
	Vector2 velocity;					// 子弹速度
	int damage = 10;					// 子弹杀伤力

	// 子弹的三个状态：有效、无效、可以被删除
	bool valid = true;					// 子弹是否有效
	bool can_remove = false;			// 子弹是否可以被移除

	function<void()> callback;			// 子弹碰撞的回调函数

	PlayerID target_id = PlayerID::P1;	// 子弹碰撞的目标玩家的ID

子弹消失逻辑的优化

如果子弹只有在碰撞到玩家后才被销毁，那么没有发生碰撞的子弹就永远不会被删除掉，造成内存泄漏。所以我们还需要对已经飞到屏幕外不可见的子弹对象进行销毁。这部分的逻辑同样是所有继承自Bullet 基类的子类通用的内容，所以我们还需要定义 check_if_exceeds_screen 这一方法，在内部检测子弹的矩形边界是否已经位于屏幕矩形之外。

完整的子弹基类的代码是这样的：

extern bool is_debug;

// Bullet基类
class Bullet
{
public:
	Bullet() = default;
	~Bullet() = default;

	virtual void on_collide()
	{
		if (callback)
			callback();
	}

	virtual bool check_collision(const Vector2& position, const Vector2& size) // 子弹中心坐标是否进入玩家碰撞体内部
	{
		return this->position.x + this->size.x / 2 >= position.x
			&& this->position.x + this->size.x / 2 <= position.x + size.x
			&& this->position.y + this->size.y / 2 >= position.y
			&& this->position.y + this->size.y / 2 <= position.y + size.y;
	}

	virtual void on_update(int delta)
	{

	}

	virtual void on_draw(const Camera& camera) const
	{
		if (is_debug)
		{
			setfillcolor(RGB(255, 255, 255));
			setlinecolor(RGB(255, 255, 255));
			rectangle((int)position.x, (int)position.y,
				(int)(position.x + size.x), (int)(position.y + size.y));
			solidcircle((int)(position.x + size.x / 2), (int)(position.y + size.y / 2), 5);
		}
	}

	void set_damage(int val)
	{
		damage = val;
	}

	int get_damage()
	{
		return damage;
	}

	void set_position(float x, float y)
	{
		position.x = x;
		position.y = y;
	}

	const Vector2& get_position() const
	{
		return position;
	}

	const Vector2& get_size() const
	{
		return size;
	}

	void set_velocity(float x, float y)
	{
		velocity.x = x;
		velocity.y = y;
	}

	void set_collide_target(PlayerID target)
	{
		target_id = target;
	}

	PlayerID get_collide_target() const
	{
		return target_id;
	}

	void set_callback(function<void()> callback)
	{
		this->callback = callback;
	}

	// 设置子弹是否可以继续碰撞
	void set_valid(bool flag)
	{
		valid = flag;
	}

	bool get_valid() const
	{
		return valid;
	}

	bool check_can_remove() const
	{
		return can_remove;
	}

protected:
	bool check_if_exceeds_screen()
	{
		return (position.x + size.x <= 0 || position.x >= getwidth()
			|| position.y + size.y <= 0 || position.y >= getheight());
	}

protected:
	Vector2 size;						// 子弹碰撞器尺寸
	Vector2 position;
	Vector2 velocity;
	int damage = 10;					// 子弹杀伤力

	// 子弹的三个状态：有效、无效、可以被删除
	bool valid = true;					// 子弹是否有效
	bool can_remove = false;			// 子弹是否可以被移除

	function<void()> callback;			// 子弹碰撞的回调函数

	PlayerID target_id = PlayerID::P1;	// 子弹碰撞的目标玩家的ID
};

注意：刚开始时，我们通常无法一次性地、 自顶而下 地这样设计一个游戏对象类。类的设计往往是 边写边改，然后通过后续使用时的查漏补缺来完善基类的内容。自顶而下地设计，在很多程度上是对编程经验的考验，随着不断地练习和经验的累积，会对这种思路越来越熟悉。

豌豆子弹类的设计

豌豆射手只会发射一种类型的子弹，普通攻击和特殊攻击无非是子弹发射频率的不同。我们用三种不同的音效资源在豌豆子弹发生碰撞时进行随机播放，这种设计在游戏开发中很常见。比如游戏中角色的脚步声或者是射击时的枪声，都可以使用不同的音效进行播放，这种随机的效果音会让游戏显得更加自然和灵动。所以，我们需要在豌豆子弹子类中重写 on_colide 方法来为豌豆子弹添加不同的破碎声音。需要注意的是，我们在 重写父类方法且还是需要执行父类逻辑时，需要显式地调用父类的方法。于是，完整的豌豆子弹子类是这样的：

// PeaBullet.h

extern IMAGE img_pea;
extern Atlas atlas_pea_break;

class PeaBullet : public Bullet
{
public:
	PeaBullet()
	{
		size.x = 64, size.y = 64;

		damage = 10;

		animation_break.set_atlas(&atlas_pea_break);
		animation_break.set_interval(100);
		animation_break.set_loop(false);
		animation_break.set_callback([&]() { can_remove = true; });
	}

	~PeaBullet() = default;

	void on_update(int delta)
	{
		position += velocity * (float)delta;

		if (!valid)
			animation_break.on_update(delta);

		if (check_if_exceeds_screen())
			can_remove = true;
	}

	void on_draw(const Camera& camera) const
	{
		if (valid)
			putimage_alpha(camera, (int)position.x, (int)position.y, &img_pea);
		else
			animation_break.on_draw(camera, (int)position.x, (int)position.y);

		Bullet::on_draw(camera);

	}

	void on_collide()
	{
		Bullet::on_collide();

		switch (rand() % 3)
		{
		case 0:
			mciSendString(_T("play pea_break_1 from 0"), NULL, 0, NULL);
			break;
		case 1:
			mciSendString(_T("play pea_break_2 from 0"), NULL, 0, NULL);
			break;
		case 3:
			mciSendString(_T("play pea_break_3 from 0"), NULL, 0, NULL);
			break;
		}
	}

private:
	Animation animation_break;	// 豌豆子弹破碎动画
};

在 Bullet 基类的基础上， PeaBullet 子类只是简单扩展了一部分自己独有的逻辑，就可以相对简明地实现完整的子弹功能了。这正是面向对象中继承的魅力所在。

日光炸弹类的实现

需要注意的是，爆炸动画的序列帧素材尺寸时略大于日光炸弹默认动画序列帧尺寸的，所以为了确保日光炸弹在爆炸时渲染的效果正确，我们就要保证这两个动画所在的矩形的中心对齐。而在EasyX中，我们渲染的坐标原点是矩形左上角的坐标，所以我们在爆炸动画渲染时加上一个小小的位置偏移，确保画面效果正确。

另外，在豌豆子弹的 on_update 方法中，我们根据其速度不断更新它的位置，也就是说，无论豌豆子弹是否发生了碰撞，都会一直向前飞翔。配合豌豆子弹破碎后的动画，我们就顺手实现了子弹碰撞后的飞溅效果。日光炸弹爆炸后的动画有所不同，它应该留在原地而不会继续受重力的影响而运动。

完整的日光炸弹类的代码是这样的：

// SunBullet.h

extern Atlas atlas_sun;
extern Atlas atlas_sun_explode;

extern Camera main_camera;

class SunBullet : public Bullet
{
public:
	SunBullet()
	{
		size.x = 96, size.y = 96;
		
		damage = 20;

		animation_idle.set_atlas(&atlas_sun);
		animation_idle.set_interval(50);

		animation_explode.set_atlas(&atlas_sun_explode);
		animation_explode.set_interval(50);
		animation_explode.set_loop(false);
		animation_explode.set_callback([&]() { can_remove = true; });

		// 处理爆炸和idle时图片的偏移问题
		IMAGE* frame_idle = animation_idle.get_frame();
		IMAGE* frame_explode = animation_explode.get_frame();
		explode_render_offset.x = (frame_idle->getwidth() - frame_explode->getwidth()) / 2.0f;
		explode_render_offset.y = (frame_idle->getheight() - frame_explode->getheight()) / 2.0f;
		
	}

	~SunBullet() = default;

	void on_update(int delta)
	{
		if (valid)
		{
			velocity.y += gravity * delta;
			position += velocity * (float)delta;
		}

		// 更新动画状态
		if (!valid)
			animation_explode.on_update(delta);
		else
			animation_idle.on_update(delta);

		if (check_if_exceeds_screen())
			can_remove = true;
	}

	void on_draw(const Camera& camera) const
	{
		if (valid)
			animation_idle.on_draw(camera, (int)position.x, (int)position.y);
		else
		{
			animation_explode.on_draw(camera, (int)(position.x + explode_render_offset.x),
				(int)(position.y + explode_render_offset.y));
		}

		Bullet::on_draw(camera);
	}

	void on_collide()
	{
		Bullet::on_collide();

		main_camera.shake(5, 250);	// 摄像机在爆炸时的抖动效果

		mciSendString(_T("play sun_explode from 0"), NULL, 0, NULL);
	}

private:
	const float gravity = 1e-3f;	// 日光炸弹的重力

private:
	Animation animation_idle;		// 日光炸弹的默认动画
	Animation animation_explode;	// 日光炸弹的爆炸动画
	Vector2 explode_render_offset;	// 爆炸时动画的渲染偏移（爆炸的图片略大于idle图片
									// 使其图片中心点重合，更符合玩家的直觉
};

超级日光炸弹类的实现

在我们的游戏中，向日葵的特殊技能是可以从屏幕外召唤超级大的日光炸弹。比起普通攻击召唤的小型炸弹，这个炸弹更大更强。它不会受到重力影响，而是缓慢下落，更多的是起到封走位的作用，方便抛射的小型日光炸弹更容易命中对手。

我们希望超级日光炸弹的碰撞检测范围更大一些，那么就不再将子弹的中心位置坐标作为碰撞检测点了，而是使用矩形边界作为碰撞检测的范围。于是我们就需要重写 check_collision 的方法了。

超级日光炸弹类是这样的：

extern Atlas atlas_sun_ex;
extern Atlas atlas_sun_ex_explode;

extern Camera main_camera;

class SunBulletEx : public Bullet
{
public:
	SunBulletEx()
	{
		size.x = 288, size.y = 288;

		damage = 20;

		animation_idle.set_atlas(&atlas_sun_ex);
		animation_idle.set_interval(50);

		animation_explode.set_atlas(&atlas_sun_ex_explode);
		animation_explode.set_interval(50);
		animation_explode.set_loop(false);
		animation_explode.set_callback([&]() { can_remove = true; });

		// 处理爆炸和idle时图片的偏移问题
		IMAGE* frame_idle = animation_idle.get_frame();
		IMAGE* frame_explode = animation_explode.get_frame();
		explode_render_offset.x = (frame_idle->getwidth() - frame_explode->getwidth()) / 2.0f;
		explode_render_offset.y = (frame_idle->getheight() - frame_explode->getheight()) / 2.0f;
	}

	~SunBulletEx() = default;

	void on_update(int delta)
	{
		if (valid)
		{
			position += velocity * (float)delta;
		}

		if (!valid)
			animation_explode.on_update(delta);
		else
			animation_idle.on_update(delta);

		if (check_if_exceeds_screen())
			can_remove = true;
	}

	void on_draw(const Camera& camera) const
	{
		if (valid)
			animation_idle.on_draw(camera, (int)position.x, (int)position.y);
		else
		{
			animation_explode.on_draw(camera, (int)(position.x + explode_render_offset.x),
				(int)(position.y + explode_render_offset.y));
		}

		Bullet::on_draw(camera);
	}

	void on_collide()
	{
		Bullet::on_collide();

		main_camera.shake(20, 350);	
		mciSendString(_T("play sun_explode_ex from 0"), NULL, 0, NULL);
	}

	bool check_collision(const Vector2& position, const Vector2& size)	// 将碰撞范围扩展为一个矩形，而不是子弹的中心点
	{
		bool is_collide_x = (max(this->position.x + this->size.x, position.x + size.x)
			- min(this->position.x, position.x) <= this->size.x + size.x);
		bool is_collide_y = (max(this->position.y + this->size.y, position.y + size.y)
			- min(this->position.y, position.y) <= this->size.y + size.y);

		return is_collide_x && is_collide_y;
	}

private:
	Animation animation_idle;
	Animation animation_explode;
	Vector2 explode_render_offset;
};

从设计角度讲，超级日光炸弹完全可以通过继承普通日光炸弹来简化代码。但此项目还是采用这种相对扁平的类继承关系，确保整体的代码结构易于理解。

技能系统

在 Player 基类中添加 virtual void on_attack 和 virtual void on_attack_ex 两个虚函数，然后在具体的玩家子类中重写这两个虚函数的逻辑，就可以完成角色的普通攻击和特殊攻击了。

冷却时间的实现思路

角色的普通攻击一般是存在冷却时间的，在冷却时间内，无论如何按键都无法触发攻击效果，所以我们定义一个布尔变量 can_attack 用来标识角色当前是否可以释放普通攻击，使用一个定时器来记录角色普通攻击的冷却时间，用一个 int 变量来标识玩家普通攻击的冷却时间毫秒数。这样，我们就只需要在按键消息触发时，检查当前是否可以执行普通攻击，如果可以执行，则翻转这个布尔变量并重置定时器的时间，当定时器时间到达后，再恢复玩家可攻击的状态。这样，我们就实现了普通攻击的冷却效果。

无敌状态的实现

我们用两个布尔变量来标识角色当前是否处于“无敌状态” bool is_invulnaerable = false; 和当前帧是否需要显示玩家剪影 bool is_showing_sketch_frame = false; 我们希望当玩家处于无敌帧时，出现闪烁的动画效果，那么就需要不断切换显示当前动画序列帧和剪影动画序列帧：

我们通过添加两个定时器来控制玩家退出无敌状态以及闪烁时两种不同序列帧的切换功能：Timer timer_ivulnerable; Timer timer_invulnerable_blink; 于是在定时器的部分在 Player 类的构造函数里进行初始化：

// Player.h
Player()
{
	current_animation = is_facing_right;

	// 初始化普通攻击冷却相关成员变量
	timer_attack_cd.set_wait_time(attack_cd);
	timer_attack_cd.set_one_shot(true);
	timer_attack_cd.set_callback([&]()
		{
			can_attack = true;
		});

	// 初始化无敌时间定时器
	timer_invulnerable.set_wait_time(750);
	timer_invulnerable.set_one_shot(true);
	timer_invulnerable.set_callback([&]()
		{
			is_invulnerable = false;
			is_showing_sketch_frame = false; // 无敌结束时确保不再显示剪影
		});

	// 初始化无敌动画闪烁定时器
	timer_invulnerable_blink.set_wait_time(75);
	timer_invulnerable_blink.set_callback([&]()
		{
			is_showing_sketch_frame = !is_showing_sketch_frame;
		});
	
    // ......
}

在 on_update 中对定时器进行更新。在 Util.h 添加一个工具函数，实现将图片处理为纯白色的剪影效果。我们读取图片对象的像素色彩缓存区，将所有像素设置为白色即可，详细的解释请见本站文章《提瓦特幸存者》的“番外篇”部分。

// Util.h
inline void sketch_image(IMAGE* src, IMAGE* dst)
{
	int w = src->getwidth();
	int h = src->getheight();

	Resize(dst, w, h);
	DWORD* src_buffer = GetImageBuffer(src);
	DWORD* dst_buffer = GetImageBuffer(dst);
	for (int y = 0; y < h; y++)
	{
		for (int x = 0; x < w; x++)
		{
			int idx = y * w + x;
			dst_buffer[idx] = BGR(RGB(255, 255, 255)) | (src_buffer[idx] & 0xFF000000);
		}
	}
}

那么，在 on_update 中就可以添加是否需要显示剪影图片的代码：

// Player.h
virtual void on_update(int delta)
{
    // ......
    
    // 是否需要显示剪影图片
	// 仅在无敌且需要显示剪影的帧，生成剪影图片
	if (is_showing_sketch_frame)
		sketch_image(current_animation->get_frame(), &img_sketch);
    
    // ......
}

并在 on_draw 中进行相应绘制：

// Player.h
virtual void on_draw(const Camera& camera)
{
    // ......
    if (hp > 0 && is_invulnerable && is_showing_sketch_frame)
		putimage_alpha(camera, (int)position.x, (int)position.y, &img_sketch);
	else
		current_animation->on_draw(camera, (int)position.x, (int)position.y);
    
    // ......
}

最后，在 Player 类中添加触发无敌状态的逻辑入口：

添加一个让玩家进入无敌状态的方法：

// Player.h
void make_invulnerable()
{
    is_invulnerable = true;
    timer_invulnerable.restart();

    is_showing_sketch_frame = true;    // 立即进入“显示剪影”的半帧
    timer_invulnerable_blink.restart(); // 开始闪烁
}

然后在 move_and collide 方法的子弹碰撞部分，在子弹发生碰撞后添加让玩家进入无敌状态的代码：

// Player.h
void move_and_collide(int delta)
{

    // ......
        
    // 玩家被子弹射中受到伤害
    if(!is_invulnerable)
	{
		for (Bullet* bullet : bullet_list)
		{
			if (!bullet->get_valid() || bullet->get_collide_target() != id)
				continue;

			if (bullet->check_collision(position, size))
			{
				make_invulnerable();		// 开启角色无敌状态

				bullet->on_collide();
				bullet->set_valid(false);
				hp -= bullet->get_damage();

			// ......
		}
	}
    // ......
}

粒子系统的实现

粒子系统 是一种使用大量微小粒子的图元作为基本元素来描述不规则对象的技术。在很多游戏中，烟雾、火焰、雨雪等效果的实现都是依托在粒子系统上完成的。在分析和解剖粒子系统时，我们可以从两个角度入手：粒子对象 本身和 粒子发射器。

粒子对象：通常由动画、物理和生命周期等众多属性来描述。

粒子发射器：决定粒子对象的生成方式。如粒子的发生频率、发射方向和初始速度等。

我们将尝试封装一个简单可用的粒子系统。粒子对象可以看作是一个特殊的动画对象，它与角色、子弹等动画的区别在于，粒子在发射后，世界坐标的位置就固定下来了，不会随着游戏的更新而移动。在播放完自身的动画后，粒子的寿命便终止了，就可以从场景中被移除掉了。

完整的粒子类代码是这样的：

class Particle
{
public:
	Particle() = default;

	Particle(const Vector2& position, Atlas* atlas, int lifespan)
		: position(position), atlas(atlas), lifespan(lifespan)
	{ }

	~Particle() = default;

	void on_update(int delta)
	{
		timer += delta;
		if (timer >= lifespan)
		{
			timer = 0;
			idx_frame++;
			if (idx_frame >= atlas->get_size())
			{
				idx_frame = atlas->get_size() - 1;
				valid = false;
			}
		}
	}

	void on_draw(const Camera& camera) const
	{
		putimage_alpha(camera, (int)position.x, (int)position.y, atlas->get_image(idx_frame));
	}

	void set_atlas(Atlas* new_atlas)
	{
		atlas = new_atlas;
	}

	void set_position(const Vector2& new_position)
	{
		position = new_position;
	}

	void set_lifespan(int ms)
	{
		lifespan = ms;
	}

	bool check_valid() const
	{
		return valid;
	}

private:
	int timer = 0;			// 粒子动画播放定时器
	int lifespan = 0;		// 单帧粒子动画持续时间
	int idx_frame = 0;		// 当前正在播放的动画帧
	Vector2 position;		// 粒子的世界坐标
	bool valid = true;		// 粒子对象是否有效
	Atlas* atlas = nullptr;	// 粒子动画所使用的图集
};

代码总体回顾及源码

Scene 基类

在这个项目中首次引入了场景设计的概念。游戏的不同阶段和不同界面对应到不同的场景中。在场景基类 Scene.h 中，on_enter 和 on_exit 方法分别对应着场景的初始化逻辑和退出逻辑。on_input、on_update和 on_draw 分别对应主循环的输入、更新和绘图三个阶段并传入了各自所需的参数。具体的场景子类只需要继承后重写自己的逻辑即可。而场景管理器的设计则用来控制游戏当前正在运行的场景。我们在跳转场景时使用了枚举来屏蔽具体的场景指针，而场景管理器同样有 on_input、on_update和 on_draw 三个方法来调用当前场景实例的对应逻辑。

main 函数

在 main.cpp 中，主要实现了两部分功能：资源加载 和 游戏入口函数。首先加载游戏所需的像素字体，随后加载游戏中动画的图片资源并对需要进行左右朝向翻转的素材进行了处理，最后再载入游戏的背景音乐和音效。在进程的入口函数中，我们调用资源加载函数并实例化此场景，最后在游戏的主循环中调用场景管理器的各个阶段逻辑入口方法。

Atlas 图集类

在游戏的动画实现上，首先封装了Atlas 图集类。图集更像是容器的概念，用来批量加载和存储一套动画所需的图片素材。而 Animation 动画类则更像是一个只记录动画当前播放进度的轻量管理器。在渲染时具体绘制哪张图片则需要实时地去对应的图集类中获取。除此之外，Animation类 还记录着帧间隔、循环播放和播放结束逻辑等动画数据。

Camera 摄像机类

在动画渲染时，使用自行封装的 Camera 摄像机对象。摄像机在此项目的设计中只是充当了绘图时的相对定位锚点，当这个定位点的位置在一定范围内随机跳跃时，我们绘图的内容也在快速地抖动，这就实现了摄像机震动的效果。为了更简洁地编写使用摄像机进行绘图的代码，在 Util.h 中实现了使用摄像机进行透明贴图绘制的函数重载，以及翻转图片和生成纯白剪影效果的图像处理代码逻辑。

Timer 定时器类和 Vector2 二维向量类

除此之外，游戏框架基础架构还有两个很关键的封装：定时器类和二维向量类。在 Timer.h 中封装了定时器的逻辑：定时器是一个在游戏中记录时间流逝的对象，当时间到达预设的时间的那一帧便会调用指定的回调函数逻辑。二维向量类则封装着和2D向量有关的数学运算：除去四则运算的重载外，还有获取向量长度以及标准化向量的方法。

场景子类：MenuScene、SelectorScene和GameScene

游戏启动后首先来到菜单场景。菜单场景十分简单，只需要播放音乐并处理跳转逻辑即可。而在随后的角色选择场景，我们使用了大量代码来实现硬编码的界面元素布局、在绘图时需要根据玩家选择的不同角色枚举值绘制不同的角色对象和动态的背景图、在输入时也是根据玩家1和玩家2的不同键位的键码值将角色的枚举值循环切换。而在角色选择界面退出时，我们根据当前两位玩家的枚举值来实例化不同的角色并设置头像和玩家ID。玩家ID也是使用枚举进行记录的，我们在 PlayerID.h 中进行了定义。

在游戏的局内场景中，我们需要处理的逻辑可以分为三部分：

与游戏世界相关的内容，如背景图和平台
与玩家角色相关的内容，如角色本身和飞行在场景中的子弹
与游戏胜负相关的内容，如实时监测角色的位置和生命值，并在游戏结束时渲染结算条幅

调试模式的开启与关闭也是在游戏场景中进行控制的。

Player 玩家基类

在玩家角色的设计中，我们定义了Player基类来描述共有的逻辑。在画面表现上，玩家角色拥有闲置、奔跑、攻击、死亡等不同的动画效果，以及起跳、落地和奔跑时的粒子特效等内容。在数据逻辑上，玩家的普通攻击和特殊攻击分别由冷却时间定时器和能量值进行控制。奔跑、起跳和落地等逻辑也封装成对应的方法，方便触发时在其中修改角色速度和更新特效动画。除此之外，玩家角色在受伤后会有一小段无敌时间并产生闪烁的画面效果，我们同样使用定时器来进行控制。

与物理模拟相关的逻辑封装到了 move_and_collide 方法中：我们根据重力和当前的速度值更新了玩家的位置，并进行了平台和子弹的碰撞检测。

Peashooter 子类和 Sunflower 子类

有了Player基类的基础，豌豆射手的子类实现就简单很多了，只需要配置其动画属性并设置攻击时角色在场景中生成子弹的逻辑。我们还用了随机音效来优化游戏效果。

向日葵子类的实现也是同理：在配置完成动画属性后，重写其普通攻击和特殊攻击的逻辑。只不过向日葵在特殊攻击时头顶会有额外的“日”字动画，所以我们重写了它的渲染方法。

Bullet 子弹基类

对于玩家角色所发射的子弹同样定义了Bullet基类进行抽象。子弹与玩家一样，需要在游戏场景中连贯运动，还需要模拟受重力影响的抛射，所以我们还是优先描述其速度，并在更新时记录其位置。除此之外，子弹还要有伤害值、碰撞目标和碰撞回调等字段。

PeaBullet 子类和 SunBullet 子类、SunBulletEx 子类

在豌豆子弹的实现中，我们重写了破碎的方法，播放了随机的音效，并在渲染时根据当前是否已经破碎选择了不同的渲染逻辑。小型热光炸弹也是相似的思路，只不过我们需要在它未碰到爆炸时模拟受重力影响的坠落运动，并在爆炸时调整爆炸动画的中心位置对齐。大型热光炸弹与小型热光炸弹除去尺寸、动画等数值字段不同外，更新时的区别是需要让它匀速竖直下落而不是在重力影响下加速运动。

Particle 粒子类

粒子对象在目前的设计中可以看作是一种特殊的动画对象，它在自身的动画播放结束后生命周期便结束了。所以在更新时的逻辑与动画对象十分相似。

Platform 平台类

平台对象Platform在数据层面本质是一条存在于世界中的水平直线，在渲染时我们使用平台图片素材进行绘制并根据当前是否启用了调试选择绘制额外的信息。

StatusBar 玩家状态类

玩家的状态栏组件有三部分构成：玩家头像、生命值状态条和能量值状态条。在游戏场景运行的过程中，我们实时地从对应的玩家对象中读取这些字段的数据并显示到界面组件上。

至此，这一项目的笔记全部完结。

完整源码

on Gitee

复盘和总结

这是我第一次学习一个完整的游戏项目是如何自顶而下设计的。一开始的框架部分感觉很难想到，也因为缺少像游戏层这样可以频繁而又直观快捷地进行测试而感到没有把握。但是一旦基础的框架搭建完成，后面的游戏层实现就变成了水到渠成的事情，有一种顺风顺水的畅快感。即使有了前面 提瓦特幸存者 项目的基础，这个项目还是充斥着大量的实现细节，稍不留神就会出现意想不到的bug，有一些实现思路如果让我自己来想的话也很难想到或者很容易踩坑，好在老师讲解清晰、代码简明易懂，让人很好理解。这个项目再次让我深深意识到自己目前在编程的认知阶段：懂了一点后发现，自己不懂的和不足的还有很多很多。所以需要持续保持锤炼和学习。

【从零开始的C++游戏开发】植物明星大乱斗之框架设计

Sat, 11 Oct 2025 09:47:30 +0200

此项目大约有两千余行代码且知识点繁多，所以分为两篇来写。这一篇是上半部分，介绍整个项目的概况，在关键步骤的内容上则侧重框架部分的设计和实现。

概览

技术栈：C++ + EasyX

项目目标：使用多个头文件的项目组织结构，引入“场景”这一设计来划分游戏的不同阶段，实现功能间的解耦合。了解简单的物理模拟实现思路，并完成单向碰撞平台的功能。封装 摄像机、定时器 和 粒子系统 等在游戏开发中热度很高的功能，进一步推进项目作品水准的专业化。同时，实现更灵动的动画效果和更丰富的音效，提升项目的完成度。

课程来源：B站-Voidmatrix

核心玩法

两位玩家可以使用不同的角色进行本地双人对战，在平台间跳跃和移动，使用效果各异的普通攻击和特殊攻击给对方造成伤害，并获取能量奖励，能量蓄满后可以释放不同技能。生命值归零或坠落到平台下方的玩家会被击败。

设计思路

多个头文件的使用

随着项目体量的增大，如果将全部的代码都放到 main.cpp 中会显得十分臃肿，不仅会导致命名空间和依赖关系混乱，在调试和修改时也不容易定位具体的代码位置，所以需要将它们“分而治之”。所以本项目开始会将游戏不同阶段的代码放到不同的类中进行封装，并将不同的类代码存放在不同的头文件中。

雷点——重复引用：

当我们使用 #include 去包含头文件时，编译器会将所有的这个头文件中的内容原封不动地替换在 #include 地位置，这个过程是一个纯粹的文本内容的复制粘贴。所以，我们一个头文件 A.h 中包含了头文件B.h，main.cpp又同时包含了A.h和B.h，由于A.h中已经有了B.h的内容，所以在main.cpp中会有两份B.h的内容，如果涉及到类定义等代码，就会出现重复定义的问题，导致编译器无法编译。

避坑方法：

使用预处理指令 #pragma once：编译器会确保同一个头文件里的内容不会被重复包含两次
使用 #ifndef指令对头文件的内容进行包含：如果没有定义对应头文件名称的宏就定义这个宏并包含代码文件，反之则不进行任何操作

完整的写法示例：
1 2 3 4

#ifndef _SCENE_H_ #define _SCENE_H_ #endlif // !_SCENE_H_

这两种方法在绝大多数情况下是可以互相替换的。

两者的区别：

特性	`#ifndef` / `#define`	`#pragma once`
兼容性	所有标准 C/C++ 编译器都支持	大多数现代编译器支持，但不是标准
实现方式	通过宏定义判断是否已包含	编译器内部记录是否已处理该文件
文件名依赖	不依赖文件名，只依赖宏名	依赖文件路径，可能受硬链接或符号链接影响
冲突风险	宏名需唯一，命名冲突可能导致问题	无需命名，避免冲突
编译速度	稍慢（需解析宏）	更快（直接跳过）

游戏主框架的设计

创建窗口、创建游戏主循环和稳定帧率，这个写法基本是游戏开发框架的固定格式：

int main()
{
    //========= 初始化数据 ==========
	initgraph(1280, 720);
	
    bool is_running = true;
    const int FPS = 60;
	
	ExMessage msg;
	
	BeginBatchDraw();
   
	while (is_running)	// 游戏主循环
	{
		DWORD start_time = GetTickCount();
        
        //========= 处理输入 =========
		while (peekmessage(&msg))
		{
			
		}	
        
        //======== 处理更新 =========

		cleardevice();

		//======== 处理渲染 =========
		
		FlushBatchDraw();

        //========= 稳定帧率 =========
		DWORD end_time = GetTickCount();
		DWORD delta_time = end_time - start_time;
		if (delta_time < 1000 / FPS)
		{
			Sleep(1000 / FPS - delta_time);
		}
	}

	EndBatchDraw();
	return 0;
}

各个对象/类的设计

本项目开始引入架构概念，从分析功能入手，设计良好的程序结构，让项目扩展性更好且更利于在开发中调试。

场景基类
- 游戏主菜单
- 玩家角色选择菜单
- 局内场景
场景管理器
图集类
动画类
二维向量类
摄像机类
定时器类
平台类
玩家基类
- 豌豆射手类
- 向日葵类
玩家ID枚举类
子弹基类
- 豌豆子弹类
- 日光炸弹类
- 超级日光炸弹类
玩家状态栏类
粒子类

开发流程 - 框架部分

游戏框架的设计
场景框架的设计
- 解决思路：使用各个游戏子类继承基类Scene的方式，对场景进行更灵活的管理
- 问题：如何实现场景间的切换
  - 解决思路：使用场景管理器
资源加载的实现
- 问题1：如何方便动画管理，并实现资源的可复用性
  - 解决思路：Atlas类和Animation类
- 问题2：敌人死亡时的动画逻辑应该怎么写才能播放死亡动画？
  - 解决思路：使用回调函数
问题：怎样让游戏画面更加灵活和自然
- 解决思路：实现摄像机类
- 问题：如何更精确地记录摄像机的位置
  - 解决思路：不使用EasyX自带的POINT类（坐标数据类型为整型），封装一个Vector2类，其坐标位置为浮点数类型
- 问题：如何表达打击的视觉特效
  - 解决思路：实现摄像机抖动效果
问题：除了动画和摄像机抖动外，还有很多场景需要用到定时器（比如玩家特殊技能、攻击冷却时间等）
- 解决思路：为了复用的方便，封装定时器类，对有时效性的功能提供相对统一的管理模式

关键步骤和解决思路 - 框架部分

场景设计

如果将场景比喻成舞台上的一幕，那么在不同的慕中会有不同的“剧本”逻辑和不同的角色登场，这些角色就是游戏开发中常说的 GameObject，玩家、敌人、子弹、道具……等等这些从概念上都属于GameObject的范畴，接受着不同的场景剧本的指挥、进行不同逻辑的演出。

所以一个游戏从程序的流程上可以划分出 游戏主菜单、玩家角色选择界面、游戏局内界面，由此可以定义Scene这个基类，主菜单、角色选择场景和局内游戏场景分别可以继承自Scene这个基类，实现不同的事件处理和绘图逻辑。

Scene基类

将所有的成员方法都定义为虚方法，那么具体的游戏场景类在继承了这个基类后，就可以通过重写自己相应的方法实现自己的逻辑。Scene基类在这个过程中，就像是其他具体用于实例化的场景子类的模板。

class Scene
{
public:
	Scene() = default;
	~Scene() = default;
    
	virtual void on_enter() {}; 					// 进入场景
	virtual void on_update(int delta) {};			// 处理更新
	virtual void on_draw() {};						// 处理渲染
	virtual void on_input(const ExMessage& msg) {};	// 处理玩家输入
	virtual void on_exit() {}; 						// 退出场景

private:
};

主菜单场景类MenuScene

可以重写所需要的成员方法：

class MenuScene : public Scene
{
public:
	MenuScene() = default;
	~MenuScene() = default;

	// 重写Scene基类中必要的虚函数
	void on_enter()
	{
		cout << "进入主菜单" << endl;
	}
	void on_update(int delta)
	{
		cout << "主菜单正在运行......" << endl;
	}
	void on_draw()
	{
		outtxtxy(10, 10, _T("主菜单绘制内容"))；
	}
	void on_input(const ExMessage& msg)
	{
        
	}
	void on_exit()
	{
		cout << "主菜单退出" << endl;
	}

private:

};

在 main.cpp 中实例化：

int main()
{
	initgraph(1280, 720, EW_SHOWCONSOLE);	// 保留控制台界面 

	BeginBatchDraw();
    Scene* scene = new MenuScene();	//在主循环前实例化
    
	while (running) 
	{
		DWORD frame_start_time = GetTickCount(); 
		while (peekmessage(&msg))
		{
			scene->on_input(msg);
		} 

		// 游戏逻辑的更新
		scene->on_update();

		cleardevice();
        
		// 绘制游戏页面
		scene->on_draw(); 
		FlushBatchDraw();

		DWORD frame_end_time = GetTickCount();
		DWORD frame_delta_time = frame_end_time - frame_start_time;
		if (frame_delta_time < 1000 / FPS) 
		{
			Sleep(1000 / FPS - frame_delta_time); 
		}

	}
	EndBatchDraw();

	return 0;
}

所有的场景子类的设计逻辑都一样。

场景管理器的实现

游戏程序是一个巨大的死循环，也是一个巨大的状态机。不同的游戏场景代表着不同状态，管理着这些状态的状态机，在游戏开发中被称为 场景管理器。

class SceneManager
{
public:
	enum class SceneType	// 标记当前场景状态
	{
		Menu,
		Game,
		Selector

	};

public:
	SceneManager() = default;
	~SceneManager() = default;

	// 设置当前场景
	void set_current_scene(Scene* scene)
	{
		current_scene = scene;
		current_scene->on_enter();	// 确保场景执行流程完整
	}

	// 切换场景（先退出现在的场景，然后选择、进入新的场景）
	void switch_to(SceneType type)
	{
		current_scene->on_exit();	// 先退出当前场景
		switch (type)
		{
		case SceneType::Menu:
			current_scene = menu_scene;
			break;
		case SceneType::Game:
			current_scene = game_scene;
			break;
		case SceneType::Selector:
			current_scene = selector_scene;
			break;
		default:
			break;
		}
		current_scene->on_enter();	// 找到需要的新的场景后，进入
	}

	void on_update(int delta)
	{
		current_scene->on_update(delta);
	}
	void on_draw()
	{
		current_scene->on_draw();
	}
	void on_input(const ExMessage& msg)
	{
		current_scene->on_input(msg);
	}

private:
	Scene* current_scene = nullptr;
};

on_enter 和 on_exit在功能上和构造函数和析构函数类似，都是用来初始化和释放资源的，所以为什么不直接使用构造函数和析构函数呢？原因是，构造函数和析构函数决定着场景对象在内存中的生命周期。如果直接使用构造函数和析构函数来执行进入和退出的全部逻辑，那么我们在场景跳转时就需要不断地构造新的对象、释放旧的对象，这并不是性能友好的行为。同时，随着程序逻辑越来越复杂，可能会存在有些资源在不同场景之间都有引用，也就是说，场景内对象的生命周期可能会长于场景对象本身的生命周期 的情况，这也对内存管理提出了更高的要求。所以采用这种方式是更通用且简明的设计思路：场景对象的生命周期与游戏的生命周期相同。也就是说，在游戏初始化时创建所有的场景对象，在游戏退出时释放所有的场景对象，而在游戏内部的场景跳转过程中，我们避免对场景类构造函数和析构函数的调用，转而提供语义明确的 on_exit 和 on_enter 方法。在这两个方法中，我们也要尽可能避免对场景内部的成员的对象进行构造和析构，而是取而代之，重置它们的状态。

举个例子：在游戏场景对象中有一个玩家对象成员，当玩家生命值归零时，程序从游戏场景跳转到主菜单场景。如果我们使用构造函数和析构函数的设计思路，那么就需要在这时 delete 游戏场景对象并且 new 一个主菜单场景对象，这样才能确保当我们再次回到游戏场景时，游戏场景中的玩家对象生命值是正常的，而不是上次退出时的0。而如果我们使用on_exit 和 on_enter 的思路，就不需要频繁地构造和释放场景对象：在场景进入时只需重置玩家生命值变量的值，也就是重置场景内部的状态，就可以同样达到“焕然一新”的效果。

为什么在设置当前场景时参数是场景指针，而跳转场景时用场景枚举呢？

采用这样设计的原因：设置当前场景的方法一般只在游戏初始化时设置场景管理器的入口场景时才被调用，与子场景实例化几乎同时进行，所以直接使用指针更加方便。而跳转场景的方法一般是在不同的子场景内部更新时被调用，子场景之间持有彼此的引用，如果也用指针容易出现内存问题，所以使用枚举来屏蔽管理器内部的指针操作。

至此，main 中的场景部分代码就可以完全交给场景管理器执行了：

menu_scene = new MenuScene();
game_scene = new GameScene();
selector_scene = new SelectorScene();

scene_manager.set_current_scene(menu_scene);

BeginBatchDraw();
while (running) 
{
	DWORD frame_start_time = GetTickCount(); 
	while (peekmessage(&msg)) 
	{
		scene_manager.on_input(msg);
	} 

	scene_manager.on_update();

	cleardevice();

	scene_manager.on_draw(main_camera);
	FlushBatchDraw();

具体的场景跳转逻辑则放到各个场景的on_input 消息处理逻辑中完成：

// MenuScene.h
void on_input(const ExMessage& msg)
{
	if (msg.message == WM_KEYUP)
	{
		scene_manager.switch_to(SceneManager::SceneType::Selector);
	}
}

资源加载部分的设计

Atlas类的实现

Atlas类可以看作是有一个装载具有相关性的一系列图片资源的容器：

class Atlas
{
public:
	Atlas() = default;
	~Atlas() = default;

	void load_from_file(LPCTSTR path_template, int num)
	{
        // 注意：在加载前，先清空图片对象列表
        // 并将列表长度设置为指定大小
        // 这样可以避免load_from_file函数在重复调用时出现内部数据与预期不符的问题
		img_list.clear();		
		img_list.resize(num);

		TCHAR path_file[256];
		for (int i = 0; i < num; i++)
		{
			_stprintf_s(path_file, path_template, i + 1);
			loadimage(&img_list[i], path_file);
		}
	}

	void clear()	// 清空图集中已加载的图片对象
	{
		img_list.clear();
	}

	size_t get_size()	// 获取图集中图片的数量
	{
		return img_list.size();
	}

	IMAGE* get_image(int idx)	// 获取实际渲染的动画帧
	{
		if (idx < 0 || idx >= img_list.size())
			return nullptr;

		return &img_list[idx];	// 返回对应索引图片的地址
	}

    // 向图集中添加已有的图片对象
    // 看似和从文件加载图片的方法功能上有重复
    // 但在生成水平翻转的动画图集时很有用
    void add_image(const IMAGE& img)	
	{
		img_list.push_back(img);
	}

private:
	vector<IMAGE> img_list;
};

资源的加载

在正式开始写Animation类前，还需要一个处理动画帧的水平翻转，这样就无需准备两套动画素材了。图片素材的翻转需要对图片像素进行逐个处理，是一个比较耗时的操作，所以需要放在 游戏初始化阶段 进行，不要放到游戏已经开始的帧更新中进行。这个函数是一个工具类函数，我们放到 util.h 中方便所有工程中的成员调用。具体的实现在本站另一篇文章 提瓦特幸存者 中有详细讲解，此处不再赘述。在 main.cpp 中，我们把 flip_atlas作为全局函数，这样方便在游戏主循环前直接调用：

// main.cpp

void flip_atlas(Atlas& src, Atlas& dst)
{
	dst.clear(); // 避免重复使用同一个容器产生问题
	for (int i = 0; i < src.get_size(); i++)
	{
		IMAGE img_flipped;
		flip_image(src.get_image(i), &img_flipped);
		dst.add_image(img_flipped);
	}
}

此项目暂时在 main.cpp 中通过一个全局函数加载了全部资源。需要注意的是，资源的名称务必要做到“有意义”、“有规律”。可以这样命名：文件类型_角色名_朝向，比如 Atlas atlas_peashooter_idle_left; 力求 见名知意，虽然看着有些冗长，但实际上将大大提高我们在开发时借助编辑器查找的效率，并方便我们在出现问题时根据它们的语义进行排查。资源加载部分的逻辑包括三个部分：加载游戏字体、加载和处理图片素材、加载音效。音效的处理同样使用 mciSendString，不要忘记包含对应的库。

Animation类的实现

Animation类可以看作是决定实际渲染图集的轻量控制器。它的所有功能都是在Atlas类之上实现的。关于这个类的设计同样从 成员变量 和 成员函数 两方面入手。成员变量决定这个类的数据属性，成员函数则是根据这些数据属性选择对外提供何种的 增删查改 接口。需要注意的是，由于动画在播放时，帧索引的推进是自动进行的，不需要外部进行set设置，所以成员方法对帧相关的方法只提供了 get_idx_frame 和 get_frame 两个get方法。动画类最重要的更新和绘制两个函数 on_update 和 on_draw，也在本站文章《提瓦特幸存者》中有详细讲解，此处也不再赘述。

游戏中诸如敌人和子弹等物体在生命周期结束时消失的动画逻辑应该怎么写呢？

要解决这个问题，我们不能在敌人死亡时直接删除Enemy对象，而是延后这些存在消失动画的物体被删除的时间。也就是说，当敌人生命值归零时进入死亡状态，同时播放死亡动画，而当死亡动画播放结束后，再将敌人对象从内存中移除。这就需要 动画层面提供一个动画播放结束的消息。这里提供一个思路：使用 回调函数。

回调函数

回调函数就是一个使用参数传递的函数对象，我们可以把它保存起来，然后再合适的时候调用它。这样就可以让函数内部的逻辑在这个“合适的时候”才被执行。比如，处理敌人死亡的情景为例，我们可以把删除敌人的逻辑定义为函数，以回调函数的形式保存在动画对象内部。当死亡动画播放结束后，这个函数被调用，删除敌人的逻辑被执行，这样就达成了我们的目的。记得先在开始处包含头文件 #include <functional>，具体的实现可以这样写：

class Animation
{
public:
	......

	void on_update(int delta)
	{
		timer += delta;
		if (timer > interval)
		{
			timer = 0;
			idx_frame++;
			if (idx_frame >= atlas->get_size())
			{
				idx_frame = is_loop ? 0 : atlas->get_size() - 1;

				if (!is_loop && callback) // 如果动画无需循环播放，且回调函数存在，那么调用回调函数
				{
					callback();
				}
			}
		}
	}

	void set_callback(function<void()> callback)
	{
		this->callback = callback;
	}

private:
	......

	function<void()> callback; // 利用回调函数实现玩家在播放完动画后再死亡（销毁）
};

Animation类的完整代码是这样的：

class Animation
{
public:
	Animation() = default;
	~Animation() = default;

	void reset()
	{
		timer = 0;
		idx_frame = 0;
	}

	void set_atlas(Atlas* new_atlas)
	{
		reset();
		atlas = new_atlas;
	}

	void set_loop(bool flag)
	{
		is_loop = flag;
	}

	void set_interval(int ms)
	{
		interval = ms;
	}

	int get_idx_frame()
	{
		return idx_frame;
	}

	IMAGE* get_frame()
	{
		return atlas->get_image(idx_frame);
	} 

	bool check_finished()
	{
		if (is_loop)
			return false;

		return (idx_frame == atlas->get_size() - 1);
	}

	void on_update(int delta)
	{
		timer += delta;
		if (timer > interval)
		{
			timer = 0;
			idx_frame++;
			if (idx_frame >= atlas->get_size())
			{
				idx_frame = is_loop ? 0 : atlas->get_size() - 1;

				if (!is_loop && callback) // 如果动画无需循环播放，且回调函数存在，那么调用回调函数
				{
					callback();
				}
			}
		}
	}

	void on_draw(const Camera& camera, int x, int y) const
	{
		putimage_alpha(camera, x, y, atlas->get_image(idx_frame));
	}

	void set_callback(function<void()> callback)
	{
		this->callback = callback;
	}

private:
	Atlas* atlas = nullptr;
	bool is_loop = true; // 是否循环播放

	int timer = 0;		 // 计时器
	int interval = 0;	 // 帧间隔
	int idx_frame = 0;	 // 帧索引

	function<void()> callback; // 利用回调函数实现玩家在播放完动画后再死亡（销毁）
};

摄像机的设计

窗口坐标系和世界坐标系

EasyX的窗口原点在平面左上角，它的窗口坐标系就是这样的：

EasyX窗口坐标系

而世界坐标系则是更广阔的坐标系。就像我们把场景中包括玩家角色在内的诸多物体放置到一个虚拟的世界中一样。这个世界有多大，那么世界坐标系的取值范围就有多大。玩家的移动、碰撞，各类机关、道具的触发，乃至于整个游戏世界的运行逻辑，都是在世界坐标系这套框架下运转的。而只有在需要绘制游戏画面时，我们才需要考虑将它们放置到窗口坐标系下进行绘图等操作。而摄像机可以看作是一个世界坐标系和窗口坐标系之间转换的媒介。这个思路也和游戏开发的设计理念 数据和渲染分离 一致。

那么，在不考虑画面缩放的情况下，也就是摄像机的宽高和窗口的宽高一致时，我们就可以将摄像机看作是整个世界中的一个点，当我们需要实现摄像机跟随玩家移动的横板卷轴游戏时，只需要让摄像机跟随玩家移动，也就是这个点的坐标和玩家坐标保持一致。在渲染游戏内其他内容时，我们只需要把场景中其他物体的世界坐标与这个摄像机位点的世界坐标作差，得出的坐标就是我们传递给绘图函数的窗口坐标。注意，这是一个非常重要的概念：窗口坐标 = 世界坐标 - 摄像机坐标。

Vector2类的实现

为了使用浮点数来更精确地控制摄像机的位置，我们先来封装一个在游戏中极其常用的二维向量类。为了方便我们和常见的数字类型进行相似的运算操作，我们在这个类里进行了运算符重载：

class Vector2
{
public:
	Vector2() = default;
	~Vector2() = default;

	Vector2(float x, float y) // 再写一个带参的构造函数，方便直接初始化x和y的值
		: x(x),y(y){ }

	//======== 运算符重载 ========
	// 方便执行和常见运算符类似的操作
	Vector2 operator+(const Vector2& vec) const
	{
		return Vector2(x + vec.x, y + vec.y);
	}

	void operator+=(const Vector2& vec)
	{
		x += vec.x, y += vec.y;
	}

	Vector2 operator-(const Vector2& vec) const
	{
		return Vector2(x - vec.x, y - vec.y);
	}

	void operator-=(const Vector2& vec)
	{
		x -= vec.x, y -= vec.y;
	}

	Vector2 operator*(const Vector2& vec) const
	{
		return Vector2(x * vec.x, y * vec.y);
	}

	Vector2 operator*(float val) const
	{
		return Vector2(x * val, y * val);
	}

	void operator*=(float val) 
	{
		x *= val, y *= val;
	}

	float length()
	{
		return sqrt(x * x + y * y);
	}

	Vector2 normalize()
	{
		float len = length();

		if (len == 0)
		{
			return Vector2(0, 0);
		}

		return Vector2(x / len, y / len);
	}

public:
	float x = 0.0f;
	float y = 0.0f;
};

摄像机类的实现

摄像机抖动效果

在游戏中的应用十分常见。在使用枪械射击或者表达爆炸或冲击波时，游戏设计者们通常会让玩家的画面快速震动一段时间，来透过屏幕表达一种力量感。这是一种实现起来比较简单但表现效果很不错的视觉特效。

实现思路

摄像机的抖动只会持续一段时间，在抖动一段时间后我们需要结束这种效果。所以和动画的实现类似，我们需要一个定时器来控制抖动特效开始和结束的时刻。

定时器类的实现

通用定时器类的设计思路有两种：一种是继承，另一种是回调。

继承的实现思路：

提供一个定时器基类，在 on_update 中执行定时器时间到达时的逻辑，这部分具体的逻辑封装在 callback 成员方法中。

class Timer
{
public:
	Timer() = default;
    ~Timer() = default;
    
    void on_update(int delta)
    {
        // ......
        callback();
    }
    
protected:
    virtual void callback()
    {
        // 执行定时器时间
    }
}；

如果我们想实现特定的定时器逻辑，那么只需要将这个特定的定时器继承自Timer基类，并重写 callback 方法。在使用时就能借助多态特性，执行重写后的定时器逻辑。

class MyTimer : public Timer
{
 public:
    MyTimer() = default;
    ~MyTimer() = default;
    
 protected:
    void callback() override
    {
        // 执行自定义的定时器逻辑
    }
}；
    
Timer* my_timer = new MyTimer();

回调的实现思路：

和Animation类播放结束的回调函数类似。通过 set_call_back 成员方法将回调函数保存在对象内部，并在合适的时候调用它。

class Timer
{
public:
    Timer() = default;
    ~Timer() = default;
    
    void on_update(int delta)
    {
        // ......
        callback();
    }
    
    void set_callback(function<void()> callback)
    {
        this->callback = callback;
    }
 
protected:
    function<void()> callback;
}

在使用时只需向对象中注册自己的回调函数即可。

Timer my_timer;
mu_timer.set_back([]()
    {
        // 执行自定义的定时器逻辑              
    })；

两相对比，使用回调函数的定时器实现在代码上更加简洁。如果我们需要多个执行不同逻辑的定时器，如果使用继承的思路，那么就需要写多个不同的定时器子类。而使用回调的方法，我们只需要实例化定时器对象后编写一个lambda函数。所以从代码设计的角度，像通用定时器这种只需扩展回调方法逻辑而无需扩展数据成员内容的类，我们就会更倾向于使用回调函数的思路而不是使用类继承的思路去处理。这不仅让代码编写的量更少更轻松、在语义上也更加明确。

定时器类的完整代码：

// 通用定时器类
// 不同的定时后的逻辑用回调函数实现
class Timer
{
public:
	Timer() = default;
	~Timer() = default;

	void restart() // 重置定时器
	{
		pass_time = 0;
		shotted = false;
	}

	void set_wait_time(int val)
	{
		wait_time = val;
	}

	void set_one_shot(bool flag)
	{
		one_shot = flag;
	}

	void set_callback(function<void()> callback)
	{
		this->callback = callback;
	}

	void pause()
	{
		paused = true;
	}

	void resume()
	{
		paused = false;
	}

	void on_update(int delta)
	{
		if (paused)
			return;

		pass_time += delta;
		if (pass_time >= wait_time)
		{
			if (!one_shot || (one_shot && !shotted) && callback)
				callback();

			shotted = true;
			pass_time = 0;
		}
	}

private:
	int pass_time = 0;			// 已经过去的时间
	int wait_time = 0;			// 等待时间
	bool paused = false;		// 是否暂停
	bool shotted = false;		// 是否触发
	bool one_shot = false;		// 是否单次触发
	function<void()> callback;	// 触发回调函数
};

包含通用定时器的摄像机类

摄像机抖动效果的设计思路：

如果想让整个世界，即屏幕上所有的内容都进行抖动的话，只需要让摄像机坐标抖动即可。简而言之，摄像机抖动的特效只需要快速改变Camera对象的坐标即可。那么我们以什么样的规律进行改变呢？一种相对简单的思路是，我们可以在摄像机仍在抖动的帧中，在以抖动强度为半径的圆内随机设置摄像机的位置，因为帧更新的速度很快，所以在宏观上就可以做到抖动的效果。除此之外，如果希望在更大幅度的抖动时更加平滑，我们可以使用 柏林函数 等噪声算法取代随机数，这部分内容涉及到更多算法的实现。在本项目这种小幅度摄像机抖动的场景下画面效果提升并不明显，所以此项目采用随机数的实现思路。

摄像机类的完整代码：

class Camera
{
public:
	Camera()
	{
		timer_shake.set_one_shot(true);
		timer_shake.set_callback([&]()
			{
				is_shaking = false;
				reset();
			}
		);
	}

	~Camera() = default;

	const Vector2& get_position() const // 前一个const：返回一个不可修改的 Vector2 引用；后一个const：表示该函数不会修改类成员，可用于 const 对象
	{
		return position;
	}

	void reset() // 将摄像机的位置归零
	{
		position.x = 0;
		position.y = 0;
	}

	void on_update(int delta)
	{
		timer_shake.on_update(delta);

		if (is_shaking)
		{
			position.x = (-50 + rand() % 101) / 50.0f * shaking_strength;
			position.y = (-50 + rand() % 101) / 50.0f * shaking_strength;
		}
	}

    // 设置摄像机开始抖动的属性
    // 参数：strength-抖动强度；duration-抖动持续时间
	void shake(float strength, int duration)
	{
		is_shaking = true;
		shaking_strength = strength;

		timer_shake.set_wait_time(duration);
		timer_shake.restart();
	}

private:
	Vector2 position;			// 摄像机的位置

	// 实现摄像机的抖动效果
	Timer timer_shake;			// 摄像机抖动定时器
	bool is_shaking = false;
	float shaking_strength = 0; // 摄像机抖动幅度
};

在 on_update 中，将摄像机的位置在抖动强度为半径的圆内进行随机设置。在抖动强度 shaking_strength 前乘以的这个随机系数是描述了一个单位圆的范围，取值范围为 -1.0 到 1.0 的浮点数。

至此，游戏框架部分的搭建完成，这一项目的下半部分笔记请继续阅读本站文章《植物明星大乱斗之Gameplay层实现》。

【从零开始的C++游戏开发】提瓦特幸存者

Wed, 08 Oct 2025 10:47:30 +0200

概览

技术栈：C++ + EasyX

项目目标：设计游戏的动画框架，接入键盘的按键操作，提供更具交互性的玩法。在数据和逻辑层面，实现简单的2D平面内的碰撞检查；实现敌人的随机生成和索敌跟踪逻辑。添加音乐和音效，丰富游戏的完成度。添加主菜单界面。使用享元模式来优化程序性能。

课程来源：B站-Voidmatrix

核心玩法

玩家点击开始按钮进入游戏，使用 上下左右 按键控制角色移动。在玩家角色的周围会有一圈子弹，野猪敌人会从屏幕外源源不断地涌向玩家。当子弹碰到敌人后，会击杀敌人并增加游戏得分。当敌人碰触到玩家角色时，游戏结束。

项目主体开发

设计思路

游戏主框架的设计

创建窗口、创建游戏主循环和稳定帧率，这个写法基本是游戏开发框架的固定格式，因为在 系列笔记第0集基础 中有详细的解释，此处就不再赘述。

int main()
{
    //========= 初始化数据 ==========
	initgraph(1280, 720);
	
    bool is_running = true;
    const int FPS = 60;
	
	ExMessage msg;
	
	BeginBatchDraw();
   
	while (is_running)	// 游戏主循环
	{
		DWORD start_time = GetTickCount();
        
        //========= 处理输入 =========
		while (peekmessage(&msg))
		{
			
		}	
        
        //======== 处理更新 =========

		cleardevice();

		//======== 处理渲染 =========
		
		FlushBatchDraw();

        //========= 稳定帧率 =========
		DWORD end_time = GetTickCount();
		DWORD delta_time = end_time - start_time;
		if (delta_time < 1000 / FPS)
		{
			Sleep(1000 / FPS - delta_time);
		}
	}

	EndBatchDraw();
	return 0;
}

各个对象/类的设计

本项目并没有使用多态来抽象出更上层的对象。基本按照一个对象设计一个类的思路进行。为了更加符合初学者的直觉和理解，将所有的代码放在了main.cpp 中，使用了大量的全局变量实现项目。

玩家类
子弹类（玩家周围的一圈子弹）
敌人类
动画类和图集类（实现和优化动画效果）
按钮基类
- 开始游戏按钮
- 退出游戏按钮

开发流程

游戏框架的设计
图片的加载和渲染
- 解决思路：使用EasyX的库函数：loadimage, putimage
- 问题：png图片会产生黑边
  - 解决思路：自己在putimage的基础上重载一个含有透明通道的函数
  - 注意：要包含对应的库 pragma comment(lib, "MSIMG32.LIB")
动画的实现
- 问题1：如何让图片动起来？
  - 解决思路：计数器 ===> 优化：计时器
- 问题2：动画的实现出现大量重复代码
  - 解决思路：封装Animation类
角色移动的实现
- 问题1：玩家移动时出现“卡顿感”
  - 解决思路：使用bool变量来标识按键的按下和抬起，间接控制玩家的运动
- 问题2：玩家在斜线运动的速度快于水平/竖直方向
  - 解决思路：使用单位向量统一各个方向的速度
问题：在试图实现敌人动画时发现和玩家的数据会一起混在Animation类中
- 解决思路：使用面向对象的思想，创建各类管理各自的数据和逻辑
Player类的实现
Bullet类的实现
Enemy类的实现
- 问题1：敌人刷新机制的实现
  - 解决思路：将敌人随机生成在地图外的一条边上
- 注意点：函数中如果需要传入别的类的对象，要用引用传入，如果不会改变这个参数，就加上const
- 问题2：敌人自动寻路机制的实现
  - 解决思路：玩家位置与敌人位置之差，计算其单位向量，就是敌人的移动方向
2D碰撞检测的实现
- 问题1：敌人和子弹的碰撞
  - 解决思路：将敌人看作一个矩形处理，而子弹则按照点来处理
- 问题2：玩家和敌人的碰撞
  - 解决思路：将敌人的中心点作为碰撞点，与玩家的矩形进行碰撞检测
子弹的更新、视觉效果的提升
- 问题：让子弹的运动更加炫酷
  - 解决思路：给子弹一个切向速度、一个径向速度
删除被击杀的敌人
- 解决思路：先用 swap 将待删除的敌人移到vector末尾，再使用 pop_back，最后使用 delete 释放内存。这是一种 在元素次序无关 时性能较好的删除方法。
添加和绘制玩家得分
添加音效
- 解决思路：使用Windows的库函数：mciSendString
- 注意：要包含对应的库 pragma comment(lib, "Winmm.lib")
优化：性能提升
- 解决思路：使用 享元模式 优化资源加载
- 注意：不能在Animation中释放其持有的Atlas，因为它是共享的，所以只能由更上层的代码控制
添加主菜单UI、按钮类的设计

关键步骤和解决思路

图片的加载和渲染

实现读取/加载图片

阅读文档，可以看到EasyX使用 loadimage 这个函数来加载图片，这个函数有一个重载，此处我们直接使用较简单的 从图片文件中获取图像 这一个：

// 从图片文件获取图像(bmp/gif/jpg/png/tif/emf/wmf/ico)
int loadimage(
	IMAGE* pDstImg,			// 保存图像的 IMAGE 对象指针
	LPCTSTR pImgFile,		// 图片文件名
	int nWidth = 0,			// 图片的拉伸宽度
	int nHeight = 0,		// 图片的拉伸高度
	bool bResize = false	// 是否调整 IMAGE 的大小以适应图片
);

此处需要注意的是，第一个参数是一个图片的指针对象。我们不直接将图片加载到窗口中，而是先保存到变量里，然后在后续绘制中使用，所以要传入要给非空指针；第二个参数是图片的路径字符串；后三个参数均提供了默认值，用来设置图片的缩放属性，此项目中用不到，所以暂时忽略。那么，要加载程序目录下的图片 text.jpg , 可以这样表示：

1
2

IMAGE img;
loadimage(&img, _T("test.jpg"));

实现渲染图片

同样阅读文档，我们发现可以使用 putimage 这个函数来绘制图片：

// 绘制图像
void putimage(
	int dstX,				// 绘制位置的 x 坐标
	int dstY,				// 绘制位置的 y 坐标
	IMAGE *pSrcImg,			// 要绘制的 IMAGE 对象指针
	DWORD dwRop = SRCCOPY	// 三元光栅操作码
);

其中，第一二个参数是图片绘制在世界坐标中的位置。最后一个参数 三元光栅操作码 我们在这个项目中也忽略不计。那么如果要绘制刚刚加载的图片，这样我们可以写：

// 加载图片
IMAGE img;
loadimage(&img, _T("test.jpg"));

// 绘制图片
putimage(100, 200, &img);

如果这张图片的像素是 300 * 300 ，那么这张图片在游戏界面中的坐标是这样的：

需要注意的是，我们需要自己封装带有透明通道的 putimage函数，来解决显示的 png 图片带有黑框的问题：

#pragma comment(lib, "MSIMG32.LIB") 

void putimage_alpha(int x, int y, IMAGE* img)
{
	int w = img->getwidth();
	int h = img->getheight();
	AlphaBlend(GetImageHDC(NULL), x, y, w, h, GetImageHDC(img),
		0, 0, w, h, { AC_SRC_OVER,0,255,AC_SRC_ALPHA });
}

在函数之前（最好放在文件的开始处，要链接相关的库 #pragma comment(lib, "MSIMG32.LIB") 。

实现动画及渲染

如何让画面动起来？

游戏中角色动画的常见实现可以笼统地分为两类：序列帧动画 和 关键帧动画 。

序列帧动画 ：通常由一组图片素材构成，在程序中随着时间推移，我们不断地切换显示这一序列的图片，借助视觉暂留效应，产生动画效果。

关键帧动画 如骨骼动画等，因为涉及更复杂的图形学技术，此处暂不讨论。

注意，我们不能通过调用 Sleep() 函数来解决这个问题。因为当调用 Sleep() 函数时，程序会卡在那里，等待一定时间，这是一个“阻塞式”的行为，而在我们的游戏框架设计中，所有的画面渲染等操作，都应该式在一次又一次的循环中进行，每次循环的时间都控制在 1/60秒（FPS） 内。也就是说，我们切换动画轮播的任务，应该分摊在多帧之间进行，而不是在一次循环内全部结束。此处涉及到一个游戏编程中的核心思想：主循环内应尽量避免阻塞式的行为或者过于繁重且耗时过长的任务。

为了确保动画序列帧可以在间隔固定的时间进行切换，采用了计时器的思路来做这样的一个计数器：

int idx_current_anim = 0;	// 1. 存储当前动画帧的帧索引

const int PLAYER_ANIM_NUM = 6;	// 动画帧总数量

int main()
{
    .....
        
    while (is_running)
    {
        while (peekmessage(&msg))
  	    {
        
        }
    
        static int counter = 0;	// 2. 记录当前动画帧一共播放了几个游戏帧
                                // 用static修饰可以确保计数器只有在第一个游戏帧时被初始化为0
        // 每5个游戏帧切换一个动画帧
        if (++counter % 5 == 0)
            idx_current_anim++;

        if（idx_current_anim % PLAYER_ANIM_NUM == 0)
            idx_current_anim = 0;
        }  

        ......
}

动画的渲染本质就是将IMAGE数组中的图片依次绘制即可。先加载：

const int PLAYER_ANIM_NUM = 6;	// 动画帧总数量

IMAGE img_player_left[PLAYER_ANIM_NUM];
IMAGE img_player_right[PLAYER_ANIM_NUM];

void load_animation()
{
    for (size_t i = 0; i < PLAYER_ANIM_NUM; i++)
    {
        std::wstring path = L"img/player_left_" + std::to_wstring(i) + L".png";
        loadimage(&img_player_left[i], path.c_str());
    }
    
    for (size_t i = 0; i < PLAYER_ANIM_NUM; i++)
    {
        std::wstring path = L"img/player_right_" + std::to_wstring(i) + L".png";
        loadimage(&img_player_right[i], path.c_str());
    }
}

然后在 main 中绘制这一系列动画图片的数组：

int main()
{
    ......
   
	while (is_running)	// 游戏主循环
	{
		DWORD start_time = GetTickCount();
        
        //========= 处理输入 =========
		while (peekmessage(&msg))
		{
			
		}	
        
        //======== 处理更新 =========

		cleardevice();

		//======== 处理渲染 =========
		putimage_alpha(500, 500, &img_player_left[idx_current_anim]);
        
		FlushBatchDraw();

       ......
    }
}

将动画的实现封装成动画类

数据结构层面，用vector来存储动画所需图片的指针vector<IMAGE*> 。在构造函数中，需要加载动画所需的图片资源同时为其分配了内存空间，那么对应的，需要在析构函数中释放图片资源被释放内存空间.

在播放动画时，参数中除了需要知道动画播放的位置外，还增加了一个参数int delta用来表示距离上一次调用Play函数过去了多久时间，这是将“计数器”概念转为了“计时器”。之所以优化为这种设计，是因为一个动画的播放速度也就是 帧间隔，应该是与实际时间有关的，而不是与游戏的帧率有关，我们希望的是无论游戏帧的频率有多快，动画的播放速度是一致的，而不是画面刷新越快，动画播放越快。所以使用与实际时间有关的定时器，会比每一下调用都累加一次的计数器更能满足这种需求。

class Animation
{
public:
	Animation(LPCTSTR path, int num, int interval)	// 加载动画帧图片资源
    {
        interval_ms = interval;
        
        TCHAR path_file[256];
        for (size_t i = 0; i < num; i++)
        {
            _sprintf_s(path_file, path, i);
            
            IMAGE* frame = new IMAGE();
            loadimage(frame, path_file);
            frame_list.push_bacl(frame);
        }
    }
    
    void Play(int x, int y, int delta)	// 播放动画 
    {
        timer += delta;
        if (timer >= interval_ms)
        {
            idx_frame = (idx_frame + 1) % frame_list.size();
            timer = 0;
        }
        
        // 绘制每一帧图片
        pitimage_alpha(x, y, frame_list[idx_frame]);
    }
    
    ~Animation()	// 释放资源
    {
        for (size_t i = 0; i < frame_list.size(); i++)
        {
            delete frame_list[i];
        }
    }
private:
    vector<IMAGE*> frame_list;
    int interval_ms = 0;	// 帧间隔
    int timer = 0;
    int idx_frame = 0;
}

实现角色移动

如果我们直接在按下按键时，用在不同坐标轴上累加位移的方式来控制玩家，会出现手感上的“卡顿感”。这是因为 WM_KEYDOWN 消息的产生是与我们的主循环 异步进行 的，且触发的频率与操作系统和硬件设备相关，这就导致在有些游戏帧中事件处理部分对多个WM_KEYDOWN消息进行了处理，而在其余游戏帧中WM_KEYDOWN消息较少或没有，这就导致角色在某些游戏帧中前进的距离较远/近一些，在宏观上展现为移动过程中的卡顿感。另外，当我们按下方向键时，会首先有一个 WM_KEYDOWN 消息进入消息事件队列中，随后，当我们保持按键按下状态一段时间后，才会有接连不断的 WM_KEYDOWN 消息被触发。

所以，要确保角色在每一个游戏帧中都连贯地移动相同的距离，从玩家的角色触发，就是：当玩家按下按键时，WM_KEYDOWN 消息触发，角色开始移动；当玩家抬起按键时，WM_KEYUP 消息触发，角色结束移动。所以使用相应的四个布尔变量来代表玩家的移动方向，我们通过改变按键的按下和抬起来改变这四个布尔变量的值，然后根据布尔变量的值来实现玩家在坐标轴上的位移：

void ProcessEvent(const ExMessage& msg)
{
	if (msg.message == WM_KEYDOWN)
	{
		switch (msg.vkcode)
		{
		case VK_UP:
			is_moving_up = true;
			break;
		case VK_DOWN:
			is_moving_down = true;
			break;
		case VK_LEFT:
			is_moving_left = true;
			break;
		case VK_RIGHT:
			is_moving_right = true;
			break;
		}
	}

	if (msg.message == WM_KEYUP)
	{
		switch (msg.vkcode)
		{
		case VK_UP:
			is_moving_up = false;
			break;
		case VK_DOWN:
			is_moving_down = false;
			break;
		case VK_LEFT:
			is_moving_left = false;
			break;
		case VK_RIGHT:
			is_moving_right = false;
			break;
		}
	}		
}

void Move()
{
    if (is_moving_up)
        position.y -= SPEED;
    if (is_moving_down)
        position.y += SPEED;
    if (is_moving_left)
        position.x -= SPEED;
    if (is_moving_right)
        position.x += SPEED;
}

另外，为了避免玩家在斜角运动时位移更多的问题，需要使其在该速度方向的向量是单位向量：

int dir_x = is_move_right - is_move_left;
int dir_y = is_move_down - is_move_up;
double len_dir = sqrt(dir_x * dir_x + dir_y + dir_y);
if(len_dir != 0)
{
    double normalized_x = dir_x / len_dir;
    double normalized_y = dir_y / len_dir;
    player_pos.x += (int)(PLAYER_SPEED * normalized_x);
    player_pos.y += (int)(PLAYER_SPEED * normalized_y);
}

各个类的封装

为了避免各个数据糅杂散落在项目的各处，将每个对象相关的逻辑和数据封装到各组的类中。以玩家类为例，大致的类的设计：

class Player
{
public:
    Player()
    {
        // 初始化资源：动画资源、图片资源等
    }
    ~Player()
    {
        // 释放资源
    }
    void ProcessEvent(const ExMessage& msg)
    {
        // 玩家的输入逻辑
    }
    void Move()
    {
        // 处理玩家移动
    }
    void Draw(int delta)
    {
        // 绘制玩家
    }   
private:
    ......
}

敌人类的实现细节

敌人的随机生成机制

// 敌人生成的边界
enum class SpawnEdge
{
	Up = 0,
	Down,
	Left,
	Right
};

// 将敌人生成在四条边界中随机的一条上
SpawnEdge edge = (SpawnEdge)(rand() % 4);
// 具体的随机坐标值
switch (edge)
{
case SpawnEdge::Up:
	position.x = rand() % WINDOW_WIDTH;
	position.y = -FRAME_HEIGHT;
	break;
case SpawnEdge::Down:
	position.x = rand() % WINDOW_WIDTH;
	position.y = WINDOW_HEIGHT;
	break;
case SpawnEdge::Left:
	position.x = -FRAME_WIDTH;
	position.y = rand() % WINDOW_HEIGHT;
	break;
case SpawnEdge::Right:
	position.x = WINDOW_WIDTH;
	position.y = rand () % WINDOW_HEIGHT;
	break;
default:
	break;
}

敌人的寻路机制

void Move(const Player& player)
{
    const POINT& player_position = player.GetPosition();
    int dir_x = player_position.x - position.x;
    int dir_y = player_position.y - position.y;
    double dir_len = sqrt(dir_x * dir_x + dir_y * dir_y);
    if (dir_len != 0)
    {
        double normalized_x = dir_x / dir_len;
        double normalized_y = dir_y / dir_len;
        position.x += (int)(normalized_x * SPEED);
        position.y += (int)(normalized_y * SPEED);
    }

    if (dir_x > 0)
        facing_left = false;
    else if (dir_x < 0)
        facing_left = true;
}

2D碰撞检测的实现

这部分都放在敌人类中实现，玩家或者子弹的对象作为引用传入函数中，避免不必要的拷贝。

敌人和子弹

bool CheckBulletCollision(const Bullet& bullet) // 在参数前添加const：这个参数在函数中不会被修改
{
    // 将子弹等效为一个点，判断该点是否在敌人的矩形内
    bool is_overlap_x = bullet.position.x >= position.x && bullet.position.x <= position.x + FRAME_WIDTH;
    bool is_overlap_y = bullet.position.y >= position.y && bullet.position.y <= position.y + FRAME_HEIGHT;
		
    return is_overlap_x && is_overlap_y;
}

敌人和玩家

在游戏的碰撞检测中，一般不会太严格。如果将敌人和玩家均作为一个矩形去检测碰撞，可能会发生两者只有一个角落重叠但是从视觉上看并未发生碰撞的情况，让玩家困惑。所以一般情况下，受击碰撞器都会小于图片尺寸。此处采用将敌人中心作为一个碰撞点来处理。

bool CheckPlayerCollision(const Player& player)
{
	// 将敌人的中心点位置视为敌人的碰撞点
	POINT check_position = { position.x + FRAME_WIDTH / 2, position.y + FRAME_HEIGHT / 2 };
	bool is_overlap_x = check_position.x >= player.GetPosition().x && check_position.x <= player.GetPosition().x + player.FRAME_WIDTH;
	bool is_overlap_y = check_position.y >= player.GetPosition().y && check_position.y <= player.GetPosition().y + player.FRAME_HEIGHT;
	
	return is_overlap_x && is_overlap_y;
}

子弹的更新和视觉效果的提升

因为围绕玩家的子弹是由一圈3颗子弹组成的，所以将其作为全局函数处理。

关于子弹的运动，可以通过随着时间的推移改变α的值来表示，为了计算方便，此处的角度单位均为弧度：

相应的代码如下：

// 更新子弹位置
void UpdateBullets(vector<Bullet>& bullet_list, const Player& player)
{
	// 让子弹有一个不断收缩的效果，视觉上更加炫酷
	const double RADIAL_SPEED = 0.0045; // 径向波动速度
	const double TANGENT_SPEED = 0.0055; // 切向波动速度

	double radian_interval = 2 * PI / bullet_list.size(); // 三颗子弹间的弧度间隔

	// 根据玩家的位置，依次更新每颗子弹的位置
	POINT player_position = player.GetPosition();
	double radius = BULLET_BASE_RADIUS + BULLET_RADIUS_CHANGE_RANGE * sin(GetTickCount() * RADIAL_SPEED);
	for (size_t i = 0; i < bullet_list.size(); i++)
	{
		double radian = GetTickCount() * TANGENT_SPEED + radian_interval * i;
		bullet_list[i].position.x = player_position.x + player.FRAME_WIDTH / 2 + (int)(radius * sin(radian));
		bullet_list[i].position.y = player_position.y + player.FRAME_HEIGHT / 2 + (int)(radius * cos(radian));
	}
}

删除被击杀的敌人

// 依次检查敌人列表，移除被击杀的敌人
for (size_t i = 0; i < enemy_list.size(); i++) // 因为此处会动容器本身，所以不能用迭代器遍历
{
	Enemy* enemy = enemy_list[i];
	if (!enemy->CheckAlive())
	{
		// 和容器最后一个元素交换后，移除最后一个
		// * 是元素顺序无关紧要时，性能较好的一种删除方法
		swap(enemy_list[i], enemy_list.back());
		enemy_list.pop_back();
		delete enemy;
	}
}

播放音效

此项目使用Windows的库函数实现播放音效。可以写成这样的代码：

// 打开项目文件夹mus下的bgm.mp3文件，并且以后就叫它“bgm”
mciSendString(_T("open mus/bgm.mp3 alias bgm"), NULL, 0, NULL);	// 加载音效

// 播放别名叫bgm的音效，并从开头处循环播放
mciSendString(_T("play bgm repeat from 0"), NULL, 0, NULL);		// 如果不需要循环，就不要加repeat

提升性能：使用享元模式优化资源加载

游戏中的模型和贴图资源所占比例很高，对硬盘空间和游戏启动时间的消耗都很大。享元模式在游戏开发中非常常用。比如，游戏中的一棵树的资源，一般的写法和使用享元模式的写法对比：

//========= 一般写法 =========
// 树的结构体
struct Tree
{
    Model model;	// 树的模型
    Texture texture;// 树的贴图
    int x, y, z;	// 树的位置
}

//======= 享元模式写法 =======

// 树的资产结构体
// 无论树有多少棵，均使用同一个TreeAsset对象中的数据
// 这也是绘制一棵树所需数据中最庞大的那部分
struct TreeAsset
{
    Model model;	// 树的模型
    Texture texture;// 树的贴图
}

// 树结构体
struct Tree
{
    TreeAsset* asset;	// 树的资产的指针
    int x, y, z;		// 树的位置
}

在此项目中，对Animation类进行重新拆分和设计，提取游戏中每一个个体敌人可以共享的数据 std::vector<IMAGE*> frame_list ，而其他三个私有成员，则是状态信息，是每一个敌人独有的。

每个个体持有共享数据的图集类：

// 资源加载优化
class Atlas
{
public:
	Atlas(LPCTSTR path, int num)
	{
		// 加载图片
		TCHAR path_file[256];
		for (int i = 0; i < num; i++)
		{
			_stprintf_s(path_file, path, i);

			IMAGE* frame = new IMAGE();
			loadimage(frame, path_file);
			frame_list.push_back(frame);
		}
	}

	~Atlas()
	{
		for (int i = 0; i < frame_list.size(); i++)
		{
			delete frame_list[i];
		}
	}

public:
	vector<IMAGE*> frame_list;
};

每个个体独有的数据封装在Animation类中：

class Animation
{
public: 
	Animation(Atlas* atlas, int interval)
	{
		anim_atlas = atlas;
		interval_ms = interval;
	}

	~Animation() = default; // atlas是Animation类对象共享的公共资产，所以不能在Animation的析构函数中使用delete释放atlas指针
							// 需要在更上一层释放（main）
							// 况且这里也没有new

	// 播放动画
	void Play(int x, int y, int delta_time)
	{
		timer += delta_time;
		if (timer >= interval_ms)
		{
			idx_frame = (idx_frame + 1) % anim_atlas->frame_list.size();
			timer = 0;
		}

		putimage_alpha(x, y, anim_atlas->frame_list[idx_frame]);
	}

private:
	int interval_ms = 0; // 帧间隔
	int timer = 0; // 动画计时器
	int idx_frame = 0; // 动画帧索引

private:
	Atlas* anim_atlas; // 需要持有Atlas类的指针
};

按钮类的设计

按钮的状态有三种：Idle、Hover和Pushed，理清这三者的跳转关系来编写玩家输入的代码：

相应的，我们需要处理的情况也有三种：鼠标移动、左键按下、左键抬起：

void ProcessEvent(const ExMessage& msg)
{
	switch (msg.message)
	{
	case WM_MOUSEMOVE:
		if (status == Status::Idle && CheckCursorHit(msg.x, msg.y))
			status = Status::Hovered;
		else if (status == Status::Idle && !CheckCursorHit(msg.x, msg.y))
			status = Status::Idle;
		else if (status == Status::Hovered && !CheckCursorHit(msg.x, msg.y))
			status = Status::Idle;
		break;
	case WM_LBUTTONDOWN:
		if (CheckCursorHit(msg.x, msg.y))
			status = Status::Pushed;
		break;
	case WM_LBUTTONUP:
		if (status == Status::Pushed)
			OnClick();
		break;
	default:
		break;
	}
}

番外篇：角色动画特效和像素缓冲区

色彩知识补充

图片的最小单位是像素，像素的色彩由三原色红、绿、蓝（Red Green Blue），也就是我们常说的“RGB”，经过不同强度的各原色混合得到。如果用一个Color的结构体，可以这样表示：

struct Color
{
    int r;
    int g;
    int b;
};

“图片”本质上就是由这些像素所构成的二维数组。一张像素为 100*100 的图片可以等价为 Color image[100][100]; 那么在窗口中绘制一张图片的过程就是将这个小一点的二维数组拷贝到窗口这个大一点的二维数组的过程。而绘制的坐标则决定了像素数组位置的索引EasyX的 IMAGE 类中，有一个 DWORD* m_pBuffer; 的指针，用来指向存储图片像素色彩的缓冲区地址。由因为二维数组在内存中的存储其实是按照从左到右、从上到下的方式连续存储的，所以如果我们想要访问 (x, y) 位置的像素颜色的值，用二维数组表示的代码是 Color pix_color = image[y][x] ，在EasyX中需要转化为 DWORD pix_color = buffer[y * width + x] （width为图片宽度）。而这个指向像素缓冲区的指针，则可以由EasyX提供的接口 DWORD* GetImageBuffer(IMAGE* PImg = NULL) 获取。所以，如果要获得 image 这张图片的色彩缓冲区，可以这样写 DWORD* buffer = GetImageBuffer(&image)，缓冲区中的每一个 DWORD 类型的元素都占据四个字节，存储RGBA（RGB色彩元素和透明通道）的信息。

图像翻转效果的实现

首先加载原始的图片素材，此例中为玩家向左的动画图片。然后定义玩家角色向右的动画序列帧数组，遍历每一张向左的图片并进行翻转。需要注意的是，首先我们需要使用了 Resize 来向右的序列帧图片调整为相同的大小，因为定义的IMAGE 对象如果没有使用其他对象进行拷贝构造或者使用 loadimage 函数进行加载的话，内部的像素缓存区默认是不存在的，所以 Resize 的过程同时也是对 IMAGE 对象进行内存分配的过程。接着，我们获取向左的图片和向右的图片的像素缓冲区，遍历图片像素缓冲区中的每一个像素，将它从向左的图片中拷贝到向右的图片中对应的位置上。那么在x轴上的元素在翻转后的位置索引为 width - 1 - x。具体的实现是这样的：

加载向左的动画帧图片：

IMAGE img_player_left[6];

// 加载玩家向左的动画
for (int i = 0; i < 6; i++)
{
    static TCHAR img_path[256];
    _stprintf_s(img_path, _T("img/paimon_left_&d.png"), i);
    loadimage(&img_player_left[i], img_path);
}

实现向右翻转的动画帧图片：

IMAGE img_player_right[6];

for (int i = 0; i < 6; i++)
{
    int width = img_player_left[i].getwidth();
    int height = img_player_left[i].getheight();
    Resize(&img_player_right[i], width, height);	// 调整向右动画图片尺寸，同时为向右的图片开辟内存空间
    
    // 遍历两套图片的色彩缓冲区，逐行进行水平翻转
    // 并将相应索引上的像素信息拷贝给向右图片，完成翻转
    DWORD* color_buffer_left_img = GetImageBuffer(&img_player_left[i]);
    DWORD* color_buffer_right_img = GetImageBuffer(&img_player_right[i]);
    for (int y = 0; y < height; y++)
    {
        for (int x = 0; x < width; x++)
        {
            int idx_left_img = y * width + x;					// 源像素索引（向左图片）
            int idx_right_img = y * width + (width - 1 - x);	// 目标像素索引（向右图片）
            color_buffer_right_img[idx_right_img] = color_buffer_left_img[idx_left_img];
        }
    }
}

获取每一个像素颜色的RGB分量

EasyX提供了 GetGValue GetRValue 和GetBValue 这三个宏来分别获取分量值。但需要特别注意的是，常用的COLORREF（一种表示颜色的类型，本质上是32位的整数）在内存中的表示形式为 0xbbggrr ，里面的红色和蓝色是对调的，所以我们在用EasyX的三个宏获取RGB分量时要需要调换R和B的位置：

DWORD pix_color = buffer[y * width + x];
BYTE r = GetBValue(pix_color);
BYTE g = GetGValue(pix_color);
BYTE b = GetRValue(pix_color);

图片闪烁效果的实现

本质上就是切换图片正常状态的序列帧和其纯白色的剪影序列帧即可。剪影序列帧也是可以通过操作渲染缓冲区进行动态生成。那么如何将像素的颜色设置为纯白色呢？首先可以使用RGB宏组合出COLORREF类型的值，然后使用BGR交换红色和蓝色的顺序，最后设置其透明通道的值：

// 前半部分获得标准顺序RGB的白色：0x00FFFFFF
// 后半部分构造alpha通道（透明度）：(BYTE)(255)是8位的255，代表完全不透明，向左位移24位，得到0xFF000000
// 前后部分用按位或进行合并，得到0xFFFFFFFF，即完全不透明的纯白色
DWORD white_pix = BGR(RGB(255, 255, 255)) | (((DWORD)(BYTE)(255)) << 24);

那么实现图片闪烁的具体思路就是：先定义一个剪影序列帧的图片数组，然后同样遍历每一张原始图片素材，使用 Resize 将它们设置为相同大小并开辟内存空间。然后分别获取它们的色彩缓冲区，在两层循环中先判断当前位置的颜色是否为白色，如果不是则设置为白色：

IMAGE img_player_left_sketch[6];

// 生成玩家向左动画的剪影
for (int i = 0; i < 6; i++)
{
    // 调整剪影动画图片尺寸大小同时开辟内存
    int width = img_player_left[i].getwidth();
    int height = img_player_left[i].getheight();
    Resize(&img_player_left_sketch[i], width, height);
    
    // 获取两套图片的色彩缓冲区
    DWORD* color_buffer_raw_img = GetImageBuffer(&img_player_left[i]);
    DWORD* color_buffer_sketch_img = GetImageBuffer(&img_player_left_sketch[i]);
    
    // 遍历图片的色彩缓冲区，将透明度不为0的像素设置为白色
   	for (int y = 0; y < height; y++)
    {
        for (int x = 0; x < width; x++)
        {
            int idx = y * width + x;
            if ((color_buffer_raw_img[idx] & 0xFF000000) >> 24)	// if的判断条件为真，即像素不为0（白色）
                color_buffer_sketch_img[idx] = BGR(RGB(255, 255, 255)) | (((DWORD)(BYTE)(255)) << 24);
        }
    }
}

冻结效果的实现

Alpha混合的原理

EasyX在绘制图片是不考虑透明度的，那么透明度存在时的色彩计算公式为 最终颜色 = 源颜色 * Alpha + 目标颜色 * （1 - Alpha） 此处的Alpha值不是0 - 255，而是0 - 1的浮点数。也就是说，如果将一张纯绿色的图片绘制到一张纯红色背景图片上时，覆盖位置的颜色可以进行这样的计算：

不考虑 Alpha 混合的图片叠加效果

考虑 Alpha 混合的图片叠加效果及其计算公式

所以冰冻效果的实现思路，可以将一张冰冻的图片，以半透明的方式贴附在正常显示的图片之上。

具体实现

// 拷贝当前帧用于后续处理
IMAGE img_current_frame(img_player_left[counter]);
int width = img_curent_frame.getwidth();
int height = img_curent_frame.getheight();

// 获取当前帧图片和冰冻图片的色彩缓冲区
DWORD* color_buffer_ice_img = GetImageBuffer(&img_ice);
DWORD* color_buffer_frame_img = GetImageBuffer(&img_current_frame);

// 遍历当前帧的色彩缓冲区，将不透明的区域进行混叠
for (int y = 0; y < height; y++)
{
    for (int x = 0; x < width; x++)
    {
        int idx = y * width + x;
        static const float RATIO = 0.25f;	// 混叠比例
        DWORD color_ice_img = color_buffer_ice_img[idx];
        DWORD color_frame_img = color_buffer_frame_img[idx];
        if ((color_frame_img & 0xFF000000) >> 24)	// 0xFF000000为透明通道
        {
            // 注意：色彩缓冲区中颜色存储的顺序是BGR，所以获取时需要调换B和R的位置
            BYTE r = (BYTE)(GetBValue(color_frame_img) * RATIO + GetBValue(color_ice_img) * (1 - RATIO));
            BYTE g = (BYTE)(GetGValue(color_frame_img) * RATIO + GetGValue(color_ice_img) * (1 - RATIO));
            BYTE b = (BYTE)(GetRValue(color_frame_img) * RATIO + GetRValue(color_ice_img) * (1 - RATIO));
            // 与透明通道叠加
            color_buffer_frame_img[idx] = (BGR(RGB(r, g, b)) | (((DWORD)(BYTE)(255)) << 24);
        }
    }
}

优化：给冰冻状态增加高亮效果

思路：用一条白色扫描线从上至下扫描图片，为了让效果更逼真，我们对混叠后的贴图先进行亮度提取，只有亮度大于一定阈值的部分才会显示为白色条带，所以调整后的完整代码是这样的：

void RenderFrozenPlayer()
{
    static const POINT position = { 1075, 345};
    
    static int counter = 0;			// 动画帧索引
    static int anim_timer = 0;		// 动画计时器
    static int frozen_timer = 0;	// 冰冻状态计时器
    static const int THICKNESS = 5;	// 扫描线宽度
    static int hightlight_pos_y = 0;// 扫描线竖直坐标
    static bool is_frozen = false;	// 当前是否正在冰冻
    
    // 如果没有处于冰冻状态则更新动画计时器
    if ((!is_frozen) && (++anim_timer % 3 == 0))
        counter = (counter + 1) % 6;
    // 更新冻结计时器并重置扫描线位置
    if (++frozen_timer % 100 == 0)
    {
        is_frozen = !is_frozen;
        highlight_pos_y = -THICKNESS;
    }
    
    // 绘制玩家脚底阴影
    putimage_alpha(position.x + (80 - 32) / 2, position.y + 80, &img_shadow);
    
    // 根据当前是否处于冰冻状态渲染不同的动画帧
    if (is_frozen)
    {
        // 拷贝当前帧用于后续处理
        IMAGE img_current_frame(img_player_left[counter]);
        int width = img_curent_frame.getwidth();
        int height = img_curent_frame.getheight();

        // 更新高亮扫描线竖直坐标
        highlight_pos_y = (highlight_pos_y + 2) % height;
        
        // 获取当前帧图片和冰冻图片的色彩缓冲区
		DWORD* color_buffer_ice_img = GetImageBuffer(&img_ice);
		DWORD* color_buffer_frame_img = GetImageBuffer(&img_current_frame);
        
        for (int y = 0; y < height; y++)
        {
            for (int x = 0; x < width; x++)
            {
                int idx = y * width + x;
                static const float RATIO = 0.25f;		// 混叠比例
                static const float THRESHOLD = 0.84f;	// 高亮阈值
                DWORD color_ice_img = color_buffer_ice_img[idx];
                DWORD color_frame_img = color_buffer_frame_img[idx];
                if ((color_frame_img & 0xFF000000) >> 24)	// 0xFF000000为透明通道
                {
                    // 注意：色彩缓冲区中颜色存储的顺序是BGR，所以获取时需要调换B和R的位置
                    BYTE r = (BYTE)(GetBValue(color_frame_img) 
                                    * RATIO + GetBValue(color_ice_img) * (1 - RATIO));
                    BYTE g = (BYTE)(GetGValue(color_frame_img) 
                                    * RATIO + GetGValue(color_ice_img) * (1 - RATIO));
                    BYTE b = (BYTE)(GetRValue(color_frame_img) 
                                    * RATIO + GetRValue(color_ice_img) * (1 - RATIO));

                    // 如果高亮扫描线处的像素亮度大于阈值，则直接将该像素设置为白色
                    if ((y >= hightlight_pos_y && y < = highlight_pos_y + THICKNESS)
                       && ((r / 255.0f) * 0.2126f + (g / 255.0f) * 0.7152f + (b / 255.0f) * 0.0722f 
                           >= TRESHOLD))
                    {
                    	color_buffer_frame_img[idx] 
                            = (BGR(RGB(255, 255, 255)) | (((DWORD)(BYTE)(255)) << 24);
                        continue;
                    }
                    color_buffer_frame_img[idx] = (BGR(RGB(r, g, b)) | (((DWORD)(BYTE)(255)) << 24);
                }
            }
        }
        putimage_alpha(position.x, position.y, &img_current_frame);	
    }
	else
        putimage_alpha(position.x, position.y, &img_player_left[counter]);
}

对于RGB色彩分量的亮度计算时，每个颜色前的系数来自于经验公式。

项目主体部分的完整源码

#include <graphics.h>
#include <string>
#include <vector>
using namespace std;

/* =============== 知识点 ===============
* 1.主循环内应尽量避免阻塞式行为或者过于繁重且耗时过长的任务
* 2.用计数器和用计时器来控制动画的帧更新的区别：
*	计数器：会存在电脑的刷新速度越快，帧更新就越快的情况
*	计时器：不管什么电脑，帧更新都和实际的时间流逝一致
* 3.利用享元模式对资源加载进行优化
*/ 

const int WINDOW_WIDTH = 1280;
const int WINDOW_HEIGHT = 720;

const int FPS = 60;

const double PI = 3.14159;

const int BULLET_BASE_RADIUS = 100;
const int BULLET_RADIUS_CHANGE_RANGE = 25;

const int PLAYER_ANIM_NUM = 6;
const int ENEMY_ANIM_NUM = 6;

const int BUTTON_WIDTH = 192;
const int BUTTON_HEIGHT = 75;

bool is_game_started = false;
bool is_running = true;

#pragma comment(lib, "MSIMG32.LIB") // pragma comment作用：链接库
#pragma comment(lib, "Winmm.lib") // 音频播放的库

// 自己定义一个可以处理透明度的图片绘制函数
void putimage_alpha(int x, int y, IMAGE* img);

// 资源加载优化
class Atlas
{
public:
	Atlas(LPCTSTR path, int num)
	{
		// 加载图片
		TCHAR path_file[256];
		for (int i = 0; i < num; i++)
		{
			_stprintf_s(path_file, path, i);

			IMAGE* frame = new IMAGE();
			loadimage(frame, path_file);
			frame_list.push_back(frame);
		}
	}

	~Atlas()
	{
		for (int i = 0; i < frame_list.size(); i++)
		{
			delete frame_list[i];
		}
	}

public:
	vector<IMAGE*> frame_list;
};

Atlas* atlas_player_left; // 放在main中初始化
Atlas* atlas_player_right;
Atlas* atlas_enemy_left;
Atlas* atlas_enemy_right;

class Animation
{
public: 
	Animation(Atlas* atlas, int interval)
	{
		anim_atlas = atlas;
		interval_ms = interval;
	}

	~Animation() = default; // atlas是Animation类对象共享的公共资产，所以不能在Animation的析构函数中使用delete释放atlas指针
							// 需要在更上一层释放（main）
							// 况且这里也没有new

	// 播放动画
	void Play(int x, int y, int delta_time)
	{
		timer += delta_time;
		if (timer >= interval_ms)
		{
			idx_frame = (idx_frame + 1) % anim_atlas->frame_list.size();
			timer = 0;
		}

		putimage_alpha(x, y, anim_atlas->frame_list[idx_frame]);
	}

private:
	int interval_ms = 0; // 帧间隔
	int timer = 0; // 动画计时器
	int idx_frame = 0; // 动画帧索引

private:
	Atlas* anim_atlas; // 需要持有Atlas类的指针
};

class Player
{
public:
	Player()
	{
		loadimage(&img_shadow, _T("img/shadow_player.png"));
		anim_left = new Animation(atlas_player_left, 45);
		anim_right = new Animation(atlas_player_right, 45);
	}

	~Player()
	{
		delete anim_left;
		delete anim_right;
	}

	void ProcessEvent(const ExMessage& msg)
	{
		if (msg.message == WM_KEYDOWN)
		{
			switch (msg.vkcode)
			{
			case VK_UP:
				is_moving_up = true;
				break;
			case VK_DOWN:
				is_moving_down = true;
				break;
			case VK_LEFT:
				is_moving_left = true;
				break;
			case VK_RIGHT:
				is_moving_right = true;
				break;
			}
		}

		if (msg.message == WM_KEYUP)
		{
			switch (msg.vkcode)
			{
			case VK_UP:
				is_moving_up = false;
				break;
			case VK_DOWN:
				is_moving_down = false;
				break;
			case VK_LEFT:
				is_moving_left = false;
				break;
			case VK_RIGHT:
				is_moving_right = false;
				break;
			}
		}		
	}

	void Move()
	{
		if (is_moving_up)
			position.y -= SPEED;
		if (is_moving_down)
			position.y += SPEED;
		if (is_moving_left)
			position.x -= SPEED;
		if (is_moving_right)
			position.x += SPEED;

		// 解决斜线移动速度更快的问题
		int dir_x = is_moving_right - is_moving_left; // 向右为x轴正方向
		int dir_y = is_moving_down - is_moving_up; // 向下为y轴正方向
		double len_dir = sqrt(dir_x * dir_x + dir_y * dir_y);
		if (len_dir != 0)
		{
			double normalized_x = dir_x / len_dir;
			double normalized_y = dir_y / len_dir;
			position.x += (int)(SPEED * normalized_x);
			position.y += (int)(SPEED * normalized_y);
		}

		// 限制玩家移动范围
		if (position.x < 0) position.x = 0;
		if (position.y < 0) position.y = 0;
		if (position.x + FRAME_WIDTH > WINDOW_WIDTH) position.x = WINDOW_WIDTH - FRAME_WIDTH;
		if (position.y + FRAME_HEIGHT > WINDOW_HEIGHT) position.y = WINDOW_HEIGHT - FRAME_HEIGHT;
	}

	void Draw(int delta_time)
	{
		// 在绘制玩家之前绘制阴影
		int shadow_pos_x = position.x + (FRAME_WIDTH / 2 - SHADOW_WIDTH / 2);
		int shadow_pos_y = position.y + FRAME_HEIGHT - 8;
		putimage_alpha(shadow_pos_x, shadow_pos_y, &img_shadow);

		static bool facing_left = false;
		int dir_x = is_moving_right - is_moving_left;
		if (dir_x < 0)
			facing_left = true;
		else if (dir_x > 0)
			facing_left = false;

		if (facing_left)
			anim_left->Play(position.x, position.y, delta_time);
		else
			anim_right->Play(position.x, position.y, delta_time);
	}

	const POINT& GetPosition() const
	{
		return position;
	}

public:
	const int FRAME_WIDTH = 80;
	const int FRAME_HEIGHT = 80;

private:
	const int SPEED = 3; // player移动的速度
	const int SHADOW_WIDTH = 32;	

private:	
	IMAGE img_shadow; // 玩家脚下阴影
	Animation* anim_left;
	Animation* anim_right;
	POINT position = { 500, 500 }; // 玩家坐标

	// 解决消息处理和按键异步造成的玩家移动卡顿问题
	bool is_moving_up = false;
	bool is_moving_down = false;
	bool is_moving_left = false;
	bool is_moving_right = false;
};

class Bullet
{
public:
	Bullet() = default;
	~Bullet() = default;

	void Draw() const // 在成员方法后面加上const：这个方法不会修改类的成员变量
	{
		setlinecolor(RGB(255, 155, 50));
		setfillcolor(RGB(200, 75, 10));
		fillcircle(position.x, position.y, RADIUS);
	}

public:
	POINT position = { 0, 0 };

private:
	const int RADIUS = 10;
};

class Enemy
{
public:
	Enemy()
	{
		loadimage(&img_shadow, _T("img/shadow_enemy.png"));
		anim_left = new Animation(atlas_enemy_left, 45);
		anim_right = new Animation(atlas_enemy_right, 45);

		// 敌人生成的边界
		enum class SpawnEdge
		{
			Up = 0,
			Down,
			Left,
			Right
		};

		// 将敌人生成在四条边界中随机的一条上
		SpawnEdge edge = (SpawnEdge)(rand() % 4);
		// 具体的随机坐标值
		switch (edge)
		{
		case SpawnEdge::Up:
			position.x = rand() % WINDOW_WIDTH;
			position.y = -FRAME_HEIGHT;
			break;
		case SpawnEdge::Down:
			position.x = rand() % WINDOW_WIDTH;
			position.y = WINDOW_HEIGHT;
			break;
		case SpawnEdge::Left:
			position.x = -FRAME_WIDTH;
			position.y = rand() % WINDOW_HEIGHT;
			break;
		case SpawnEdge::Right:
			position.x = WINDOW_WIDTH;
			position.y = rand () % WINDOW_HEIGHT;
			break;
		default:
			break;
		}
	}

	~Enemy()
	{
		delete anim_left;
		delete anim_right;
	}

	bool CheckBulletCollision(const Bullet& bullet) // 在参数前添加const：这个参数在函数中不会被修改
	{
		// 将子弹等效为一个点，判断该点是否在敌人的矩形内
		bool is_overlap_x = bullet.position.x >= position.x && bullet.position.x <= position.x + FRAME_WIDTH;
		bool is_overlap_y = bullet.position.y >= position.y && bullet.position.y <= position.y + FRAME_HEIGHT;
		
		return is_overlap_x && is_overlap_y;
	}

	bool CheckPlayerCollision(const Player& player)
	{
		// 将敌人的中心点位置视为敌人的碰撞点
		POINT check_position = { position.x + FRAME_WIDTH / 2, position.y + FRAME_HEIGHT / 2 };
		bool is_overlap_x = check_position.x >= player.GetPosition().x && check_position.x <= player.GetPosition().x + player.FRAME_WIDTH;
		bool is_overlap_y = check_position.y >= player.GetPosition().y && check_position.y <= player.GetPosition().y + player.FRAME_HEIGHT;
		
		return is_overlap_x && is_overlap_y;
	}

	void Move(const Player& player)
	{
		const POINT& player_position = player.GetPosition();
		int dir_x = player_position.x - position.x;
		int dir_y = player_position.y - position.y;
		double dir_len = sqrt(dir_x * dir_x + dir_y * dir_y);
		if (dir_len != 0)
		{
			double normalized_x = dir_x / dir_len;
			double normalized_y = dir_y / dir_len;
			position.x += (int)(normalized_x * SPEED);
			position.y += (int)(normalized_y * SPEED);
		}

		if (dir_x > 0)
			facing_left = false;
		else if (dir_x < 0)
			facing_left = true;
	}

	void Draw(int delta_time)
	{
		int shadow_pos_x = position.x + (FRAME_WIDTH / 2 - SHADOW_WIDTH / 2);
		int shadow_pos_y = position.y + FRAME_HEIGHT - 35;
		putimage_alpha(shadow_pos_x, shadow_pos_y, &img_shadow);

		if (facing_left)
			anim_left->Play(position.x, position.y, delta_time);
		else
			anim_right->Play(position.x, position.y, delta_time);
	}

	void Hurt()
	{
		alive = false;
	}

	bool CheckAlive()
	{
		return alive;
	}

private: 
	const int SPEED = 2; 
	const int FRAME_WIDTH = 80;
	const int FRAME_HEIGHT = 80;
	const int SHADOW_WIDTH = 48;	

private:
	IMAGE img_shadow; 
	Animation* anim_left;
	Animation* anim_right;
	POINT position = { 0, 0 }; 
	bool facing_left = false;
	bool alive = true;
}; 

// Button的基类
class Button
{
public:
	Button(RECT rect, LPCTSTR path_imag_idle, LPCTSTR path_imag_hovered, LPCTSTR path_imag_pushed) // 加载图片
	{
		region = rect;
		loadimage(&img_idle, path_imag_idle);
		loadimage(&img_hovered, path_imag_hovered);
		loadimage(&img_pushed, path_imag_pushed);
	}

	~Button() = default;

	void Draw()
	{
		switch (status)
		{
		case Status::Idle:
			putimage(region.left, region.top, &img_idle);
			break;
		case Status::Hovered:
			putimage(region.left, region.top, &img_hovered);
			break;
		case Status::Pushed:
			putimage(region.left, region.top, &img_pushed);
			break;
		}
	}

	void ProcessEvent(const ExMessage& msg)
	{
		switch (msg.message)
		{
		case WM_MOUSEMOVE:
			if (status == Status::Idle && CheckCursorHit(msg.x, msg.y))
				status = Status::Hovered;
			else if (status == Status::Idle && !CheckCursorHit(msg.x, msg.y))
				status = Status::Idle;
			else if (status == Status::Hovered && !CheckCursorHit(msg.x, msg.y))
				status = Status::Idle;
			break;
		case WM_LBUTTONDOWN:
			if (CheckCursorHit(msg.x, msg.y))
				status = Status::Pushed;
			break;
		case WM_LBUTTONUP:
			if (status == Status::Pushed)
				OnClick();
			break;
		default:
			break;
		}
	}

protected:
	virtual void OnClick() = 0;

private:
	bool CheckCursorHit(int x, int y)
	{
		return x >= region.left && x <= region.right && y >= region.top && y <= region.bottom;
	}

private:
	enum class Status
	{
		Idle = 0,
		Hovered,
		Pushed
	};

private:
	RECT region;
	IMAGE img_idle;
	IMAGE img_hovered;
	IMAGE img_pushed;
	Status status = Status::Idle;
};

// 开始游戏按钮
class StartGameButton : public Button
{
public:
	StartGameButton(RECT rect, LPCTSTR path_imag_idle, LPCTSTR path_imag_hovered, LPCTSTR path_imag_pushed)
		: Button(rect, path_imag_idle, path_imag_hovered, path_imag_pushed) {}
	~StartGameButton() = default;

protected:
	void OnClick()
	{
		is_game_started = true;
		mciSendString(_T("play bgm repeat from 0"), NULL, 0, NULL); // 重复播放bgm
	}
};

// 退出游戏按钮
class QuitGameButton : public Button
{
public:
	QuitGameButton(RECT rect, LPCTSTR path_imag_idle, LPCTSTR path_imag_hovered, LPCTSTR path_imag_pushed)
		: Button(rect, path_imag_idle, path_imag_hovered, path_imag_pushed) {}
	~QuitGameButton() = default;
protected:
	void OnClick()
	{
		is_running = false;
	}
};

void TryGenerateEnemy(vector<Enemy*>& enemy_list);
void UpdateBullets(vector<Bullet>& bullet_list, const Player& player);
void DrawPlayerScore(int score);

int main()
{
	initgraph(WINDOW_WIDTH, WINDOW_HEIGHT);
	mciSendString(_T("open mus/bgm.mp3 alias bgm"), NULL, 0, NULL); // 加载
	mciSendString(_T("open mus/hit.wav alias hit"), NULL, 0, NULL); 

	// player和enemy的构造函数都要用到atlas，所以atlas的初始化必须放在这两者之前
	atlas_player_left = new Atlas(_T("img/player_left_%d.png"), PLAYER_ANIM_NUM);
	atlas_player_right = new Atlas(_T("img/player_right_%d.png"), PLAYER_ANIM_NUM);
	atlas_enemy_left = new Atlas(_T("img/enemy_left_%d.png"), ENEMY_ANIM_NUM);
	atlas_enemy_right = new Atlas(_T("img/enemy_right_%d.png"), ENEMY_ANIM_NUM);

	Player player; 
	vector<Enemy*> enemy_list;
	vector<Bullet> bullet_list(3); // 子弹只有三颗，所以不使用指针的形式，避免内存泄漏的风险	
	
	ExMessage msg;
	IMAGE img_menu;	
	IMAGE img_background;	

	int score = 0;

	RECT region_btn_start_game, region_btn_quit_game;
	// ================ UI ================
	region_btn_start_game.left = (WINDOW_WIDTH - BUTTON_WIDTH) / 2;
	region_btn_start_game.right = region_btn_start_game.left + BUTTON_WIDTH;
	region_btn_start_game.top = 430;
	region_btn_start_game.bottom = region_btn_start_game.top + BUTTON_HEIGHT;

	region_btn_quit_game.left = (WINDOW_WIDTH - BUTTON_WIDTH) / 2;
	region_btn_quit_game.right = region_btn_quit_game.left + BUTTON_WIDTH;
	region_btn_quit_game.top = 550;
	region_btn_quit_game.bottom = region_btn_quit_game.top + BUTTON_HEIGHT;

	StartGameButton btn_start_game = StartGameButton(region_btn_start_game,
		_T("img/ui_start_idle.png"), _T("img/ui_start_hovered.png"), _T("img/ui_start_pushed.png"));

	QuitGameButton btn_quit_game = QuitGameButton(region_btn_quit_game,
		_T("img/ui_quit_idle.png"), _T("img/ui_quit_hovered.png"), _T("img/ui_quit_pushed.png"));
	
	loadimage(&img_menu, _T("img/menu.png"));
	loadimage(&img_background, _T("img/background.png"));
	
	BeginBatchDraw();
	while (is_running)
	{
		DWORD start_time = GetTickCount();
		while (peekmessage(&msg))
		{
			if (is_game_started)
			{
				player.ProcessEvent(msg);
			}
			else
			{
				btn_start_game.ProcessEvent(msg);
				btn_quit_game.ProcessEvent(msg);
			}
		}	

		if (is_game_started)
		{
			player.Move();
			UpdateBullets(bullet_list, player);

			TryGenerateEnemy(enemy_list);
			for (Enemy* enemy : enemy_list)
				enemy->Move(player);

			// 检测敌人与玩家的碰撞
			for (Enemy* enemy : enemy_list)
			{
				if (enemy->CheckPlayerCollision(player))
				{
					static TCHAR text[128];
					_stprintf_s(text, _T("最终得分：%d！"), score);
					MessageBox(GetHWnd(), text, _T("游戏结束"), MB_OK);
					is_running = false;
					break;
				}
			}

			// 检测敌人与子弹的碰撞
			for (Enemy* enemy : enemy_list)
			{
				for (const Bullet& bullet : bullet_list)
				{
					if (enemy->CheckBulletCollision(bullet))
					{
						mciSendString(_T("play hit from 0"), NULL, 0, NULL);
						enemy->Hurt();
						score++;
					}
				}
			}

			// 依次检查敌人列表，移除被击杀的敌人
			for (size_t i = 0; i < enemy_list.size(); i++) // 因为此处会动容器本身，所以不能用迭代器遍历
			{
				Enemy* enemy = enemy_list[i];
				if (!enemy->CheckAlive())
				{
					// 和容器最后一个元素交换后，移除最后一个
					// * 是元素顺序无关紧要时，性能较好的一种删除方法
					swap(enemy_list[i], enemy_list.back());
					enemy_list.pop_back();
					delete enemy;
				}
			}
		}

		cleardevice();

		// ======= Draw  =======
		if (is_game_started)
		{
			putimage(0, 0, &img_background);
			player.Draw(1000 / FPS);
			for (Enemy* enemy : enemy_list)
				enemy->Draw(1000 / FPS);
			for (Bullet& bullet : bullet_list)
				bullet.Draw();

			DrawPlayerScore(score);
		}
		else
		{
			putimage(0, 0, &img_menu);
			btn_start_game.Draw();
			btn_quit_game.Draw();
		}

		FlushBatchDraw();

		DWORD end_time = GetTickCount();
		DWORD delta_time = end_time - start_time;
		if (delta_time < 1000 / FPS)
		{
			Sleep(1000 / FPS - delta_time);
		}
	}

	// atlas指针需在游戏主循环结束后释放
	delete atlas_player_left;
	delete atlas_player_right;
	delete atlas_enemy_left;
	delete atlas_enemy_right;

	EndBatchDraw();
	return 0;
}

void putimage_alpha(int x, int y, IMAGE* img)
{
	int w = img->getwidth();
	int h = img->getheight();
	AlphaBlend(GetImageHDC(NULL), x, y, w, h, GetImageHDC(img),
		0, 0, w, h, { AC_SRC_OVER,0,255,AC_SRC_ALPHA });
}

void TryGenerateEnemy(vector<Enemy*>& enemy_list)
{
	const int INTERVAL = 100;
	static int counter = 0;
	if (++counter % INTERVAL == 0)
	{
		enemy_list.push_back(new Enemy());
	}
}

// 更新子弹位置
void UpdateBullets(vector<Bullet>& bullet_list, const Player& player)
{
	// 让子弹有一个不断收缩的效果，视觉上更加炫酷
	const double RADIAL_SPEED = 0.0045; // 径向波动速度
	const double TANGENT_SPEED = 0.0055; // 切向波动速度

	double radian_interval = 2 * PI / bullet_list.size(); // 三颗子弹间的弧度间隔

	// 根据玩家的位置，依次更新每颗子弹的位置
	POINT player_position = player.GetPosition();
	double radius = BULLET_BASE_RADIUS + BULLET_RADIUS_CHANGE_RANGE * sin(GetTickCount() * RADIAL_SPEED);
	for (size_t i = 0; i < bullet_list.size(); i++)
	{
		double radian = GetTickCount() * TANGENT_SPEED + radian_interval * i;
		bullet_list[i].position.x = player_position.x + player.FRAME_WIDTH / 2 + (int)(radius * sin(radian));
		bullet_list[i].position.y = player_position.y + player.FRAME_HEIGHT / 2 + (int)(radius * cos(radian));
	}
}

void DrawPlayerScore(int score)
{
	static TCHAR text[64];
	_stprintf_s(text, _T("当前玩家得分：%d"), score);

	setbkmode(TRANSPARENT);
	settextcolor(RGB(255, 85, 185));
	outtextxy(10, 10, text);
}

复盘和总结

虽然这个项目的实现还是基于初学者的直觉进行开发，并未做太多架构上的设计，但是我还是学到了很多。老师同样是从游戏的框架开始，渐渐细化每个模块，同时他清晰展示了每一部分遇到了怎样的问题，可以用怎样的思路解决问题，对我自己的开发具有很大的参考价值。同时还让我详细了解了动画的底层实现，补充了颜色和像素的知识，帮我复习了向量运动和2D碰撞。以一个非常浅显又实操的例子让我明白了享元模式和设计模式的作用。经常会有一种醍醐灌顶、拨开云雾见青天的感觉。接下来需要进一步补充的地方，一是关于3D的碰撞检测等，3D的内容在学校里以非常传统的读教科书做题的方式学过一遍，但是没有开发中的例子所以印象不深，感觉现在已经全忘了。二是游戏开发的设计模式，在读书的时候也是按照最传统的方式看书回答问题，但那时的感觉基本是看天书一般，蒙着做的题目，所以应该会继续学习这位老师相关的设计模式课程，让自己在实战中有更深刻的理解。

【从零开始的C++游戏开发】基础

Thu, 18 Sep 2025 09:01:30 +0200

概览

技术栈：C++ + EasyX

项目目标：完成 EasyX 环境搭建，完成两个小demo（跟随鼠标的小球、井字棋），理解游戏循环的雏形

课程来源：B站-Voidmatrix

环境配置

EasyX：直接搜索“EasyX”，官网直接下载安装

需要在头文件中包含<graphics.h>来使用EasyX中的库函数。

Demo1 - 跟随鼠标的圆

设计思路

创建窗口并创建游戏主循环

绘制圆并实现圆跟随鼠标移动

用双缓冲对绘图进行优化

开发流程

初始化窗口与主循环

我们使用initgraph()来初始化窗口，然后用一个死循环来避免窗口一闪而过。

int main()
{
    initgraph(1280, 720);
    while (true)
    {
        
    }
    return 0;
}

这个死循环是所有游戏的通用框架。所有的输入处理和更新等都会在这个游戏主循环中进行：

while (true)
{
    // 玩家的输入
    // 画面的更新
}

绘制圆

使用solidcircle() 来绘制圆。

输入处理

使用peekmessage() 来处理输入。

在EasyX中，鼠标的移动、点击，键盘的输入等，都被称之为“message”。每次我们有输入操作，EasyX都会将这些“消息”放入消息队列中，每次我们调用 peekmessage()，EasyX就会尝试从消息队列中拉取一个消息，成功返回 true，失败返回 false。所以我们另一个循环不断地从消息队列中拉取消息进行处理，直到消息队列中没有消息为止。

查阅文档，peekmessge() 必须带有一个参数 msg，msg 是一个指向消息结构体 ExMessage 的指针，用来保存获取到的消息。而 ExMessage 中的一个成员 message 代表“消息标识”，它对应相应的鼠标和键盘等输入操作。于是整个输入处理可以写为：

while (true)
{
    ExMessage msg; // 实例化一个ExMessage结构体对象
    while (peekmessage(&msg))
    {
        if (msg == WM_MOUSEMOVE)
        {
            // 处理鼠标移动逻辑
        }
    }
}

清屏

如果不清屏的话，会连续绘制出的小球会展现鼠标移动的轨迹，所以在每次绘制小球前都需要先进行清屏。调用 cleardevice() 进行清屏。

用双缓冲对绘图进行优化处理

使用BeginBatchDraw()、 FlushBatchDraw()和EndBatchDraw()双缓冲处理。

BeginBatchDraw();

while (true) // 游戏主循环
{
    // 玩家输入
    // 游戏更新
    
    cleardevice(); // 清屏
    // 绘制
    FlushBatchDraw();   
}

EndBatchDraw();

关键步骤

initgraph() 初始化图形窗口

peekmessage() 获取鼠标移动消息

cleardevice() 清屏

solidcircle(x, y, r) 绘制圆

BeginBatchDraw()、 FlushBatchDraw()、EndBatchDraw()双缓冲优化绘图

知识点

EasyX 的坐标系

EasyX 的坐标系在屏幕左上方，x 轴的正方向向右，y 轴的正方向向下。

渲染缓冲区

可以把渲染缓冲区想象成一块巨大的画布，调用Draw逻辑的过程就是在“画布”上画画。先绘制的内容会被后绘制的内容覆盖，而调用cleardevice()就等于是用当前的填充颜色（默认黑色）将“画布”覆盖了一遍。

调用BeginBatchDraw()就相当于EasyX为我们新建了一块画布，而这块画布就是新的渲染缓冲区。它和窗口的渲染缓冲区不一样的是，它是不可见的。随后执行的所有Draw逻辑，都会绘制在这块新的画布上。当调用FlushBatchDraw()和EndBatchDraw()时，EasyX会将这两块画布进行迅速交换，这一过程非常迅速以至于我们是看不见的。所以这样就解决因为绘制频繁而导致的画面闪烁问题。

游戏主循环

在一个死循环中，不断执行：读取操作、处理数据、绘制画面的过程。

while (true)
{
    // 读取操作();
    // 处理数据();    
    // 绘制画面();
}

在主循环开始之前，我们需要先对游戏数据进行初始化，所以这部分一般放置于BeginBatchDraw()之前。

在主循环结束之后，需要相应地对游戏资源进行释放。

Demo2 - 井字棋游戏

游戏介绍

玩家在3*3的棋盘上轮流下子，用O和X表示各自的棋子，如果一方任意三个相同的棋子连成一条直线或斜线时，这一方获胜；如果9个网格均被棋子填充但是却未出现获胜方时，则为平局。此demo只实现本地人人对战。

设计思路

游戏主循环中三要素的设计

读取操作:

对鼠标左键按下的消息进行处理。当鼠标左键点击空白的棋盘格子时，执行落子操作。

数据处理:

对游戏结束条件进行检测。游戏结束条件为三颗同类型的棋子连成一条直线/斜线，或者棋盘被填满。游戏结束时，使用弹窗。告诉玩家游戏结果，然后退出主循环。

绘制画面:

用line()将窗口绘制为3*3的网格棋盘。同样用line()在网格上绘制出交叉的对角线代表一方玩家执的X棋子。用circle()绘制出另一方玩家执的O棋子。

在窗口左上角输出一行文字，告诉玩家即将落子的棋子类型。

数据结构

棋盘和棋子:

用二维数组char board_data[3][3]代表棋盘，用字符char 'X'和char 'O'代表棋子，而还未落子的格子用char '-'表示。

游戏结束

分类讨论游戏结束的情况。

情况一：某一方获胜。只需对X字符和O字符分别进行穷举判定。共8种。

情况二：平局。棋盘中没有一个格子是字符-且没有玩家获胜的情况。

开发流程

遵循的总体思路

先框架后细化。

先把游戏主框架用代码表示

这样可以确保我们在写代码是不会被突然出现的细节打扰。使用一个bool running来判断游戏是否运行。使用CheckWin()和CheckDraw()来判断游戏结束是哪一种情况。

bool running = true;
ExMessage msg;

BeginBatchDraw(); // 开启批量绘图
while (running) // 游戏主循环
{

    while (peekmessage(&msg)) // 读取操作
    {
        
    }
    // 处理数据
    if (CheckWin('x'))
    {
        // 跳出弹窗消息，结束游戏
        MessageBox(GetHWnd(), _T("x 玩家获胜"), _T("游戏结束"), MB_OK);
        running = false;
    }
    else if (CheckWin('o'))
    {
        // 类似上述处理
    }
    else if (CheckDraw())
    {
        // 类似上述处理
    }
    
    cleardevice(); // 每次绘图前先清空画面
    // 绘制所有的东西
    DrawBoard(); // 绘制棋盘
    DrawPiece(); // 绘制棋子
    DrawPrompt(); // 绘制即将落子的棋子信息
    
    FlushBatchDraw(); // 每次游戏循环后，都刷新批量绘图的缓冲区
}
EndBatchDraw(); // 游戏结束，结束批量绘图

细化读取操作部分逻辑

鼠标的坐标在窗口其实是像素点的坐标，于是需要将鼠标的坐标转化为棋盘的网格。用图展示其对应的关系：

对应的代码可以表示为：

int x = msg.x; // 鼠标的像素坐标
int y = msg.y;

int index_x = x / 200; // 鼠标的棋盘坐标
int index_y = y / 200;

然后，就可以进行落子的逻辑了。最后，记得在成功落子后切换为另一种类型的棋子。

细化数据处理部分的逻辑

CheckWin()函数就按之前提到的穷举8种情况即可。CheckDraw()部分的代码，需要遍历棋盘的每一个格子，检查是否有’-’。需要注意的是，如果是一行一行检查的话，外层循环是列，而内层循环是行：

for (int col = 0; col < 3; col++)
{
    for (int row = 0; row < 3; row++)
    {
        if (board[row][col] == '-')
        {
            // 相应逻辑
        }
    }
}

细化绘制部分的逻辑

棋盘的绘制：直接只用line()对应相应的像素坐标。

X 棋子的绘制：同样使用line()绘制，只不过使用的是对角线的像素坐标。

O 棋子的绘制：使用circle()绘制，圆心的x和y分别要在各自棋盘格子像素点的基础上多加100个像素单位。

提示信息的绘制：为了在更通用的编码环境下使用，用了并不常见的类型和函数，但是和C中的printf()类似。

1
2

static TCHAR str[64];
_stprintf_s(str, _T("当前棋子类型：%c"), current_piece);

一些美化字体的函数：

1
2

settextcolor(RGB(225, 175, 45)); // 把颜色变为橙色，在视觉上更醒目
outtextxy(0, 0, str); // 在指定位置输出str字符串

优化

最后一枚落子不绘制：

如果胜负判断放在最后，那么由于MB_OK弹窗会等待玩家点击，点击后直接退出程序，会跳过最后一枚棋子的绘制。为了解决这个问题，这里简单粗暴的将绘制函数放在胜负判断的逻辑之前。

CPU占用高：

计算机在执行while循环时速度较快，我们编写的主循环在顷刻间已经执行完了成千上万次，占用了大量的CPU时间片。对于大部分物理刷新率仅有60Hz的显示设备来说，这是一种性能浪费。简单粗暴的解决方法是使用sleep(15)，让程序在每一次循环结束后强制等待15ms。但这不是推荐的做法。因为随游戏体量的增大，程序每次执行主循环所执行的计算任务可能是不同的，涉及到操作系统CPU计算资源的分配，会导致每次执行主循环所实际消耗的时间可能是不一样的。所以我们需要根据每一帧执行的实际耗时，动态计算在这之后要休眠多长时间。推荐的做法是我们自己设置帧率。用到的函数是GetTickCount()，它可以获取程序自运行开始以来到现在的毫秒数。

while (running)
{
    DWORD start_time = GetTickCount(); // 获取此次循环初始时间
    
    读取操作();
	处理数据();
	绘制画面();
  
	DWORD end_time = GetTickCount(); // 获取此次循环结束时间
    
	DWORD delta_time = end_time - start_time; // 计算间隔时间
    // 依据间隔时间动态分配休眠时间
    // 按每秒60帧刷新页面
	if (delta_time < 1000 / 60) // 如果间隔时间<每秒60帧，要进行休眠；否则不需要。
	{
		Sleep(1000 / 60 - delta_time);
	}
}
释放资源();
}

完整源码

#include <graphics.h>

char board_data[3][3] =
{
	{'-', '-', '-'},
	{'-', '-', '-'},
	{'-', '-', '-'}
};

char current_piece = 'O';

bool CheckWin(char c);
bool CheckDraw();
void DrawBoard();
void DrawPiece();
void DrawPrompt();

int main()
{
    //======= 初始化数据 =======
	initgraph(600, 600);

	ExMessage msg;
	bool running = true;
		
	// 双缓冲，解决图形闪烁问题
	BeginBatchDraw();
	
    //======= 游戏主循环 =======
	while (running)
	{
		DWORD start_time = GetTickCount();

		while (peekmessage(&msg))
		{
            //======= 读取操作 =======
			// 检测鼠标左键按下后的消息
			if (msg.message == WM_LBUTTONDOWN)
			{
				// 计算点击位置
				int x = msg.x;
				int y = msg.y;
				
				int index_x = y / 200;
				int index_y = x / 200;

                //========= 处理数据 =========
				// 落子
				if (board_data[index_y][index_x] == '-')
				{
					board_data[index_y][index_x] = current_piece;	

					// 切换棋子类型
					if (current_piece == 'O')
					{
						current_piece = 'X';
					}
					else if (current_piece == 'X')
					{
						current_piece = 'O';
					}
				}
			}
		}		
		
		cleardevice();

		//===== 绘制 =====
		DrawBoard();		
		DrawPiece();
		DrawPrompt();

		FlushBatchDraw();
		
        // 判断胜负，出于解决最后一枚棋子绘制的问题而放在绘制逻辑之后
		if (CheckWin('X'))
		{
			MessageBox(GetHWnd(), _T("X 玩家获胜"), _T("游戏结束"), MB_OK);
			running = false;
		}
		else if (CheckWin('O'))
		{
			MessageBox(GetHWnd(), _T("O 玩家获胜"), _T("游戏结束"), MB_OK);
			running = false;
		}
		else if (CheckDraw())
		{
			MessageBox(GetHWnd(), _T("平局"), _T("游戏结束"), MB_OK);
			running = false;
		}

        //======= 设置帧率（优化）=======
		DWORD end_time = GetTickCount();
		DWORD delta_time = end_time - start_time;
		if (delta_time < 1000 / 60)
		{
			Sleep(1000 / 60 - delta_time); // 节约性能，补足帧率至60，不要运行得太快
		}
	}
	EndBatchDraw();
	return 0;
}

bool CheckWin(char c)
{
	if (board_data[0][0] == c && board_data[0][1] == c && board_data[0][2] == c)
		return true;
	if (board_data[1][0] == c && board_data[1][1] == c && board_data[1][2] == c)
		return true;
	if (board_data[2][0] == c && board_data[2][1] == c && board_data[2][2] == c)
		return true;
	if (board_data[0][0] == c && board_data[1][0] == c && board_data[2][0] == c)
		return true;
	if (board_data[0][1] == c && board_data[1][1] == c && board_data[2][1] == c)
		return true;
	if (board_data[0][2] == c && board_data[1][2] == c && board_data[2][2] == c)
		return true;
	if (board_data[2][0] == c && board_data[1][1] == c && board_data[0][2] == c)
		return true;
	if (board_data[0][0] == c && board_data[1][1] == c && board_data[2][2] == c)
		return true;

	return false;
}

bool CheckDraw()
{
	for (int col = 0; col < 3; col++)
	{
		for (int row = 0; row < 3; row++)
		{
			if (board_data[row][col] == '-')
			{
				return false;
			}
		}
	}
	return true;
}

void DrawBoard()
{
	line(0, 200, 600, 200);
	line(0, 400, 600, 400);
	line(200, 0, 200, 600);
	line(400, 0, 400, 600);
}

void DrawPiece()
{
	for (int col = 0; col < 3; col++) 
	{
		for (int row = 0; row < 3; row++) 
		{
			switch (board_data[row][col])
			{
			case '-':
				break;
			case 'O':
				circle(200 * row + 100, 200 * col + 100, 100);
				break;
			case 'X':
				line(200 * row, 200 * col, 200 * (row + 1), 200 * (col + 1));
				line(200 * (row + 1), 200 * col, 200 * row, 200 * (col + 1));
			}
		}
	}	
}

void DrawPrompt()
{
	static TCHAR str[64];
	_stprintf_s(str, _T("当前棋子类型：%c"), current_piece);

	settextcolor(RGB(225, 175, 45));
	outtextxy(0, 0, str);
}

复盘和总结

这是我第一次如此透彻地理解游戏主循环、双缓冲机制、游戏中的坐标系以及帧率的设置。之前虽然也用C++和raylib做过一些小游戏，但是都是照猫画虎、囫囵吞枣、一知半解。这次的学习是跟着教程的思路和节奏做的，所以并未严格按照面向对象的思路去封装类，而是专注于用最简单、最快的实现方法，体会游戏的通用架构。按照top-down的思路，从框架到具体的一步步分解问题，逐个解决。计划跟完这位大佬的所有课程，在提升自己编程能力的同时，加深对游戏开发编程的理解，以及让自己的代码风格符合业界的惯例。

C++ on Nullshow的技术博客

【C++语法】智能指针

为什么需要智能指针？

智能指针的基本原理

RAII

智能指针的使用

智能指针的潜在问题

auto_ptr

auto_ptr 的实现原理

unique_ptr

unique_ptr 的实现原理

shared_ptr

shared_ptr 的实现原理

shared_ptr在拷贝赋值时的线程安全问题

shared_ptr 的缺陷：循环引用

什么是“循环引用”？

如何解决：weak_ptr

智能指针的发展历史

定制删除器

知识补充一：RAII思想的应用 - 锁守卫

知识补充二：内存泄漏

【从零开始的C++游戏开发】植物明星大乱斗之Gameplay层实现

开发流程 - Gameplay层

关键步骤和解决思路 - Gameplay层

主菜单界面和角色选择界面的搭建

摄像机的处理

思路 1：

思路 2：

思路 3：

主菜单界面的实现

角色选择界面的实现

角色种类的设计技巧

将摄像机封装进Animation类

背景剪影滚动效果的实现

物理引擎的实现

平台类的设计

玩家基类的设计

平台单向碰撞检测和重力模拟

重力模拟

平台单向碰撞检测

角色技能设计

玩家技能的程序功能需求

子弹碰到敌人后消失的逻辑实现

子弹消失逻辑的优化

豌豆子弹类的设计

日光炸弹类的实现

超级日光炸弹类的实现

技能系统

冷却时间的实现思路

无敌状态的实现

粒子系统的实现

代码总体回顾及源码

Scene 基类

main 函数

Atlas 图集类

Camera 摄像机类

Timer 定时器类 和 Vector2 二维向量类

场景子类：MenuScene、SelectorScene和GameScene

Player 玩家基类

Peashooter 子类 和 Sunflower 子类

Bullet 子弹基类

PeaBullet 子类 和 SunBullet 子类、SunBulletEx 子类

Particle 粒子类

Platform 平台类

StatusBar 玩家状态类

完整源码

复盘和总结

【从零开始的C++游戏开发】植物明星大乱斗之框架设计

概览

核心玩法

设计思路

多个头文件的使用

游戏主框架的设计

各个对象/类的设计

开发流程 - 框架部分

关键步骤和解决思路 - 框架部分

场景设计

Scene基类

主菜单场景类MenuScene

场景管理器的实现

`auto_ptr`

`auto_ptr` 的实现原理

`unique_ptr`

`unique_ptr` 的实现原理

`shared_ptr`

`shared_ptr` 的实现原理

`shared_ptr`在拷贝赋值时的线程安全问题

`shared_ptr` 的缺陷：循环引用

如何解决：`weak_ptr`

Timer 定时器类和 Vector2 二维向量类

Peashooter 子类和 Sunflower 子类

PeaBullet 子类和 SunBullet 子类、SunBulletEx 子类