《用MATLAB玩轉游戲開發：從零開始打造你的數字樂園》基礎篇（2D圖形交互）-《打磚塊：向量反射與實時物理模擬》MATLAB教程 🎮

引言：從游戲到物理模擬

還記得小時候玩過的打磚塊游戲嗎？🎯 一個小球在屏幕上彈來彈去，擊碎各種磚塊，同時玩家控制一塊擋板防止小球掉落。這看似簡單的游戲背后，其實蘊含著豐富的物理和數學原理！今天，我們就用MATLAB來實現這個經典游戲，并深入探討其中的向量反射和實時物理模擬技術。

通過本教程，你將學到：

• 向量運算在游戲物理中的應用
• 實時碰撞檢測的實現方法
• MATLAB動畫和交互式圖形編程
• 游戲狀態管理和邏輯控制

準備好你的MATLAB環境(2016b版本)，讓我們開始這場有趣的編程之旅吧！🚀

1. 設計思路與游戲概述 🧠

打磚塊游戲(Breakout/Arkanoid)是經典的街機游戲，包含以下核心元素：

• 一個由玩家控制的擋板(paddle)
• 一個運動的球(ball)
• 由磚塊組成的墻(bricks)
• 邊界(walls)

游戲目標是用擋板反彈球，消除所有磚塊。每次球碰到磚塊，磚塊消失，玩家得分。

1.1 物理模型關鍵點 ??

1. 碰撞檢測：判斷球與邊界、擋板、磚塊的接觸
2. 反射計算：球碰到物體后的運動方向變化
3. 實時渲染：游戲畫面的流暢更新
4. 游戲邏輯：得分、生命、勝負判斷

2. 核心原理詳解 🔍

2.1 向量反射原理 📐

球碰到平面后的反射遵循"入射角=反射角"原則。數學上可以用向量運算表示：

給定：

• 入射向量 v = [vx, vy]
• 法向量 n = [nx, ny] (垂直于反射平面)

反射向量 r 的計算公式為：
$$r=v?2(v?n)n$$

在MATLAB中實現：

function reflectedVec = reflectVector(inVec, normalVec)% 歸一化法向量normalVec = normalVec / norm(normalVec);% 計算反射向量reflectedVec = inVec - 2 * dot(inVec, normalVec) * normalVec;
end

2.2 碰撞檢測原理 🔄

我們需要檢測球與以下物體的碰撞：

1. 邊界：比較球心坐標與邊界位置
2. 擋板：判斷球是否在擋板的矩形區域內
3. 磚塊：類似擋板，但需要考慮磚塊是否已被消除

2.3 游戲循環結構 🔁

標準游戲循環包含以下步驟：

1. 初始化：創建游戲對象和變量
2. 輸入處理：讀取玩家操作
3. 狀態更新：計算物理和游戲邏輯
4. 渲染：繪制游戲畫面
5. 循環控制：控制幀率和退出條件

3. 完整流程圖 📊

4. 分步實現教程 🛠?

4.1 初始化設置

function breakoutGame()% 清除工作區和圖形窗口clc; clear; close all;% 游戲參數設置gameParams = struct(...'paddleWidth', 100, ...    % 擋板寬度'paddleHeight', 15, ...    % 擋板高度'ballRadius', 10, ...      % 球半徑'brickRows', 5, ...        % 磚塊行數'brickCols', 10, ...       % 磚塊列數'brickWidth', 60, ...      % 磚塊寬度'brickHeight', 20, ...     % 磚塊高度'brickOffsetTop', 50, ...  % 磚塊頂部偏移'brickPadding', 5, ...     % 磚塊間距'ballSpeed', 8, ...        % 球初始速度'lives', 3, ...            % 初始生命數'score', 0 ...             % 初始得分);% 創建圖形窗口fig = figure('Name', 'MATLAB打磚塊', ...'NumberTitle', 'off', ...'Position', [100, 100, 800, 600], ...'KeyPressFcn', @keyDown, ...'KeyReleaseFcn', @keyUp, ...'WindowButtonDownFcn', @mouseClick);% 創建坐標軸ax = axes('Parent', fig, ...'Position', [0.05, 0.05, 0.9, 0.9], ...'XLim', [0, 800], ...'YLim', [0, 600], ...'Color', [0.1, 0.1, 0.3], ...'XTick', [], ...'YTick', []);hold(ax, 'on');axis equal;

