ps制作网站首页面教程轻松网站建设

效果

闲来无事，实现一个对对碰游戏，卡牌样式是火影动漫。
先上效果：

玩法

1. 启动游戏，进入第一关卡，所有卡牌都为未翻开状态，即背面朝上；
2. 点击卡牌，则将卡牌翻开；
3. 如果当前翻开的卡牌和上一次翻开的卡牌不一致，则1s后，将两张卡牌再次背面朝上；
4. 如果当前翻开的卡牌和上一次翻开的卡牌一致，则两张卡牌都会正面朝上；
5. 全部翻开，本官通关，则进去下一关卡。

UI

上一张初始UI图：

再上一张通关图：

示例

• 可以加个启动界面；
• 根据分类原则，后期可以加一些菜单及快捷工具操作，比如选关卡，关卡通关耗时等操作，因此主窗口选择QMainWidow,如果想样式美观，可自定义重写QMainWidow；
• 因为是不同关卡，所以选择栈控件作为中央窗体，可进行界面切换；也可以只有一个页面，根据关卡，动态刷新；
• 将关卡作为一个类；将关卡中的各个项作为一个类；
• 因为得创建，因此后来可以使用工厂模式进行关卡及项创建；
• 通过定时器与鼠标事件进行界面卡牌打开及关闭；
• 通关后，提示。

由于界面展现效果不好，以下是部分实现代码，代码链接在下方¹，可下载：

item.h

#ifndef ITEM_H
#define ITEM_H#include <QLabel>class Step;namespace Ui {
class Item;
}
// 在关卡中创建的项
class Item : public QLabel
{Q_OBJECTpublic:explicit Item(const QString& strItem, Step* pStep, QWidget *parent = nullptr);~Item();// 是否翻开void setOpen(bool b){m_bIsOpen = b;}bool open(){return m_bIsOpen;}protected:// 触发鼠标事件virtual void mouseReleaseEvent(QMouseEvent *ev) override;virtual void mousePressEvent(QMouseEvent *ev) override;private:Ui::Item *ui;Step*       m_pStep;bool        m_bIsOpen = false;
};#endif // ITEM_H

step.h

#ifndef STEP_H
#define STEP_H#include <QWidget>
// 类前置
QT_FORWARD_DECLARE_CLASS(Item)namespace Ui {
class Step;
}class Step : public QWidget
{Q_OBJECTpublic:explicit Step(const QString& strStepPath, QWidget *parent = nullptr);~Step();// 设置上一个点击的itemvoid setPreviousItem(Item* pItem){m_pItemPrevious = pItem;}Item* item(){return m_pItemPrevious;}bool check();
private:// 初始化关卡QList<QStringList> initStep(const QString& strStepPath);// 初始化项void initItem(const QList<QStringList>& listSL);// 创建关卡内的项Item *createItem(const QString& strItem);private:Ui::Step *ui;Item*       m_pItemPrevious = nullptr;    // 上一个Item
};#endif // STEP_H

mainWindow.h

#ifndef MAINWINDOW_H
#define MAINWINDOW_H#include <QMainWindow>class QStackedWidget;namespace Ui {
class MainWindow;
}class MainWindow : public QMainWindow
{Q_OBJECTpublic:explicit MainWindow(QWidget *parent = nullptr);~MainWindow();private:// 初始化关卡配置文件void init();private:Ui::MainWindow *ui;QStackedWidget*         m_pSW;
};#endif // MAINWINDOW_H

代码链接

---

1. 卡牌对对碰: https://gitcode.net/MrHHHHHH/qt-_card/-/blob/master/FlipTheCardGame.rar ↩︎