【React】重製懷舊遊戲系列-紅白機打磚塊

閱讀時間約 12 分鐘

前言

嗨,各位懷舊遊戲愛好者!今天要跟大家分享一個有趣的主題:如何利用React和Pixi.js這兩大神兵利器,重塑我們那個年代的經典紅白機打磚塊遊戲!
先跟大家簡單科普一下,React是一個超級火爆的前端框架,能讓我們輕鬆創建可重用的UI組件,組件間的狀態管理也相當方便。而Pixi.js則是一個強大的2D繪圖引擎,讓我們能夠輕鬆繪製出各種炫麗的遊戲畫面。有了這兩大利器,重塑打磚塊遊戲簡直就是小菜一碟!
接下來,我們來談談如何運用React和Pixi.js的特性來打造經典打磚塊遊戲。首先,利用React組件化的特點,可以將遊戲中的元素如球、磚塊和擋板等,封裝成獨立的組件。這樣一來,遊戲開發和維護變得更加方便。再者,可以利用Pixi.js繪製出各種酷炫的背景、動畫和特效,讓打磚塊遊戲的視覺表現更上一層樓。最重要的是,這兩個技術都支持跨平台,讓遊戲能在不同的設備上暢行無阻。
使用React和Pixi.js重製紅白機打磚塊遊戲,不僅讓我們重溫那段美好的時光,更是將懷舊與技術完美結合的絕佳範例。我們可以利用這兩大神器的優點,創建出更加精美、易維護的打磚塊遊戲,讓這個經典遊戲在現代科技的加持下繼續發光發熱。讓大家一起回到那個紅白機的時代,用現代技術重溫經典,創造出更多美好的回憶!
開始前先說明我們重製的紅白機打磚塊會是閹割版,尚有許多功能未實作(文章後條列)這些功能希望交由大家繼續加強,以下開始本次教學。
特別說明:紅白機版本的打磚塊是由TAITO公司於1986年,以「打磚塊」遊戲為基礎所推出的電玩遊戲

企劃相關

在開始前,需要先收集紅白機打磚塊遊戲的相關資源,從企劃開始,以下是請ChatGPT給的打磚塊遊戲玩法介紹:
紅白機打磚塊遊戲,又稱 “Arkanoid”,是一款充滿樂趣和挑戰性的復古遊戲,為各年齡層的玩家帶來無限的娛樂。自1986年由任天堂推出以來,這款遊戲已經吸引了數百萬玩家的喜愛。遊戲的玩法簡單但具有挑戰性,主要目的是用移動的橫條來控制彈跳的球,使球撞擊並消除屏幕上的磚塊。以下將對遊戲的玩法進行更詳細的介紹。
  1. 玩家控制一個底部的橫條(稱為擊球板),可以左右移動。遊戲中,球從擊球板上彈起,並朝向磚塊飛去。玩家需要隨時注意擊球板的位置,並確保球不會掉落到屏幕底部。
  2. 遊戲的目標是消除所有屏幕上的磚塊。磚塊分為多個顏色,每個顏色代表不同的分數。當球撞到磚塊時,磚塊會消失,並為玩家加分。根據磚塊的顏色和位置,不同磚塊所得分數可能不同。玩家需要合理利用球的移動方向和速度,以消除更多的磚塊。
  3. 在遊戲過程中,玩家需確保球不會掉落到屏幕底部。如果球掉落,玩家將失去一個生命。遊戲開始時,玩家通常有三個生命。當所有生命都用完時,遊戲結束。
  4. 遊戲的操作方式主要依賴於玩家對擊球板的控制。根據球的移動方向和速度,玩家需要及時調整擊球板的位置,使球得以繼續彈跳並撞擊磚塊。此外,根據擊球板與球的碰撞角度,球的移動方向可能會發生變化。因此,玩家需具備一定的技巧和判斷力,以達到最佳的撞擊效果。
  5. 在某些關卡中,遊戲中會出現特殊的磚塊和道具。這些特殊磚塊可能需要多次撞擊才能消除,或者會有額外的特效,如變換顏色、反彈球等。而道具則會在磚塊被消除後掉落,玩家需使擊球板接住它們以獲得額外的能力或獎勵。例如,有些道具可以讓擊球板變長、讓球速度變快、或讓球穿過磚塊而不反彈等。
  6. 當玩家成功消除所有磚塊後,遊戲將進入下一個關卡。隨著關卡的提升,遊戲難度也會逐步增加。磚塊的排列可能更為複雜,球的移動速度可能更快,而特殊磚塊和道具也可能變得更具挑戰性。
  7. 遊戲中,玩家可以不斷挑戰自己的最高分數,並與其他玩家一較高下。高分榜將記錄玩家在遊戲中取得的最高分數,讓玩家能夠看到自己的進步和成就。
