Qt_Demo_2：实现猜字小游戏

1  环境

系统：windows 10

代码编写运行环境：Qt Creator 4.4.1 (community)

Github：https://github.com/zhengcixi/Qt_Demo/tree/master/GuessNum

2  简介

参考视频：https://www.bilibili.com/video/BV1XW411x7NU?p=35https://www.bilibili.com/video/BV1XW411x7NU?p=35

参考博客：https://blog.csdn.net/fengge2018/article/details/106411326

实现功能：一个猜字小游戏，系统随机产生一个4位数，在规定时间内，我们输入4位数进行匹配，如果相同，则赢了；不同且时间到了，则输了。

赢了的实现效果如下：

输了的实现效果如下：

3  实现过程

下面简单说明一下实现的过程：

（1）先创建一个带ui的项目工程，主要包含了如下文件。

（2）ui界面的设计

我们进入widget.ui进行界面设计。使用QStackWidget来存放多个页面，包括以下4个页面：

pageSet是我们刚开始运行时的页面，包含两个QLabel、一个QComboBox、两个QPushButton，如下图：

pageGame是我们玩游戏时的页面，包含一个QProgressBar、一个QTextEdit、10个按钮，如下图：

pageWin是胜利时显示的页面，就只包含一个QLabel组件：

pageLose是输了的时候显示的页面，也只包含一个QLabel组件：

（3）代码逻辑

启动后，我们点击“进入游戏按钮”切换到pageGame，并读取出QComboBox中设置的倒计时时间，启动一个计数器开始计数，并生成一个四位数的随机数；

然后我们输入数字按钮开始进行匹配，数字按钮的槽函数使用同一个，因为它们处理的逻辑是一样的；

若我们输入的数字和随机数相同，则计数器停止计数，并切换到pageWin，启动另一个计时器，显示5s动画后，回到pageSet；

若我们输入的数字和随机数不同，则判断其和随机数的大小，并给出对应的提示；

若时间到了且我们没有猜出成功的答案，则切换到pageLose，启动另一个计时器，显示5s动画后，回到pageSet。

（4）实现代码

widget.h代码：

#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>
#include <QString>
#include <QTimer>
#include <QMovie>

namespace Ui {
class Widget;
}

//目的：实现一个猜字游戏
//说明：
//

class Widget : public QWidget
{
    Q_OBJECT

public:
    explicit Widget(QWidget *parent = 0);
    ~Widget();

    //槽函数
    void on_PushButtonStart_clicked();
    void on_PushButtonQuit_clicked();
    void on_PushButtonRollback_clicked();
    void on_PushButtonNotice_clicked();
    void dealNum();
    void timerEvent(QTimerEvent *event);

private:
    int gameTime;
    int gameTimerId;   //游戏定时器
    int loseTimerId;   //输了
    int winTimerId;    //赢了
    QString randStr;   //随机数
    QString resultStr; //结果数
    QMovie winMovie;   //赢了的动画
    QMovie loseMovie;  //输了的动画


private:
    Ui::Widget *ui;
};

#endif // WIDGET_H

widget.cpp代码：

#include "widget.h"
#include "ui_widget.h"
#include <QDebug>
#include <QTime>
#include <QMessageBox>

Widget::Widget(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::Widget)
{
    ui->setupUi(this);

    //显示第一个页面，设置页面
    ui->stackedWidget->setCurrentWidget(ui->pageSet);
    //失败动画
    loseMovie.setFileName(":/new/prefix1/image/over.gif");
    ui->label_lose->setMovie(&loseMovie);//给标签设置动画
    ui->label_lose->setScaledContents(true);//让动画自动适应标签大小
    //胜利动画
    winMovie.setFileName(":/new/prefix1/image/win.gif");
    ui->label_win->setMovie(&winMovie);
    ui->label_win->setScaledContents(true);

    //启动游戏
    connect(ui->pushButton_enter, &QPushButton::clicked, this, &Widget::on_PushButtonStart_clicked);
    //退出游戏
    connect(ui->pushButton_quit,  &QPushButton::clicked, this, &Widget::close);
    //删除前一个数字
    connect(ui->pushButton_rollback, &QPushButton::clicked, this, &Widget::on_PushButtonRollback_clicked);
    //提示
    connect(ui->pushButton_notice, &QPushButton::clicked, this, &Widget::on_PushButtonNotice_clicked);

    //对数字按钮的处理使用同一个槽函数
    connect(ui->pushButton_0, &QPushButton::clicked, this, &Widget::dealNum);
    connect(ui->pushButton_1, &QPushButton::clicked, this, &Widget::dealNum);
    connect(ui->pushButton_2, &QPushButton::clicked, this, &Widget::dealNum);
    connect(ui->pushButton_3, &QPushButton::clicked, this, &Widget::dealNum);
    connect(ui->pushButton_4, &QPushButton::clicked, this, &Widget::dealNum);
    connect(ui->pushButton_5, &QPushButton::clicked, this, &Widget::dealNum);
    connect(ui->pushButton_6, &QPushButton::clicked, this, &Widget::dealNum);
    connect(ui->pushButton_7, &QPushButton::clicked, this, &Widget::dealNum);
    connect(ui->pushButton_8, &QPushButton::clicked, this, &Widget::dealNum);
    connect(ui->pushButton_9, &QPushButton::clicked, this, &Widget::dealNum);
}

