鴻蒙HarmonyOS 5小游戲實踐：打磚塊游戲（附：源代碼）

打磚塊是一款經典的游戲，它簡單易懂卻又充滿挑戰性。本文將介紹如何使用ArkUI框架開發一個完整的打磚塊游戲，涵蓋游戲邏輯設計、UI實現和交互處理等核心內容。

游戲架構設計

我們的打磚塊游戲采用了組件化設計，主要分為兩個部分：

BrickBreakerGame組件：負責游戲的核心邏輯和渲染
BrickBreakerPage組件：作為游戲的主頁面容器

游戲狀態管理使用了枚舉類型GameState來區分三種狀態：

enum GameState {READY,   // 準備中PLAYING, // 游戲中OVER     // 游戲結束
}

核心游戲邏輯實現

1. 游戲初始化

在initGame()方法中，我們初始化了游戲的所有元素：

創建磚塊矩陣（5行6列）
設置擋板和球的初始位置
重置分數和生命值

initGame() {this.bricks = [];for (let row = 0; row < BRICK_ROWS; row++) {let colArray: boolean[] = [];for (let col = 0; col < BRICK_COLS; col++) {colArray.push(true);}this.bricks.push(colArray);}// 其他初始化代碼...
}

2. 游戲主循環

游戲主循環通過setInterval實現，每16毫秒執行一次，負責：

更新球的位置
檢測碰撞（墻壁、擋板、磚塊）
處理游戲結束條件

gameLoop() {// 移動球this.ballX += this.ballDX;this.ballY += this.ballDY;// 碰撞檢測邏輯...
}

3. 碰撞檢測

碰撞檢測是游戲的核心邏輯之一，我們實現了：

球與墻壁碰撞：改變球的運動方向
球與擋板碰撞：根據擊中位置改變反彈角度
球與磚塊碰撞：消除磚塊并增加分數

擋板碰撞處理特別加入了根據擊中位置改變反彈角度的邏輯，增加了游戲的可玩性：

const hitPos = (this.ballX - this.paddleX) / PADDLE_WIDTH;
this.ballDX = (hitPos - 0.5) * 10; // -5到5之間的值
this.ballDY = -Math.abs(this.ballDY);

UI設計與實現

1. 游戲元素渲染

使用ArkUI的聲明式語法，我們實現了各種游戲元素的渲染：

磚塊渲染：