總之,紅白機打磚塊遊戲是一款充滿趣味和挑戰性的經典遊戲,適合各年齡層的玩家。
遊戲關卡
紅白機打磚塊遊戲一共有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 pixi.js@6.5.0
npm install pixi-stats@1.0.7 --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鍵:自動玩開關
試玩網址

後記

當我還是個小孩時,最喜歡的事情就是玩那些老舊的電子遊戲,現在也一樣愛玩。所以我一直想要抽出時間來重製這些經典遊戲。透過重製,我不僅可以重溫小時候玩過的遊戲,還可以練習新的程式語言,讓這些懷舊遊戲再次復活。
當我聽到”懷舊”這個詞時,就能夠感受到它背後的意義:回憶起我們曾經擁有過的、珍貴的、獨一無二的時光。當然,回到過去並不總是一件好事,但是回想起那些我們喜歡的遊戲和活動,往往可以讓我們的心情變得更加愉悅。
不僅如此,透過重製懷舊遊戲,我們還可以學習和練習新的程式語言和工具。如果想要實現一個懷舊遊戲的新版本,那麼就需要運用現代技術和工具來達成這個目標。這樣做不僅可以學到新的技能,還可以讓我將這些新技能應用到未來的專案中。
當然,最令人期待的還是重新體驗那些小時候玩過的遊戲。我們曾經花費無數的時間在這些遊戲上,當時那些遊戲對我們來說是如此重要。現在,透過重製這些遊戲,可以讓這些美好回憶再次蔚然成風。
希望大家也能喜歡這個系列,如果有你喜歡的懷舊遊戲,歡迎在留言分享,也許下次重製的主題就是它了!我們下次再見!
為什麼會看到廣告
avatar-img
5會員
16內容數
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
無限升級的沙龍 的其他內容
想要在復古遊戲機上享受無線遊戲體驗,同時又能炫耀自己現代的遊戲控制器嗎?BlueRetro 來拯救你的童年!這款開源的藍牙遊戲控制器轉接器讓你可以把最新款的 PlayStation、Xbox 和 Switch Pro 控制器連接到那些古老的遊戲機上。誰說過復古不能與現代搭配?
話說ChatGPT+SGDK能不能蹦出MD(SEGA Mega Drive)新遊戲呢?這幾天開通了ChatGPT PLUS想說來試試使用ChatGPT作款能在MD主機上玩的小遊戲,順便記錄一下製作這款遊戲的過程,至於要作哪款遊戲呢?
Hi!大家好,今天來教大家如何玩壞Google Chrome小恐龍,這款Chrome離線小恐龍跑酷遊戲,一般是在開啟Chrome瀏覽器並在離線狀態下可以玩到的遊戲,其實也是可以在連線狀態下玩的。。。
前陣子在某線上拍賣平台買了一支超便宜的有線超任USB搖桿,結果玩不到一個禮拜按鈕就被按壞了,而且發現還沒家裡那台老舊超級任天堂搖桿順手,所以就開始打起老舊超任搖桿的主意。。。。
在那Nokia手機風靡全球的年代,因該有不少人玩過手機內建的貪吃蛇遊戲,記得當時年紀小在還是學生的那個年代就經常利用上電腦課的時候偷偷用我那隻好不容易打工購買的Nokia手機玩這款遊戲,玩到最後還利用電腦課的時間用BASIC寫出了一款簡易版的貪吃蛇遊戲。。。
Blockade(封鎖線)這款你可能不知道的貪吃蛇類史祖,問世於1976年街機平台上,其可兩人同時對戰的設計與簡約卻又不簡單的遊戲模式,在當時還真讓不少人為之瘋狂。。。
想要在復古遊戲機上享受無線遊戲體驗,同時又能炫耀自己現代的遊戲控制器嗎?BlueRetro 來拯救你的童年!這款開源的藍牙遊戲控制器轉接器讓你可以把最新款的 PlayStation、Xbox 和 Switch Pro 控制器連接到那些古老的遊戲機上。誰說過復古不能與現代搭配?
話說ChatGPT+SGDK能不能蹦出MD(SEGA Mega Drive)新遊戲呢?這幾天開通了ChatGPT PLUS想說來試試使用ChatGPT作款能在MD主機上玩的小遊戲,順便記錄一下製作這款遊戲的過程,至於要作哪款遊戲呢?
Hi!大家好,今天來教大家如何玩壞Google Chrome小恐龍,這款Chrome離線小恐龍跑酷遊戲,一般是在開啟Chrome瀏覽器並在離線狀態下可以玩到的遊戲,其實也是可以在連線狀態下玩的。。。
前陣子在某線上拍賣平台買了一支超便宜的有線超任USB搖桿,結果玩不到一個禮拜按鈕就被按壞了,而且發現還沒家裡那台老舊超級任天堂搖桿順手,所以就開始打起老舊超任搖桿的主意。。。。
在那Nokia手機風靡全球的年代,因該有不少人玩過手機內建的貪吃蛇遊戲,記得當時年紀小在還是學生的那個年代就經常利用上電腦課的時候偷偷用我那隻好不容易打工購買的Nokia手機玩這款遊戲,玩到最後還利用電腦課的時間用BASIC寫出了一款簡易版的貪吃蛇遊戲。。。
Blockade(封鎖線)這款你可能不知道的貪吃蛇類史祖,問世於1976年街機平台上,其可兩人同時對戰的設計與簡約卻又不簡單的遊戲模式,在當時還真讓不少人為之瘋狂。。。
本篇參與的主題活動
方格子12月徵文活動-🔔 叮咚~時代的眼淚:投稿懷舊主題,vocus 送你經典「偉士牌樂高」!已經進入下半月,有興趣還沒投稿的朋友,可要注意截稿時間唷 !
前一陣看了一部影片,裡面提到四、五年前超級紅的一款手機小遊戲『旅行青蛙』,突然好懷念。當時還有很多人分析跟討論旅蛙爆紅的原因,還有他背後的故事。 喜歡這個主題的朋友歡迎追蹤專欄,插畫都是我繪製的唷!歡迎追蹤我的IG:)
其實持續寫作沒那麼容易。 我最早的持續寫作源於國小的交換日記,這應該是很多7年級生童年的回憶吧! 國小時不知道為什麼班上一定會分成女生口中的「臭男生」一群、男生口中的「兇巴婆」一群。身為兇巴婆的領頭羊一份子,一定會和班上的好姊妹們有幾本交換日記。
我在聽:許紹洋–花香、真珠美人魚合集、Hannah Montana–The Best Of Both Worlds 90年代的朋友在哪裡~把你的思緒借給我,讓我們一起回到過去吧(ノ>ω<)ノ 童年回憶時光之旅Part1
方格子12月徵文活動-🔔 叮咚~時代的眼淚:投稿懷舊主題,vocus 送你經典「偉士牌樂高」!已經進入下半月,有興趣還沒投稿的朋友,可要注意截稿時間唷 !
前一陣看了一部影片,裡面提到四、五年前超級紅的一款手機小遊戲『旅行青蛙』,突然好懷念。當時還有很多人分析跟討論旅蛙爆紅的原因,還有他背後的故事。 喜歡這個主題的朋友歡迎追蹤專欄,插畫都是我繪製的唷!歡迎追蹤我的IG:)
其實持續寫作沒那麼容易。 我最早的持續寫作源於國小的交換日記,這應該是很多7年級生童年的回憶吧! 國小時不知道為什麼班上一定會分成女生口中的「臭男生」一群、男生口中的「兇巴婆」一群。身為兇巴婆的領頭羊一份子,一定會和班上的好姊妹們有幾本交換日記。
我在聽:許紹洋–花香、真珠美人魚合集、Hannah Montana–The Best Of Both Worlds 90年代的朋友在哪裡~把你的思緒借給我,讓我們一起回到過去吧(ノ>ω<)ノ 童年回憶時光之旅Part1
你可能也想看
Google News 追蹤
Thumbnail
遊戲產業似乎從很久以前,各種玩法的類型都已經確立了下來。現在新出品的遊戲,更像是已有玩法機制的排列組合、重新包裝。比起遊戲本身,遊戲公司更願意把創意放在有明確衡量標準的部分,如:劇情、音樂、特效…等。久而久之,人們對遊戲的評價越來越取決於美術、故事等決定表現力的指標...
Thumbnail
Instrumect 是我從2022年10月開始製作的遊戲。 在那之前,其實嘗試過各種大大小小的遊戲開發,包括RPG、橫向射擊、2D平台遊戲等,但最後都熱情耗盡,所有項目皆斷尾(ゝ∀・)⌒☆ 當初會選擇開發那些類型,不外乎考慮市場熱門程度和製作難易度。而最後會沒了熱情,是因為我對那類遊戲興趣沒很
Thumbnail
  這款於2023獲得桌遊界大獎「德國遊戲獎」、並在日本桌遊大獎得到投票者選擇獎的牌組構築遊戲《夢幻小隊!》有著很多電子遊戲的影子,且由於是在BGA上玩的,這種電子遊戲的感覺更加強烈。它的選牌邏輯與對戰邏輯都與「自走棋」或其他自動戰鬥的卡牌遊戲有相似之處。
