【QT从零开始系列10】翻金币项目实战

项目资源获取

视频链接（B站）: QT从入门到实战完整版

百度云链接：https://pan.baidu.com/s/1w2knS8G-yXbjCXSTyj7nYw 提取码：07gu

完整项目源码及资源：https://pan.baidu.com/s/1ExEfEakz6v4QHLYDTcIaZQ
提取码：xnob

创建项目 并导入资源

	//配置主场景
    
    //设置固定大小
    this->setFixedSize(320,588);
    
    //设置图标
    this->setWindowIcon(QPixmap(":/res/Coin0001.png"));
    
    //设置窗口标题
    this->setWindowTitle("老帮主带你翻金币");

	//退出按钮实现
    connect(ui->actionQuit,&QAction::triggered,[=](){
   
        this->close();
    });
//注意QAction只能为英文，则退出写作quit，再修改text为中文退出

设置背景图片

//mainscene.h
	//重写paintEvent事件 画背景图
    void paintEvent(QPaintEvent *event);

//mainscene.cpp
#include <QPainter>

//配置主场景

    //设置固定大小
    this->setFixedSize(320,588);

    //设置图标
    this->setWindowIcon(QPixmap(":/res/Coin0001.png"));

    //设置窗口标题
    this->setWindowTitle("翻金币主场景");

    //退出按钮实现
    connect(ui->actionQuit,&QAction::triggered,[=](){
   
        this->close();
    });

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.width(),pix.height(),pix);
}

开始按钮创建

创建开始按钮

新建C++ class 命名为MyPushButton

//mypushbutton.h
#ifndef MYPUSHBUTTON_H
#define MYPUSHBUTTON_H

#include <QPushButton>

class MyPushButton : public QPushButton
{
   
    Q_OBJECT
public:
    //explicit MyPushButton(QWidget *parent = 0);

    //构造函数 参数1 正常显示的图片路径 参数2 按下后显示的图片路径
    MyPushButton(QString normalImg,QString pressImg = "");

    QString normalImgPath;
    QString pressImgPath;

signals:

public slots:
};

#endif // MYPUSHBUTTON_H

//mypushbutton.cpp
#include "mypushbutton.h"
#include <QDebug>


//MyPushButton::MyPushButton(QWidget *parent) : QPushButton(parent)
//{
   

//}

MyPushButton::MyPushButton(QString normalImg,QString pressImg )
{
   
    this->normalImgPath = normalImg;
    this->pressImgPath = pressImg;

    QPixmap pix;
    bool ret = pix.load(normalImg);
    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()));

}

//mainscene.cpp
#include "mypushbutton.h"

//在MainScene::MainScene中写入
	//开始按钮
    MyPushButton * startBtn = new MyPushButton(":/res/MenuSceneStartButton.png");
    startBtn->setParent(this);
    startBtn->move(this->width() * 0.5 - startBtn->width()*0.5,this->height()*0.7);

开始按钮跳跃特效实现

//mainscene.cpp
connect(startBtn,&MyPushButton::clicked,[=](){
   
        //qDebug() << "点击了开始";
        //做弹起特效
        startBtn->zoom1(); //向下跳跃
        startBtn->zoom2(); //向上跳跃

    });

//mypushbutton.cpp
void MyPushButton::zoom1()
{
   
    //创建动态对象
    QPropertyAnimation * animation = new QPropertyAnimation(this,"geometry");
    //设置动画时间间隔
    animation->setDuration(200);

    //起始位置
    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(200);

    //起始位置
    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();

}

选择关卡场景配置

新建关卡类

添加新的C++ class文件，类名为ChooseLevelScene 选择基类为QMainWindow

 //mainscene.h
#ifndef MAINSCENE_H
#define MAINSCENE_H

#include <QMainWindow>
#include "chooselevelscene.h"


namespace Ui {
   
class MainScene;
}

class MainScene : public QMainWindow
{
   
    Q_OBJECT

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

    //重写paintEvent事件 画背景图
    void paintEvent(QPaintEvent *event);

    //初始化选择关卡场景
    ChooseLevelScene * chooseScene = NULL;
    
private:
    Ui::MainScene *ui;
};

#endif // MAINSCENE_H

//mainscene.cpp
#include <QTimer>	

	//实例化选择关卡场景
    chooseScene = new ChooseLevelScene;

    connect(startBtn,&MyPushButton::clicked,[=](){
   
        //qDebug() << "点击了开始";
        //做弹起特效
        startBtn->zoom1(); //向下跳跃
        startBtn->zoom2(); //向上跳跃

        //延时进入到选择关卡场景中
        QTimer::singleShot(500,this,[=](){
   
            //自身隐藏
            this->hide();
            //显示选择关卡场景
            chooseScene->show();
        });

    });

选择关卡配置

设置背景图片->创建返回按钮

//chooselevelscene.cpp
#include "chooselevelscene.h"
#include <QMenuBar>
#include <QPainter>
#include "mypushbutton.h"
#include <QDebug>

ChooseLevelScene::ChooseLevelScene(QWidget *parent) : QMainWindow(parent)
{
   
    //配置选择关卡场景
    //设置窗口固定大小
    this->setFixedSize(320,588);
    //设置图标
    this->setWindowIcon(QPixmap(":/res/Coin0001.png"));
    //设置标题
    this->setWindowTitle("选择关卡");

    //创建菜单栏
    QMenuBar * bar = this->menuBar();
    this->setMenuBar(bar);
    //创建开始菜单
    QMenu * startMenu = bar->addMenu("开始");
    //创建按钮菜单项
    QAction * quitAction = startMenu->addAction("退出");
    //点击退出 退出游戏
    connect(quitAction,&QAction::triggered,[=](){
   this->close();});

    //返回按钮
    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,[=](){
   
        qDebug() << "点击了返回按钮";
    });

}

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");
    painter.drawPixmap( (this->width() - pix.width())*0.5,30,pix.width(),pix.height(),pix);

}

实现返回按钮按下效果

//mypushbutton.h
	//重写按钮 按下 和释放事件
    void mousePressEvent(QMouseEvent *e);

    void mouseReleaseEvent(QMouseEvent *e);

//mypushbutton.cpp
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