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

前言

特別說明：紅白機版本的打磚塊是由TAITO公司於1986年，以「打磚塊」遊戲為基礎所推出的電玩遊戲

企劃相關

1. 玩家控制一個底部的橫條（稱為擊球板），可以左右移動。遊戲中，球從擊球板上彈起，並朝向磚塊飛去。玩家需要隨時注意擊球板的位置，並確保球不會掉落到屏幕底部。
2. 遊戲的目標是消除所有屏幕上的磚塊。磚塊分為多個顏色，每個顏色代表不同的分數。當球撞到磚塊時，磚塊會消失，並為玩家加分。根據磚塊的顏色和位置，不同磚塊所得分數可能不同。玩家需要合理利用球的移動方向和速度，以消除更多的磚塊。
3. 在遊戲過程中，玩家需確保球不會掉落到屏幕底部。如果球掉落，玩家將失去一個生命。遊戲開始時，玩家通常有三個生命。當所有生命都用完時，遊戲結束。
4. 遊戲的操作方式主要依賴於玩家對擊球板的控制。根據球的移動方向和速度，玩家需要及時調整擊球板的位置，使球得以繼續彈跳並撞擊磚塊。此外，根據擊球板與球的碰撞角度，球的移動方向可能會發生變化。因此，玩家需具備一定的技巧和判斷力，以達到最佳的撞擊效果。
5. 在某些關卡中，遊戲中會出現特殊的磚塊和道具。這些特殊磚塊可能需要多次撞擊才能消除，或者會有額外的特效，如變換顏色、反彈球等。而道具則會在磚塊被消除後掉落，玩家需使擊球板接住它們以獲得額外的能力或獎勵。例如，有些道具可以讓擊球板變長、讓球速度變快、或讓球穿過磚塊而不反彈等。
6. 當玩家成功消除所有磚塊後，遊戲將進入下一個關卡。隨著關卡的提升，遊戲難度也會逐步增加。磚塊的排列可能更為複雜，球的移動速度可能更快，而特殊磚塊和道具也可能變得更具挑戰性。
7. 遊戲中，玩家可以不斷挑戰自己的最高分數，並與其他玩家一較高下。高分榜將記錄玩家在遊戲中取得的最高分數，讓玩家能夠看到自己的進步和成就。

• 白色磚塊 50分
• 橙色磚塊 60分
• 淡藍色磚塊 70分
• 綠色磚塊 80分
• 紅色磚塊 90分
• 藍色磚塊 100分
• 粉色磚塊 110分
• 黃色磚塊 120分
• 灰色磚塊 200分

• 2萬分加1隻，6萬分加1隻，之後每增加6萬分加1隻

美術資源

音效資源

安裝軟體

• Node.js

• Visual Studio Code

建立專案

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下載原始碼

目錄與檔案說明

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

架構與物件說明

程式相關

• 設定正常比例顯示遊戲畫面

<Arkanoid width_base={1024} height_base={896} screen_mode={0}/>

• 設定將遊戲拉伸到全畫面

<Arkanoid width_base={1024} height_base={896} screen_mode={1}/>

// 關卡-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】金色

// 磚塊分數表.
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鍵：自動玩開關

後記