手把手教你写五子棋程序

• 编译环境：vs2019；
• 注意事项：项目属性中高级的字符集选项要设置为多字节；
• 关于图形库EasyX：需要用到该图形化库的库函数，没有下载安装的需要先下载安装改库，关于这个库的函数可自己找相关文档了解；
• 由于代码较多，为了方便管理，我添加了6个头文件来结构化模块化，所以不贴出完整代码，会挑出主要部分来叙述，我会将源文件上传CSDN，有需要可自行下载；
• 注：文章作为自己成长的记录，不足之处还请多指教，师承大帅。

项目分析

• 开始界面：一个简单的开始界面，有开始游戏和退出两个按钮和功能；
• 下面我们首先来看一下程序截图，然后封装这两个按钮：

程序截图

使用结构体封装按钮代码：

typedef struct MYBUTTON
{
	int x;
	int y;
	int width;
	int height;
	char* str;
	COLORREF cur_Color;
	COLORREF in_Color;
	COLORREF out_Color;
}MyButton, * p_MyButton;

• 首先定义一个结构体，包含按钮的x,y轴坐标，宽，高按钮颜色等；

关于结构体别名

• 不加typedef：struct 结构名；然后就可以用结构体名来定义结构体变量；
• 加typedef: typedef struct 结构体名 { 结构体 }结构体别名XXX；
• 结构体别名就相当于：struct 结构体名 结构体别名；
• 使用别名可以很方便的定义结构体变量。

初始化按钮结构体：

p_MyButton setButton(int x,int y,int width,int height,
	COLORREF in_color,COLORREF out_color,const char *str)
{
	p_MyButton pb = (p_MyButton)malloc(sizeof(MyButton));
	assert(pb);
	
	pb->x = x;
	pb->y = y;
	pb->width = width;
	pb->height = height;
	pb->cur_Color = out_color;
	pb->in_Color = in_color;
	pb->out_Color = out_color;
    //这里这样写是因为字符串不能直接赋值
	int strLong = strlen(str) + 1;
	pb->str = (char*)malloc(sizeof(char) * strLong);
	assert(pb->str);
	strcpy_s(pb->str, strLong, str);

	return pb;
}

封装按钮

void draw_Button(p_MyButton pb)
{
    //这里调用easyx的库函数，easyx是一个封装的图形库
	setlinecolor(BLUE);
	setfillcolor(pb->cur_Color);
	fillrectangle(pb->x, pb->y, pb->x + pb->width, 
	pb->y + pb->height);

	settextcolor(WHITE);
	setbkmode(TRANSPARENT);

	settextstyle(30, 0, "楷体");

	int textw = textwidth(pb->str);
	int texth = textheight(pb->str);

	int x = pb->x + (pb->width - textw) / 2;
	int y = pb->y + (pb->height - texth) / 2;
	outtextxy(x, y, pb->str);
}

关于文字居中问题：

• 可以据此图分析其原理，文字居中就相当于求解 ( a, b)这样的一个简单数学题；

游戏问题：

• 我们可以将整个棋盘理解为一个二维数组，0表示未落子为空的状态，1表示黑子（或白子），2表示白字（或黑子）；
• 考虑到后期能会为玩家添加某些属性，所以我定义了这样一个结构体来管理（包含了玩家走的步数和唯一标识的ID，这个ID我用来区分和标识是该谁落子和谁落子）：

typedef struct PCUSER
{
	int User_ID;
	int User_Step;

}Pc_User, * p_PcUser;

下面展示主函数：