4.2 創建游戲對象

    % 創建擋板paddle = rectangle('Parent', ax, ...'Position', [350, 30, gameParams.paddleWidth, gameParams.paddleHeight], ...'FaceColor', [0.8, 0.2, 0.2], ...'EdgeColor', 'none', ...'Curvature', [0.2, 0.2]);% 創建球theta = rand * 2 * pi;  % 隨機初始角度ballVel = [gameParams.ballSpeed * cos(theta), gameParams.ballSpeed * sin(theta)];ball = rectangle('Parent', ax, ...'Position', [400, 200, gameParams.ballRadius*2, gameParams.ballRadius*2], ...'FaceColor', [0.9, 0.9, 0.1], ...'EdgeColor', 'none', ...'Curvature', [1, 1]);% 創建磚塊bricks = gobjects(gameParams.brickRows, gameParams.brickCols);brickColors = hsv(gameParams.brickRows);  % 每行不同顏色for r = 1:gameParams.brickRowsfor c = 1:gameParams.brickColsbrickX = (c-1) * (gameParams.brickWidth + gameParams.brickPadding);brickY = 550 - (r-1) * (gameParams.brickHeight + gameParams.brickPadding);bricks(r,c) = rectangle('Parent', ax, ...'Position', [brickX, brickY, gameParams.brickWidth, gameParams.brickHeight], ...'FaceColor', brickColors(r,:), ...'EdgeColor', 'w');endend% 創建文本顯示scoreText = text(ax, 20, 580, sprintf('得分: %d', gameParams.score), ...'Color', 'w', 'FontSize', 12);livesText = text(ax, 700, 580, sprintf('生命: %d', gameParams.lives), ...'Color', 'w', 'FontSize', 12);startText = text(ax, 400, 300, '點擊開始游戲', ...'Color', 'w', 'FontSize', 24, ...'HorizontalAlignment', 'center');

4.3 游戲主循環

    % 游戲狀態變量gameState = struct(...'isRunning', false, ...    % 游戲是否進行中'paddleDir', 0, ...        % 擋板移動方向 (-1:左, 0:停止, 1:右)'paddleSpeed', 15, ...     % 擋板移動速度'activeBricks', true(gameParams.brickRows, gameParams.brickCols) ... % 活躍磚塊);% 鍵盤控制回調函數function keyDown(~, event)switch event.Keycase 'leftarrow'gameState.paddleDir = -1;case 'rightarrow'gameState.paddleDir = 1;case 'escape'gameState.isRunning = false;endendfunction keyUp(~, event)switch event.Keycase {'leftarrow', 'rightarrow'}gameState.paddleDir = 0;endend% 鼠標點擊開始游戲function mouseClick(~, ~)if ~gameState.isRunninggameState.isRunning = true;delete(startText);startText = [];endend% 主游戲循環while ishandle(fig)if gameState.isRunning% 更新擋板位置paddlePos = get(paddle, 'Position');newX = paddlePos(1) + gameState.paddleSpeed * gameState.paddleDir;% 限制擋板不超出邊界newX = max(0, min(newX, 800 - gameParams.paddleWidth));set(paddle, 'Position', [newX, paddlePos(2), paddlePos(3), paddlePos(4)]);% 更新球位置ballPos = get(ball, 'Position');newBallX = ballPos(1) + ballVel(1);newBallY = ballPos(2) + ballVel(2);% 檢測碰撞[ballVel, gameParams, gameState] = checkCollisions(...[newBallX, newBallY], ballVel, gameParams, gameState, paddle, bricks);% 更新球位置set(ball, 'Position', [newBallX, newBallY, ballPos(3), ballPos(4)]);% 更新文本顯示set(scoreText, 'String', sprintf('得分: %d', gameParams.score));set(livesText, 'String', sprintf('生命: %d', gameParams.lives));% 檢查游戲結束條件if newBallY < 0  % 球落到底部gameParams.lives = gameParams.lives - 1;if gameParams.lives <= 0gameState.isRunning = false;text(ax, 400, 300, '游戲結束!', ...'Color', 'r', 'FontSize', 36, ...'HorizontalAlignment', 'center');else% 重置球位置set(ball, 'Position', [400, 200, gameParams.ballRadius*2, gameParams.ballRadius*2]);theta = rand * 2 * pi;ballVel = [gameParams.ballSpeed * cos(theta), gameParams.ballSpeed * sin(theta)];pause(1);endend% 檢查勝利條件if ~any(gameState.activeBricks(:))gameState.isRunning = false;text(ax, 400, 300, '恭喜通關!', ...'Color', 'g', 'FontSize', 36, ...'HorizontalAlignment', 'center');endend% 控制幀率pause(0.02);end

