2048小游戲完整教程)
簡介一個基于C與Qt4實現(xiàn)的2048小游戲完整工程借助Qt4繪制棋盤與方塊玩家通過滑動合并數(shù)字體驗經(jīng)典益智玩法。工程面向C初學者清晰展示了封裝、繼承、多態(tài)等面向?qū)ο筇匦圆⒗肣t4的信號與槽完成交互響應(yīng)能幫助讀者快速上手GUI程序設(shè)計。壓縮包共6個文件以cpp/h源碼為主另含Qt Designer的ui界面文件、pro工程配置及user文件整體僅7KB結(jié)構(gòu)緊湊便于逐文件閱讀。已有265人學習下載尤其適合剛學完C語法、希望嘗試實際小項目的入門開發(fā)者。學習時可重點研究GameBoard、Tile、GameManager等類的協(xié)作方式理解棋盤狀態(tài)維護、方塊合并邏輯與游戲流程控制并體會QGraphicsView框架下的圖形渲染思路。通過閱讀和修改代碼還能掌握按鈕事件綁定、鍵盤監(jiān)聽、棋盤繪制更新等實用技能學會將游戲邏輯與界面分離形成清晰的模塊化設(shè)計意識從而獲得從零搭建一個桌面小游戲的完整實踐體驗。 手頭這個壓縮包名字叫“2048qt小游戲C初學.zip”是我前一陣子帶一個剛學完C基礎(chǔ)的朋友做的小項目。說句實話對于初學者來說2048這個游戲簡直就是為練手量身定做的規(guī)則簡單到一句話能講清楚但要把移動、合并、隨機生成、勝負判斷這堆邏輯寫明白又確實能逼你把數(shù)組、函數(shù)、事件響應(yīng)、界面刷新這些基本功全部過一遍。再加上用Qt做圖形界面比在黑窗口里跑數(shù)字有成就感太多了——做完能雙擊打開、能玩、能打包發(fā)給朋友炫耀這種正向反饋對新手來說比什么雞湯都管用。這篇文章就把整個項目的來龍去脈拆開講一遍從架構(gòu)設(shè)計、核心算法、界面繪制到打包發(fā)布全部按我實際操作的順序來。不管你是剛學完C語法正愁沒項目練手還是已經(jīng)寫了幾個控制臺程序想試試圖形界面這篇內(nèi)容都能幫你少走不少彎路。1. 項目定位與整體設(shè)計思路1.1 為什么選2048而不是別的游戲初學者做項目最怕的就是兩頭堵太簡單的沒意思太復(fù)雜的看不懂。掃雷、貪吃蛇、俄羅斯方塊也都是經(jīng)典選擇但我最終推薦2048是因為它在邏輯復(fù)雜度上卡得剛剛好。2048的核心邏輯可以拆成四個獨立模塊格子的數(shù)據(jù)存儲、數(shù)字的移動合并算法、新數(shù)字的隨機生成、游戲結(jié)束判定。這四個模塊各自獨立又能串成一條完整的游戲流程。而且它沒有傳統(tǒng)游戲里最折磨人的“實時刷新”問題——不像貪吃蛇需要定時器驅(qū)動每幀移動2048是“玩家按一下界面變一下”天然就是事件驅(qū)動模型和Qt的信號槽機制完美契合。相比之下俄羅斯方塊要處理方塊旋轉(zhuǎn)、消行、下落計時器邏輯復(fù)雜度直接翻倍貪吃蛇雖然也不難但蛇身移動的坐標管理對新手來說容易繞暈。2048的棋盤就4x4共16個格子數(shù)據(jù)量小就算用最笨的算法也不會有性能問題新手可以放心大膽寫不用一開始就糾結(jié)優(yōu)化。1.2 整體模塊劃分與文件組織我建項目的時候直接用了Qt自帶的QWidget Application模板沒有碰QML因為QML雖然寫界面快但它是聲明式語言和C的核心邏輯是分開的對新手來說等于同時學兩樣?xùn)|西。用QWidget C所有代碼就是一種語言思維不割裂。整個項目的文件組織很簡單main.cpp程序入口創(chuàng)建主窗口gamewidget.h / gamewidget.cpp主窗口類負責界面繪制和鍵盤事件gameboard.h / gameboard.cpp游戲邏輯類負責數(shù)據(jù)存儲和核心算法tile.h / tile.cpp可選封裝單個格子的數(shù)據(jù)和顏色新手階段也可以不建這個類直接用二維數(shù)組邏輯層和界面層分離是這個小項目里最重要的架構(gòu)思想。GameBoard只管數(shù)據(jù)不管怎么畫“按上鍵之后數(shù)據(jù)怎么變”和“畫面上顯示什么顏色”完全不摻和。這樣做的好處是你想把界面從QWidget換成別的框架邏輯代碼一行不用改想寫單元測試也只需要測GameBoard不需要打開窗口。我之后調(diào)試算法的時候直接在main.cpp里寫幾行測試代碼就能驗證結(jié)果根本不用啟動GUI光是這一點就省了大量時間。1.3 開發(fā)環(huán)境選型說明我用的是Qt 5.15.2 Qt Creator MSVC2019 64位編譯器。如果你的機器是MinGW版本的Qt也沒關(guān)系代碼完全通用只是最后打包時要帶的運行庫不同這個后面會專門講。Qt 5.15.2是5系列的最后一個長期維護版本網(wǎng)上資料最多遇到報錯一搜就能找到答案對新手極其友好。我個人不太建議一上來就追最新的Qt 6.x不是說它不好而是6.x有些模塊還在調(diào)整期初學者分不清“自己寫錯了”和“版本差異”的區(qū)別排查問題會多一層干擾。2. 核心數(shù)據(jù)結(jié)構(gòu)和游戲邏輯2.1 棋盤數(shù)據(jù)存儲方案2048的棋盤是一個4x4的方格所以最直觀的存儲方式當然是二維數(shù)組。但在實際動手之前我建議先想一個問題這個數(shù)組要不要支持動態(tài)擴展我的回答是不要。經(jīng)典2048就是固定4x4做成5x5屬于魔改玩法會牽涉到算法復(fù)雜度變化新手階段沒必要。就用固定尺寸const int BOARD_SIZE 4; int board[BOARD_SIZE][BOARD_SIZE] {0};board[r][c]表示第r行第c列的格子數(shù)值0代表空格。這個方案簡單粗暴內(nèi)存只占256字節(jié)讀寫直接尋址沒有比這更高效的方式了。有人可能會問為什么不用一維數(shù)組int board[16]也可以而且一維數(shù)組在做“按行滑動”的時候下標更好算。但二維數(shù)組board[row][col]更符合人類的直覺代碼可讀性強。2048這種量級的數(shù)據(jù)性能完全不是瓶頸可讀性優(yōu)先才是對的。2.2 數(shù)字移動合并算法這是整個項目的靈魂也是新手最容易卡住的地方。先聲明網(wǎng)上有很多“高大上”的做法比如用位運算、用矩陣轉(zhuǎn)置但這些對新手都不友好。我用的方法是“提取非零數(shù)字—合并—補零”每一步都直觀得不行而且效率也夠用4x4就這么點數(shù)據(jù)再怎么跑都是微秒級。以“向左移動”為例核心思路是逐行處理。每一行單獨拿出來單獨完成移動合并和其他行互不影響。第一步提取非零數(shù)字。把當前行所有非零數(shù)字按順序取出來放到一個臨時數(shù)組里保留原來的相對順序。比如一行原始數(shù)據(jù)是[2, 0, 0, 2]提取后得到[2, 2]。第二步合并相鄰相同數(shù)字。從左往右看臨時數(shù)組如果相鄰兩個元素相等就合并成一個值翻倍左移一格。注意這里有個坑合并之后被合并的元素不能再參與后續(xù)合并。比如[2, 2, 2, 2]正確處理結(jié)果是[4, 4]而不是從右往左合并得到[2, 4, 2]或者連加得到[8]。標準2048的合并規(guī)則是一步之內(nèi)每個格子最多參與一次合并。第三步補零。把合并后的數(shù)組重新填回原始行從左邊開始放剩余位置補0。用代碼表示就是bool GameBoard::moveLeft() { bool changed false; for (int row 0; row BOARD_SIZE; row) { std::vectorint tmp; for (int col 0; col BOARD_SIZE; col) { if (board[row][col] ! 0) tmp.push_back(board[row][col]); } // 合并階段 for (int i 0; i (int)tmp.size(); i) { if (i 1 (int)tmp.size() tmp[i] tmp[i 1]) { tmp[i] * 2; tmp.erase(tmp.begin() i 1); score tmp[i]; } } // 填充回原行 for (int col 0; col BOARD_SIZE; col) { int newVal col (int)tmp.size() ? tmp[col] : 0; if (board[row][col] ! newVal) changed true; board[row][col] newVal; } } return changed; }注意這個函數(shù)返回bool表示這一步驟有沒有產(chǎn)生任何數(shù)字位置或值的變化。為什么要這個返回值因為如果玩家按了一個方向但棋盤沒發(fā)生任何變化那就不應(yīng)該生成新數(shù)字也不能算作一次有效操作。這個細節(jié)很容易被忽略但卻是保證游戲邏輯正確的關(guān)鍵。至于向右、向上、向下我沒寫三個幾乎相同的函數(shù)。最簡單省事的做法是定義一個rotate操作順時針旋轉(zhuǎn)90度那么“向右移”就等于“先把棋盤旋轉(zhuǎn)180度向左移再旋轉(zhuǎn)180度”“向上移”等于“旋轉(zhuǎn)90度向左移再逆時針旋轉(zhuǎn)90度”。用旋轉(zhuǎn)來統(tǒng)一四個方向代碼量直接減少一大半也不容易寫出方向搞反的bug。新手可以先把左移寫對、測透再用旋轉(zhuǎn)的方式實現(xiàn)其他方向。2.3 新數(shù)字生成與勝負判定每次有效移動后棋盤會隨機在一個空格位置生成一個新數(shù)字90%概率是210%概率是4。這塊邏輯沒什么難度但有兩個小坑第一隨機數(shù)生成。新手很容易寫rand() % 4然后發(fā)現(xiàn)每次啟動游戲生成的隨機序列都是重復(fù)的。一定要用srand(time(0))初始化種子或者直接用Qt封裝好的QRandomGenerator::global()-bounded(4)后者從Qt 5.10開始就是這個領(lǐng)域的最佳實踐線程安全種子自動管理省得你記掛著srand。第二當你嘗試往一個格子填數(shù)字時必須保證這個格子原本是空的。我見過新手寫while(true)循環(huán)隨機挑格子結(jié)果格子不空就死循環(huán)了。正確的做法是先掃一遍棋盤把空格的下標收集到std::vectorstd::pairint,int里再在這個vector里隨機選一個。勝負判定分兩塊。失敗棋盤滿了且任意相鄰格子上下左右都沒有相等的數(shù)字此時游戲結(jié)束。成功任意格子值達到2048。有一個細節(jié)我要提一下——“達成2048”之后主流實現(xiàn)是彈出勝利提示但玩家仍然可以繼續(xù)玩下去。所以isGameOver()和isWin()要分開寫別混在一起。勝利只是彈窗提示不要直接鎖死棋盤。3. 界面繪制與交互響應(yīng)3.1 界面繪制方案選型我第一次做這個項目的時候在界面方案上糾結(jié)了好一陣。有兩個選擇一是用16個QLabel擺成一個4x4的網(wǎng)格移動后逐個更新label的文本和背景色二是用一個QWidget重寫paintEvent()在事件回調(diào)里用QPainter自己畫。16個QLabel方案的好處是代碼好寫—setText()一下、setStyleSheet()一下就成了新手完全hold住。缺點是格子多的時候界面刷新不太平滑而且頁面狀態(tài)一變就得寫一堆findChild、setProperty的代碼后期越改越亂。我最終用的是自定義繪制方案一個QWidget重寫paintEvent()每次棋盤變化后調(diào)用update()觸發(fā)重繪格子用QPainter::drawRoundedRect()畫圓角矩形數(shù)字用drawText()畫在矩形中央。這樣布局代碼和邏輯代碼解耦棋盤繪制只看數(shù)據(jù)數(shù)據(jù)變了就重畫畫面狀態(tài)完全由數(shù)據(jù)驅(qū)動。新手可能覺得paintEvent很玄乎但其實它的邏輯很簡單系統(tǒng)覺得窗口需要刷新時就會調(diào)用這個函數(shù)你在里面畫的任何東西都會顯示在界面上僅此而已。3.2 鍵盤事件的正確接法2048的主要操作就是方向鍵。在QWidget里接方向鍵最直接的方式是重寫keyPressEvent()void GameWidget::keyPressEvent(QKeyEvent *event) { bool moved false; switch (event-key()) { case Qt::Key_Up: moved board.moveUp(); break; case Qt::Key_Down: moved board.moveDown(); break; case Qt::Key_Left: moved board.moveLeft(); break; case Qt::Key_Right: moved board.moveRight(); break; default: QWidget::keyPressEvent(event); return; } ... }這里有一個特別常見的坑鍵盤事件不響應(yīng)。新手經(jīng)常會遇到按方向鍵沒任何反應(yīng)或者點擊窗口內(nèi)的按鈕后方向鍵失靈。原因很簡單——QWidget默認的焦點策略是Qt::NoFocus也就是說窗口壓根不接收鍵盤焦點。解決方法是在構(gòu)造函數(shù)里加上一行setFocusPolicy(Qt::StrongFocus);Qt::StrongFocus表示該控件能通過點擊和Tab鍵獲得鍵盤焦點。加了這一行方向鍵就正常了。我在這一步上卡了整整一個晚上查了一圈才弄明白是焦點的問題希望看到這里的你直接少踩這個坑。3.3 視覺細節(jié)與數(shù)字配色2048這個游戲顏值也是游戲性的一部分。至少要做到數(shù)字越大顏色越深空格是淺色底4和2的顏色要有區(qū)分數(shù)值上到128、256之后顏色要明顯不一樣。用Qt的樣式表QSS或者直接在paintEvent里根據(jù)數(shù)值返回顏色都可以QColor GameWidget::colorForValue(int value) { switch (value) { case 0: return QColor(205, 193, 180); case 2: return QColor(238, 228, 218); case 4: return QColor(237, 224, 200); case 8: return QColor(242, 177, 121); case 16: return QColor(245, 149, 99); case 32: return QColor(246, 124, 95); case 64: return QColor(246, 94, 59); case 128: return QColor(237, 207, 114); default: return QColor(237, 204, 97); } }這個是2048官方的經(jīng)典配色照著抄就行。大數(shù)字的字體顏色用白色小數(shù)字2和4用深色這也是官方做法你可以根據(jù)自己的審美調(diào)整但建議不要偏離太多因為玩家對2048的視覺風格有天然期待。還有一個隱藏的小細節(jié)如果你用QPainter繪制關(guān)閉抗鋸齒會讓圓角矩形的邊緣有鋸齒感打開抗鋸齒即painter.setRenderHint(QPainter::Antialiasing)畫面會平滑很多。這個不是必須但屬于“做了體驗瞬間提升”的一行代碼。4. 打包發(fā)布與依賴處理4.1 windeployqt的標準打包流程項目寫完代碼跑通了但你的朋友雙擊那個exe文件時如果Qt運行庫沒跟著一起走程序會直接報錯。Windows下Qt程序的發(fā)布方式和Linux完全不同它不會靜靜地把所有依賴收集好而是需要你手動執(zhí)行一個叫windeployqt的工具。打包之前先做一件非常重要的事把編譯模式從Debug切換到Release。Debug模式編譯出來的exe體積巨大而且依賴一堆調(diào)試用的DLL不適合分發(fā)。切換方法是Qt Creator左下角的“電腦圖標”那里選擇Release然后重新構(gòu)建。之后找到編譯生成的exe文件路徑通常在build-項目名-Desktop_Qt_5_15_2_MSVC2019_64bit-Release\release\項目名.exe。手動新建一個干凈文件夾把exe復(fù)制進去然后打開命令行進入這個文件夾執(zhí)行windeployqt 2048qt.exewindeployqt會自動掃描exe依賴了哪些Qt模塊然后把對應(yīng)的DLL、插件目錄、翻譯文件全部復(fù)制到exe旁邊。執(zhí)行完成后文件夾里會多出platforms目錄、一堆.dll文件、還有幾個子目錄。這時雙擊exe就能正常運行了。4.2 “no qt platform plugin could be initialized”排查這個報錯寫了這個項目的同學幾乎100%會遇到一次而且它出現(xiàn)在打包之后雙擊exe的那一刻。報錯文本大概是windows no qt platform plugin could be initialized reinstalling the application字面意思是“找不到Qt平臺插件”。之所以會出這個問題最常見的原因是platforms目錄缺失、位置不對或者qwindows.dll沒有隨目錄一起復(fù)制過去。Qt的Windows程序啟動時一定要去exe同級的platforms目錄下加載qwindows.dll這個插件是Qt和Windows窗口系統(tǒng)之間的橋梁。就算你把所有DLL都放在exe旁邊只要platforms目錄不對程序照樣啟動不了。排查步驟很簡單先看打包文件夾里有沒有platforms\qwindows.dll如果這個文件不存在說明windeployqt執(zhí)行失敗了某些原因自己從Qt安裝目錄C:\Qt\5.15.2\msvc2019_64\plugins\platforms里手動復(fù)制一份過來也能救活。還有一個特別容易忽略的坑exe路徑中不能有中文和特殊字符。很多人打包時喜歡把文件夾命名為“2048游戲最終版”結(jié)果雙擊直接無反應(yīng)。Qt內(nèi)部處理文件路徑時對中文兼容性不太好盡量把發(fā)布文件夾改成純英文路徑能省掉一堆莫名其妙的兼容性問題。4.3 發(fā)布時的依賴選擇與體積控制windeployqt默認會把調(diào)試用的DLL也復(fù)制過來不會但如果你是從Debug目錄下執(zhí)行那復(fù)制的就是Debug版DLL程序跑起來速度慢、體積也大。所以再次強調(diào)一定確認是Release版本再打包。另外一個體積壓縮技巧Qt 5.15.2一個空窗口程序打包出來大概在20MB到50MB之間這是Qt框架本身的開銷屬于正常范圍。如果你想進一步壓縮可以嘗試在pro文件里加上CONFIG release然后排除不需要的模塊。但實際上對于發(fā)給朋友的玩具項目來說30MB的exe完全在可接受范圍內(nèi)沒必要為了壓縮體積引入UPX之類的工具把自己搞暈。還有一件事容易被忽略如果你用的是MSVC編譯器那發(fā)布包需要帶上Microsoft Visual C Redistributable運行庫。目標電腦沒裝過Visual C的話會提示“缺少VCRUNTIME140.dll”之類的錯誤。解決方案有兩種一是讓朋友去微軟官網(wǎng)裝一下二是自己寫一個安裝包腳本把運行庫和exe一起打進去。MinGW版本的Qt就沒有這個問題但相應(yīng)地它需要帶上libgcc_s_seh-1.dll、libstdc-6.dll和libwinpthread-1.dll這些MinGW運行庫windeployqt會把它們一起復(fù)制出來所以不用額外操心。5. 常見問題與調(diào)試實錄5.1 典型報錯速查表我把自己寫這個項目過程中遇到、以及幫朋友排查過的典型問題整理成了一張表建議直接存下來遇到了對照排查現(xiàn)象原因解決方案按方向鍵沒反應(yīng)窗口沒有獲取鍵盤焦點構(gòu)造函數(shù)加setFocusPolicy(Qt::StrongFocus)游戲啟動時隨機數(shù)字序列總是重復(fù)隨機種子未初始化用QRandomGenerator::global()替換rand()合并方向反了向上按成了向左旋轉(zhuǎn)方向搞錯先用紙畫一下旋轉(zhuǎn)前后的坐標映射再寫rotate函數(shù)2048之后還能繼續(xù)合并但不再彈提示勝利判定只判一次在mainwindow里用bool記錄是否已提示過打包后exe雙擊無反應(yīng)或報平臺插件錯誤platforms目錄缺失或路徑含中文重新執(zhí)行windeployqt或手動復(fù)制platforms目錄改用純英文路徑界面出現(xiàn)殘影或重疊沒有清除之前的繪制內(nèi)容paintEvent里先調(diào)用QPainter::fillRect畫背景清屏5.2 調(diào)試技巧用日志代替反復(fù)試錯新手最容易犯的錯誤是程序跑出錯誤結(jié)果后頻繁加qDebug()調(diào)試然后一遍遍重開游戲去操作。這樣既費時間又容易搞混狀態(tài)。我推薦一個自己一直在用的方法給GameBoard邏輯類寫一個printBoard()函數(shù)在移動操作前后分別調(diào)用一下看看數(shù)據(jù)是否按預(yù)期變化void GameBoard::printBoard() { for (int row 0; row BOARD_SIZE; row) { for (int col 0; col BOARD_SIZE; col) { qDebug() board[row][col] \t; } qDebug() \n; } }把邏輯層和界面層分離之后你甚至不需要啟動界面直接在main里測試GameBoard board; board.init(); // 生成兩個初始數(shù)字 board.printBoard(); board.moveLeft(); board.printBoard();這樣測出來的結(jié)果只和數(shù)據(jù)有關(guān)不會受到鍵盤事件、焦點、繪制等亂七八糟的因素干擾。等邏輯完全正確了再接上界面就能保證界面這層出問題的概率降到最低。這就是分層架構(gòu)在調(diào)試上帶來的巨大優(yōu)勢也是我在這個項目里最想讓讀者真正體會到的東西。5.3 最容易忽略的邊界情況2048還有一個很隱蔽的邊界情況一行或多個方向都沒有有效移動時不應(yīng)該生成新數(shù)字。比如整個棋盤只有第1行有數(shù)字玩家按了下鍵數(shù)組沒有任何變化這時候不應(yīng)該生成新塊。前面講過的moveLeft()返回bool在這里就派上用場了。四個方向統(tǒng)一處理時用moved || board.moveXXX()來做合并標志只有moved true才走“生成新數(shù)字”的流程。還有游戲結(jié)束判定。很多初學版本只判斷了“格子全滿”忘記了判斷“相鄰格子是否還能合并”。比如棋盤全滿但還有兩個相鄰的256可以合并那游戲其實還沒結(jié)束。isGameOver()必須同時檢查這兩條一個條件不滿足就說明還沒結(jié)束。這個邏輯寫不對很容易出現(xiàn)游戲提前結(jié)束的烏龍情況。5.4 新手的幾個進階方向如果你這個項目已經(jīng)跑通了想再往上走一步我推薦按下面的順序去擴展難度遞增但每步都能學到新東西動畫過渡目前移動是瞬間完成的可以給每個數(shù)字塊加一個緩慢滑動的動畫用QPropertyAnimation做。這里能學到Qt動畫框架的基本用法也是讓游戲從“能用”變“好玩”的關(guān)鍵一步。分數(shù)排名用QSettings把最高分保存到系統(tǒng)注冊表或配置文件里下次啟動還能看到歷史最高分。這一步能學會Qt的本地持久化存儲。撤銷功能用std::stack保存每次移動前的棋盤快照按快捷鍵撤銷上一步。棧這種數(shù)據(jù)結(jié)構(gòu)在教科書上看了N遍終于有了一個實際應(yīng)用場景。擴展棋盤到5x5或6x6這需要把硬編碼的BOARD_SIZE改掉重新審視所有算法的通用性是很好的代碼重構(gòu)練習。我個人在實際操作中的感受是2048這個項目的天花板比想象中高很多。你可以在里面無限疊加功能從動畫到音效到聯(lián)機排行榜每一步都有對應(yīng)的技術(shù)點可以學。而它最寶貴的地方在于——因為核心邏輯已經(jīng)跑通了后面加功能都是在舒適區(qū)邊緣試探不會讓人產(chǎn)生“從零開始學”的挫敗感。最后一個分享給大家的小技巧維護一個“版本完成度”清單每完成一個功能就記錄下來比如“v0.1 核心邏輯完成”“v0.2 界面繪制完成”“v0.3 動畫完成”。這樣做的好處有三個一是訓(xùn)練自己拆解需求的能力二是日后想起來能看看自己的成長軌跡三是寫簡歷項目經(jīng)驗時不用臨時回憶。對初學者來說把項目拆碎、逐個擊破比一口氣寫完整個游戲重要得多。本文還有配套的精品資源點擊獲取