前言
嗨，各位懷舊遊戲愛好者！今天要跟大家分享一個有趣的主題：如何利用React和Pixi.js這兩大神兵利器，重塑我們那個年代的經典紅白機打磚塊遊戲！
先跟大家簡單科普一下，React是一個超級火爆的前端框架，能讓我們輕鬆創建可重用的UI組件，組件間的狀態管理也相當方便。而Pixi.js則是一個強大的2D繪圖引擎，讓我們能夠輕鬆繪製出各種炫麗的遊戲畫面。有了這兩大利器，重塑打磚塊遊戲簡直就是小菜一碟！
接下來，我們來談談如何運用React和Pixi.js的特性來打造經典打磚塊遊戲。首先，利用React組件化的特點，可以將遊戲中的元素如球、磚塊和擋板等，封裝成獨立的組件。這樣一來，遊戲開發和維護變得更加方便。再者，可以利用Pixi.js繪製出各種酷炫的背景、動畫和特效，讓打磚塊遊戲的視覺表現更上一層樓。最重要的是，這兩個技術都支持跨平台，讓遊戲能在不同的設備上暢行無阻。使用React和Pixi.js重製紅白機打磚塊遊戲，不僅讓我們重溫那段美好的時光，更是將懷舊與技術完美結合的絕佳範例。我們可以利用這兩大神器的優點，創建出更加精美、易維護的打磚塊遊戲，讓這個經典遊戲在現代科技的加持下繼續發光發熱。讓大家一起回到那個紅白機的時代，用現代技術重溫經典，創造出更多美好的回憶！
開始前先說明我們重製的紅白機打磚塊會是閹割版，尚有許多功能未實作(文章後條列)這些功能希望交由大家繼續加強，以下開始本次教學。
特別說明：紅白機版本的打磚塊是由TAITO公司於1986年，以「打磚塊」遊戲為基礎所推出的電玩遊戲
企劃相關
在開始前，需要先收集紅白機打磚塊遊戲的相關資源，從企劃開始，以下是請ChatGPT給的打磚塊遊戲玩法介紹：
紅白機打磚塊遊戲，又稱 “Arkanoid”，是一款充滿樂趣和挑戰性的復古遊戲，為各年齡層的玩家帶來無限的娛樂。自1986年由任天堂推出以來，這款遊戲已經吸引了數百萬玩家的喜愛。遊戲的玩法簡單但具有挑戰性，主要目的是用移動的橫條來控制彈跳的球，使球撞擊並消除屏幕上的磚塊。以下將對遊戲的玩法進行更詳細的介紹。
- 玩家控制一個底部的橫條（稱為擊球板），可以左右移動。遊戲中，球從擊球板上彈起，並朝向磚塊飛去。玩家需要隨時注意擊球板的位置，並確保球不會掉落到屏幕底部。
- 遊戲的目標是消除所有屏幕上的磚塊。磚塊分為多個顏色，每個顏色代表不同的分數。當球撞到磚塊時，磚塊會消失，並為玩家加分。根據磚塊的顏色和位置，不同磚塊所得分數可能不同。玩家需要合理利用球的移動方向和速度，以消除更多的磚塊。
- 在遊戲過程中，玩家需確保球不會掉落到屏幕底部。如果球掉落，玩家將失去一個生命。遊戲開始時，玩家通常有三個生命。當所有生命都用完時，遊戲結束。
- 遊戲的操作方式主要依賴於玩家對擊球板的控制。根據球的移動方向和速度，玩家需要及時調整擊球板的位置，使球得以繼續彈跳並撞擊磚塊。此外，根據擊球板與球的碰撞角度，球的移動方向可能會發生變化。因此，玩家需具備一定的技巧和判斷力，以達到最佳的撞擊效果。
- 在某些關卡中，遊戲中會出現特殊的磚塊和道具。這些特殊磚塊可能需要多次撞擊才能消除，或者會有額外的特效，如變換顏色、反彈球等。而道具則會在磚塊被消除後掉落，玩家需使擊球板接住它們以獲得額外的能力或獎勵。例如，有些道具可以讓擊球板變長、讓球速度變快、或讓球穿過磚塊而不反彈等。
- 當玩家成功消除所有磚塊後，遊戲將進入下一個關卡。隨著關卡的提升，遊戲難度也會逐步增加。磚塊的排列可能更為複雜，球的移動速度可能更快，而特殊磚塊和道具也可能變得更具挑戰性。
- 遊戲中，玩家可以不斷挑戰自己的最高分數，並與其他玩家一較高下。高分榜將記錄玩家在遊戲中取得的最高分數，讓玩家能夠看到自己的進步和成就。
總之，紅白機打磚塊遊戲是一款充滿趣味和挑戰性的經典遊戲，適合各年齡層的玩家。
遊戲關卡
紅白機打磚塊遊戲一共有36關，可以參考以下Youtube影片來編輯關卡：
磚塊顏色與磚塊分數
- 白色磚塊 50分
- 橙色磚塊 60分
- 淡藍色磚塊 70分
- 綠色磚塊 80分
- 紅色磚塊 90分
- 藍色磚塊 100分
- 粉色磚塊 110分
- 黃色磚塊 120分
- 灰色磚塊 200分
加隻規則
- 2萬分加1隻，6萬分加1隻，之後每增加6萬分加1隻
美術資源
說到懷舊遊戲美術就立馬想到The Spriters Resource這個網站，上面收集了大部分懷舊遊戲圖片資料，可以使用在個人與非商業用途上，在網站上可以找到紅白機打磚塊遊戲的美術資源如下：
音效資源
Video Game Music網站上收集了大部分懷舊遊戲的音樂與音效，在網站上也可以找到紅白機打磚塊遊戲的音效相關資源：
安裝軟體
請先安裝以下軟體：
- Node.js
- Visual Studio Code
建立專案
安裝完Node.js後開啟Node.js command prompt進入命令模式，輸入以下指令建立arkanoid_pixi專案：
npx create-react-app arkanoid_pixi --template typescript
cd arkanoid_pixi
npm install [email protected]
npm install [email protected] --save
npm install --save @types/howler
npm install --save react-howler
npm install react-device-detect --save
Github下載原始碼
至以下Github下載打磚塊原始碼，解壓縮後覆蓋arkanoid_pixi目錄(上一步驟建立的目錄)。
覆蓋完畢在arkanoid_pixi目錄上按滑鼠右鍵，選”用CODE開啟”，將游標移至TERMINAL命令列視窗並輸入npm start並下按Enter。
一會後會自動使用預設的瀏覽器開啟打磚塊遊戲如下：
目錄與檔案說明
public <DIR>
fonts <DIR> 字形檔案
images <DIR> 圖片檔案
sounds <DIR> 音效檔案
src <DIR>
Arkanoid <DIR>
Background.ts 背景物件
Ball.ts 球物件
BasicCore.ts 基本核心
Board.ts 板子物件
Brick.ts 磚塊物件
GameData.ts 遊戲資料
GameMain.ts 主程式物件
GameRound.ts 關卡物件
King.ts 王物件
LoaderResource.ts 載入資源
Round.ts 遊戲關卡
Sound.ts 音效物件
Transitions.ts 過場物件
Arkanoid.css 打磚塊css
Arkanoid.tsx 打磚塊tsx
index.tsx
架構與物件說明
程式相關
程式碼內以有詳細註解，以下只針對需要特別講解的部分在作重點說明：
如何將遊戲拉伸到全畫面 — index.tsx
只要改變元件的screen_mode參數就可以設定遊戲畫面要以正常比例顯示或拉伸到全畫面：
- 設定正常比例顯示遊戲畫面
<Arkanoid width_base={1024} height_base={896} screen_mode={0}/>- 設定將遊戲拉伸到全畫面
<Arkanoid width_base={1024} height_base={896} screen_mode={1}/>關於遊戲關卡 — Round.ts
遊戲關卡由11x18二維陣列組成：
// 關卡-1.
public static sRound1 = [
[0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0],
[9,9,9,9,9,9,9,9,9,9,9],
[5,5,5,5,5,5,5,5,5,5,5],
[6,6,6,6,6,6,6,6,6,6,6],
[8,8,8,8,8,8,8,8,8,8,8],
[3,3,3,3,3,3,3,3,3,3,3],
[1,1,1,1,1,1,1,1,1,1,1],
[0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0],
]
陣列內數字分別代表以下磚塊顏色：
- 【0】空
- 【1】白色
- 【2】橙色
- 【3】淡藍
- 【4】綠色
- 【5】紅色
- 【6】藍色
- 【7】粉色
- 【8】黃色
- 【9】灰色
- 【10】金色
磚塊的生命值與消滅後得分設定在Brick.ts檔案內
// 磚塊分數表.
private static sScoreTable = [80,70,60,50,90,100,110,120,200,9999];
// 磚塊生命表.
private static sLifeTable = [1,1,1,1,1,1,1,1,2,9999];
未實作功能
- 片頭選單
- 特殊道具
- 敵人
- 支援手機、平板輸入控制
測試影片
線上玩
支援平台
- 暫時只支援桌上電腦與筆電操作
- 預設開啟自動玩模式，如果要改為手動玩請鍵盤按下A切換為手動玩
功能按鍵
- F鍵：FPS開關
- D鍵：除錯模式開關
- S鍵：音效開關
- R鍵：自爆
- A鍵：自動玩開關
試玩網址
後記
當我還是個小孩時，最喜歡的事情就是玩那些老舊的電子遊戲，現在也一樣愛玩。所以我一直想要抽出時間來重製這些經典遊戲。透過重製，我不僅可以重溫小時候玩過的遊戲，還可以練習新的程式語言，讓這些懷舊遊戲再次復活。
當我聽到”懷舊”這個詞時，就能夠感受到它背後的意義：回憶起我們曾經擁有過的、珍貴的、獨一無二的時光。當然，回到過去並不總是一件好事，但是回想起那些我們喜歡的遊戲和活動，往往可以讓我們的心情變得更加愉悅。
不僅如此，透過重製懷舊遊戲，我們還可以學習和練習新的程式語言和工具。如果想要實現一個懷舊遊戲的新版本，那麼就需要運用現代技術和工具來達成這個目標。這樣做不僅可以學到新的技能，還可以讓我將這些新技能應用到未來的專案中。
當然，最令人期待的還是重新體驗那些小時候玩過的遊戲。我們曾經花費無數的時間在這些遊戲上，當時那些遊戲對我們來說是如此重要。現在，透過重製這些遊戲，可以讓這些美好回憶再次蔚然成風。
希望大家也能喜歡這個系列，如果有你喜歡的懷舊遊戲，歡迎在留言分享，也許下次重製的主題就是它了！我們下次再見！
