SDL 实现五子棋 GUI (二)

好了, 经过之前简单的介绍, 我们就开始做一个 SDL 下的五子棋 GUI 吧!

首先还是做一些简单的介绍(关于什么是 SDL, 上一篇已经给出官方网站):
在 SDL 中, 制作的思路就是创建出 GUI 所需要的各个组件(图层), 在呈现的时候从最下面的一层一次"贴"到屏幕上面, 用户就能看到一个完整的 GUI 界面了. 同时使用主循环和相应的函数接收消息并作出响应, 每次循环和一些操作之后都要更新界面.

由于 SDL 的原始语言是 C 语言, 在 C++ 中时候之前可以对其进行封装, 这样有利于以后的调用以及异常处理. 封装过程不再累述, 给出 SDL 教程地址, 有兴趣的人可以自行前往学习:
再别流年的技术实验室, http://www.cppblog.com/lf426/category/6107.html?Show=All
Lazy Foo' Productions, http://lazyfoo.net/SDL_tutorials/index.php

我的程序中使用的基本框架也来自于教程, 后来为了加强功能又添加了一些成员函数以及修改了部分细节和异常处理过程.

那么...我们开始 PS 素材吧!

在这里要说一下, 作者是 PS 小白, 一个简单的 GUI 素材用了一整晚的时间, 参考了一些 PS 图文教程, 不会画画确实比较困难.

首先, 我们需要准备一张棋板:

这里使用的是 560x560 像素, PS 网格间距 35 像素, 下载了个边框画笔.

之后我们 PS 一下程序的主界面, 800x600 像素:

其中棋盘左上角坐标(可以下子的区域为棋盘)为 (55, 55), 棋盘为 490x490 尺寸, 一个格子 35 像素. 特别地, 在 SDL 中坐标原点在窗体内部左上角, x 轴水平向右, y 轴竖直向下. 那些坐标信息以后会用到.

还缺什么呢? 棋子! 于是 PS 出这俩货

其中的高光弄得很郁闷, 毫无绘画功底, 更不懂高光.

现在基本齐全了, 不过...每下一盘棋以后还要关闭程序再运行? 好吧, 我们再弄出个 Start/Restart 按钮.

正常时候

鼠标经过

按下

现在素材就准备好了. 在面对枯燥的(我倒觉得蛮有意思)代码之前, 给出一张样品图

注: 本文只给出了 GUI 的实现部分, 不包括程序的 AI 和功能性逻辑结构. 及在目前的 GUI 中, 不能判断玩家是否胜利, 在同一个格子上也可以下两次及以上的棋. 在下一篇日志中我将给出一个可能的加入 AI 借口以后的代码. 至于 AI 怎么实现, 网上文献很多, 就不再讨论了(其实是自己的 AI 很渣, 羞愧).

注2: 要在 windows 下配置编译环境, 可以参考教程, 我会给出在 windows 下通过 Code::Blocks 配置的一篇简单文章.

然后开始写代码, 在这里我先给出界面实现的代码, 然后附带给出个各类的定义. 至于这些类怎么来的, 具体实现是什么, 代码量不小, 改写自教程. 完整的源代码及图片我打包以后放在下载里面, 免费下载学习哈(不知道要不要注册). 给出的文件中, /bin/release 下是一个已经编译好的版本.

void SDLGUI::startGame()
{
    //constant value
    const int SCREEN_WIDTH = 800;
    const int SCREEN_HEIGHT = 600;
    const int BIT_DEPTH = 32;
    const Uint32 FLAG = SDL_DOUBLEBUF | SDL_HWSURFACE;
    const int BOARD_Top = 55;//pixel
    const int BOARD_Left = 55;//pixel
    const int BOARD_WIDTH = 490;
    const int BOARD_HEIGHT = 490;
    const int PIXEL_PER_GRID = 35;
    const int BUTTON_X = 605;
    const int BUTTON_Y = 510;
    const int BLACK_ICON_X = 600;
    const int BLACK_ICON_Y = 180;
    const int WHITE_ICON_X = 600;
    const int WHITE_ICON_Y = 240;
    const int TEXT_BLACK_X = 660;
    const int TEXT_BLACK_Y = 177;
    const int TEXT_WHITE_X = 660;
    const int TEXT_WHITE_Y = 237;

    #ifdef __windows__
    SDL_putenv("SDL_VIDEODRIVER=directx");
    #endif

    #ifdef __linux__
    SDL_putenv("SDL_VIDEODRIVER=dga");
    #endif

    bool isQuit = false;
    bool isBlackTurn = true; // Alternate each round
    int row = 0;
    int col = 0;

    ScreenSurface screen(SCREEN_WIDTH, SCREEN_HEIGHT, BIT_DEPTH, FLAG, "MySDL");
    PictureSurface backSurface("board.jpg", screen);
    PictureSurface blackStone("black.png", screen, true);
    PictureSurface whiteStone("white.png", screen, true);
    ButtonPlus button("button.png", "button_over.png", "button_press.png", screen, true);