打磚塊

玩法說明

球會停在板子上，按空白鍵或點擊畫面發球。移動板子把球打回去，敲碎所有磚塊就能進入下一關。

磚塊

每敲一下得 10 分，敲碎時再依磚塊硬度加分，過關另有獎勵分數。

道具

敲碎磚塊時有機會掉出道具膠囊，用板子接住就會生效：

板子變長時會變成綠色、縮短時變成紅色，球變慢時會變成橘色，一眼就能看出目前的狀態。

• 一開始有 3 條命，場上所有球都掉下去才會扣命。
• 一共有 4 種關卡配置，全部破完會從頭循環，但球速會越來越快。

小技巧

• 球打在板子哪裡，決定它往哪裡飛：打在中間會直直往上，越靠邊緣角度越斜，可以用來瞄準角落的磚塊。
• 紅色的 S 不一定要接，看到它掉下來可以刻意閃開。

開發筆記

為什麼做打磚塊

打磚塊幾乎是每個人都玩過的遊戲，規則不用解釋。但要讓它「好玩」，物理碰撞和手感調整其實有不少眉角，很適合當作遊戲廳的第三台機台。

板子決定反彈角度

如果球只是單純照入射角反彈，玩家根本沒辦法控制球的方向，很快就會覺得無聊。所以板子的反彈不看入射角，而是看球打在板子的哪個位置：

const rel = (ballCenterX - paddle.x) / paddle.w; // 0 是最左邊，1 是最右邊
setVelocity(ball, (rel - 0.5) * 2 * 1.05);       // 換算成約 ±60 度的角度

打在正中間直直往上，打在邊緣會斜斜飛出去。這是打磚塊「有手感」的關鍵。

防止球穿牆

球速最快每秒 150 像素，一幀大約移動 2.5 像素，而磚塊只有 6 像素高。如果每幀只檢查一次碰撞，球偶爾會直接「穿過」磚塊或板子。

解法是把每一幀的移動切成好幾小步，每一步最多只走 1.5 像素，每一步都檢查碰撞：

const steps = Math.ceil(distance / 1.5);
for (let i = 0; i < steps; i++) {
  // 移動一小步，檢查牆壁、板子、磚塊
}

判斷撞到磚塊的哪一面

撞到磚塊後，要決定球是「左右反彈」還是「上下反彈」。做法是計算球和磚塊在水平、垂直方向各重疊了多少：水平重疊比較少，代表是從側面撞進來的，就左右反彈；反之就上下反彈。簡單又穩定。

避免球卡在水平方向

打磚塊常見的惱人狀況是：球角度太平，在左右兩面牆之間來回彈很久都不上不下。所以每一幀都會檢查球的垂直速度，至少要保持總速度的 35%，不夠就自動修正角度。

道具的平衡

道具掉落機率是 16%，而且每種道具出現的比例不同：分裂球最常見，加長和縮短各占一部分，生命最稀有。縮短板子的陷阱是刻意加入的，讓玩家看到道具時要判斷「這個要不要接」，而不是無腦全接。

分裂球則設了最多 9 顆的上限，避免畫面亂成一團，也讓效能保持穩定。

共用引擎的好處

這款和芭樂接接樂、抓 Bug 大作戰共用同一支小引擎 px.js，輸入、音效、最高分紀錄、遊戲迴圈都不用重寫，所以這款大部分的時間都花在調整物理和手感上。

下一步

想加入的東西：

• 打不破的鐵磚塊
• 可以發射子彈的雷射板子
• 更多關卡，以及關卡編輯器

有想法歡迎到關於頁告訴我。