int main()
{
	StartMenu();

	ExMessage m;
	//初始化按钮
	p_MyButton pb_1_play = setButton(100, 100, 200, 40, RED, BLUE, "play game");
	p_MyButton pb_2_exit = setButton(100, 160, 200, 40, BLUE, RED, "exit");
	
	//初始化玩家
	p_PcUser pc_1 = setUser(1, 0);
	p_PcUser pc_2 = setUser(2, 0);

	//初始化棋子
	p_MyChess pq_1 = setChess(5, WHITE);
	p_MyChess pq_2 = setChess(5, BLACK);

	int Arr_Chess[21][21] = { 0 };

	//胜利function
	bool isWin(const int Arr[][21],p_PcUser pc);
	void textWin();

	//void show(const int Arr[][21]);

	BeginBatchDraw();
	while (1)
	{
		FlushBatchDraw();
		peekmessage(&m, EM_MOUSE);
		draw_Button(pb_1_play);
		draw_Button(pb_2_exit);
		if (click_Button(m, pb_1_play))
		{
			FlushBatchDraw();
			break;
		}
		if (click_Button(m, pb_2_exit))
		{
			exit(OVERFLOW);
		}
	}

	drawMap();
	//drawChess(200, 200, BLACK);
	
	while (1)
	{
		FlushBatchDraw();
		while (peekmessage(&m, EM_MOUSE))
		{
			//cout << "进来了" << endl;
			if (pc_1->User_Step <= pc_2->User_Step && m.message == WM_LBUTTONDOWN
				&& Arr_Chess[getX_Click(m)+4][getY_Click(m)+4]==0)
			{
				cout << "进来if条件了" << endl;
				if (Click_Draw_Chess(m, pq_1))
				{
					Arr_Chess[getX_Click(m) + 4][getY_Click(m) + 4] = pc_1->User_ID;
					pc_1->User_Step++;
					//show(Arr_Chess);
				}
				//cout << pc_1->User_Step << ' ' << pc_2->User_Step << endl;
				
				break;
			}
			else 
				if(pc_1->User_Step > pc_2->User_Step && m.message == WM_LBUTTONDOWN
					&& Arr_Chess[getX_Click(m)+4][getY_Click(m)+4] == 0)
			{
					if (Click_Draw_Chess(m, pq_2))
					{
						Arr_Chess[getX_Click(m) + 4][getY_Click(m) + 4] = pc_2->User_ID;
						pc_2->User_Step++;
						//show(Arr_Chess);
				    }
				
				//cout << pc_1->User_Step << ' ' << pc_2->User_Step << endl;
				break;
			}
		}
		FlushBatchDraw();
		//cout << "老弟来啦！" << endl;
		if (pc_1->User_Step >= 5 && isWin(Arr_Chess, pc_1))
		{
			textWin();
			FlushBatchDraw();
			//cout << "玩家1胜利" << endl;
			break;
		}
		if (pc_2->User_Step >= 5 && isWin(Arr_Chess, pc_2))
		{
			textWin();
			FlushBatchDraw();
			//cout << "玩家2胜利" << endl;
			break;
		}
	}

	while (1);

	EndBatchDraw();

	return 0;
}

• 要解决的冲突问题：该谁落子；棋子不能覆盖（后手落子的玩家不能覆盖前一个玩家的落子）；

• 要解决的判断胜负问题：我是用二维数组来做的棋盘，用全盘扫描来判断是否有玩家符合，所以要考虑扫描溢出的问题，下面我们来看一下扫面图解：
  

• 玩家胜出的情况无非就是我圈出来的这几种，所以判断胜负只需要做一个二维数组的全盘扫描，但是要注意扫描溢出问题，所以在定义棋盘数组的时候可以定义得大一些，我就吧棋盘的二维数组定义为2121的，但实际用到的只有1313；

• 关于音乐、音效，贴图等功能，各位可先自行尝试，后续我会分享有关内容。

• 下面来看一看运行截图：
  

• 关于该项目的主要几点和内容分析我就分析到这儿，如有疑问可私信或评论讨论，不足之处还请各位大佬指教，最后附上项目的网盘链接（嫌弃下载慢的可在我上传的资源中下载）：https://pan.baidu.com/s/1txsNC7zMbJD3mvOcJog0WA 提取码:8bbr

怎样用C/C++开发图形界面（GUI）程序——点名器示例

原文链接：https://mp.weixin.qq.com/s/O9PXaibAyd__ONBBASYI_Q

仍旧是Via What系列，昨天熬夜读了FLTK的文档，今天终于可以给大家介绍一下了。为什么首选这个GUI框架来介绍，个人感觉它有下面几个好处：

• GUI开发的急救之章
• 对刚开始开发GUI程序的同学比较友好
• 文档完整详实
• 不需要依赖其它杂七杂八的东西

如果你也受够了每次写出的程序只有DOS那个黑框，或是想开发自己的GUI工具，亦或是对GUI程序的开发技术感到好奇，那就一起学习一下吧~

0。GUI vs CLI

简单介绍一下这两者，GUI（Graphical User Interface）和CLI（Command-Line Interface）是两种不同形式的人机接口，说白了就是用户使用某个软件时，那个软件所呈现出的界面外观。CLI编过C语言程序的同学应该都很熟悉，就是那个黑色的窗口，然后打出几个白色的字符：