圍棋,是一種古老棋類遊戲,兩位玩家輪流在棋盤上放置黑白兩色的圓形石子,目標是在棋盤上形成多個區域,以擴大自己的領地並同時圍堵對手的石子。儘管規則簡單,但卻擁有極其豐富的戰術和戰略,每一步都是挑戰與機遇的交錯。加入我們,一同探索、學習、成長,讓圍棋成為你生活中不可或缺的一部分!
Thumbnail
代儲:遊戲世界的革命性概念 在當今緊湊而充滿競爭的遊戲世界中,代儲已成為一個顯著的概念。無論是因為時間不足、技能不足或其他原因,許多玩家都在尋找替代方法來提升他們的遊戲體驗。在這樣的情況下,代儲應運而生,成為了許多玩家的選擇。 石頭手遊代儲網:引領代儲新潮流 在眾多的代儲平台中,石頭手遊代儲網
Thumbnail
前機構有一款「彩色積木疊疊樂」。 疊疊樂是平衡類的桌遊,自己覺得這款桌遊不錯的地方:一是木製的,手感溫潤;二是色彩繽紛,具有視覺上的刺激。 疊疊樂可訓練手眼協調,且抽取積木時需具判斷力及專注力,同時考驗手部穩定度,是很好、很棒的桌遊。 然而因前機構住民大多坐輪椅,再加上機構長桌問題,住民很難...
Thumbnail
童一心得 @ 2023 10/21 〔蕃薯 北極熊班〕
Thumbnail
玩日本桌遊時,總是能感受到與歐美遊戲不同、獨樹一幟的設計風格,日本桌遊很擅長在既有的機制上,發揮天馬行空的想像力,讓它變成一款獨特的作品,而今天我們要介紹的遊戲,都是建構在「吃墩」(Trick Taking)這個機制上。
Thumbnail
民國五十年代,碟仙和筆仙等請神遊戲曾經紅遍街頭巷尾。後來隨著政府禁止,雖有短期沒落,但到了1970年間又再次復甦。這些遊戲究竟有何魅力?又有哪些需要注意的小眉角呢?
Thumbnail
遊戲產業似乎從很久以前,各種玩法的類型都已經確立了下來。現在新出品的遊戲,更像是已有玩法機制的排列組合、重新包裝。比起遊戲本身,遊戲公司更願意把創意放在有明確衡量標準的部分,如:劇情、音樂、特效…等。久而久之,人們對遊戲的評價越來越取決於美術、故事等決定表現力的指標...
Thumbnail
Instrumect 是我從2022年10月開始製作的遊戲。 在那之前,其實嘗試過各種大大小小的遊戲開發,包括RPG、橫向射擊、2D平台遊戲等,但最後都熱情耗盡,所有項目皆斷尾(ゝ∀・)⌒☆ 當初會選擇開發那些類型,不外乎考慮市場熱門程度和製作難易度。而最後會沒了熱情,是因為我對那類遊戲興趣沒很
Thumbnail
  這款於2023獲得桌遊界大獎「德國遊戲獎」、並在日本桌遊大獎得到投票者選擇獎的牌組構築遊戲《夢幻小隊!》有著很多電子遊戲的影子,且由於是在BGA上玩的,這種電子遊戲的感覺更加強烈。它的選牌邏輯與對戰邏輯都與「自走棋」或其他自動戰鬥的卡牌遊戲有相似之處。