void Widget::on_PushButtonStart_clicked()
{
    //获取下拉框时间，并将字符串转换为整数
    gameTime = ui->comboBox->currentText().toInt();
    qDebug() << gameTime << "s";

    //切换到游戏界面
    ui->stackedWidget->setCurrentWidget(ui->pageGame);

    int num;
    //从0时0分0秒到现在的秒数为种子
    qsrand(QTime(0, 0, 0).secsTo(QTime::currentTime()));
    //调用全局的qsrand()函数生成随机数，对10000取余，保证位于10000的范围内
    while((num = qrand()%10000) < 999);
    randStr = QString::number(num);
    qDebug() << "randNum" << randStr;

    //设置进度条
    ui->progressBar->setMinimum(0); //最小值
    ui->progressBar->setMaximum(gameTime);  //最大值
    ui->progressBar->setValue(gameTime); //当前值

    //启动定时器
    gameTimerId = startTimer(1000);  //以1000ms为间隔
    resultStr.clear();
    ui->textEdit->clear();
}

void Widget::on_PushButtonRollback_clicked()
{
    //退格按钮，删除最后一个数字
    if(resultStr.size() == 1) {
        resultStr.clear();
        ui->textEdit->clear();
    } else {
        resultStr.chop(1); //截断最后一位字符
        ui->textEdit->setText(resultStr);
    }
}

void Widget::on_PushButtonNotice_clicked()
{
    //提示
    resultStr.clear();
    QString str = "正确答案为：" + randStr;
    ui->textEdit->setText(str);
}

void Widget::timerEvent(QTimerEvent *event)
{
    if(event->timerId() == gameTimerId) {  //游戏时间
        gameTime--;
        //设置进度条
        ui->progressBar->setValue(gameTime); //当前值
        //时间到
        if(0 == gameTime) {
            //关闭定时器
            killTimer(gameTimerId);
            QMessageBox::information(this, "失败", "时间到了啊！！！");
            loseMovie.start();//启动动画
            //切换失败动画页面
            ui->stackedWidget->setCurrentWidget(ui->pageLose);
            loseTimerId = startTimer(5000); //启动定时器
        }
    } else if(event->timerId() == loseTimerId) {  //失败动画时间
        //停止动画，停止定时器，回到游戏设置页面
        loseMovie.stop();//停止动画
        killTimer(loseTimerId);  //停止定时器
        //切换到游戏设置页面
        ui->stackedWidget->setCurrentWidget(ui->pageSet);
    } else if(event->timerId() == winTimerId) {  //胜利动画时间
        winMovie.stop();//停止动画
        killTimer(winTimerId);  //停止定时器
        //切换到游戏设置页面
        ui->stackedWidget->setCurrentWidget(ui->pageSet);
    }
}

void Widget::dealNum()
{
    //获取信号发送者
    QObject *mysender = sender();
    //转换为按钮类型
    QPushButton *pb = (QPushButton *)mysender;
    if (NULL != pb) {
        //获取按钮内容
        QString numStr = pb->text();
        resultStr += numStr;
        //数字不能以0开始
        if (resultStr.size() == 1 && resultStr=="0") {
            resultStr.clear();
        }
        //保证显示结果为4位
        if(resultStr.size() <= 4) {
            ui->textEdit->setText(resultStr);
            if (resultStr.size() == 4) {
                if (resultStr > randStr) {
                    ui->textEdit->append("数字大了点!!!");
                } else if (resultStr < randStr) {
                    ui->textEdit->append("数字小了点!!!");
                } else {
                    ui->textEdit->append("恭喜你答对了!!!");
                    //停止定时器
                    killTimer(gameTimerId);
                    QMessageBox::information(this, "胜利", "恭喜你!!!");
                    //启动win页面
                    winMovie.start();
                    ui->stackedWidget->setCurrentWidget(ui->pageWin);
                    //启动定时器
                    winTimerId = startTimer(5000); //5s
                }
                //初始化字符串结果，清空
                resultStr.clear();
            }
        }
    }
}

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

4  总结

主要有以下问题可能实现的时候会遇到：

（1）布局

布局这个确实不好弄，我也不太熟悉，当布局时最好先把相关联的组件放在一个Widget里面布好局之后，再进行全体布局。

（2）按钮的字体设置在QWidget类里面，而不是在QAbstractButton里。

（3）代码中，定时器我们是使用的定时器事件处理函数timerEvent()来做的，而不是信号与槽。

如果代码中还有其它问题，希望网友指出来。