QT 實現五子棋

1. 程序簡介:

 五子棋是一款大家都熟系的小游戲，這里給大家一步一步的詳細介紹如何用QT開發這個游戲，並通過這款游戲的開發練習，進一步熟系"qvector"，"qpoint", "qpainter", QMouseEvent, 產生工具欄等的用法和方法。

 

2.程序說明

     2.1  程序運行界面：

            

 

   2.2  程序功能說明：

           1） 鼠標帶棋子跟隨；

           2） 鼠標按下，棋子落在棋盤上最接近的位置；

           3） 判定相臨位置相同棋子數量是否達到5個，若是，則提出勝出；

           4） 按“悔棋”1 次， 退回到上一個棋子，按”結束“ ， 則結束本局游戲。

   

   2.3 算法：

          1）避免實際落棋位置不是要下棋的位置： 把鼠標事件的位置和方格寬度/高度求余，並和方格寬度/高度的1/2 做比較，判定更接近哪一個棋盤座標點。

          2）統計相臨位置相同棋子個數： 以（x,y) 為座標的8個方向為（x+1, y), (x+1,y+1), (x,y+1), (x-1, y+1), (x-1,y),(x-1，y-1),(x, y-1),(x+1, y-1),  遍歷每個方向的棋子是否和（x,y) 位置的棋子相同，直至此方向沒有棋子為止；

 

3.程序設計

3.  程序設計

      3. 1  創建項目

               新建一個以QMainWindow 為基類的Qt Widgets Application，取名 FivePieceChess；

                    

 

                   

       3.2 構建項目

                 1）單擊項目模式，在彈出的窗口中選擇構建套件，后按Configure Project 按扭。

                         

                2) 構建完成 

               

 

    3.3 單個棋子類創建

            3.3.1 添加C++ Class 類， 命名為SignalChess   

                     

 

             3.3.2  在signalchess.h 中添加頭文件<QPoint>, 並關義類體

class SignalChess
{


public:
    SignalChess(){};
    SignalChess(QPoint pt,bool bChessColor);  //位置和顏色為參數的構造函數
    ~SignalChess(void){};

    bool operator==(const SignalChess &t1)const // "==" SignalChess 類等於的重構函數
    {
        return ((mChessPossition == t1.mChessPossition) && (mChessColor == t1.mChessColor));
    }

    QPoint mChessPossition; //位置座標

    bool mChessColor; //顏色

};

           3.3.3 在Signalchess.cpp 中實現類的成員函數

SignalChess::SignalChess(QPoint pt,bool bChessColor)
{
    mChessPossition = pt;   //初始化mChessPoint  和mChessColor 變量
    mChessColor = bChessColor;
}

      3.4  Mainwindow 設計

          3.4.1 在QT designer 里， 添加工具欄，設置工具欄高度為50， 移除狀態欄，菜單欄。

                                     

 

              3.4.2 在mainwindow.h 中添加頭文件， "signalchess.h"，<QPoint>，<QEvent>, <QPainter>,<QVector>並添加如下宏定義

#define CHESS_ROWS        15  //棋盤水平方向格子數
#define CHESS_COLUMES    15  //棋盤垂直方向格子數
#define RECT_WIDTH        50  //每個格子的寬
#define RECT_HEIGHT        50  //每個格式的高

            3.4.3 在mainwindow.h 中添加類體定義

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    MainWindow(QWidget *parent = nullptr);
    ~MainWindow();

protected:
    void paintEvent(QPaintEvent *);  //繪圖事件
    void mousePressEvent(QMouseEvent *); //鼠標事件

private:
    void DrawChessboard();  //畫棋盤
    void DrawChesses();     //畫已下的棋子
    void DrawChessWithMouse(); //將要下的棋子,跟着鼠標移動

    void DrawChessAtPoint(QPainter& painter,QPoint& pt);//在pt 位置,以Painter 畫棋子
    
    int CountNearChess(SignalChess sigalChess,QPoint ptDirection);    //統計某個方向(共8個方向)上的相同顏色的棋子個數，用QPoint表示統計方向，如(1,1)表示右下方,（-1,0）表示向左
    
    void StopGame();  //停止當前棋局
    void RepentanceGame(); //悔棋
    
    
private:
    Ui::MainWindow *ui;

    QVector<SignalChess> mSignalChess;//已下的棋子座標容器
    
    bool mIsBlackTurn;    //當前該黑棋下

};

         3.4.4 在mainwindow.cpp 中實現類成員函數

#include "mainwindow.h"
#include "ui_mainwindow.h"
#include <QMessageBox>
#include <QRadialGradient>
#include <QColor>
#include <QMouseEvent>
#include <QDebug>
#include <QAction>


MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    //設置窗口大小,並固定
    resize((CHESS_COLUMES + 2)*RECT_WIDTH  ,(CHESS_ROWS + 2)*RECT_HEIGHT);
    setMaximumSize((CHESS_COLUMES + 2)*RECT_WIDTH  ,(CHESS_ROWS + 2)*RECT_HEIGHT);
    setMinimumSize((CHESS_COLUMES + 2)*RECT_WIDTH  ,(CHESS_ROWS + 2)*RECT_HEIGHT);
    //黑子先下
    mIsBlackTurn = true;

    //產生工具欄按扭
    QAction *action_L=new QAction(tr("悔棋(&L)"),this);
    QAction *action_S=new QAction(tr("結束(&S)"),this);
    connect(action_L,&QAction::triggered,this,&MainWindow::RepentanceGame);
    connect(action_S,&QAction::triggered,this,&MainWindow::StopGame);
    ui->toolBar->addAction(action_L);
    ui->toolBar->addAction(action_S);

}

MainWindow::~MainWindow()
{
    delete ui;
}

void MainWindow::paintEvent(QPaintEvent *e)
{
    DrawChessboard();        //畫棋盤
    DrawChesses();            //畫棋子
    DrawChessWithMouse();    //畫鼠標（當前方的棋子形狀）

    update();
}

void MainWindow::DrawChessboard()
{
    QPainter painter(this);
    painter.setRenderHint(QPainter::HighQualityAntialiasing, true); //渲染類型為高質量抗鋸齒
    painter.setBrush(Qt::darkCyan);//設置填沖顏色
    painter.setPen(QPen(QColor(Qt::black),2));//設置畫筆顏色,線粗,默認為實線

    for(int i = 0;i<CHESS_COLUMES; i++)//遍歷每一個座標點,畫出每一個矩形.
    {
        for (int j = 0; j<CHESS_ROWS; j++)
        {
            painter.drawRect( (i+1)*RECT_WIDTH,(j+1)*RECT_HEIGHT,RECT_WIDTH,RECT_HEIGHT);
        }
    }
}

void MainWindow::DrawChesses()
{
    QPainter painter(this);
    painter.setPen(QPen(QColor(Qt::transparent))); //透明黑色,same as QColor(0, 0, 0, 0)

    for (int i = 0; i<mPlayedChess.size(); i++) //遍歷每一個已下的棋子
    {
        SignalChess signalchess = mPlayedChess[i];

        //每個已下棋子中心點座標和漸變填沖焦點座標
        QPoint ptcentor((signalchess.mChessPossition.x()+1)*RECT_WIDTH,(signalchess.mChessPossition.y()+1)*RECT_HEIGHT);
        QPoint ptfocal((signalchess.mChessPossition.x()+1)*RECT_WIDTH,(signalchess.mChessPossition.y()+1)*RECT_HEIGHT);
        //定義漸變填沖
        QRadialGradient radialGradient(ptcentor,RECT_WIDTH/3,ptfocal);

        if (signalchess.mChessColor)
        {
            //painter.setBrush(Qt::black);

            //如果是黑子,定義黑色漸變
            radialGradient.setColorAt(0,QColor(0,0,0,255));
            radialGradient.setColorAt(1,QColor(100,100,100,255));
        }
        else
        {
            //painter.setBrush(Qt::white);
            //如果是白子,定義白色漸變
            radialGradient.setColorAt(0,QColor(255,255,255,255));
            radialGradient.setColorAt(1,QColor(180,180,180,255));
        }


        painter.setBrush(radialGradient);//定義漸變填沖

        DrawChessAtPoint(painter,ptcentor); //以ptcentor 為中心畫出棋子
    }
}

void MainWindow::DrawChessAtPoint(QPainter& painter,QPoint& pt)  //以pt 為中心畫出1/3 棋盤方塊寬度為半徑的圓
{
    //painter.drawRect( (pt.x()+0.5)*RECT_WIDTH,(pt.y()+0.5)*RECT_HEIGHT,RECT_WIDTH,RECT_HEIGHT);

    //QPoint ptCenter((pt.x()+0.5)*RECT_WIDTH,(pt.y()+0.5)*RECT_HEIGHT);
    painter.drawEllipse(pt,RECT_WIDTH / 3,RECT_HEIGHT / 3);
}


void MainWindow::DrawChessWithMouse() //將要下的棋子,跟着鼠標移動
{
    QPainter painter(this);
    painter.setPen(QPen(QColor(Qt::transparent)));

    if (mIsBlackTurn)
    {
        painter.setBrush(Qt::black);
    }
    else
    {
        painter.setBrush(Qt::white);
    }

    //mapFromGlobal, 轉換座標為相對座標
    QPoint cPoint(mapFromGlobal(QCursor::pos()));
    //只有在棋盤區域,才繪制圓跟隨鼠標
    //qDebug()<<"cPoint.x()="<<cPoint.x()/RECT_WIDTH<<"cPoint.y()"<<cPoint.y()/RECT_WIDTH;

    if (! (cPoint.x()/RECT_WIDTH<1 || cPoint.x()/RECT_WIDTH>CHESS_COLUMES || cPoint.y()/RECT_HEIGHT<1 || cPoint.y()/RECT_HEIGHT>CHESS_ROWS))

       painter.drawEllipse(cPoint,RECT_WIDTH / 3,RECT_HEIGHT / 3);

}

