4. Create a scene of flipping gold coins
4.1 Create the gold coin flipping interface
After designing the main scene and selecting the level interface, we come to the most important part: flipping gold coins. First, create a cpp file named PlayScene. The first step is to declare PlayScene *pScene = NULL; in the selected level for later use. After clicking the button to select a level, you will jump into the scene. At this time, the scene needs to be displayed, and the interface for selecting a level needs to be hidden. The second step is to pay attention to the constructor in the original PlayScene.h, write a constructor again, and write a member variable to record the number of selected levels. The specific code and results are as follows:
//进入到了游戏场景
this->hide();//选择关卡界面隐藏
play = new PlayScene(i+1);//这是将选择哪一个关卡告诉play
play->show();//某一关卡显示
PlayScene::PlayScene(int levelNum)
{
QString str = QString("进入了第 %1 关").arg(levelNum);
qDebug()<<str;
this->levelIndex = levelNum;
}
4.2 Basic configuration of flipping gold coins
After the results came out, I found that the interfaces of all levels were ugly and had nothing. Then I started to manipulate them, mainly including: background , icon, size, title and return button (return to the level selection page) and the menu bar. In short, the code is the same as before, so I won’t go into details here. Look at the results directly, as follows:
4.3 Add level labels
After setting the above, you need to set the level labels. The playscene code and results are as follows:
QLabel *Label = new QLabel;
Label->setParent(this);
QFont font;
font.setFamily("华文新魏");//关卡标签的字体
font.setPointSize(20);//大小
Label->setFont(font);
QString str1 = QString("Level %1").arg(this->levelIndex);//关卡
Label->setText(str1);
Label->setGeometry(QRect(30,this->height()-50,120,50));//位置
4.4 Add gold coin background image
Create a background image of gold coins and place gold coins here. The logic is relatively simple and is implemented using two for loops. The code and results are:
for(int i = 0 ; i < 4;i++)
{
for(int j = 0 ; j < 4; j++)
{
//绘制背景图片
QLabel* label = new QLabel;
label->setGeometry(0,0,50,50);
label->setPixmap(QPixmap(":/res/BoardNode.png"));
label->setParent(this);
label->move(57 + i*50,200+j*50);
}
}
4.5 Package gold coins
4.5.1 Add gold coins to the picture on the background
As the most important part of the game, gold coins have the ability to click and flip special effects. Therefore, the gold coin class is encapsulated in a class, called "MyCoin", which is specifically used to implement the gold coin function. First, the gold coin flip function is implemented. In fact, the gold coin flip is achieved by quickly switching between 8 pictures. When flipping the gold coin What is presented to the user is nothing more than gold or silver coins. Therefore, comment out the original constructor and rewrite a constructor yourself. The parameter is the path of the gold or silver coinMyCoin(QString coinpath);It is implemented in MyCoin.cpp and needs explanation. Yes, since the gold coin flip needs to be pressed, its parent class needs to be changed to QPushButton. The code and results are:
4.6 Introducing level data
Then create each For the level data, you need to import the level data file, which records the two-dimensional array data of the level. Right-click .pro and select Add existing file, select dataConfig.h and dataConfig.cppJust file. You can see it in the public interfaceQMap<int, QVector< QVector<int> > >mData;where int represents the number of levels, and QVector<QVector> records the two-dimensional array in the level. What needs to be explained is QMap<key, T> container, which provides a dictionary (or associated array), mapping a key to a value. At the public interface, int is the corresponding key, and QVector<QVector> is the corresponding T, which is better Understand.
Declare a member variable in playscene.hint gameArray[4][4]; to record the two-dimensional data of the current level. Then initialize the two-dimensional array in playscene.cpp, Then determine whether it is a gold coin or a silver coin based on the value in the array (0 or 1). The code is as follows:
//初始化每一个关卡的二维数组
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];
//后面就可以根据gameArray[i][j]中的数据决定是金币或者是银币了
}
}
分割///
//创建金币 做一个判断：金币或者是银币
QString str;
if(gameArray[i][j]==1)
{
str = ":/res/Coin0001.png";//金币
}
else
{
str = ":/res/Coin0008.png";//银币
}
MyCoin * coin = new MyCoin(str);
coin->setParent(this);
coin->move(59 + i*50,204+j*50);//金币放置的位置与金币背景的位置一样
4.7 Flip the Gold Coin
After the gold coin is placed, the gold coin must be flipped, that is, it will be flipped into a silver coin by clicking on it. First, define the attributes of the coin in mycoin.h, including the x and y positions and whether it is flipped. Then declare the flip functionvoid changFlag();, create 2 timers under this function to record the flipping from front to back and flip from tail to front, and define 2 member variables for recording the number of photos ( Because it is a flip effect of 8 photos).
void changFlag();
QTimer timer1;//正面->反面的定时器
QTimer timer2;//反面->正面的定时器
int min=1;
int max=8;
Implemented in .cpp as:
oid MyCoin::changFlag()//改变金币银币面的标志
{
if(this->flag) //如果是金币面，执行下列代码
{
timer1->start(30);
this->flag = false;
}
else //银币面执行下列代码
{
timer2->start(30);
this->flag = true;
}
}
Then do the listening operation in the constructor, react and end the timer. Then monitor the gold coin press operation in playscene.cpp and change the currency status.
//监听的是金币面翻银币面的信号
connect(timer1,&QTimer::timeout,[=](){
QPixmap pix;
QString str = QString(":/res/Coin000%1").arg(this->min++);
pix.load(str);
this->setFixedSize(pix.width(),pix.height());
this->setStyleSheet("QPushButton{border:0px;}");
this->setIcon(pix);
this->setIconSize(QSize(pix.width(),pix.height()));
//如果翻转结束了，将min重置为1
if(this->min>this->max)
{
this->min=1;
timer1->stop();
}
});
//监听的是银币面翻金币面的信号
connect(timer2,&QTimer::timeout,[=](){
QPixmap pix;
QString str = QString(":/res/Coin000%1").arg(this->max--);
pix.load(str);
this->setFixedSize(pix.width(),pix.height());
this->setStyleSheet("QPushButton{border:0px;}");
this->setIcon(pix);
this->setIconSize(QSize(pix.width(),pix.height()));
//如果翻转结束了，将min重置为1
if(this->max<this->min)
{
this->max=8;
timer2->stop();
}
});
//点击金币进行翻转
connect(coin,&MyCoin::clicked,[=](){
coin->changFlag();
this->gameArray[i][j] = this->gameArray[i][j]==0?1:0;//改变币种的状态
});
4.8 Flip surrounding gold coins
The above analysis basically realizes the operation of turning gold coins into silver coins and silver coins into gold coins. The problem now is that you can only flip one by clicking on it, and what we ultimately want to achieve is to flip the gold coins surrounding a certain gold coin. In fact, it is just a change of position. For example, if you want to flip the gold coin on the left, just if(coin->posX+1<=3), and the rest is similar. The code and results are as follows:
//实现周围金币的翻转
if(coin->posX+1<=3)//右侧翻转条件
{
coinBtn[coin->posX+1][coin->poxY]->changFlag();
this->gameArray[coin->posX+1][coin->poxY] = this->gameArray[coin->posX+1][coin->poxY]==0?1:0;
}
if(coin->posX-1>0)//左侧翻转条件
{
coinBtn[coin->posX-1][coin->poxY]->changFlag();
this->gameArray[coin->posX-1][coin->poxY] = this->gameArray[coin->posX-1][coin->poxY]==0?1:0;
}
if(coin->poxY+1<=3)//上侧翻转条件
{
coinBtn[coin->posX][coin->poxY+1]->changFlag();
this->gameArray[coin->posX][coin->poxY+1] = this->gameArray[coin->posX][coin->poxY+1]==0?1:0;
}
if(coin->poxY-1>0)//下侧翻转条件
{
coinBtn[coin->posX][coin->poxY-1]->changFlag();
this->gameArray[coin->posX][coin->poxY-1] = this->gameArray[coin->posX][coin->poxY-1]==0?1:0;
}
4.9 Determine the victory and display the victory image
The project is about to end. The next step is to determine the victory and display the victory symbol. Add a flag to determine victory in playscene.h, and set it to true at the beginning. When the surrounding gold coins are flipped, it is judged whether it was successful or not. The sign of success is: all gold coins are flipped into silver coins. It is forbidden to flip any gold coin after victory. The specific code is as follows:
//判断是否胜利了
this->isWin = true;
for(int i=0;i<4;i++)
{
for(int j=0;j<4;j++)
{
if(coinBtn[i][j]->flag==false)//只要有一个是反面则失败了
{
this->isWin = false;
break;
}
}
}
if(this->isWin==true)
{
qDebug()<<"胜利了";
if(this->isWin==true)
{
qDebug()<<"胜利了";
//将所有按钮的胜利标志设为true
for(int i=0;i<4;i++)
{
for(int j=0;j<4;j++)
{
coinBtn[i][j]->isWin=true;
}
}
}
}
//Display the victory sign
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());
胜利的特效///
```cpp
if(this->isWin)
{
qDebug() << "胜利";
QPropertyAnimation * animation1 = new QPropertyAnimation(winLabel,"geometry");
animation1->setDuration(1000);
animation1->setStartValue(QRect(winLabel->x(),winLabel->y(),winLabel->width(),winLabel->height()));
animation1->setEndValue(QRect(winLabel->x(),winLabel->y()+170,winLabel->width(),winLabel->height()));
animation1->setEasingCurve(QEasingCurve::OutBounce);
animation1->start();
}
