[C++知识库]基于Qt、C++的五子棋及AI对抗小游戏

第一篇文章，简述UI界面的制作与鼠标移动事件的响应，这一部分功能的代码在后面有贴出，整个项目完整功能的代码在后面

一、通过UI界面做几个按钮及标签

一些空间的字体、颜色、背景色在styleSheet中设置

二、设置棋盘
1、画出背景色与网格

void MainWindow::paintEvent(QPaintEvent*){
    QPainter painter(this);
    //反走样
    painter.setRenderHint(QPainter::Antialiasing, true);
    //画棋盘
    //背景上色
    QBrush brush;
    brush.setColor(QColor(213, 176, 141));
    brush.setStyle(Qt::SolidPattern);
    painter.setBrush(brush);

    //边框
    QPen pen = painter.pen();
    painter.setPen(pen);
    //大背景
    painter.drawRect(30, 30, 740, 740);

    //棋盘网格线
    pen.setColor(Qt::black);
    pen.setWidth(1);
    painter.setPen(pen);
    for(int i = 0; i < 15; i++){
        painter.drawLine(50, 50 + i * 50, 750, 50 + i * 50);
        painter.drawLine(50 + 50 * i, 50, 50 + 50 * i, 750);
    }
}

效果图如下

2、设置棋子格式
.h文件中声明int chessBoard[15][15] = {0};//棋盘大小
因为是静态数组，大小固定，所以用int比vector方便

    //画棋盘上面的五个黑点
    brush.setColor(Qt::black);
    painter.setBrush(brush);
    //rect参数的意思是 左上角坐标为（195,195）大小为10*10
    painter.drawRect(195, 195, 10, 10);
    painter.drawRect(595, 195, 10, 10);
    painter.drawRect(195, 595, 10, 10);
    painter.drawRect(595, 595, 10, 10);
    painter.drawRect(395, 395, 10, 10);

    //画棋子
    brush.setStyle(Qt::SolidPattern);
    for(int i = 0; i < 15; i++)
        for(int j = 0; j < 15; j++){
            if(chessBoard[i][j] == 1){
                brush.setColor(Qt::black);
                painter.setBrush(brush);
                //以Point为圆心画个圆
                painter.drawEllipse(QPoint(50 + i * 50, 50 + j * 50), 20, 20);
            }
            else if(chessBoard[i][j] == 2){
                brush.setColor(Qt::white);
                painter.setPen(Qt::NoPen);
                painter.setBrush(brush);
                painter.drawEllipse(QPoint(50 + i * 50, 50 + j * 50), 20, 20);
            }
        }

效果如下

添加鼠标事件，如果鼠标移动到没有棋子的框附近，则出现绿色效果如下

	//在paintEvent中添加如下代码
    if((mouseX >= 0 && mouseX <= 14) && (mouseY >= 0 && mouseY <= 14) && chessBoard[mouseX][mouseY] == 0){
        //第四个参数指的是透明度，255为全色，小于255可以看见图像后面的内容，等于0或大于255时效果一样，全透明
        brush.setColor(QColor(0,255,0,150));
        painter.setPen(Qt::NoPen);
        painter.setBrush(brush);
        painter.drawEllipse(QPoint(mouseX * 50 + 50, mouseY * 50 + 50), 20, 20);
    }

void MainWindow::mouseMoveEvent(QMouseEvent *e){
    //获得鼠标在哪个网格的位置
    mouseX = (e->x() + 25) / 50 - 1;
    mouseY = (e->y() + 25) / 50 - 1;
    update();
}

当然要在构造函数那里进行初始化，代码如下：

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    ui->centralwidget->setMouseTracking(true);//这一行看下面的解释
    this->setMouseTracking(true);
}

在Qt中要捕捉鼠标移动事件需要重写MouseMoveEvent，但是MouseMoveEvent为了不太耗资源，默认状态下是要鼠标按下才能捕捉到。要想鼠标不按下时的移动也能捕捉到，需要setMouseTracking(true)。
QWidget中使用是没有问题的，但是，对于QMainWindow即使使用了setMouseTracking(true)依然无法捕捉到鼠标没有按下的移动，只有在鼠标按下是才能捕捉。
解决办法：要先把QMainWindow的CentrolWidget使用setMouseTracking(true)开启移动监视。然后在把QMainWindow的setMouseTracking(true)开启监视。之后就一切正常了。
原因：CentrolWIdget是QMainWindow的子类，你如果在子类上响应鼠标事件，只会触发子类的mouseMoveEvent，根据C++继承和重载的原理，所以子类也要setMouseTracking(true); 所以如果你想响应鼠标事件的控件被某个父控件包含，则该控件及其父控件或容器也需要setMouseTracking(true);