void MainWindow::mousePressEvent(QMouseEvent * e) //鼠標按下事件
{
    //求鼠標點擊處的棋子點pt
    QPoint pt;
    int x=e->pos().x() ;
    int y=e->pos().y();
    //如果鼠標不是在棋盤區域按下,則放棄此鼠標按壓事件
    if ((x/RECT_WIDTH<1 || x/RECT_WIDTH>CHESS_COLUMES || y/RECT_HEIGHT<1 || y/RECT_HEIGHT>CHESS_ROWS))
        return;

    //判定鼠標的位置更接近哪一個座標點, 將該座標點作為要下棋子的點
    if (x%RECT_WIDTH<=RECT_WIDTH/2)

         pt.setX( x / RECT_WIDTH-1);
    else
        pt.setX( x / RECT_WIDTH);

    if (y%RECT_HEIGHT<=RECT_HEIGHT/2)

         pt.setY( y / RECT_HEIGHT-1);
    else
        pt.setY( y / RECT_HEIGHT);

    //qDebug()<<"x="<<x<<","<<"x%Rect_Width="<<x%RECT_WIDTH<<",pt.x="<<pt.x();
    //qDebug()<<"y="<<y<<","<<"y%Rect_height="<<x%RECT_HEIGHT<<",pt.y="<<pt.y();


    //如果已存在棋子，就什么也不做
    for (int i = 0; i<mPlayedChess.size(); i++) //遍歷已下棋子的座標
    {
        SignalChess signalchess = mPlayedChess[i];
        if (signalchess.mChessPossition == pt) //判定是否已存在棋子,若是,則放棄本次鼠標事件
        {
            return;
        }
    }
    //不存在棋子，則構造一個棋子,並添加到已下棋子容器中
    SignalChess signalchess(pt,mIsBlackTurn);
    mPlayedChess.append(signalchess);

    //統計4個方向是否五子連
    int nLeft =            CountNearChess(signalchess,QPoint(-1,0));
    int nLeftUp =        CountNearChess(signalchess,QPoint(-1,-1));
    int nUp =            CountNearChess(signalchess,QPoint(0,-1));
    int nRightUp =        CountNearChess(signalchess,QPoint(1,-1));
    int nRight =        CountNearChess(signalchess,QPoint(1,0));
    int nRightDown =    CountNearChess(signalchess,QPoint(1,1));
    int nDown =            CountNearChess(signalchess,QPoint(0,1));
    int nLeftDown =        CountNearChess(signalchess,QPoint(-1,1));
    if ( (nLeft + nRight) >= 4 ||
         (nLeftUp + nRightDown) >= 4 ||
         (nUp + nDown) >= 4 ||
         (nRightUp + nLeftDown) >= 4 )
    {
        QString str = mIsBlackTurn?"Black Win":"White Win";
        QMessageBox::information(NULL,  "GAME OVER",str, QMessageBox::Yes , QMessageBox::Yes);
        mPlayedChess.clear();
        //NewGame();
        return;
    }
    //換另一方下棋了
    mIsBlackTurn = !mIsBlackTurn;
}


int MainWindow::CountNearChess(SignalChess signalchess,QPoint ptDirection)
{
    int nCount = 0; //記錄相連棋子個數
    SignalChess item=signalchess;
    item.mChessPossition += ptDirection;//產生待判定的座標

    while (mPlayedChess.contains(item)) //循環確認待判定的座標,item 和signalchess 只是座標位置不同,顏色相同
    {
        nCount++;
        item.mChessPossition += ptDirection; //產生下一個待判定的座標.
    }
    return nCount; //返回相連棋子個數
}

void MainWindow::StopGame() //停止棋局
{
    mPlayedChess.clear();  //清除已下棋子的容器
}

void MainWindow::RepentanceGame() //悔棋
{
    if (!mPlayedChess.empty())
    {
        mPlayedChess.pop_back(); //移除最后一個棋子
        mIsBlackTurn = !mIsBlackTurn; //變回上一個該下的棋子
    }
    else
      return;
}

       3.4.5 窗體標體和圖標設置

          1）在程序文件夾下，創建一個Image 文件夾，拷備app.ico到此文件夾下；

          2）新建QT Resource ， 添加app.ico

                        

 

         3）在QT designer 設置窗體屬性， windowTitle 為“五子棋”， windowicon 為資源文件里的app.ico

                   

 

               

 

 

 

結束~~