这种程序又叫控制台应用程序，因为并不是所有的程序都有使用GUI界面的需求，所以这种形式的程序也一直存在（比如Linux系统中大量的工具程序都是以命令行的方式使用的），这种程序对专业用户来说比较方便高效，但对普通用户却不友好。
GUI，也是大家平时使用较多的软件呈现方式，记事本、画图、计算器…这些有菜单、光标、图片…，并且交互方式也不局限于键盘，可以用鼠标指指点点，也可以用数位板、控制器等其它外部设备。当然了，GUI比CLI出现的晚，计算机早期都是用的CLI的形式，至于我们如今用的电脑的这种界面和交互形式，还得追溯到上世纪苹果、微软和施乐公司的相爱相杀。

1。GUI开发技术

CLI并没有什么花里胡哨的东西，但GUI涉及到的开发技术却要复杂的多，下面分析一个不完整的流派列表：

• 从系统的层面来说，Windows、Linux和Mac的界面技术都不相同
• 下面从Windows平台上的一些技术来说，第一是使用Windows系统提供的API来做GUI界面开发，这方面有一本流传经典的书籍，Charles Petzold的《Windows程序设计》（第五版）。
• 接下来是微软之后推出的一个界面开发框架MFC（Microsoft Foundation Classes），这个框架历史已经很悠久了，不过仍然是一个值得了解的框架。微软推出它也是有多种考虑，其一是之前基于Windows API的界面开发，仍然属于结构化的编程模式，但MFC完全基于面向对象的开发思想，而面向对象的开发模式是GUI开发的银弹；其二是应对当时的市场竞争。关于MFC也有一本与《Windows程序设计》齐名的书籍，Jeff Prosise的《MFC Windows程序设计》。
• 这其间还有一种基于可视化的GUI开发方式，如Visual Basic和Delphi等。这种开发技术又称为Rapid Applicaion Development（RAD）。
• 后来微软又完成自己.NET框架的备战，并在C#语言的基础上推出了WinForm开发技术。
• 另外还有数不清的GUI开发库，比如Qt、wxWidgets、WPF这种。当然还有我们今天要介绍的FLTK。
• 一种基于Chrome核的桌面软件开发技术，Chromium Embedded Framework（CEF）。
• Windows 10之后微软又推出了UWP界面构建相关的技术。
• …

2。FLTK

FLTK的全称是Fast Light Tookit，是一个快速、轻量的GUI开发框架。下面是引用官方的一段介绍：

FLTK是跨平台的C ++ GUI工具箱。FLTK提供了现代化的GUI功能，而没有膨胀，并通过OpenGL®及其内置的GLUT仿真支持3D图形。FLTK设计得足够小，并且具有足够的模块性，可以静态链接，但可以作为共享库正常工作。FLTK还包括一个出色的UI生成器，称为FLUID，可在几分钟内创建应用程序。

网址：https://www.fltk.org/index.php
源码：https://www.fltk.org/software.php
文档：https://www.fltk.org/documentation.php
下面我们通过一个小例子来展示使用FLTK构建GUI程序的过程，在开始之前，需要取得FLTK的源码，并编译成静态库供我们自己开发过程中调用。使用Visual Studio 2013版本的同学可以直接下载我编译好的一个静态库：https://pan.baidu.com/s/1rQtGmVzOYKRR-jV9lduHcQ 提取码：qhpd，下载的文件结构如下：

当然，大家也可以使用自己版本的VS进行编译，这里也提供了一份FLTK的源码：https://pan.baidu.com/s/1M9R0QNWaR_Lp1_j_bYvqoA 提取码：ucz7。如果过程中遇到什么麻烦，可以私信我讨论~

3。GUI点名器

点名器，大家应该都不陌生，我也是中毒者之一，但是它开发起来简单，比较适合在这里介绍。借助FLTK库，几十行代码就可以完成这个比较实用的小工具，感兴趣的话，大家也可以打开脑洞，做一些稀奇古怪的工具出来。如果大家想进一步学习FLTK，可以去翻翻FLTK的文档，里面有更综合一些的例子值得研究。

