跨平台圖形化程式開發 - (3)賽車遊戲開發-程式碼實作
本文章為嘉大資工讀書會第二期課程內容
場次 4-1 【跨平台圖形化程式設計開發(二)】 跨平台圖形化程式開發
本文章接續前一篇文章【跨平台圖形化程式開發 - (2)賽車遊戲開發-介面編排設計】內容
本文章為步驟截圖，詳細說明請參照課程影片。
此程式以 game_status 變數作為遊戲狀態的 flag，狀態如下:
0 => init 遊戲被開啟時
1 => playing 遊戲遊玩時
2 => pause 遊戲暫停時
3 => timeout 時間到，遊戲結束時
4 => die 碰到障礙物，遊戲結束時
PS: 本課程圖片較多，此頁面圖片有經過壓縮處理，若圖片模糊不清，可點選圖片開啟圖片原始檔
- 首先，先讓背景可動態移動，隨著車子的前進而改變。
開啟【mainwindow.h】的標頭檔撰寫以下程式碼。
- 在此使用計時器，每當一段時間就呼叫函式，執行移動背景的程式碼片段。
首先，引入 QTimer 檔案。
接下來，在建構子函式中加入以下程式碼，並撰寫 update_object 的函式。
- 建置並執行，可看到背景已可動態的移動，彷彿車子不斷在前進。
- 接下來，加入遊戲時間計時的部分，在標頭檔中加入以下程式碼。
- 撰寫以下遊戲時間計時器及遊戲停止的程式碼。
- 建置並執行，可看到遊戲時間計時器已可運作。
- 切換到 ui 設計的部分，點選開始遊戲的按鈕，加入按鈕的觸發事件。
在按鈕上點選滑鼠右鍵，選擇【跳到信號槽...】。
- 選擇【QAbstractButton】中的【clicked()】訊號。
- 可看到 Qt Creator 自動產生觸發此按鈕時，會執行的函式的程式碼。
- 到原始碼中撰寫遊戲開始會執行的動作。
- 建置並執行，可看到當點選開始按鈕時，遊戲標題及開始按鈕會隱藏，計時器會開始計時。
- 當按下鍵盤方向鍵時，移動車輛的位置，到標頭檔中撰寫以下程式碼，偵測鍵盤按壓的事件。
- 到原始碼中引入 QKeyEvent 和 QDebug 檔案。
QDebug 類似 C++ 的 cout 功能，可在 Qt 程式測試時輸出 Debug 訊息在 Qt Creator 上，方便程式的偵錯。
- 由於開始遊戲的按鈕會優先搶奪 ui 的 focus，必須至 ui 設計中，把按鈕的 focusPolicy 設為 NoFocus，才不會導致按下按鈕時，讓程式誤以為要對按鈕進行操作。
- 建置並執行，按下鍵盤上下方向鍵，可在 Qt Creator 中看到輸出的訊息。
- 接下來撰寫移動車子的程式，切換到原始碼，撰寫以下程式。
- 撰寫以下程式。
- 建置並執行，按下鍵盤上下方向鍵，可看到車子可上下移動。
- 當車子碰到跑到邊緣時，遊戲會停止。
- 接下來，讓遊戲增加難度，新增一些障礙物在遊戲中。
在 ui 設計中加入一些 Label。
block_01 = {
objectName: block_01,
geometry: [x: 620, y: 40, 寬度: 64, 高度: 64],
pixmap: item1.png
}
block_02 = {
objectName: block_02,
geometry: [x: 620, y: 110, 寬度: 64, 高度: 64],
pixmap: item2.png
}
block_03 = {
objectName: block_03,
geometry: [x: 620, y: 180, 寬度: 64, 高度: 64],
pixmap: item3.png
}
- 接下來讓障礙物會隨著車子的前進而移動，在標頭檔中增加以下程式碼。
- 首先，在程式被開啟時，將障礙物放在畫面看不到的地方。
- 使用 define 定義障礙物的位置(也可使用陣列、結構等方式儲存)。
- 撰寫以下程式碼，當背景移動時，也移動障礙物的位置。
- 建置並執行，可看到障礙物已可移動，但發現會有障礙物可壓在車子上方的情況。
- 原因是因為圖層的問題，障礙物位於比車子高的圖層。
到 ui 設計的地方，在障礙物上按滑鼠右鍵，點選【送回背景】，將所有障礙物移至圖層的最下層。
最後，將 background 的背景，點選【送回背景】，將背景回歸至最下層的狀態。
- 建置並執行，可看到車子已不會被障礙物所覆蓋。
- 接下來，偵測車子是否碰撞到障礙物，當碰撞到障礙物時，則遊戲結束。
- 切換至原始檔，針對每個障礙物撰寫偵測障礙物的程式碼。
- 撰寫以下程式碼。並讓障礙物每次移動時，偵測是否被車子碰撞。
- 建置並執行，可看到車子碰撞到障礙物時，遊戲結束。
- 當遊戲結束時顯示【遊戲結束】，並顯示【開始遊戲】的按紐。
- 建置並執行，可看到當遊戲結束後，會顯示此畫面。
- 當遊戲再次開始時，啟動物體移動計時器，但由於當成是一開啟時，物體移動計時器就已經被開啟，再次開啟會導致發生錯誤，因此用以下程式碼判斷，當物體移動計時器未被開啟，則將它開啟。
- 接下來，加入選單的部分，切換到 ui 設計，點選上方的選單。
- 在此處輸入選單的選項，在此請先以英文做輸入，此輸入的值會作為函式的名稱(下一步驟再將其修改為中文)。
(在此示範加入兩個選單，且中間加入一個分隔器)
- 點選下方的選單，調整選單的設定。
- 選單的設定值如下圖所示。
- 建置並執行，可看到選單已顯示在畫面上。
- 接下來撰寫選單被點觸發時所要執行的事件，在選單上點選滑鼠右鍵，點選【跳到信號槽...】。
- 選擇【QAction】中的【triggered()】訊號。
- 撰寫當選單被點選時，所要執行的程式碼。
- 遊戲暫停的函式有兩個狀態，在變更遊戲狀態時，要調整選單的文字。
- 在遊戲停止時也是要變更選單的文字。
- 遊戲開始時也是如此。
- 建置並執行，點選選單中的選項，測試選單的運作。
- 接下來，加入按下鍵盤空白鍵可讓遊戲暫停的程式碼。
- 最後，修改視窗的標題文字。
- 到 ui 設計中選擇【MainWindow】，調整【windowTitle】可變更程式視窗的標題文字，調整【windowIcon】可調整程式視窗的 icon。
- 選擇視窗的 icon。
- 建置並執行，可看到遊戲已可遊玩。
- 恭喜您已遊戲的設計，接下來請閱讀下一篇文章【跨平台圖形化程式開發 - (4)賽車遊戲開發-發布 Windows 程式】將程式發布。
