簡(jiǎn)介面向Processing初學(xué)者與視覺(jué)編程愛(ài)好者的類FlappyBird小游戲源碼包適合用來(lái)練習(xí)繪圖、動(dòng)畫(huà)循環(huán)、碰撞檢測(cè)、鍵盤(pán)輸入與面向?qū)ο蠼M織。項(xiàng)目將小鳥(niǎo)、管道和通用邏輯拆分為獨(dú)立模塊配合圖片與音效素材較完整地呈現(xiàn)角色運(yùn)動(dòng)、隨機(jī)障礙生成、得分判定與游戲狀態(tài)切換的實(shí)現(xiàn)思路讀者可在其基礎(chǔ)上調(diào)整參數(shù)、替換素材或擴(kuò)展玩法借此理解小型交互游戲從繪制到邏輯閉環(huán)的基本結(jié)構(gòu)也可作為課堂示例拆解。壓縮包共12個(gè)文件以4個(gè)pde源碼為主另有3張png圖像、3個(gè)mp3與1個(gè)wav音頻及1個(gè)properties配置文件整體約2.48MB源碼、素材與項(xiàng)目設(shè)置相對(duì)齊全。已有1041人學(xué)習(xí)適合Processing入門(mén)者自學(xué)練手也便于教師布置圖形交互作業(yè)時(shí)參考。1. 用 Processing 復(fù)刻 FlappyBird難的不是畫(huà)鳥(niǎo)用 Processing 寫(xiě)一個(gè)類 FlappyBird 的橫版躲避小游戲網(wǎng)上能搜到的版本大多兩百行上下圖能跑、鳥(niǎo)能飛可真拿去給人玩十分鐘內(nèi)必然被問(wèn)三句話我明明沒(méi)碰到管子怎么就死了重開(kāi)一局分?jǐn)?shù)怎么還掛著上一局的為什么在我機(jī)器上特別飄、換臺(tái)電腦又變得特別難這份源碼包正面處理的就是這三件事——重力、跳躍、管道、碰撞、狀態(tài)機(jī)各自拆成互不越界的幾塊參數(shù)集中在文件頭部改一個(gè)數(shù)字就能改手感。適合兩類人剛學(xué)完 setup/draw 想找個(gè)完整小項(xiàng)目練手的新手以及課程設(shè)計(jì)要做橫版躲避 Demo、需要一份能講清每行代碼為什么這么寫(xiě)的骨架的從業(yè)者。下面按“先把物理立住、再讓管道可復(fù)用、最后把狀態(tài)和參數(shù)收干凈”的順序拆。2. 主循環(huán)與重力把“手感”拆成四個(gè)可調(diào)參數(shù)手感這東西聽(tīng)起來(lái)玄學(xué)落到代碼里其實(shí)就是四個(gè)數(shù)字重力多大、點(diǎn)擊給多大沖量、最大下落速度多少、點(diǎn)擊有沒(méi)有冷卻。四個(gè)數(shù)字定死之前先得把數(shù)據(jù)結(jié)構(gòu)和主循環(huán)擺對(duì)否則后面每加一個(gè)功能都在還債。2.1 為什么用 PVector 存速度而不是一個(gè) float vyProcessing 的坐標(biāo)系原點(diǎn)在左上角y 軸向下為正所以“向上跳”必須給負(fù)值——這個(gè)符號(hào)是最容易寫(xiě)反的地方。我一般把方向直接編進(jìn)常量名里JUMP_IMPULSE寫(xiě)成 -7.6 并在旁邊注釋“負(fù)值向上”比事后查 bug 便宜得多。用PVector而不是三個(gè) float理由有三條一是位置和速度天然成對(duì)重置時(shí)pos.set(...)、vel.set(0,0)一行解決二是以后想加橫向風(fēng)、管道推速、震屏偏移直接pos.add(wind)就行不用再補(bǔ)一堆變量三是PVector是可變對(duì)象pos.add(vel)原地修改、不產(chǎn)生新對(duì)象在每幀都跑的 draw 里不會(huì)給 GC 添麻煩。唯一要小心的是別寫(xiě)成pos pos.add(vel)這種看著像“產(chǎn)生新向量”的寫(xiě)法容易讓后面接手的人誤判語(yǔ)義。// 坐標(biāo)原點(diǎn)在左上角y 軸向下為正向上跳必須給負(fù)值 final float GRAVITY 0.42; // 每幀60fps 基準(zhǔn)疊加到速度上的加速度 final float JUMP_IMPULSE -7.6; // 點(diǎn)擊瞬間的垂直速度負(fù)值 向上 final float MAX_FALL_SPEED 11.0; // 終端速度防止掉幀時(shí)一幀穿過(guò)管道 final float BIRD_X 120; // 鳥(niǎo)的橫坐標(biāo)固定世界向左滾動(dòng) PVector pos; PVector vel; float gravity; // 用變量而不是直接用常量方便第 6 章在線調(diào)參 void setup() { size(480, 720); frameRate(60); gravity GRAVITY; resetBird(); } void resetBird() { pos new PVector(BIRD_X, height * 0.42); vel new PVector(0, 0); }邏輯說(shuō)明pos只存位置vel只存速度重力永遠(yuǎn)不直接改pos而是先進(jìn)入vel、再由vel進(jìn)入pos。這個(gè)“加速度→速度→位置”的兩級(jí)積分是所有運(yùn)動(dòng)的基礎(chǔ)骨架順序?qū)懛聪燃游恢迷偌蛹铀俣葧?huì)讓鳥(niǎo)在低幀率下出現(xiàn)明顯的臺(tái)階感。resetBird()單獨(dú)抽出來(lái)是為第 4 章的重開(kāi)邏輯留接口避免重開(kāi)時(shí)到處復(fù)制兩行初始化。參數(shù)說(shuō)明GRAVITY決定松手后的“沉”度0.35 以下像月球漫步0.6 以上基本救不回來(lái)JUMP_IMPULSE決定一次點(diǎn)擊抬多高絕對(duì)值越大越“彈”MAX_FALL_SPEED是安全閥后面碰撞那章會(huì)用到它BIRD_X固定不動(dòng)因?yàn)闈L動(dòng)的是世界不是鳥(niǎo)這一點(diǎn)跟很多橫版卷軸的做法一致能讓碰撞判定只在一個(gè)方向上變化。提示frameRate(60)只是“請(qǐng)求”不是承諾。窗口被遮擋、圖片過(guò)大、后臺(tái)開(kāi)了別的程序?qū)嶋H幀率都會(huì)掉這就是下一節(jié)要處理的問(wèn)題。2.2 歸一化系數(shù)與固定步長(zhǎng)兩種讓手感不隨幀率漂移的寫(xiě)法如果直接寫(xiě)vel.y GRAVITY; pos.y vel.y;在 60fps 下一切正?？梢坏?shí)際幀率掉到 30同樣的重力每秒只累加 30 次鳥(niǎo)的下落明顯變慢玩家會(huì)覺(jué)得“這游戲今天特別簡(jiǎn)單”。這種隨設(shè)備漂移的手感是最難復(fù)現(xiàn)的 bug因?yàn)樗谀銠C(jī)器上永遠(yuǎn)不出現(xiàn)。寫(xiě)法 A 是系數(shù)歸一化一行搞定void draw() { float k 60.0 / max(1.0, frameRate); // 以 60fps 為基準(zhǔn)的縮放系數(shù) k constrain(k, 0.5, 3.0); // 卡頓太久時(shí)不至于一幀跳出去 vel.y gravity * k; vel.y min(vel.y, MAX_FALL_SPEED); // 終端速度 pos.y vel.y * k; }邏輯說(shuō)明k的物理含義是“這一幀相當(dāng)于幾個(gè)標(biāo)準(zhǔn)幀”幀率越低 k 越大重力累加得越多。constrain那行是后悔藥——窗口被最小化再還原時(shí)frameRate可能瞬間變成一個(gè)很小的值k 會(huì)變成幾十鳥(niǎo)一幀就飛出屏幕夾到 3 倍以內(nèi)基本能兜住。參數(shù)說(shuō)明這種寫(xiě)法有個(gè)理論缺陷重力和位移同時(shí)乘 k速度項(xiàng)實(shí)際被放大了 k2 量級(jí)的誤差幀率波動(dòng)大時(shí)軌跡會(huì)有細(xì)微差別。對(duì) FlappyBird 這種只有豎直一維運(yùn)動(dòng)的場(chǎng)景完全夠用但如果后面要加拋物線彈道、要算落點(diǎn)就得換寫(xiě)法 B。寫(xiě)法 B 是固定步長(zhǎng)累加器把物理推進(jìn)和渲染徹底解耦final float FIXED_DT 1.0 / 60.0; // 物理固定按 1/60 秒推進(jìn) float accumulator 0; int lastMillis 0; void draw() { int now millis(); float frameTime (now - lastMillis) / 1000.0; lastMillis now; frameTime min(frameTime, 0.25); // 防止窗口掛起后一次性補(bǔ)幾百幀 accumulator frameTime; while (accumulator FIXED_DT) { stepPhysics(FIXED_DT); accumulator - FIXED_DT; } render(); // 渲染每幀只做一次直接用 pos 畫(huà) } void stepPhysics(float dt) { vel.y GRAVITY * 60 * dt; // GRAVITY 按“每幀”定義這里換算成每秒 vel.y min(vel.y, MAX_FALL_SPEED); pos.y vel.y * 60 * dt; }邏輯說(shuō)明不管渲染幀率是多少物理永遠(yuǎn)以 1/60 秒為單位推進(jìn)一幀內(nèi)可能要跑 0 次高刷屏也可能跑 3 次卡頓但每一步的數(shù)值完全一致所以同一串點(diǎn)擊時(shí)間戳在任何機(jī)器上都能復(fù)現(xiàn)出同一條軌跡。min(frameTime, 0.25)是必須的否則斷點(diǎn)調(diào)試回來(lái)那一幀會(huì)一次性補(bǔ)上幾十步物理鳥(niǎo)直接穿模。參數(shù)說(shuō)明FIXED_DT不建議小于 1/120否則一步的位移只有零點(diǎn)幾像素屬于浪費(fèi)也不建議大于 1/45否則快速下落時(shí)單步位移過(guò)大配合第 3 章的碰撞會(huì)漏判。方案代碼量軌跡一致性適用場(chǎng)景系數(shù)歸一化3 行一般低幀率下有偏差單機(jī)小 Demo、只想快速跑通固定步長(zhǎng)20 行強(qiáng)同輸入必同軌跡要做回放、要做自動(dòng)測(cè)試、要交付2.3 跳躍沖量、終端速度與連點(diǎn)冷卻跳躍有兩種寫(xiě)法差別比想象中大。vel.y JUMP_IMPULSE是硬置每次點(diǎn)擊后鳥(niǎo)的上升軌跡完全一致玩家能形成肌肉記憶vel.y JUMP_IMPULSE是疊加連點(diǎn)會(huì)累加速度鳥(niǎo)能一路竄到屏幕頂端。早期我圖省事用了疊加結(jié)果玩家全程狂點(diǎn)就能過(guò)管道形同虛設(shè)這是最典型的一次翻車(chē)。硬置還要配一個(gè)冷卻否則鼠標(biāo)事件和鍵盤(pán)事件在同一幀里都觸發(fā)時(shí)等于白按一次int lastJumpMillis -1000; final int JUMP_COOLDOWN 90; // 毫秒防止同幀多輸入事件疊加 void doJump() { if (millis() - lastJumpMillis JUMP_COOLDOWN) return; lastJumpMillis millis(); vel.y JUMP_IMPULSE; // 硬置不是 } void keyPressed() { if (key ) doJump(); } void mousePressed() { doJump(); }邏輯說(shuō)明冷卻窗口取 90ms 左右比人類最快連點(diǎn)間隔約 100ms稍短正常操作不會(huì)覺(jué)得卡但能把同一幀的重復(fù)事件吃掉。lastJumpMillis初值給 -1000 而不是 0是為了讓游戲開(kāi)始時(shí)的第一次點(diǎn)擊不被冷卻擋住。再補(bǔ)兩個(gè)視覺(jué)細(xì)節(jié)。第一是終端速度它除了防止穿模還讓鳥(niǎo)在長(zhǎng)時(shí)間不下落時(shí)有個(gè)穩(wěn)定姿態(tài)不會(huì)越掉越快變成自由落體。第二是傾斜角用速度映射旋轉(zhuǎn)玩家的操作反饋立刻直觀// 把速度映射成機(jī)身角度上升時(shí)抬頭下落時(shí)低頭 float angle map(vel.y, JUMP_IMPULSE, MAX_FALL_SPEED, -0.42, 1.45); angle constrain(angle, -0.42, 1.45); // -0.42rad≈-24°1.45rad≈83°這兩個(gè)數(shù)字-24° 和 83°是試出來(lái)的抬得太高像在倒著飛低得不夠又看不出俯沖。它們不影響任何邏輯純粹是讓判定和視覺(jué)對(duì)得上的心理暗示——玩家覺(jué)得“鳥(niǎo)頭朝下沖進(jìn)管子”比“鳥(niǎo)平平地貼上去”更容易接受死亡。3. 管道生成與碰撞對(duì)象池、開(kāi)口公式和一個(gè)收縮系數(shù)管道是這類游戲里唯一會(huì)持續(xù)增長(zhǎng)的東西寫(xiě)法不對(duì)就會(huì)出現(xiàn)“越玩越卡”和“明明沒(méi)碰到卻死了”兩大頑疾。前者是內(nèi)存問(wèn)題后者是數(shù)據(jù)不同源問(wèn)題兩個(gè)都得從數(shù)據(jù)結(jié)構(gòu)層面解決。3.1 用對(duì)象池代替 remove/add最直覺(jué)的寫(xiě)法是每幀pipes.add(new Pipe())、出屏后pipes.remove(0)。ArrayList的remove(0)會(huì)把后面所有元素整體搬移一位add在容量不足時(shí)還要擴(kuò)容復(fù)制管道保持在屏幕上 3~4 根、每 2 秒輪換一次看著不頻繁但配合每幀的遍歷和第 4 章的碰撞實(shí)測(cè)每過(guò)七八根管子就有一次可感知的頓挫。改成固定長(zhǎng)度數(shù)組加環(huán)形復(fù)用就干凈了class Pipe { float x; // 管道左邊緣的世界坐標(biāo) float gapY; // 開(kāi)口中心的縱坐標(biāo) float gapH; // 開(kāi)口總高度 boolean scored; // 是否已計(jì)分見(jiàn) 4.2 } final int PIPE_COUNT 4; Pipe[] pipes new Pipe[PIPE_COUNT]; float pipeW 78; // 管道寬度 float gapH 180; // 開(kāi)口高度 float spacing 240; // 相鄰兩根管道的水平間距 void initPipes() { for (int i 0; i PIPE_COUNT; i) { pipes[i] new Pipe(); pipes[i].x width 120 i * spacing; pipes[i].gapY random(gapH * 0.6, height - gapH * 0.6); pipes[i].gapH gapH; pipes[i].scored false; } } void updatePipes(float dx) { for (Pipe p : pipes) { p.x - dx; // 世界向左滾動(dòng) if (p.x pipeW 0) { // 完全出屏才回收 p.x PIPE_COUNT * spacing; // 接到隊(duì)尾而不是 new 一個(gè) p.gapY random(p.gapH * 0.6, height - p.gapH * 0.6); p.scored false; } } }邏輯說(shuō)明回收時(shí)用p.x PIPE_COUNT * spacing而不是p.x width這是整個(gè)對(duì)象池能穩(wěn)住的關(guān)鍵。如果重置到width一旦某幀因?yàn)榭D導(dǎo)致dx變大隊(duì)尾的管道會(huì)和剛回收的管道擠在一起甚至重疊加上“一整輪的間距”之后隊(duì)列的相對(duì)位置永遠(yuǎn)均勻間距不會(huì)因?yàn)閹什▌?dòng)而漂移。參數(shù)說(shuō)明PIPE_COUNT取 4 是算出來(lái)的屏幕寬度 480 除以間距 240 約等于 2再多留兩根在屏幕右側(cè)待命保證任何時(shí)刻都有管子接上。pipeW取 78 是視覺(jué)寬度碰撞時(shí)用的是另一套收縮后的判定框兩者刻意不同源但共用x和gapY——只要繪制和判定讀的是同一份gapY/gapH就不會(huì)出現(xiàn)畫(huà)一套算一套的穿模。3.2 開(kāi)口高度與水平間距難度曲線的三個(gè)旋鈕真正決定難度的是三個(gè)量gapH開(kāi)口高度、spacing水平間距、dx每幀滾動(dòng)像素。前兩個(gè)是空間后一個(gè)是時(shí)間三者可以換算成一個(gè)玩家能感知的指標(biāo)——反應(yīng)時(shí)間從管道進(jìn)入屏幕右緣到抵達(dá)鳥(niǎo)的位置可用的秒數(shù) ≈ (width - BIRD_X) / (dx * 60)按 480 寬、鳥(niǎo)在 120、dx 取 2.2 計(jì)算大約是 2.7 秒當(dāng) dx 漲到 3.4只剩 1.76 秒。低于 0.8 秒基本就是背板而不是反應(yīng)不適合作為起始難度。這個(gè)換算看著簡(jiǎn)單但它把“我調(diào)了速度好像變難了”變成“反應(yīng)窗口從 2.7 秒壓到 1.8 秒”調(diào)參時(shí)心里有數(shù)。難度遞增用一個(gè) 0~1 的進(jìn)度量做線性插值30 分封頂void updateDifficulty() { float d constrain(score / 30.0, 0, 1); // 0~130 分后不再變難 gapH lerp(190, 140, d); // 開(kāi)口 190 - 140 scrollSpeed lerp(2.2, 3.4, d); // 每幀像素 spacing lerp(250, 210, d); }邏輯說(shuō)明lerp的三個(gè)參數(shù)是起點(diǎn)、終點(diǎn)、進(jìn)度寫(xiě)起來(lái)比手算start (end - start) * d清楚。注意這里只改“下一根被回收的管道”的參數(shù)已經(jīng)在屏幕上的管道保持原樣——如果每幀都去改所有管道的gapH玩家會(huì)看到管子開(kāi)口像呼吸一樣收放那才是真正的玄學(xué)。參數(shù)說(shuō)明gapH的下限 140 是硬邊界再低就會(huì)出現(xiàn)“鳥(niǎo)的判定框加上管道寬度已經(jīng)不允許任何操作余量”的情況理論上還能過(guò)實(shí)際全靠運(yùn)氣。spacing的下限 210 是為了保證兩根管子不會(huì)同時(shí)在鳥(niǎo)的位置附近形成夾擊。3.3 碰撞AABB 加一個(gè) 0.75 收縮系數(shù)碰撞用軸對(duì)齊包圍盒AABB就夠了不要去做像素級(jí)檢測(cè)。像素級(jí)不但慢而且會(huì)把貼圖上的描邊、陰影算進(jìn)去玩家看到的是“我貼著邊過(guò)去了”判定卻認(rèn)為撞上這種不公平感比直接撞死更勸退。// 鳥(niǎo)的判定框比貼圖小 25%這是讓玩家覺(jué)得“公平”的關(guān)鍵 final float HIT_SCALE 0.75; boolean hitPipe(Pipe p) { float halfW 24 * 0.5 * HIT_SCALE; float halfH 24 * 0.5 * HIT_SCALE; // 橫向不相交直接返回省掉后面的縱向判斷 if (pos.x halfW p.x || pos.x - halfW p.x pipeW) return false; float topBottom p.gapY - p.gapH * 0.5; // 上管的底邊 float botTop p.gapY p.gapH * 0.5; // 下管的頂邊 if (pos.y - halfH topBottom) return true; // 撞上管 if (pos.y halfH botTop) return true; // 撞下管 return false; }邏輯說(shuō)明先做橫向粗篩再做縱向判斷是因?yàn)闄M向不相交的概率遠(yuǎn)高于縱向提前返回能省掉大部分計(jì)算。上管的繪制高度就是topBottom下管從botTop畫(huà)到height判定和繪制共用這兩個(gè)變量所以只要gapY和gapH不被別的邏輯偷偷改掉就永遠(yuǎn)不會(huì)出現(xiàn)“看著沒(méi)碰到卻死了”。參數(shù)說(shuō)明HIT_SCALE是本項(xiàng)目里最值得單獨(dú)拿出來(lái)講的一個(gè)數(shù)。取 1.0 時(shí)判定框和貼圖完全重合玩家會(huì)覺(jué)得“擦邊就死”取 0.75 相當(dāng)于允許鳥(niǎo)的像素邊緣壓進(jìn)管道 3 像素左右視覺(jué)上有驚無(wú)險(xiǎn)操作反饋立刻變好。低于 0.6 就反過(guò)來(lái)了看著撞進(jìn)去卻沒(méi)死信任感崩得比撞死還快。注意判定框收縮只縮鳥(niǎo)不要縮管道?？s管道會(huì)讓開(kāi)口看起來(lái)比實(shí)際大玩家對(duì)距離的判斷會(huì)持續(xù)失準(zhǔn)。4. 狀態(tài)機(jī)與計(jì)分READY / PLAYING / GAME_OVER 三態(tài)怎么切把狀態(tài)和計(jì)分單拎一章是因?yàn)檫@類小游戲的 bug 有七成出在這里重開(kāi)不清零、一次過(guò)管加兩分、死亡后還在跑物理。用布爾量拼狀態(tài)是萬(wàn)惡之源。4.1 用 enum 管狀態(tài)別用三個(gè) boolean 拼boolean playing、boolean gameOver、boolean started三個(gè)變量一起用必然出現(xiàn)playing gameOver同時(shí)為真的中間態(tài)。我見(jiàn)過(guò)最典型的一次是重開(kāi)時(shí)忘了清gameOver鳥(niǎo)在 READY 界面就開(kāi)始自由落體玩家還沒(méi)反應(yīng)過(guò)來(lái)已經(jīng)死了。enum加switch強(qiáng)制每次只走一個(gè)分支這類 bug 從結(jié)構(gòu)上就不存在。enum GameState { READY, PLAYING, GAME_OVER } GameState state GameState.READY; void update() { switch (state) { case READY: // 待機(jī)時(shí)鳥(niǎo)做上下浮動(dòng)不施加重力 pos.y height * 0.42 sin(millis() / 300.0) * 8; break; case PLAYING: stepPhysics(FIXED_DT); updatePipes(scrollSpeed); updateDifficulty(); if (hitAnyPipe() || pos.y height - 12) { state GameState.GAME_OVER; } checkScore(); break; case GAME_OVER: // 只落不飛掉到接近底部就停住 if (pos.y height - 20) { stepPhysics(FIXED_DT); } break; } }邏輯說(shuō)明READY 狀態(tài)下完全不碰vel鳥(niǎo)的位置每幀由正弦函數(shù)直接給這樣玩家看到的是一只懸停的鳥(niǎo)而不是一只正在下墜的鳥(niǎo)。PLAYING 分支里先算物理再算管道再判碰撞順序不能反——先判碰撞再移動(dòng)位置會(huì)出現(xiàn)判定用的是上一幀坐標(biāo)的情況表現(xiàn)為“穿過(guò)去半根才死”。GAME_OVER 分支保留物理但不接受輸入鳥(niǎo)會(huì)繼續(xù)下墜一段再停住這個(gè)細(xì)節(jié)讓死亡有重量感。參數(shù)說(shuō)明height - 12是落地判定的閾值取 12 是鳥(niǎo)貼圖半高配合height - 20的停止線讓鳥(niǎo)落在地上而不是陷進(jìn)去。millis() / 300.0里的 300 是浮動(dòng)周期改小變快、改大變得更慢。4.2 計(jì)分用 scored 標(biāo)志位不要用距離閾值見(jiàn)過(guò)不少實(shí)現(xiàn)寫(xiě)成if (abs(pos.x - p.x) 5) score;這行代碼在管道每幀移動(dòng) 2~3 像素的情況下會(huì)漏判一幀跨過(guò)去了或重復(fù)判閾值太大連續(xù)兩幀都滿足。正確做法是給每根管道一個(gè)“是否已計(jì)分”的布爾位條件寫(xiě)成“鳥(niǎo)已經(jīng)越過(guò)管道的右邊緣”天然冪等。void checkScore() { for (Pipe p : pipes) { if (!p.scored pos.x p.x pipeW) { p.scored true; // 置位保證一根管道只計(jì)一次 score; } } }邏輯說(shuō)明pos.x p.x pipeW是“整只鳥(niǎo)含判定框都過(guò)了管道右邊緣”的意思比用中心點(diǎn)判斷更符合直覺(jué)。p.scored在 3.1 的回收邏輯里被重置為false所以同一根管道被復(fù)用后還能再計(jì)一次分整套流程閉環(huán)。參數(shù)說(shuō)明score建議單獨(dú)維護(hù)不要復(fù)用frameCount或任何全局計(jì)數(shù)。分?jǐn)?shù)一旦和幀數(shù)綁在一起重開(kāi)就會(huì)出問(wèn)題——frameCount是自 sketch 啟動(dòng)以來(lái)的累計(jì)值永遠(yuǎn)不會(huì)歸零。4.3 重開(kāi)一局要重置的清單重開(kāi)是這類游戲最容易留殘影的地方。我一般寫(xiě)一個(gè)resetAll()作為唯一入口把所有會(huì)變的東西列成清單一條一條對(duì)著寫(xiě)而不是散落在keyPressed里。void resetAll() { score 0; scrollSpeed 2.2; gapH 190; spacing 250; resetBird(); // pos / vel initPipes(); // 管道的 x / gapY / gapH / scored lastJumpMillis -1000; stateStartFrame frameCount; state GameState.READY; }邏輯說(shuō)明清單式重置的好處是新增字段時(shí)一眼能看出“這里要補(bǔ)一行”。管道必須走initPipes()而不是只清scored因?yàn)樯弦痪值墓艿牢恢脮?huì)留在屏幕中間重開(kāi)后鳥(niǎo)直接撞上去。參數(shù)說(shuō)明stateStartFrame是自己記的幀號(hào)用途見(jiàn)下。注意frameCount是自 sketch 啟動(dòng)以來(lái)的全局幀數(shù)重開(kāi)不會(huì)清零。任何“每 30 幀閃一次”的動(dòng)畫(huà)都要寫(xiě)成frameCount - stateStartFrame直接用frameCount % 30會(huì)在重開(kāi)后表現(xiàn)得不規(guī)律。5. 五條血淚踩坑從“能跑”到“能玩”之間隔著什么下面這五條是照著別人代碼改或者自己從頭寫(xiě)都會(huì)撞上的前三條偏畫(huà)面與性能后兩條偏邏輯判定。每條按“現(xiàn)象→原因→解決”說(shuō)能對(duì)號(hào)入座就不用重走一遍。5.1 畫(huà)面與性能類第一條越玩越卡七八根管子之后明顯頓一下?，F(xiàn)象是前面幾根很順過(guò)了十來(lái)根開(kāi)始每隔一兩秒卡一幀幀率顯示從 60 掉到 45 又彈回來(lái)。原因是每幀在draw()里new Pipe()或者new PVector()管道輪換時(shí)對(duì)象不斷創(chuàng)建又丟棄垃圾回收周期被打斷表現(xiàn)為規(guī)律性的頓挫。解決是把管道改成 3.1 的固定數(shù)組復(fù)用PVector只在resetBird()里創(chuàng)建一次后續(xù)全部用set()和add()原地修改。改完再測(cè)幀率曲線會(huì)變成一條直線。第二條第一幀圖片黑塊或者鳥(niǎo)身后拖著一條殘影。現(xiàn)象是啟動(dòng)瞬間鳥(niǎo)的位置是一塊黑色矩形或者飛行時(shí)背后留下一串半透明殘像。原因有兩個(gè)一是loadImage()寫(xiě)在draw()里第一幀圖片還沒(méi)解碼完就畫(huà)了二是draw()開(kāi)頭漏了background()上一幀沒(méi)被覆蓋。解決是把所有l(wèi)oadImage()挪進(jìn)setup()并檢查返回值是否為 null同時(shí)在draw()第一行無(wú)條件調(diào)用background()。如果確實(shí)需要拖影效果用半透明矩形疊一層別指望不清屏。第三條判定框和看到的鳥(niǎo)對(duì)不上明明擦過(guò)去了卻說(shuō)撞上?，F(xiàn)象是視覺(jué)上鳥(niǎo)和管道還有一兩個(gè)像素的間隙游戲卻判定死亡或者反過(guò)來(lái)。原因通常是渲染用了P2D或做了scale()縮放而碰撞判定還在原始坐標(biāo)系里算。解決是把碰撞計(jì)算統(tǒng)一放在世界坐標(biāo)里做需要縮放或旋轉(zhuǎn)時(shí)用pushMatrix()/popMatrix()把變換包起來(lái)畫(huà)完就彈棧絕不讓變換泄漏到判定邏輯里。5.2 邏輯與輸入類第四條鳥(niǎo)從管道中間穿過(guò)去沒(méi)觸發(fā)死亡。現(xiàn)象是偶爾一次下落特別快鳥(niǎo)直接出現(xiàn)在管道另一側(cè)判定完全沒(méi)反應(yīng)。原因是掉幀導(dǎo)致單幀位移超過(guò)了判定框高度——vel.y達(dá)到 20 以上時(shí)一幀就能移動(dòng) 20 像素而鳥(niǎo)的判定框高度只有 18 像素中間那一小段被整幀跳過(guò)了。解決分兩層先把MAX_FALL_SPEED壓到 11 以內(nèi)保證單幀位移小于判定框高度再在stepPhysics里做子步進(jìn)位移大于半高就拆成多次小步每步都判一次碰撞。第五條一次過(guò)管加了兩分或者重開(kāi)一局分?jǐn)?shù)接著上一局算?，F(xiàn)象有兩種但根子是同一個(gè)。前者是計(jì)分條件寫(xiě)成了“鳥(niǎo)在管道范圍內(nèi)”這個(gè)條件連續(xù)多幀為真每幀都加一次分后者是score沒(méi)進(jìn)resetAll()。解決是把計(jì)分改成 4.2 的標(biāo)志位寫(xiě)法條件收緊到“越過(guò)右邊緣”并把score 0明確寫(xiě)進(jìn)重置清單。順手把scored也一起重置否則復(fù)用的管道會(huì)帶著上一局的計(jì)分狀態(tài)。還有一個(gè)容易被忽略的輸入問(wèn)題想實(shí)現(xiàn)“按住鼠標(biāo)連跳”的人會(huì)發(fā)現(xiàn)按住不動(dòng)鳥(niǎo)不飛。mousePressed()函數(shù)是按下瞬間觸發(fā)一次按住不會(huì)重復(fù)調(diào)用這是符合預(yù)期的要連跳得自己判斷mousePressed這個(gè)布爾變量并在draw()里按冷卻節(jié)奏觸發(fā)doJump()。這個(gè)坑跟判定無(wú)關(guān)但很多人第一次做都會(huì)卡在這兒。6. 把參數(shù)擰成一張表調(diào)手感、驗(yàn)證與一份可復(fù)現(xiàn)的自檢流程前面所有常量都是“我覺(jué)得合適”的值真正交付前必須按目標(biāo)設(shè)備調(diào)一輪。我的習(xí)慣是把可調(diào)參數(shù)從final常量挪到普通成員變量用一個(gè)調(diào)試面板實(shí)時(shí)改邊玩邊調(diào)比改一次重跑一次快十倍。參數(shù)起始值調(diào)整步長(zhǎng)觀察什么gravity0.42±0.03松手后下墜的“沉”度太快會(huì)來(lái)不及點(diǎn)JUMP_IMPULSE-7.6±0.3一次點(diǎn)擊抬升的高度太小會(huì)被管道憋死MAX_FALL_SPEED11±1掉幀時(shí)會(huì)不會(huì)穿管超過(guò)判定框半高就危險(xiǎn)gapH190→140±10新手第一次能不能過(guò)140 是硬下限spacing250→210±10兩根管之間的喘息時(shí)間scrollSpeed2.2→3.4±0.1整體節(jié)奏3.4 時(shí)反應(yīng)窗口約 1.8 秒// 調(diào)試期用方向鍵實(shí)時(shí)改參數(shù)改完按 r 重開(kāi)驗(yàn)證 void keyPressed() { if (key CODED keyCode UP) gravity 0.03; if (key CODED keyCode DOWN) gravity - 0.03; if (key CODED keyCode LEFT) JUMP_IMPULSE 0.3; // 注意負(fù)值加是變?nèi)?if (key CODED keyCode RIGHT) JUMP_IMPULSE - 0.3; if (key r) resetAll(); if (key p) saveFrame(frames/frame-####.png); // 逐幀存圖做軌跡比對(duì) doJump(); // 空格也走跳躍 }這段代碼里JUMP_IMPULSE的方向最容易搞混它是負(fù)值0.3實(shí)際是讓跳躍變?nèi)?。調(diào)試面板一定要在屏幕上把當(dāng)前數(shù)值打印出來(lái)text畫(huà)在左上角否則調(diào)著調(diào)著就不知道自己在哪個(gè)值上了。調(diào)完之后要驗(yàn)證不能靠“我感覺(jué)變難了”。我用的辦法是固定隨機(jī)種子加腳本化點(diǎn)擊randomSeed(42)保證每局管道布局一致然后用一個(gè)計(jì)數(shù)器每隔固定幀數(shù)調(diào)一次doJump()看能不能穩(wěn)定通過(guò)前 10 根管道。調(diào)參前后各跑一遍通過(guò)根數(shù)的變化就是可比的基線。這套流程不玄學(xué)比反復(fù)手動(dòng)試玩靠譜得多也方便把“這一版手感更好”這種主觀判斷變成“同樣的自動(dòng)操作多過(guò)了三根管”的客觀記錄。從那以后我每次交這類小游戲之前都會(huì)先固定隨機(jī)種子跑一遍 30 根管道的自動(dòng)點(diǎn)擊回放再手動(dòng)玩三局兩邊的結(jié)論要是對(duì)不上八成就是判定框和繪制不同源去查gapY有沒(méi)有被別的地方改過(guò)基本一查一個(gè)準(zhǔn)。希望幫到你。本文還有配套的精品資源點(diǎn)擊獲取