• 布局。开发GUI程序，布局是很必要的一个环节，当然了，因为这个工具非常简单，这里也没有必要再把他小题大做，只要稍微把这几个控件（菜单条、展示框和按钮）安排一下就可以了。
• 功能。快速理一下这个工具的用法，它需要我们导入一张班级名单，点击’>'按钮后，人名开始快速切换，再次点击后，暂停，然后人名对应的那个同学在内心深处传来一声痛苦的嚎叫。
  
• 导入功能。为不失重点，我们使用.txt文件来作为人名导入格式，使用C++代码迅速将这个功能实现一下：

void menu_import_clicked(Fl_Widget *widget, void *data)
{
 char *new_file = fl_file_chooser("Import file?", "*.txt", "");
 if (new_file != NULL)
 {
  std::ifstream ifs(new_file);
  if (ifs.is_open())
  {
   std::string line;
   while (ifs >> line)
    g_names.push_back(line);
   ifs.close();
  }
  g_btn->activate();
 }
}

• 从代码中可以看出，我们实际完成的工作，只是将文本中的人名读到程序中的一个缓冲区当中，供之后快速切换名字之用。至于点击’Import…'菜单项，然后弹出文件选择的文本框，都由FLTK封装好了，也就是代码中的fl_file_chooser函数调用，当它返回时，我们自然得到了用户所期望导入的人员名单的路径。
• 按钮。我们使用了一个普通的按钮来实现这种开始与暂停功能，我相信FLTK有更适合解决这种需求的按钮，但我们用普通按钮来实现也非常容易，窍门就是使用一个静态变量来记录点击次数的奇偶性：

void btn_clicked(Fl_Widget *widget)
{
 static bool is_odd = true;

 if (is_odd)
 {
  widget->label("| |");
    ...
  is_odd = false;
 }
 else
 {
  widget->label(">");
    ...
  is_odd = true;
 }
}

• 切换名字。点名器的核心功能自然是能够快速切换名字了，这里的实现思路是使用定时器，我们使用系统的定时器函数，然后设置了每80ms更新列表中的下一个名字，于是名字就快速切换开来：
  
• 下面是每当定时器被触发时，会调用的函数，我们的做的极为有限，把已经准备好名字列表，按索引赋值给展示标签，如果到达最后一个，我们就让它从头开始。

void WINAPI timer_proc(HWND hwnd, UINT msg, UINT_PTR id, DWORD elapsed)
{
 static int name_index = 0;
 g_timer_id = id;

 if (name_index >= g_names.size())
  name_index = 0;

 g_name_box->label(g_names[name_index++].c_str());
}

• 回调函数。还有一个问题我们一直没谈，也就是上面这些xxx_clicked函数是谁调用的呢？因为好像我们只是准备了这些函数，并没有在我们的程序中调用它们，但我们点击相应的按钮，的确触发了它们。结论是，这些是FLTK库帮我们调用的。那FLTK库是怎样知道哪个按钮对应哪个函数呢？在我们的实现中可以看到类似的代码：

btn->callback(btn_clicked);
about_confirm->callback(about_confirm_clicked)
{ "&Import...", 0, (Fl_Callback *) menu_import_clicked },
{ "E&xit", FL_COMMAND + 'q', (Fl_Callback *) menu_quit_clicked, 0}
{"&About", 0, (Fl_Callback *) menu_about_clicked },

• 这些代码片段便是我们告诉FLTK库，我们要将哪个函数与哪个控件联系在一起，这是GUI应用程序开发中一种很流行的技术，Qt库中被称为”信号-槽“(signal-slot)机制。其实，它们更广泛的名字是”回调函数“（callback-function）。
• 更多。这只是一个最原始的点名器雏形，可以让其支持xls表格的读取，可以让其有点名记录，可以加上切换名字的动画效果，可以让其点名算法更智能（如10次内不重复点），可以自动生成和导出缺勤报告，…一个课堂管理类程序呼之欲出：)

4。源码与结语

点名器的源码下载：
https://pan.baidu.com/s/1ikReql_RAawtstPJA6MHmg 提取码：5s1t
FLTK库就简要介绍到这，有需求的同学可以继续前进，提前熟悉使用一个GUI框架有很多好处，如写工具，提高编码能力，也可以完成一些任务…遇到什么麻烦，欢迎大家找我交流~

来源 | 作者：zhumo
编辑：zhumo
封面：zhumo

听说给点赞的最后都会混的和我一样~

文章首发~

EasyX图形库是一个比较简单容易上手的可视化界面工具包，一般配合VC6.0就可以使用，也可以配合VS系列，这里简单介绍下VC6.0的安装和简单使用。