4.4 碰撞檢測函數

function [newVel, gameParams, gameState] = checkCollisions(ballPos, ballVel, gameParams, gameState, paddle, bricks)% 獲取球參數ballX = ballPos(1) + gameParams.ballRadius;ballY = ballPos(2) + gameParams.ballRadius;% 邊界碰撞檢測if ballX <= gameParams.ballRadius || ballX >= 800 - gameParams.ballRadiusballVel(1) = -ballVel(1);  % 水平反轉endif ballY >= 600 - gameParams.ballRadiusballVel(2) = -ballVel(2);  % 垂直反轉end% 擋板碰撞檢測paddlePos = get(paddle, 'Position');if ballY <= paddlePos(2) + paddlePos(4) + gameParams.ballRadius && ...ballY >= paddlePos(2) && ...ballX >= paddlePos(1) - gameParams.ballRadius && ...ballX <= paddlePos(1) + paddlePos(3) + gameParams.ballRadius% 計算碰撞點相對于擋板中心的位置 (-1到1)hitPos = (ballX - (paddlePos(1) + paddlePos(3)/2)) / (paddlePos(3)/2);% 根據碰撞點調整反射角度maxAngle = pi/3;  % 最大反射角度 (60度)angle = hitPos * maxAngle;% 計算新速度向量speed = norm(ballVel);ballVel = [speed * sin(angle), speed * cos(angle)];% 增加一點速度讓游戲更有挑戰性ballVel = ballVel * 1.02;end% 磚塊碰撞檢測for r = 1:gameParams.brickRowsfor c = 1:gameParams.brickColsif gameState.activeBricks(r,c)brickPos = get(bricks(r,c), 'Position');% 檢查球是否與磚塊相交if ballX + gameParams.ballRadius > brickPos(1) && ...ballX - gameParams.ballRadius < brickPos(1) + brickPos(3) && ...ballY + gameParams.ballRadius > brickPos(2) && ...ballY - gameParams.ballRadius < brickPos(2) + brickPos(4)% 確定碰撞邊 (簡化版)if ballY < brickPos(2) || ballY > brickPos(2) + brickPos(4)ballVel(2) = -ballVel(2);  % 上下碰撞elseballVel(1) = -ballVel(1);  % 左右碰撞end% 標記磚塊為不活躍并隱藏gameState.activeBricks(r,c) = false;set(bricks(r,c), 'Visible', 'off');% 增加分數gameParams.score = gameParams.score + 10;% 只需要處理一次碰撞break;endendendendnewVel = ballVel;
end

5. 完整可運行代碼 🏆

將以下所有代碼段按順序組合成一個.m文件即可運行：