圍棋,是一種古老棋類遊戲,兩位玩家輪流在棋盤上放置黑白兩色的圓形石子,目標是在棋盤上形成多個區域,以擴大自己的領地並同時圍堵對手的石子。儘管規則簡單,但卻擁有極其豐富的戰術和戰略,每一步都是挑戰與機遇的交錯。加入我們,一同探索、學習、成長,讓圍棋成為你生活中不可或缺的一部分!
Thumbnail
代儲:遊戲世界的革命性概念 在當今緊湊而充滿競爭的遊戲世界中,代儲已成為一個顯著的概念。無論是因為時間不足、技能不足或其他原因,許多玩家都在尋找替代方法來提升他們的遊戲體驗。在這樣的情況下,代儲應運而生,成為了許多玩家的選擇。 石頭手遊代儲網:引領代儲新潮流 在眾多的代儲平台中,石頭手遊代儲網
Thumbnail
前機構有一款「彩色積木疊疊樂」。 疊疊樂是平衡類的桌遊,自己覺得這款桌遊不錯的地方:一是木製的,手感溫潤;二是色彩繽紛,具有視覺上的刺激。 疊疊樂可訓練手眼協調,且抽取積木時需具判斷力及專注力,同時考驗手部穩定度,是很好、很棒的桌遊。 然而因前機構住民大多坐輪椅,再加上機構長桌問題,住民很難...
Thumbnail
童一心得 @ 2023 10/21 〔蕃薯 北極熊班〕
Thumbnail
玩日本桌遊時,總是能感受到與歐美遊戲不同、獨樹一幟的設計風格,日本桌遊很擅長在既有的機制上,發揮天馬行空的想像力,讓它變成一款獨特的作品,而今天我們要介紹的遊戲,都是建構在「吃墩」(Trick Taking)這個機制上。
Thumbnail
民國五十年代,碟仙和筆仙等請神遊戲曾經紅遍街頭巷尾。後來隨著政府禁止,雖有短期沒落,但到了1970年間又再次復甦。這些遊戲究竟有何魅力?又有哪些需要注意的小眉角呢?