一、EasyX的安装

然后点击进去下载

如上所示，点击保存文件。

一直点击下一步。

就到现在这个界面，easyX安装程序会自动检索你的电脑上已经安装的Vs系列编辑器，比如我电脑安装的是Visual C++6.0被检索出来，点击安装就行，然后就是安装完成了。很简单吧

二、使用示范

easyX图形库的功能是比较简单的，可以结合鼠标进行操作，也可以加载音频播放，比如做一个游戏就可以设置音乐效果。

这里只简单演示图片的加载使用，更多功能可以直接参考官网的一些使用教程。

打开画布
注意图形库的头文件是graphics.h

#include<graphics.h>
#include<iostream>
#include<conio.h>
using namespace std;
int main()
{
	initgraph(1000,600);//打开1000x600大小的画布
	getch();//按任意键
	closegraph();//关闭画布
	return 0;
}

这是最简单的打开画布关闭画布的代码指令，运行结果如下。

什么也没有，现在给这个画布上面进行绘画，比如加载图片并且显示，代码如下：

#include<graphics.h>
#include<iostream>
#include<conio.h>
using namespace std;
int main()
{
	initgraph(1000,600);//打开1000x600大小的画布
	IMAGE bg;//定义一个图像指针变量bg
	//根据绝对路径（也可以是相对路径，如果你的图片位置和这个代码是同一个文件夹下，直接写文件名）加载图片内容
	//这里是把图片按500x300大小进行调整
	loadimage(&bg,_T("E:\\储物柜\\Game\\test.jpg"),500,300);
	putimage(0,0,&bg);//把图片在左上角（0，0）位置进行显示
	getch();//按任意键
	closegraph();//关闭画布
	return 0;
}

其中test.jpg是一张擎天柱的图片，运行结果如下。
上述擎天柱图片只是按500x300大小进行显示。

这里想要把一个图放在擎天柱背景图上，如下。

#include<graphics.h>
#include<iostream>
#include<conio.h>
using namespace std;
int main()
{
	initgraph(1000,600);//打开1000x600大小的画布
	IMAGE bg;//定义一个图像指针变量bg
	//根据绝对路径（也可以是相对路径，如果你的图片位置和这个代码是同一个文件夹下，直接写文件名）加载图片内容
	//这里是把图片按500x300大小进行调整
	loadimage(&bg,_T("E:\\储物柜\\Game\\test.jpg"),500,300);
	putimage(0,0,&bg);//把图片在左上角（0，0）位置进行显示
	//加载另外一张图片并且显示
	IMAGE t1;
	loadimage(&t1,_T("E:\\储物柜\\Game\\t1.jpg"),100,100);
	putimage(200,100,&t1);

	getch();//按任意键
	closegraph();//关闭画布
	return 0;
}

得到的结果是这样的

能不能把苹果形成透明贴图那样贴擎天柱上面，可以，先把苹果图弄成下面这样：
上面这个图命名t1.jpg

上面这个图命名为t2.jpg。

执行下面代码。

#include<graphics.h>
#include<iostream>
#include<conio.h>
using namespace std;
int main()
{
	initgraph(1000,600);//打开1000x600大小的画布
	IMAGE bg;//定义一个图像指针变量bg
	//根据绝对路径（也可以是相对路径，如果你的图片位置和这个代码是同一个文件夹下，直接写文件名）加载图片内容
	//这里是把图片按500x300大小进行调整
	loadimage(&bg,_T("E:\\储物柜\\Game\\test.jpg"),500,300);
	putimage(0,0,&bg);//把图片在左上角（0，0）位置进行显示
	//加载另外一张图片并且显示
	IMAGE t1,t2;
	loadimage(&t1,_T("E:\\储物柜\\Game\\t1.jpg"),100,100);
	loadimage(&t2,_T("E:\\储物柜\\Game\\t2.jpg"),100,100);
	//两张图片结合形成透明贴图
	//注意下面这两行代码顺序不能颠倒
	putimage(200,100,&t2, SRCAND);
	putimage(200,100,&t1, SRCPAINT);
	getch();//按任意键
	closegraph();//关闭画布
	return 0;
}

运行结果如下

这主要针对做游戏怎么把我们的游戏人物放置在背景图中，具体更多详细复杂的用法可以参考easyX图形库官网进行学习。