function breakoutGame()% 清除工作區和圖形窗口clc; clear; close all;% 游戲參數設置gameParams = struct(...'paddleWidth', 100, ...    % 擋板寬度'paddleHeight', 15, ...    % 擋板高度'ballRadius', 10, ...      % 球半徑'brickRows', 5, ...        % 磚塊行數'brickCols', 10, ...       % 磚塊列數'brickWidth', 60, ...      % 磚塊寬度'brickHeight', 20, ...     % 磚塊高度'brickOffsetTop', 50, ...  % 磚塊頂部偏移'brickPadding', 5, ...     % 磚塊間距'ballSpeed', 8, ...        % 球初始速度'lives', 3, ...            % 初始生命數'score', 0 ...             % 初始得分);% 創建圖形窗口fig = figure('Name', 'MATLAB打磚塊', ...'NumberTitle', 'off', ...'Position', [100, 100, 800, 600], ...'KeyPressFcn', @keyDown, ...'KeyReleaseFcn', @keyUp, ...'WindowButtonDownFcn', @mouseClick);% 創建坐標軸ax = axes('Parent', fig, ...'Position', [0.05, 0.05, 0.9, 0.9], ...'XLim', [0, 800], ...'YLim', [0, 600], ...'Color', [0.1, 0.1, 0.3], ...'XTick', [], ...'YTick', []);hold(ax, 'on');axis equal;% 創建擋板paddle = rectangle('Parent', ax, ...'Position', [350, 30, gameParams.paddleWidth, gameParams.paddleHeight], ...'FaceColor', [0.8, 0.2, 0.2], ...'EdgeColor', 'none', ...'Curvature', [0.2, 0.2]);% 創建球theta = rand * 2 * pi;  % 隨機初始角度ballVel = [gameParams.ballSpeed * cos(theta), gameParams.ballSpeed * sin(theta)];ball = rectangle('Parent', ax, ...'Position', [400, 200, gameParams.ballRadius*2, gameParams.ballRadius*2], ...'FaceColor', [0.9, 0.9, 0.1], ...'EdgeColor', 'none', ...'Curvature', [1, 1]);% 創建磚塊bricks = gobjects(gameParams.brickRows, gameParams.brickCols);brickColors = hsv(gameParams.brickRows);  % 每行不同顏色for r = 1:gameParams.brickRowsfor c = 1:gameParams.brickColsbrickX = (c-1) * (gameParams.brickWidth + gameParams.brickPadding);brickY = 550 - (r-1) * (gameParams.brickHeight + gameParams.brickPadding);bricks(r,c) = rectangle('Parent', ax, ...'Position', [brickX, brickY, gameParams.brickWidth, gameParams.brickHeight], ...'FaceColor', brickColors(r,:), ...'EdgeColor', 'w');endend% 創建文本顯示scoreText = text(ax, 20, 580, sprintf('得分: %d', gameParams.score), ...'Color', 'w', 'FontSize', 12);livesText = text(ax, 700, 580, sprintf('生命: %d', gameParams.lives), ...'Color', 'w', 'FontSize', 12);startText = text(ax, 400, 300, '點擊開始游戲', ...'Color', 'w', 'FontSize', 24, ...'HorizontalAlignment', 'center');% 游戲狀態變量gameState = struct(...'isRunning', false, ...    % 游戲是否進行中'paddleDir', 0, ...        % 擋板移動方向 (-1:左, 0:停止, 1:右)'paddleSpeed', 15, ...     % 擋板移動速度'activeBricks', true(gameParams.brickRows, gameParams.brickCols) ... % 活躍磚塊);% 鍵盤控制回調函數function keyDown(~, event)switch event.Keycase 'leftarrow'gameState.paddleDir = -1;case 'rightarrow'gameState.paddleDir = 1;case 'escape'gameState.isRunning = false;endendfunction keyUp(~, event)switch event.Keycase {'leftarrow', 'rightarrow'}gameState.paddleDir = 0;endend% 鼠標點擊開始游戲function mouseClick(~, ~)if ~gameState.isRunninggameState.isRunning = true;delete(startText);startText = [];endend% 主游戲循環while ishandle(fig)if gameState.isRunning% 更新擋板位置paddlePos = get(paddle, 'Position');newX = paddlePos(1) + gameState.paddleSpeed * gameState.paddleDir;% 限制擋板不超出邊界newX = max(0, min(newX, 800 - gameParams.paddleWidth));set(paddle, 'Position', [newX, paddlePos(2), paddlePos(3), paddlePos(4)]);% 更新球位置ballPos = get(ball, 'Position');newBallX = ballPos(1) + ballVel(1);newBallY = ballPos(2) + ballVel(2);% 檢測碰撞[ballVel, gameParams, gameState] = checkCollisions(...[newBallX, newBallY], ballVel, gameParams, gameState, paddle, bricks);% 更新球位置set(ball, 'Position', [newBallX, newBallY, ballPos(3), ballPos(4)]);% 更新文本顯示set(scoreText, 'String', sprintf('得分: %d', gameParams.score));set(livesText, 'String', sprintf('生命: %d', gameParams.lives));% 檢查游戲結束條件if newBallY < 0  % 球落到底部gameParams.lives = gameParams.lives - 1;if gameParams.lives <= 0gameState.isRunning = false;text(ax, 400, 300, '游戲結束!', ...'Color', 'r', 'FontSize', 36, ...'HorizontalAlignment', 'center');else% 重置球位置set(ball, 'Position', [400, 200, gameParams.ballRadius*2, gameParams.ballRadius*2]);theta = rand * 2 * pi;ballVel = [gameParams.ballSpeed * cos(theta), gameParams.ballSpeed * sin(theta)];pause(1);endend% 檢查勝利條件if ~any(gameState.activeBricks(:))gameState.isRunning = false;text(ax, 400, 300, '恭喜通關!', ...'Color', 'g', 'FontSize', 36, ...'HorizontalAlignment', 'center');endend% 控制幀率pause(0.02);end% 碰撞檢測函數function [newVel, gameParams, gameState] = checkCollisions(ballPos, ballVel, gameParams, gameState, paddle, bricks)% 獲取球參數ballX = ballPos(1) + gameParams.ballRadius;ballY = ballPos(2) + gameParams.ballRadius;% 邊界碰撞檢測if ballX <= gameParams.ballRadius || ballX >= 800 - gameParams.ballRadiusballVel(1) = -ballVel(1);  % 水平反轉endif ballY >= 600 - gameParams.ballRadiusballVel(2) = -ballVel(2);  % 垂直反轉end% 擋板碰撞檢測paddlePos = get(paddle, 'Position');if ballY <= paddlePos(2) + paddlePos(4) + gameParams.ballRadius && ...ballY >= paddlePos(2) && ...ballX >= paddlePos(1) - gameParams.ballRadius && ...ballX <= paddlePos(1) + paddlePos(3) + gameParams.ballRadius% 計算碰撞點相對于擋板中心的位置 (-1到1)hitPos = (ballX - (paddlePos(1) + paddlePos(3)/2)) / (paddlePos(3)/2);% 根據碰撞點調整反射角度maxAngle = pi/3;  % 最大反射角度 (60度)angle = hitPos * maxAngle;% 計算新速度向量speed = norm(ballVel);ballVel = [speed * sin(angle), speed * cos(angle)];% 增加一點速度讓游戲更有挑戰性ballVel = ballVel * 1.02;end% 磚塊碰撞檢測for r = 1:gameParams.brickRowsfor c = 1:gameParams.brickColsif gameState.activeBricks(r,c)brickPos = get(bricks(r,c), 'Position');% 檢查球是否與磚塊相交if ballX + gameParams.ballRadius > brickPos(1) && ...ballX - gameParams.ballRadius < brickPos(1) + brickPos(3) && ...ballY + gameParams.ballRadius > brickPos(2) && ...ballY - gameParams.ballRadius < brickPos(2) + brickPos(4)% 確定碰撞邊 (簡化版)if ballY < brickPos(2) || ballY > brickPos(2) + brickPos(4)ballVel(2) = -ballVel(2);  % 上下碰撞elseballVel(1) = -ballVel(1);  % 左右碰撞end% 標記磚塊為不活躍并隱藏gameState.activeBricks(r,c) = false;set(bricks(r,c), 'Visible', 'off');% 增加分數gameParams.score = gameParams.score + 10;% 只需要處理一次碰撞break;endendendendnewVel = ballVel;end
end

來看看我這個菜雞玩了一局的效果，屏幕前的你也可以試試看看能的多少分～

6. 游戲操作說明 🎮

• 左右箭頭鍵：移動擋板
• ESC鍵：退出游戲
• 鼠標點擊：開始游戲

7. 擴展思路 💡

如果你想進一步提升這個游戲，可以考慮：

1. 增加音效：使用audioplayer添加碰撞音效
2. 多種磚塊：不同顏色磚塊需要多次擊中才能消除
3. 特殊道具：球碰到某些磚塊會掉落道具，如加長擋板、額外生命等
4. 關卡設計：設計不同布局的磚塊排列
5. 粒子效果：磚塊消除時添加爆炸效果

希望你喜歡這個MATLAB打磚塊游戲教程！通過這個項目，你不僅學會了向量反射的原理，還掌握了實時物理模擬和游戲開發的基本技巧。Happy coding! 🚀