目前为止的代码，后续会有些许改动
mainwindow.h

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>
#include <QPaintEvent>
#include <QPainter>
#include <vector>
#include <stack>
#include <QString>
#include <QMouseEvent>
QT_BEGIN_NAMESPACE
namespace Ui { class MainWindow; }
QT_END_NAMESPACE
using namespace std;
class MainWindow : public QMainWindow
{
    Q_OBJECT
private:
    int chessBoard[15][15] = {0};//棋盘大小
    //vector<vector<int> > chessBoard(15, vector<int>(15, -1));
    int player = 0;//玩家，偶数为第一个，奇数为第二个
    int mouseX, mouseY; //鼠标的位置
    int currentX, currentY;//上次落子点的位置
    bool lock; //锁住棋盘
    bool flag = false; // true为开始， false为结束
    int game_type; // 1为PVC, 2为PVP
    QString winner;
    stack<QPoint > sta; //放棋子的栈，便于悔棋
public:
    MainWindow(QWidget *parent = nullptr);
    ~MainWindow();
    //绘图事件
    void paintEvent(QPaintEvent*);

    //鼠标移动事件
    void mouseMoveEvent(QMouseEvent* e);

    //鼠标按压事件
   void mousePressEvent(QMouseEvent* e);
private:
    Ui::MainWindow *ui;
};
#endif // MAINWINDOW_H

mainwindow.cpp

#include "mainwindow.h"
#include "ui_mainwindow.h"

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);
//    chessBoard[7][7] = 1;
//    chessBoard[12][8] = 2;
    lock = false;
    flag = true;
    ui->centralwidget->setMouseTracking(true);
    this->setMouseTracking(true);
}

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

void MainWindow::paintEvent(QPaintEvent*){
    QPainter painter(this);
    //反走样
    painter.setRenderHint(QPainter::Antialiasing, true);
    //画棋盘
    //背景上色
    QBrush brush;
    brush.setColor(QColor(213, 176, 141));
    brush.setStyle(Qt::SolidPattern);
    painter.setBrush(brush);

    //边框
    QPen pen = painter.pen();
    painter.setPen(pen);
    //大背景
    painter.drawRect(30, 30, 740, 740);

    //棋盘网格线
    pen.setColor(Qt::black);
    pen.setWidth(1);
    painter.setPen(pen);
    for(int i = 0; i < 15; i++){
        painter.drawLine(50, 50 + i * 50, 750, 50 + i * 50);
        painter.drawLine(50 + 50 * i, 50, 50 + 50 * i, 750);
    }
    //画棋盘上面的五个黑点
    brush.setColor(Qt::black);
    painter.setBrush(brush);
    //rect参数的意思是 左上角坐标为（195,195）大小为10*10
    painter.drawRect(195, 195, 10, 10);
    painter.drawRect(595, 195, 10, 10);
    painter.drawRect(195, 595, 10, 10);
    painter.drawRect(595, 595, 10, 10);
    painter.drawRect(395, 395, 10, 10);

    //画棋子
    brush.setStyle(Qt::SolidPattern);
    for(int i = 0; i < 15; i++)
        for(int j = 0; j < 15; j++){
            if(chessBoard[i][j] == 1){
                brush.setColor(Qt::black);
                painter.setBrush(brush);
                //以Point为圆心画个圆
                painter.drawEllipse(QPoint(50 + i * 50, 50 + j * 50), 20, 20);
            }
            else if(chessBoard[i][j] == 2){
                brush.setColor(Qt::white);
                painter.setPen(Qt::NoPen);
                painter.setBrush(brush);
                painter.drawEllipse(QPoint(50 + i * 50, 50 + j * 50), 20, 20);
            }
        }
    if(flag == false) return ;
    //画最近一个落子的标识红框
    pen.setColor(Qt::red);
    pen.setWidth(1);
    //这样可以把框框设置成空心的
    painter.setPen(pen);
    painter.setBrush(Qt::NoBrush);
    painter.drawRect(currentX * 50 + 50 - 23, currentY * 50 + 50 -23, 46, 46);
    //产生胜负结束游戏，锁棋
    if(lock) return;
    //鼠标移动标识
    if((mouseX >= 0 && mouseX <= 14) && (mouseY >= 0 && mouseY <= 14) && chessBoard[mouseX][mouseY] == 0){
        //第四个参数指的是透明度，255为全色，小于255可以看见图像后面的内容，等于0或大于255时效果一样，全透明
        brush.setColor(QColor(0,255,0,150));
        painter.setPen(Qt::NoPen);
        painter.setBrush(brush);
        painter.drawEllipse(QPoint(mouseX * 50 + 50, mouseY * 50 + 50), 20, 20);
    }
}

void MainWindow::mouseMoveEvent(QMouseEvent *e){
    //获得鼠标在哪个网格的位置
    mouseX = (e->x() + 25) / 50 - 1;
    mouseY = (e->y() + 25) / 50 - 1;
    update();
}

仅仅是对此博主文章的复现，博主GitHub代码如下：
添加链接描述