动手学MFC之九——带上绘图搞定FlappyBird（上）
代码里一个空格的偏差都让我觉得看起来不舒服。
最近flappy bird那是相当火啊，但是它的操作却非常之简单，今天我们来学习一下MFC的绘图知识，顺便来实现一个简易的flappybird。
新建一个MFC单文档工程，让窗口打开就最大化。
我们找到OnDraw函数，在里面添加如下代码：
CPen *oldPen;
CPen redPen(PS_SOLID,2,RGB(255,0,0));
oldPen = pDC->SelectObject(&redPen);
pDC->Rectangle(10,10,110,110);
pDC->SelectObject(oldPen);
运行结果如下：
当然了，这是上节的东西，只是这里没有用CPen的CreatePen函数，而是在构造函数中就指定了redPen的参数。
我们再来画一个矩形，在pDC->Rectangle(10,10,110,110);后面加上pDC->Rectangle(100,100,200,200);，想想会是什么结果呢？
有没有出乎你的意料，注意那个角上的东西好像被覆盖了，那是怎么回事呢？我想你应该还记得系统会有一个默认的画笔吧，其实它还有一个默认的画刷，画笔是用来绘制轮廓的，而画刷是用来填充里面的空间的。也就是说，我们画矩形的时候，系统用画笔画出矩形的边，用画刷填充矩形的里面，而系统默认画刷是白色的，所以我们的矩形一角被白色画刷的填充给覆盖了。
我们可以做一个实验，让系统用我们自己定义的画刷。将OnDraw函数内代码改下：
CPen *oldPen;
CPen redPen(PS_SOLID,2,RGB(255,0,0));
CBrush *oldBrush;
CBrush greenBrush(RGB(0,255,0));
oldPen = pDC->SelectObject(&redPen);
oldBrush = pDC->SelectObject(&greenBrush);
pDC->Rectangle(10,10,110,110);
pDC->Rectangle(100,100,200,200);
pDC->SelectObject(oldPen);
pDC->SelectObject(oldBrush);
运行下，看看结果：
在这里，我们定义了一个绿色的画刷，greenBrush，所以画出了内部是绿色的矩形啦！可能有人会问，我不想让矩形相互遮挡怎么办，我们要用一个透明的画刷才行，可是透明是什么颜色呢？其实这里要用到系统给我们准备的一个透明画刷。把oldBrush = pDC->SelectObject(&greenBrush);改成oldBrush = (CBrush*)pDC->SelectObject((HBRUSH)GetStockObject(HOLLOW_BRUSH));，再运行试试看？
下面来解释一下oldBrush =(CBrush *)pDC->SelectObject((HBRUSH)GetStockObject(HOLLOW_BRUSH));，首先GetStockObject(HOLLOW_BRUSH)它返回一个透明画刷的句柄，HOBJECT，所谓的句柄（Handle），就是一个标识，表示这是一个Object的资源，我们知道这是一个Brush的资源，所以我们将它强制转换(HBRUSH)GetStockObject(HOLLOW_BRUSH)，其实这里不强制转换也没有关系，但是强转一下代码意思清晰多了。那为什么GetStockObject不直接返回画刷句柄HBRUSH呢？这是因为GetStockObject不仅仅能够产生画刷，还能产生画笔等其他资源，所以它只能返回一个抽象的HOBJECT，我们程序员自己根据传递的参数来将其强制转换，这种思想在面向对象中经常用到的。好了，因为我们给pDC的SelectObject方法传递的是HBRUSH，查一下手册，它返回的是HGDIOBJ，当然我们可以定义一个句柄来接收它，但是为了代码统一性，我们直接用oldBrush来接收，将SelectObject的返回强转为(CBrush *)。注意，这里虽然定义了一个(CBrush*)，但是它的值表示的是句柄，而刚好他们的底层都是四个字节（32位系统上），所以可以兼容。当然，在恢复画刷的时候也要相应地强转一下，pDC->SelectObject((HGDIOBJ)oldBrush);。关于这部分有疑惑的同学请在评论中和我讨论，不想深入研究的同学直接这样用也没有关系。
好了，我们学会了画文字，画笔，画刷，已经什么都能画了，但是什么都画太麻烦，如果有一张现成的图片该多好，我们直接把整个图片贴上来不就好了？MFC也是这么想的，它给我们提供了贴图的API。
选择Insert->Resource：
选择Bitmap，点击New
会出现一个画图的界面，我们可以在这里画图，还可以回车设置其属性
在这里我们可以设置大小和ID等参数，我们将其ID设置为IDB_BITMAP_BIRD，画一个小鸟
不要嘲笑我的画功啊！将其保存。图片准备好了，那我们怎么将其弄到我们的程序中呢？
我们在OnDraw中再加入下面代码：
CBitmap bitmap;
bitmap.LoadBitmap(IDB_BITMAP_BIRD);
CDC bitmapDC;
bitmapDC.CreateCompatibleDC(pDC);
bitmapDC.SelectObject(&bitmap);
pDC->BitBlt(10,10,48,48,&bitmapDC,0,0,SRCCOPY);
先来看下效果吧：
下面我来解释下代码：
首先，我们定义一个CBitmap的类，它代表一个位图，我们调用它的LoadBitmap函数加载刚刚画的位图，当然，参数就是我们刚刚改的ID。然后我们定义了一个CDC，这是什么呢？如果你细心的话，就会知道这就是画图助手啊，发现了吧？我们暂且叫它位图DC吧。然后，我们调用它的CreateCompatibleDC方法让它与我们的pDC兼容，这是什么意思呢？因为系统只需要一个画图助手，而我们自己定义的画图助手如果也想可以合法使用的话，就需要调用这个函数申明和pDC兼容，然后，我们的位图DC调用SelectObject将位图载入，最后，我们调用pDC的BitBlt方法将位图DC中的位图放到界面上。
为什么这么麻烦呢？这是因为画图助手要画位图，只能用SelectObject将其载入，如果直接用pDC载入的话，那么之前的图形就都没有了，所以我们创建了一个位图DC，也可以说是临时DC，而BitBlt函数有7个参数，首先是pDC的x和y坐标，然后是宽度和高度，然后是位图DC的地址，然后是位图DC的x和y，最后是贴图方式。希望大家没有晕，首先大家要明白这里有两个DC，我们把位图DC从0,0开始的48X48像素的东西帖到pDC的10,10位置。贴图方式SRCCOPY表示拷贝，也就是原封不动地贴图。
我们可以去掉CreateCompatibleDC这一行，看一下结果：
崩溃了，所以我们要记得申明DC的兼容性哈，初学者经常忘记这个。
如果你仔细看图就会发现，第一个矩形貌似有一点点被盖住了，我们换回绿色，再看看：
哇，这已经不能看了，白色背景怎么也进来了。我们当然不希望白色背景也跟着进来，怎么办呢？别急，我们刚刚讲了贴图方式，查下MSDN，我们发现有一个方式叫做SRCAND，它是将贴图部分进行与操作，白色对应的是0xFFFFFF，和1进行与操作不会变，这样不就能把白色去掉了吗？
我们改下代码：pDC->BitBlt(10,10,48,48,&bitmapDC,0,0,SRCAND);
看下结果：
哈哈，正如我们所料，但是头部的黄色也变成绿色了，这是为什么呢，绿色是0x00FF00，黄色是0xFFFF00，它们进行与当然还是0x00FF00，所以是绿色啦，如果这对你来说影响很大的话，我们可以利用PS做一个透明背景的位图，再用SRCCOPY贴上，但是这里我们暂且这样吧。
好了，绘图知识讲得差不多了，咱们来实现这个flappy bird吧。这里我要给大家说一说面向对象的思想，我们分析一下这个游戏，其实就是一只鸟，点击一下就往上蹦一下，不点击就下降，这里我们用空格代替点击，然后还有一些绿色的柱子，从右向左移动。所以我们先抽象出小鸟类和柱子类。
切换到Class View，在工程名上点击右键，选择NewClass
Class Type选择Generic Class，Name写CBird，点击OK
我们在给自己的类取名字的时候，都在前面加上C的前缀，表示这是一个Class，系统在生成File的时候会自动去掉前面的C。切换回File View，我们多了两个文件Bird.h和Bird.cpp，鸟需要知道自己的位置，给它私有的x和y
private:
int m_x;
int m_y;
同时，鸟应该自己提供一个draw的方法，它应该自己绘制自己，这个方法是提供给别人使用的，故申明为public，在面向对象的设计中，要做到尽量吝啬，能申明为private的东西绝对不申明为public，这样才把一个类做到最高程度的封装。
public:
void draw(CDC* pDC);
我们需要使用贴图来画鸟，故还要一个私有的CBitmap。CBitmap m_bitmap;
好了，我们在构造函数中初始化并且加载位图。
CBird::CBird()
{
m_x = 0;
m_y = 0;
m_bitmap.LoadBitmap(IDB_BITMAP_BIRD);
}
在draw函数中将其画出：
void CBird::draw(CDC* pDC)
{
CDC bitmapDC;
bitmapDC.CreateCompatibleDC(pDC);
bitmapDC.SelectObject(&m_bitmap);
pDC->BitBlt(m_x,m_y,48,48,&bitmapDC,0,0,SRCAND);
}
好了，我们来试下吧，在View中定义一个bird。
private:
CBird m_bird;
确保包含了头文件哦：#include"Bird.h"
在OnDraw函数中注释其他的，添加上m_bird.draw(pDC);，试下吧
鸟儿真的出来了，但是我们还要添加定时器，并且在里面改变它的位置，怎么办呢？这就需要我们在鸟类中添加一个改变位置的方法：
void CBird::setPos(int x,int y)
{
m_x = x;
m_y = y;
}
然后注册定时器（还记得OnInitialUpdate吧，在这个函数中注册），每个100ms调用一次OnTimer，在里面设置它的位置，但是怎么设置呢？我们需要鸟类原来的坐标，再添加两个成员函数：
int CBird::getX()
{
return m_x;
}
int CBird::getY()
{
return m_y;
}
也许有人会说，这么麻烦，直接把m_x和m_y申明为public不就方便了吗？在外面就能直接访问了？是的，这样的确方便，但是这样却破坏了鸟类的封装性。对其控制也减弱了，而我们将其设为private，然后提供一组访问函数（getter和setter），这样以后要对其进行控制就方便了，比如我们在setPos函数中，当x和y为负数时，明显不对，我们可以将m_x和m_y设置成0。也许有人会说，这个逻辑在外面也能实现啊？是的，但是要明确的是，这部分逻辑是属于鸟类的，鸟类自己的位置设置代码，凭什么写到外面去呢？自己的事情怎么让别人做呢？这就是面向对象的强大之处，它让代码有了自己的位置，我们今后调试扩展啥的都会方便不少，大家以后可以慢慢体会。
好了，现在可以玩了，OnTimer中加上：m_bird.setPos(m_bird.getX(),m_bird.getY() + 5);
Invalidate();
运行看看吧，小鸟能向下飞了，但是不一会儿就飞出屏幕了，而且是匀速飞的，这个效果太差强人意了吧？我们首先为其添加重力效果，噢，那需要速度和加速度，当然，这些东西都应该变成鸟类的东西，不是吗？鸟类提供一个drop方法就行了。
我们将OnTimer中的代码改下：
m_bird.drop();
Invalidate();
然后马上去鸟类添加drop方法，再此之前，我们添加两个成员变量，代表速度和加速度：
int m_v;
int m_a;
为其初始化：
m_v = 0;
m_a = 1;
drop函数如下：
void CBird::drop()
{
m_v = m_v + m_a;
m_y = m_y + m_v;
}
试下吧，通过调试，我们把时间间隔改为50ms，把加速度m_a改为3，当然你也可以自己根据自己的喜欢来改。但是鸟一下子就掉下去了，我们还要为其添加一个jump方法：
void CBird::jump()
{
m_v = -10;
}
先简单将其速度向上，然后在WM_CHAR消息的响应函数中添加代码：
if(' ' == nChar)
{
m_bird.jump();
}
试下吧，当我们按空格的时候，小鸟向上飞一小段，如果你想让鸟向上飞，狂按空格啊，暂时先用这个效果吧，我们先添加柱子类。
用同样的方法添加CColumn类，我们观察flappy bird的柱子，每一列有一个缺口，想想该定义哪些属性呢？我定义的几个属性是：
private:
int m_x; //x位置
int m_y; //y位置
int m_height; //长度
int m_width; //宽度
int m_start; //缺口起始位置
int m_length; //缺口长度
int m_speed; //速度
同样给它一些方法：
CColumn::CColumn()
{
m_speed = 2;
m_width = 5;
}
void CColumn::setPos(int x,int y)
{
m_x = x;
m_y = y;
}
void CColumn::setHeight(int height)
{
m_height = height;
}
void CColumn::setStart(int start)
{
m_start = start;
}
void CColumn::setLength(int length)
{
m_length = length;
}
void CColumn::move()
{
m_x = m_x - m_speed;
}
void CColumn::draw(CDC *pDC)
{
CPen* oldPen;
CPen grayPen(PS_SOLID,1,RGB(68,87,28));
CBrush* oldBrush;
CBrush greenBrush(RGB(0,255,0));
oldPen = pDC->SelectObject(&grayPen);
oldBrush = pDC->SelectObject(&greenBrush);
pDC->Rectangle(m_x,m_y,m_x+m_width,m_y+m_start);
pDC->Rectangle(m_x,m_y+m_start+m_length,m_x+m_width,m_y+m_height);
pDC->SelectObject(oldPen);
pDC->SelectObject(oldBrush);
}
里面的代码大家应该能看懂，参数大家可以自己调啦，然后我们在View类中测试一下看看：
头文件：#include"Column.h"
添加定义：CColumn m_column;
初始化参数：
m_column.setPos(100,100);
m_column.setHeight(100);
m_column.setStart(50);
m_column.setLength(20);
在Timer中：m_column.move();
OnDraw中：m_column.draw(pDC);
哈哈，一个绿色的柱子已经动起来了：
当然了，这里柱子的缺口太小，而且只有一根柱子，而且位置也不对，而且，而且。。。这一切的一切都说明我们要在添加一个类来管理我们的鸟类和柱子，我们叫它CGame类吧。
在CGame类中，我们定义游戏区域大小，定义鸟的初始位置，柱子的运动等等，是不是已经迫不及待了呢？
但是这节的内容已经很多了，参考网友的建议，我还是把之后的部分放到下一节吧，让大家有时间喘口气，下节见！