资源下载地址：https://download.csdn.net/download/sheziqiong/85788151
资源下载地址：https://download.csdn.net/download/sheziqiong/85788151
2048小游戏：通过上下左右键合并数字块，合并得出2048时，游戏胜利；当上下左右操作均无法移动任一数字块，游戏失败。
2. 开发软件系统环境： Windows 10
开发环境： Qt Creator 4.3.1
编译器环境： MinGW 5.3.0 32bit (C/C++)
Qt依赖版本： Qt 5.9.0
3. 课题要求学生自选题目，使用C++语言完成一个图形化的小程序。
图形化平台不限，可以是MFC、QT等。
程序内容主题不限，可以是小游戏、小工具等。
4. 主要流程 4.1 绘制游戏窗口： 4.1.1 QWidget：Widget是Qt中创建用户界面的主要元素，它可以显示数据和状态信息，接收用户输入，并为其他应该组合在一起的Widget提供一个容器（可以堆叠盛放其他的Widgets）。最外层的Widget称为Window。
GameBoard::GameBoard(QWidget *parent) : // 由Qwidget继承来的组件
QWidget(parent)
在创建游戏面板时，我们在文件初始创建时就可以选中继承对象QWidget
4.1.2 QLayout：- QLayout提供了便捷的页面布局方法：
- QHBoxLayout将Widget按水平排列，从左到右。
- QVBoxLayout将Widget按垂直排列，从上到下。
- QGridLayout在二维网格中布局Widget。Widget可以占用多个单元格。
// 设置主窗口垂直布局
mainLayout = new QVBoxLayout(); // QLayout将Widget呈现垂直排列
setLayout(mainLayout);
// 创建游戏面板为网格状布局
boardLayout = new QGridLayout(); // QLayout将Widget呈现二维网格排列
4.1.3 QLabel：
- QLabel用于显示文本或图像。不提供用户交互功能。
- QLabel可以使用类似CSS的样式设置，通过方法setStyleSheet启用样式设置
auto cell = new QLabel();
cell->setText("2");
cell->setAlignment(Qt::AlignCenter);
cell->setStyleSheet("QLabel { background: rgb(238,228,218); color: rgb(119,110,101); font: bold; border-radius: 10px; font: 40pt; }");
- 上面代码将cell定义为一个QLabel，设置块中文本为2，居中，同时设置了QLabel样式，对颜色、背景和字体进行进一步调整。
- 在游戏面板下方，显示分数score，且右对齐。
// 加入score显示模块
score = new QLabel(QString("SCORE: %1").arg(0)); // 用QLabel显示分数score
score->setStyleSheet("QLabel { color: rgb(235,224,214); font: 16pt; }"); // 设置样式
score->setFixedHeight(50); // 高度自适应
mainLayout->insertWidget(1, score, 0, Qt::AlignRight); // 在主窗口中插入分数模块
4.1.5 绘制4*4网格布局：
- 4*4的生成采用循环语句。由于游戏中需要对数字块进行多次绘制并具备初始化功能，所以抽象为drawBoard()函数代替。
void GameBoard::drawBoard()
{
delete boardLayout;
boardLayout = new QGridLayout();
for (int i = 0; i < NCells; ++i) {
for (int j = 0; j < NCells; ++j) {
delete cells[i][j];
cells[i][j] = new Cell(game.board[i][j]);
boardLayout->addWidget(cells[i][j], i, j);
cells[i][j]->draw();
}
}
mainLayout->insertLayout(0, boardLayout);
}
4.2 绘制数字块：
- 数字块可以命名为Cell，是QLabel类型的，可以显示文本并设置样式
- 在文件创建时，可以设置为继承QLabel
- cell类声明了draw()成员函数，用于设置网格的样式。
Cell::Cell(int v): value(v)
{
setAlignment(Qt::AlignCenter);
}
void Cell::draw() //draw()函数可以按照cell不同的值来设置样式
{
setText(QString::number(value));
auto style = QString("Cell { background: %1; color: %2; font: bold; border-radius: 10px; font: 40pt; }");
switch (value) {
case 2: {
setStyleSheet(style.arg("rgb(238,228,218)").arg("rgb(119,110,101)"));
break;
}
case 4: {
setStyleSheet(style.arg("rgb(237,224,200)").arg("rgb(119,110,101)"));
break;
}
case 8: {
setStyleSheet(style.arg("rgb(242,177,121)").arg("rgb(255,255,255)"));
break;
}
case 16: {
setStyleSheet(style.arg("rgb(245,150,100)").arg("rgb(255,255,255)"));
break;
}
case 32: {
setStyleSheet(style.arg("rgb(245,125,95)").arg("rgb(255,255,255)"));
break;
}
case 64: {
setStyleSheet(style.arg("rgb(245,95,60)").arg("rgb(255,255,255)"));
break;
}
case 128: {
setStyleSheet(style.arg("rgb(237,207,114)").arg("rgb(255,255,255)"));
break;
}
case 256: {
QGraphicsDropShadowEffect *dse = new QGraphicsDropShadowEffect();
dse->setColor(Qt::yellow);
dse->setBlurRadius(20);
dse->setOffset(-1);
setGraphicsEffect(dse);
setStyleSheet(style.arg("rgb(237,204,97)").arg("rgb(255,255,255)"));
break;
}
case 512: {
QGraphicsDropShadowEffect *dse = new QGraphicsDropShadowEffect();
dse->setColor(Qt::yellow);
dse->setBlurRadius(30);
dse->setOffset(-1);
setGraphicsEffect(dse);
setStyleSheet(style.arg("rgb(237,204,97)").arg("rgb(255,255,255)"));
break;
}
case 1024: {
QGraphicsDropShadowEffect *dse = new QGraphicsDropShadowEffect();
dse->setColor(Qt::yellow);
dse->setBlurRadius(40);
dse->setOffset(-1);
setGraphicsEffect(dse);
setStyleSheet(style.arg("rgb(237,204,97)").arg("rgb(255,255,255)"));
break;
}
case 2048: {
QGraphicsDropShadowEffect *dse = new QGraphicsDropShadowEffect();
dse->setColor(Qt::yellow);
dse->setBlurRadius(50);
dse->setOffset(-1);
setGraphicsEffect(dse);
setStyleSheet(style.arg("rgb(237,204,97)").arg("rgb(255,255,255)"));
break;
}
default: {
setText("");
setStyleSheet("Cell { background: rgb(204,192,179); border-radius: 10px; }");
}
}
-
在设置Cell样式时，还使用了QString来构建字符串。可以使用arg()重载函数来访问值。取得Label的值后，根据值的不同设置不同样式。
-
可以在main.cpp中设置随机数srand(time(NULL));，使得每次打开应用都不一样。
- 初始QWidget绘制效果如下（仅包含一个窗口和一个文字QLabel）：
- 在下方加入score后效果如下：
- 设置循环后，绘制4*4网格如下：
- 为之前创建的4*4网格上，进行样式整理，结果如下：
- 游戏过程：
- 游戏胜利：
- 游戏失败：
资源下载地址：https://download.csdn.net/download/sheziqiong/85788151
资源下载地址：https://download.csdn.net/download/sheziqiong/85788151
