table of Contents
Second, the realization process
1. Create a project and add project resources
2. Create the main scene (mainscene.cpp/.h)
4. Create a selection level scene (chooselevelscene.cpp/.h)
5. Create a coin flip scene (playscene.cpp/.h)
6. Create gold coins (mycoin.cpp/.h)
7. The default display of each level
8. Single gold coin flip special effect
9. Flip the surrounding gold coins
13. Project packaging and game expansion
3. Program source code and image resource path
One, achieve the effect
Second, the realization process
1. Create a project and add project resources
The following is the required picture resources and the completed project directory
2. Create the main scene (mainscene.cpp/.h)
Set fixed size, title, icon, background, menu bar exit item, start button, etc.
#include "mainscene.h"
#include "ui_mainscene.h"
#include "QPainter"
#include "QPixmap"
#include "mypushbutton.h"
#include "QDebug"
#include "chooselevelscene.h"
#include "QTimer"
#include "QSound"//多媒体模块下的音效头文件
mainscene::mainscene(QWidget *parent) : QMainWindow(parent), ui(new Ui::mainscene)
{
ui->setupUi(this);
//配置主场景
setFixedSize(320,588);//设置固定大小
setWindowIcon(QIcon(":/res/Coin0001.png"));//设置图标
setWindowTitle("翻金币主场景");//设置标题
//菜单栏-->退出选项 的实现
connect(ui->actionQuit, &QAction::triggered, [=](){
this->close();
});
//准备开始按钮的音效
QSound *startsound = new QSound(":/res/TapButtonSound.wav", this);
//实例化选择关卡场景
chooseScene = new ChooseLevelScene;
//监听选择关卡的返回按钮信号
connect(chooseScene, &ChooseLevelScene::chooseSceneBack, this, [=](){
chooseScene->hide();//隐藏选择关卡
this->setGeometry(chooseScene->geometry());//由选择场景返回时,设置主场景的位置,不然会乱动
this->show();//重新显示主场景
});
//开始按钮,使用自定义的PushButton
MyPushbutton *startbtn = new MyPushbutton(":/res/MenuSceneStartButton.png");
startbtn->setParent(this);
startbtn->move(this->width()*0.5 - startbtn->width()*0.5, this->height()*0.7);
connect(startbtn, &MyPushbutton::clicked, [=](){
qDebug() <<"点击了开始";
startbtn->zoom1();
startbtn->zoom2();
//播放音效
startsound->play();
//startsound->setLoops(-1);//设置循环,如果是-1表示无限循环
//延时进入选择关卡，才能看见弹跳的效果
QTimer::singleShot(100,this,[=](){
this->hide();//隐藏主场景
chooseScene->setGeometry(this->geometry());//进入选择场景时,设置选择场景的位置,不然会乱动
chooseScene->show();//显示选择关卡的场景
});
});
}
mainscene::~mainscene()
{
delete ui;
}
//重写paintEvent事件，画背景图
void mainscene::paintEvent(QPaintEvent *)
{
QPainter painter(this);
QPixmap pix;
pix.load(":/res/PlayLevelSceneBg.png");
painter.drawPixmap(0,0,this->width(), this->height(), pix);
pix.load(":/res/Title.png");
pix = pix.scaled(pix.width()*0.5, pix.height()*0.5);//对图片进行缩放
painter.drawPixmap(10,30,pix);
}3. Custom start button (mypushbutton.cpp/.h)
1. Encapsulate a custom button MyPushButton
2. Constructor (default display picture, picture displayed after pressing)
3. Test start button
4. Start making special effects
5. Zoom1 jump down
6, zoom2 jump up
#include "mypushbutton.h"
#include "QDebug"
#include "QPropertyAnimation"
//构造函数,参数：正常显示的图片路径 按下后显示的图片路径
MyPushbutton::MyPushbutton(QString normalImg, QString pressImg)
{
this->normalImgPath = normalImg;
this->pressImgPath = pressImg;
QPixmap pix;
bool ret = pix.load(normalImgPath);
if (!ret){
qDebug() <<"图片加载失败";
return;
}
//设置图片固定大小
this->setFixedSize(pix.width(), pix.height());
//设置不规则图片的样式
this->setStyleSheet("QPushButton{border:0px}");
//设置图标
this->setIcon(pix);
//设置图标大小
this->setIconSize(QSize(pix.width(), pix.height()));
}
//向下跳
void MyPushbutton::zoom1()
{
//创建动态对象
QPropertyAnimation *animation = new QPropertyAnimation(this, "geometry");
//设置动画时间间隔
animation->setDuration(100);
//起始位置
animation->setStartValue(QRect(this->x(), this->y(), this->width(), this->height()));
//结束位置
animation->setEndValue(QRect(this->x(), this->y()+10, this->width(), this->height()));
//设置弹跳曲线
animation->setEasingCurve(QEasingCurve::OutBounce);
//执行动画
animation->start();
}
//向上跳
void MyPushbutton::zoom2()
{
//创建动态对象
QPropertyAnimation *animation = new QPropertyAnimation(this, "geometry");
//设置动画时间间隔
animation->setDuration(100);
//起始位置
animation->setStartValue(QRect(this->x(), this->y()+10, this->width(), this->height()));
//结束位置
animation->setEndValue(QRect(this->x(), this->y(), this->width(), this->height()));
//设置弹跳曲线
animation->setEasingCurve(QEasingCurve::OutBounce);
//执行动画
animation->start();
}
void MyPushbutton::mousePressEvent(QMouseEvent *e)
{
if (this->pressImgPath != "")//传入的按下按钮不为空,表示需要切换图片
{
QPixmap pix;
bool ret = pix.load(this->pressImgPath);
if (!ret){
qDebug() <<"图片加载失败";
return;
}
//设置图片固定大小
this->setFixedSize(pix.width(), pix.height());
//设置不规则图片的样式
this->setStyleSheet("QPushButton{border:0px}");
//设置图标
this->setIcon(pix);
//设置图标大小
this->setIconSize(QSize(pix.width(), pix.height()));
}
//让父类执行其他内容
return QPushButton::mousePressEvent(e);
}
void MyPushbutton::mouseReleaseEvent(QMouseEvent *e)
{
if (this->pressImgPath != "")//传入的按下按钮不为空,表示按下的时候切换图片了,弹起的时候需要切换回去
{
QPixmap pix;
bool ret = pix.load(this->normalImgPath);
if (!ret){
qDebug() <<"图片加载失败";
return;
}
//设置图片固定大小
this->setFixedSize(pix.width(), pix.height());
//设置不规则图片的样式
this->setStyleSheet("QPushButton{border:0px}");
//设置图标
this->setIcon(pix);
//设置图标大小
this->setIconSize(QSize(pix.width(), pix.height()));
}
//让父类执行其他内容
return QPushButton::mouseReleaseEvent(e);
}4. Create a selection level scene (chooselevelscene.cpp/.h)
1. After clicking the start button, delay entering the selected level to see the effect of the bounce
2. Configure the selected level scene (fixed size, title, icon, background, menu bar exit item, return button)
3. Write the special effect of the back button: change the background after pressing and popping up
4. Switch between the start scene and the selected scene: Click the return button of the selected level scene to send a custom signal. In the main scene, monitor the custom signal of the selected level scene, then hide the selected scene and display the main scene
5. Create the selection button in the selected level: use a for loop to arrange all the buttons in the scene; set a QLabel on the button to display the number of levels; QLabel sets the size, font, display text, alignment, and mouse penetration; Button click event
#include "chooselevelscene.h"
#include "QMenuBar"
#include "QPainter"
#include "QPixmap"
#include "QDebug"
#include "mypushbutton.h"
#include "QTimer"
#include "QLabel"
#include "QSound"
ChooseLevelScene::ChooseLevelScene(QWidget *parent) : QMainWindow(parent)
{
//配置选择关卡场景
this->setFixedSize(320,588);
//设置图标
this->setWindowIcon(QPixmap(":/res/Coin0001.png"));
//设置标题
this->setWindowTitle("选择关卡场景");
//创建菜单栏
QMenuBar *bar = menuBar();
setMenuBar(bar);
QMenu *startMenu = bar->addMenu("开始");//创建开始菜单项
QAction *quitAction = startMenu->addAction("退出"); //场景退出的菜单项
connect(quitAction, &QAction::triggered, [=](){
this->close();
});
//选择关卡音效
QSound *choosesound = new QSound(":/res/TapButtonSound.wav", this);
//返回音效
QSound *backsound = new QSound(":/res/BackButtonSound.wav", this);
//创建返回按钮
MyPushbutton *backbtn = new MyPushbutton(":/res/BackButton.png", ":/res/BackButtonSelected.png");
backbtn->setParent(this);
backbtn->move(this->width()-backbtn->width(), this->height()-backbtn->height());
//点击之后返回主场景
connect(backbtn, &MyPushbutton::clicked, [=](){
//播放返回音效
backsound->play();
qDebug() <<"选择场景点击了返回按钮";
//需要告诉主场景,选择场景返回了,主场景监听 chooseScene 的返回
QTimer::singleShot(100, this, [=](){
emit this->chooseSceneBack();//延时返回
});
});
//场景选择按钮
for (int i=0; i<20; i++)
{
//创建按钮
MyPushbutton *menuBtn = new MyPushbutton(":/res/LevelIcon.png");
menuBtn->setParent(this);
menuBtn->move(25+i%4*70, 130+i/4*70);
//创建按钮文本
QLabel *label = new QLabel;
label->setParent(this);
label->setFixedSize(menuBtn->width(), menuBtn->height());
label->setText(QString::number(i+1));
label->move(25+i%4*70, 130+i/4*70);
label->setAlignment(Qt::AlignHCenter|Qt::AlignVCenter); //设置文字对齐方式
label->setAttribute(Qt::WA_TransparentForMouseEvents); //设置让鼠标进行穿透!!!!这样menuBtn才能收到点击事件
//监听每个按钮的点击事件
connect(menuBtn, &MyPushbutton::clicked, [=](){
//播放音效
choosesound->play();
QString str = QString("选择的关卡是 %1 关").arg(i+1);
qDebug() <<str.toUtf8().data();
//进入到游戏场景
this->hide();//隐藏选择场景
this->play = new PlayScene(i+1);
this->play->setGeometry(this->geometry());//进入翻金币场景时,设置其位置
this->play->show();//进入游戏场景
//监听游戏场景的返回信号
connect(play, &PlayScene::chooseSceneBack, [=](){
this->setGeometry(this->play->geometry());//翻金币场景返回时,设置选择场景的位置
this->show();//展示选择场景,这里不会立马显示出来????????
delete this->play;//删除翻金币场景
this->play = NULL;
});
});
}
}
//重写绘图事件,绘制背景
void ChooseLevelScene::paintEvent(QPaintEvent *)
{
QPainter painter(this);
QPixmap pix;
//加载背景
pix.load(":/res/OtherSceneBg.png");
painter.drawPixmap(0,0,this->width(),this->height(),pix);
//加载标题
pix.load(":/res/Title.png");
//pix = pix.scaled(pix.width()*0.5, pix.height()*0.5);//对图片进行缩放
painter.drawPixmap(10,30,pix);
}5. Create a coin flip scene (playscene.cpp/.h)
1. After clicking the select level button, enter the coin flipping game scene
2. Configure the game scene (fixed size, title, icon, background, menu bar exit item, return button, level number display Label)
#include "playscene.h"
#include "QMenuBar"
#include "QPainter"
#include "QPixmap"
#include "QDebug"
#include "mypushbutton.h"
#include "QTimer"
#include "QLabel"
#include "mycoin.h"
#include "dataconfig.h"
#include <QPropertyAnimation>
#include <QSound>
//PlayScene::PlayScene(QWidget *parent) : QMainWindow(parent)
//{
//}
PlayScene::PlayScene(int levelNum)
{
QString str = QString("进入了第 %1 关").arg(levelNum);
qDebug() <<str.toUtf8().data();
this->levelIndex = levelNum;
//初始化游戏场景
this->setFixedSize(320,588);
this->setWindowIcon(QPixmap(":/res/Coin0001.png"));
this->setWindowTitle("翻金币场景");
//创建菜单栏
QMenuBar *bar = menuBar();
setMenuBar(bar);
QMenu *startMenu = bar->addMenu("开始");//创建开始菜单
QAction *quitAction = startMenu->addAction("退出"); //场景退出的菜单项
connect(quitAction, &QAction::triggered, [=](){
this->close();
});
//胜利的音效
QSound *winsound = new QSound(":/res/LevelWinSound.wav", this);
//翻金币音效
QSound *flipsound = new QSound(":/res/ConFlipSound.wav", this);
//返回音效
QSound *backsound = new QSound(":/res/BackButtonSound.wav", this);
//创建返回按钮
MyPushbutton *backbtn = new MyPushbutton(":/res/BackButton.png", ":/res/BackButtonSelected.png");
backbtn->setParent(this);
backbtn->move(this->width()-backbtn->width(), this->height()-backbtn->height());
//点击之后返回选择场景
connect(backbtn, &MyPushbutton::clicked, [=](){
//播放返回音效
backsound->play();
qDebug() <<"翻金币场景点击了返回按钮";
//需要告诉选择场景,翻金币场景返回了,选择d场景监听 chooseScene 的返回
QTimer::singleShot(10, this, [=](){
emit this->chooseSceneBack();//延时返回
});
});
//创建显示关卡的文本
QLabel *label = new QLabel;
QFont font;
font.setFamily("华文新魏");
font.setPointSize(20);
QString str1 = QString("Level: %1").arg(this->levelIndex);
label->setParent(this);
label->setFont(font);
label->setText(str1);
label->setGeometry(30, this->height()-50, 130, 50);
//初始化每个关卡的二维数组,记录金币的正反面状态
dataconfig config;
for (int i=0; i<4; i++)
{
for (int j=0; j<4; j++)
{
this->gameArray[i][j] = config.mData[this->levelIndex][i][j];
}
}
//胜利图片显示
QLabel *winLabel = new QLabel;
QPixmap tmppix;
tmppix.load(":/res/LevelCompletedDialogBg.png");
winLabel->setGeometry(0,0,tmppix.width(),tmppix.height());
winLabel->setPixmap(tmppix);
winLabel->setParent(this);
winLabel->move((this->width()-tmppix.width())*0.5, -tmppix.height());
//显示金币
for (int i=0; i<4; i++)
{
for (int j=0; j<4; j++)
{
//显示金币的背景图片
QPixmap pix = QPixmap(":/res/BoardNode.png");
QLabel *label = new QLabel;
label->setGeometry(0,0,pix.width(),pix.height());
label->setPixmap(pix);
label->setParent(this);
label->move(40+i*60, 200+j*60);
//创建金币
QString str;
if (this->gameArray[i][j] == 1){
str = ":/res/Coin0001.png";
} else {
str = ":/res/Coin0008.png";
}
MyCoin *coin = new MyCoin(str);
coin->setParent(this);
coin->move(44+i*60, 205+j*60);
//给金币的属性赋值
coin->posX = i;//记录X坐标
coin->posY = j;//记录y坐标
coin->flag = gameArray[i][j];//记录正反标志 1正面 0反面
//记录金币的句柄,以便后期的维护
this->coinbtns[i][j] = coin;
//监听金币按钮的点击事件,进行翻转
connect(coin, &MyCoin::clicked, [=](){
//播放翻金币音效
flipsound->play();
//点击金币后,在翻金币前,先禁用其他金币的点击响应,否则手速快会出现bug
for (int i=0; i<4; i++)
{
for (int j=0; j<4; j++)
{
this->coinbtns[i][j]->isWin = true;
}
}
//翻转点击的金币
coin->changeFlag();
this->gameArray[coin->posX][coin->posY] = (this->gameArray[coin->posX][coin->posY] == 0)?1:0;
//延时 翻转周围金币
QTimer::singleShot(300, this, [=](){
if (coin->posX+1 <= 3)//翻转右侧金币
{
this->coinbtns[coin->posX+1][coin->posY]->changeFlag();
this->gameArray[coin->posX+1][coin->posY] = (this->gameArray[coin->posX+1][coin->posY] == 0)?1:0;
}
if (coin->posX-1 >= 0)//翻转左侧金币
{
this->coinbtns[coin->posX-1][coin->posY]->changeFlag();
this->gameArray[coin->posX-1][coin->posY] = (this->gameArray[coin->posX-1][coin->posY] == 0)?1:0;
}
if (coin->posY-1 >= 0)//翻转上侧金币
{
this->coinbtns[coin->posX][coin->posY-1]->changeFlag();
this->gameArray[coin->posX][coin->posY-1] = (this->gameArray[coin->posX][coin->posY-1] == 0)?1:0;
}
if (coin->posY+1 <= 3)//翻转下侧金币
{
this->coinbtns[coin->posX][coin->posY+1]->changeFlag();
this->gameArray[coin->posX][coin->posY+1] = (this->gameArray[coin->posX][coin->posY+1] == 0)?1:0;
}
//翻转完所有金币后,才启用其他金币的点击响应,否则手速快会出现bug
for (int i=0; i<4; i++)
{
for (int j=0; j<4; j++)
{
this->coinbtns[i][j]->isWin = false;
}
}
//判断是否胜利
this->isWin = true;
for (int i=0; i<4; i++)
{
for (int j=0; j<4; j++)
{
if (this->gameArray[i][j] == false)
{
this->isWin = false;
break;
}
}
}
if (this->isWin == true)
{
//播放胜利音效
winsound->play();
qDebug() <<"游戏胜利";
//将胜利的图片降下来
QPropertyAnimation *animation = new QPropertyAnimation(winLabel, "geometry");
//设置动画时间间隔
animation->setDuration(1000);
//起始位置
animation->setStartValue(QRect(winLabel->x(), winLabel->y(), winLabel->width(), winLabel->height()));
//结束位置
animation->setEndValue(QRect(winLabel->x(), winLabel->y()+110, winLabel->width(), winLabel->height()));
//设置缓和曲线
animation->setEasingCurve(QEasingCurve::OutBounce);
//执行动画
animation->start();
//胜利后 将每个btn的标志都改为true,再点击按钮,不做响应
for (int i=0; i<4; i++)
{
for (int j=0; j<4; j++)
{
this->coinbtns[i][j]->isWin = true;
}
}
}
});
});
}
}
}
void PlayScene::paintEvent(QPaintEvent *)
{
QPixmap pix;
QPainter painter(this);
//加载背景
pix.load(":/res/PlayLevelSceneBg.png");
painter.drawPixmap(0,0,this->width(),this->height(),pix);
//加载标题
pix.load(":/res/Title.png");
pix = pix.scaled(pix.width()*0.5, pix.height()*0.5);//对图片进行缩放
painter.drawPixmap(10,30,pix);
}6. Create gold coins (mycoin.cpp/.h)
1. Put the background image of the gold coin into playScene
2. Create MyCoin custom coin button class
3. In the MyCoin::MyCoin(QString btnImg) constructor, pass in the gold coins displayed by default
4. Create all gold coin buttons in playScene
#include "mycoin.h"
#include "QString"
#include "QDebug"
#include "QPixmap"
#include "QPushButton"
//MyCoin::MyCoin(QWidget *parent) : QWidget(parent)
//{
//}
MyCoin::MyCoin(QString btnImg)
{
QPixmap pix;
bool ret = pix.load(btnImg);
if (!ret)
{
QString str = QString("图片 %1 加载失败").arg(btnImg);
qDebug() <<str;
return;
}
this->setFixedSize(pix.width(), pix.height());
this->setStyleSheet("QPushButton{border:0px}");
this->setIcon(pix);
this->setIconSize(QSize(pix.width(), pix.height()));
//初始化定时器对象
timer1 = new QTimer(this);
timer2 = new QTimer(this);
//监听正面翻反面(金币翻成银币)的信号,并且翻转金币
connect(timer1, &QTimer::timeout, [=](){
QPixmap pix;
QString str = QString(":/res/Coin000%1.png").arg(this->min++);
bool ret = pix.load(str);
if (!ret){
QString str = QString("图片 %1 加载失败").arg(str);
qDebug() <<str;
return;
}
this->setFixedSize(pix.width(), pix.height());
this->setStyleSheet("QPushButton{border:0px}");
this->setIcon(pix);
this->setIconSize(QSize(pix.width(), pix.height()));
if (this->min > this->max)
{
this->min = 1;
timer1->stop();
this->isAnimation = false;
}
});
//监听反面翻正面(银币翻成金币)的信号,并且翻转金币
connect(timer2, &QTimer::timeout, [=](){
QPixmap pix;
QString str = QString(":/res/Coin000%1.png").arg(this->max--);
bool ret = pix.load(str);
if (!ret){
QString str = QString("图片 %1 加载失败").arg(str);
qDebug() <<str;
return;
}
this->setFixedSize(pix.width(), pix.height());
this->setStyleSheet("QPushButton{border:0px}");
this->setIcon(pix);
this->setIconSize(QSize(pix.width(), pix.height()));
if (this->max < this->min)
{
this->max = 8;
timer2->stop();//翻转8次后才停止,显示整个翻转的过程
this->isAnimation = false;
}
});
}
//改变正反面的标志的方法
void MyCoin::changeFlag()
{
if (this->flag)
{
timer1->start(30);
this->flag = false;
this->isAnimation = true;//翻转开始,定时器停止翻转结束
}
else
{
timer2->start(30);
this->flag = true;
this->isAnimation = true;
}
}
//重写按下事件,只有在isAnimation为false时执行,避免翻转过程中连续点击按钮
//在执行中或胜利后不再执行点击事件
void MyCoin::mousePressEvent(QMouseEvent *e)
{
if (this->isAnimation || this->isWin)
{
return;
}
else
{
QPushButton::mousePressEvent(e);//交给父类处理
}
}7. The default display of each level
1. First import dataconfig.h and dataconfig.cpp files into the project
2. Add an array of int gameArray[4][4] in PlayScene to maintain the state of gold coins in each level
3. Initialize the display of each level
8. Single gold coin flip special effect
1. Add attributes to each gold coin: posX, posY, flag positive and negative signs
2. Add the function changeFlag() to MyCoin to modify the front and back flags of the flag
3. Add forward flip timer timer1 and reverse flip timer timer2. After clicking the gold coin, if the flag is true, change to false, and timer1 is turned on, the front and back sides will start to be flipped. Each card will be displayed with a delay of 30ms. A total of 8 cards will be displayed. The effect of the animation display; if the flag is changed from false to true, and timer2 is turned on, the reverse side will start to turn to the front, and each frame will be displayed with a delay of 30ms, and a total of 8 frames will be displayed to achieve the effect of the animation display;
4. To solve the problem that the effect of quick click is not good, add isAnimation to determine whether an animation is being performed, and at the same time rewrite the mousePressEvent event to respond when isAnimation = false to ensure the complete effect of the flip
9. Flip the surrounding gold coins
Click on the gold coin, after flipping the hit gold coin, delay flipping the surrounding gold coins
10. Judge victory
1. Add the isWin logo in PlayScene to judge whether you win; if you win, block all the clicks of gold coins
2. Victory picture special effects display, create a winLabel to display a picture of victory, when the game is won, move the picture to the center of the screen
11. Sound effects added
1. QSound belongs to the multimedia module, which needs to be added to the .pro file
QT += core gui multimedia
2. Start adding sound effects (start scene ---> select scene, select scene ---> flip gold coin scene)
3. Add back button sound effect (select scene ---> start scene, turn gold coin scene ---> select scene)
4. Added sound effects for turning gold coins
5. Added victory sound effects
12. Project optimization
1. The positions of the three scene switching are set to be the same, so that the scene position will not change after switching
2. The logo must be assigned an initial value, otherwise the system will be initialized randomly, causing the gold coin to fail to turn over
bool isAnimation = false;//执行动画标志,这里一定要赋初值!!!
bool isWin = false;//判断是否胜利的标志3. Before flipping the gold coin, first disable the mouse click event of other gold coins. After the flip is completed, enable the mouse click event of other gold coins to prevent quick clicks. Other gold coins are clicked during the flip.
13. Project packaging and game expansion
1. Select release, build the project, and generate the .exe file
2. Copy the .exe file to any path and package it so that it can be run on any computer that does not have the QT environment installed. Before packaging, first make sure that there is windeployqt.exe in the QT installation directory.
3. Open the windows command terminal and enter the .exe directory ( shortcut: in the folder, click the blank space, shift+right click, and select "open window here" ), enter windeployqt.exe [.exe file name]
4. After the generation is successful, some files will be generated in the current directory. Copy this folder to any computer without a QT environment to run
3. Program source code and image resource path
The following path is my github path, you can get the source code of the entire project, or you can chat privately with me to get resources. If you think it's helpful, you can help to point a little star
https://github.com/denghengli/qt_study/tree/master/16_CoinFlip