ForEach(this.bricks, (row: boolean[], rowIndex:number) => {ForEach(row, (brickExists: boolean, colIndex: number) => {if (brickExists) {Column().width(BRICK_WIDTH - 2).height(BRICK_HEIGHT - 2).backgroundColor(this.colors[rowIndex])// 其他樣式...}})
})

擋板和球：

// 擋板
Column().width(PADDLE_WIDTH).height(PADDLE_HEIGHT).backgroundColor('#4CAF50').position({ x: this.paddleX, y: GAME_HEIGHT - PADDLE_HEIGHT - 10 })// 球
Column().width(BALL_SIZE).height(BALL_SIZE).backgroundColor('#FFC107').position({ x: this.ballX, y: this.ballY })

2. 游戲狀態UI

根據游戲狀態顯示不同的UI元素：

準備界面：

if (this.gameState === GameState.READY) {Column() {Text('打磚塊').fontSize(32)Text('點擊開始游戲').fontSize(20)}// 其他樣式...
}

游戲結束界面：

} else if (this.gameState === GameState.OVER) {Column() {Text('游戲結束').fontSize(28)Text(`得分: ${this.score}`).fontSize(22)Text('點擊重新開始').fontSize(18)}// 其他樣式...
}

交互處理

游戲通過觸摸事件來控制擋板移動：

.handleMove(event: TouchEvent) {if (this.gameState === GameState.PLAYING) {const touchX = event.touches[0].x;this.paddleX = Math.max(0,Math.min(GAME_WIDTH - PADDLE_WIDTH, touchX - PADDLE_WIDTH / 2));}
}

點擊事件用于開始游戲或重新開始：

.onClick(() => {if (this.gameState === GameState.READY) {this.startGame();} else if (this.gameState === GameState.OVER) {this.gameState = GameState.READY;}
})

附：源代碼

import { promptAction } from "@kit.ArkUI";
import { Color } from "@ohos.graphics.scene";// 游戲常量定義
const GAME_WIDTH = 360; // 游戲區域寬度
const GAME_HEIGHT = 600; // 游戲區域高度
const PADDLE_WIDTH = 80; // 擋板寬度
const PADDLE_HEIGHT = 15; // 擋板高度
const BALL_SIZE = 15; // 球大小
const BRICK_WIDTH = 60; // 磚塊寬度
const BRICK_HEIGHT = 20; // 磚塊高度
const BRICK_ROWS = 5; // 磚塊行數
const BRICK_COLS = 6; // 磚塊列數
const PADDLE_SPEED = 8; // 擋板移動速度
const BALL_SPEED = 4; // 球初始速度// 游戲狀態
enum GameState {READY,  // 準備中PLAYING, // 游戲中OVER     // 游戲結束
}// 游戲主邏輯
@Component
struct BrickBreakerGame {@State gameState: GameState = GameState.READY@State paddleX: number = GAME_WIDTH / 2 - PADDLE_WIDTH / 2@State ballX: number = GAME_WIDTH / 2@State ballY: number = GAME_HEIGHT - 100@State ballDX: number = BALL_SPEED@State ballDY: number = -BALL_SPEED@State bricks: boolean[][] = []@State score: number = 0@State lives: number = 3private gameLoopId: number = 0@State colors:string[] = ['#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5', '#2196f3']// 初始化游戲initGame() {// 初始化磚塊this.bricks = [];for (let row = 0; row < BRICK_ROWS; row++) {let colArray: boolean[] = [];for (let col = 0; col < BRICK_COLS; col++) {colArray.push(true);}this.bricks.push(colArray);}this.paddleX = GAME_WIDTH / 2 - PADDLE_WIDTH / 2;this.ballX = GAME_WIDTH / 2;this.ballY = GAME_HEIGHT - 100;this.ballDX = BALL_SPEED;this.ballDY = -BALL_SPEED;this.score = 0;this.lives = 3;}// 開始游戲startGame() {this.gameState = GameState.PLAYING;this.initGame();// 啟動游戲循環this.gameLoopId = setInterval(() => {this.gameLoop();}, 16);}// 游戲結束gameOver() {this.gameState = GameState.OVER;clearInterval(this.gameLoopId);promptAction.showToast({message: `游戲結束! 得分: ${this.score}`,duration: 2000});}// 游戲主循環gameLoop() {// 移動球this.ballX += this.ballDX;this.ballY += this.ballDY;// 檢測球與墻壁碰撞if (this.ballX < 0 || this.ballX + BALL_SIZE > GAME_WIDTH) {this.ballDX = -this.ballDX;}if (this.ballY < 0) {this.ballDY = -this.ballDY;}// 檢測球與擋板碰撞if (this.ballY + BALL_SIZE > GAME_HEIGHT - PADDLE_HEIGHT &&this.ballY + BALL_SIZE < GAME_HEIGHT &&this.ballX + BALL_SIZE > this.paddleX &&this.ballX < this.paddleX + PADDLE_WIDTH) {// 根據擊中擋板的位置改變反彈角度const hitPos = (this.ballX - this.paddleX) / PADDLE_WIDTH;this.ballDX = (hitPos - 0.5) * 10; // -5到5之間的值this.ballDY = -Math.abs(this.ballDY); // 確保向上反彈}// 檢測球與磚塊碰撞for (let row = 0; row < BRICK_ROWS; row++) {for (let col = 0; col < BRICK_COLS; col++) {if (this.bricks[row][col]) {const brickX = col * BRICK_WIDTH;const brickY = row * BRICK_HEIGHT + 50; // 頂部留出空間if (this.ballX + BALL_SIZE > brickX &&this.ballX < brickX + BRICK_WIDTH &&this.ballY + BALL_SIZE > brickY &&this.ballY < brickY + BRICK_HEIGHT) {// 創建新數組以確保UI刷新const newBricks = [...this.bricks];newBricks[row] = [...newBricks[row]];newBricks[row][col] = false;this.bricks = newBricks;this.score += 10;// 根據碰撞位置決定反彈方向if (this.ballX + BALL_SIZE / 2 < brickX ||this.ballX + BALL_SIZE / 2 > brickX + BRICK_WIDTH) {this.ballDX = -this.ballDX;} else {this.ballDY = -this.ballDY;}}}}}// 檢測球是否落到底部if (this.ballY + BALL_SIZE > GAME_HEIGHT) {this.lives--;if (this.lives <= 0) {this.gameOver();} else {// 重置球位置this.ballX = GAME_WIDTH / 2;this.ballY = GAME_HEIGHT - 100;this.ballDX = BALL_SPEED;this.ballDY = -BALL_SPEED;}}// 檢查是否所有磚塊都被消除const allBricksGone = this.bricks.every(row =>row.every(brick => !brick));if (allBricksGone) {promptAction.showToast({message: `恭喜通關! 得分: ${this.score}`,duration: 2000});this.initGame(); // 重新開始新一局}}// 處理觸摸移動事件handleMove(event: TouchEvent) {if (this.gameState === GameState.PLAYING) {const touchX = event.touches[0].x;this.paddleX = Math.max(0,Math.min(GAME_WIDTH - PADDLE_WIDTH, touchX - PADDLE_WIDTH / 2));}}build() {Stack() {// 游戲背景Column().width(GAME_WIDTH).height(GAME_HEIGHT).backgroundColor('#1a1a1a').border({ width: 2, color: '#4a4a4a' })// 繪制磚塊ForEach(this.bricks, (row: boolean[], rowIndex:number) => {ForEach(row, (brickExists: boolean, colIndex: number) => {if (brickExists) {Column().width(BRICK_WIDTH - 2).height(BRICK_HEIGHT - 2).backgroundColor(this.colors[rowIndex]).borderRadius(6).shadow({ color: '#00000040', radius: 4 }).position({x: colIndex * BRICK_WIDTH + 1,y: rowIndex * BRICK_HEIGHT + 50})}}, (brickExists: boolean, colIndex: number) => {return colIndex.toString();})})// 繪制擋板Column().width(PADDLE_WIDTH).height(PADDLE_HEIGHT).backgroundColor('#4CAF50').borderRadius(12).shadow({ color: '#00000040', radius: 4 }).position({ x: this.paddleX, y: GAME_HEIGHT - PADDLE_HEIGHT - 10 })// 繪制球Column().width(BALL_SIZE).height(BALL_SIZE).backgroundColor('#FFC107').borderRadius(BALL_SIZE / 2).shadow({ color: '#00000040', radius: 4 }).position({ x: this.ballX, y: this.ballY })// 游戲狀態提示if (this.gameState === GameState.READY) {Column() {Text('打磚塊').fontSize(32).fontColor('#fff').fontWeight(FontWeight.Bold).margin({ bottom: 24 })Text('點擊開始游戲').fontSize(20).fontColor('#ffffffCC').padding({ top: 8, bottom: 8, left: 24, right: 24 }).borderRadius(20).border({ width: 1, color: '#ffffff40' })}.alignItems(HorizontalAlign.Center).justifyContent(FlexAlign.Center).position({ x: GAME_WIDTH / 2, y: GAME_HEIGHT / 2 - 40 })} else if (this.gameState === GameState.OVER) {Column() {Text('游戲結束').fontSize(28).fontColor('#fff').fontWeight(FontWeight.Bold).margin({ bottom: 12 })Text(`得分: ${this.score}`).fontSize(22).fontColor('#ffd700').margin({ bottom: 20 })Text('點擊重新開始').fontSize(18).fontColor('#ffffffCC').padding({ top: 6, bottom: 6, left: 20, right: 20 }).borderRadius(18).border({ width: 1, color: '#ffffff40' })}.alignItems(HorizontalAlign.Center).justifyContent(FlexAlign.Center).position({ x: GAME_WIDTH / 2, y: GAME_HEIGHT / 2 - 20 })}// 分數和生命顯示Row() {Column({ space: 4 }) {Row() {Image($r("app.media.star")).width(16).height(16)Text(`得分: ${this.score}`).fontSize(16).fontColor('#fff').margin({left: 4})}.alignItems(VerticalAlign.Center)Row() {Image($r("app.media.background")).width(16).height(16)Text(`生命: ${this.lives}`).fontSize(16).fontColor('#fff').margin({left: 4})}.alignItems(VerticalAlign.Center)}.padding({ left: 8, right: 8, top: 4, bottom: 4 }).backgroundColor('#00000066').borderRadius(12)}.position({ x: 16, y: 16 })}.width(GAME_WIDTH).height(GAME_HEIGHT).onClick(() => {if (this.gameState === GameState.READY) {this.startGame();} else if (this.gameState === GameState.OVER) {this.gameState = GameState.READY;}}).onTouch((event: TouchEvent) => {if (event.type === TouchType.Move) {this.handleMove(event)}})}
}// 主頁面
@Entry
@Component
struct BrickBreakerPage {build() {Column() {// 游戲標題Row() {Image($r("app.media.background")).width(32).height(32).margin({ right: 10 })Text('打磚塊').fontSize(32).fontWeight(FontWeight.Bold).fontColor('#2c2c2c')}.alignItems(VerticalAlign.Center).margin({ top: 24, bottom: 16 })// 游戲區域BrickBreakerGame().width(GAME_WIDTH).height(GAME_HEIGHT).margin({ top: 12 }).border({ width: 2, color: '#e0e0e0' }).borderRadius(16).shadow({ color: '#00000020', radius: 8 })}.width('100%').height('100%').alignItems(HorizontalAlign.Center).padding({ top: 12, bottom: 12 }).backgroundColor('#f0f0f0')}
}