魔改一波合成大西瓜！代碼已開源~
本文是從 0 到 1 的教程，讓小白也能夠魔改和上線發(fā)布屬于你的合成大西瓜！
最近，一款名為『 合成大西瓜 』的游戲突然火了！看來真的是大家吃瓜吃太多了，這個(gè)小游戲深抓人心！
當(dāng)然，游戲本身非常有趣，玩法簡單，就是俄羅斯方塊、2048、水果忍者的結(jié)合?？刂扑南侣?，相同的兩個(gè)水果會(huì)合成更大的水果，然后消除，并發(fā)出濺射效果。
玩了一會(huì)后，看到朋友圈的曬圖，我也安耐不住了，開始思考怎么拿高分。對于程序員來說，最簡單的方式就是直接改造程序。
正好在知乎上偶然刷到了一個(gè)相關(guān)問題，“ 小游戲《合成大西瓜》源代碼有嗎？”
那就開工吧！
首先去 GitHub 搜索源代碼，發(fā)現(xiàn)源碼已經(jīng)被曝光的稀巴爛了，然后就下載了一份源代碼到本地，摩拳擦掌。
瀏覽源碼后，發(fā)現(xiàn)只是魔改一些基礎(chǔ)功能的話，不要太簡單！
這是我魔改的自定義加分版，輕輕松松千萬分！可在線玩：https://dadaxigua.liyupi.com
下面一起來打造自己的魔改合成大西瓜吧！
主要分為如下幾個(gè)步驟：
下載源代碼及本地運(yùn)行 動(dòng)手魔改及原理分析 發(fā)布上線
1. 下載源碼，本地運(yùn)行
下載源碼
首先從 GitHub 上下載源代碼（地址在文末）：
下載代碼后，我們得到這樣的目錄結(jié)構(gòu)：
可以看到整個(gè)代碼目錄并不復(fù)雜，是基于 cocos2d 游戲引擎開發(fā)，我們只需要了解幾個(gè)重要文件：
index.html，整個(gè)項(xiàng)目的主頁面 project.js，項(xiàng)目核心代碼，游戲邏輯都在這里 settings.js，項(xiàng)目配置文件 res 目錄，存放圖片和音頻等資源
下面我們先試著在本地運(yùn)行小游戲。
本地運(yùn)行
如果直接雙擊 index.html，是無法運(yùn)行游戲的，也就是很多同學(xué)遇到的 “卡在 99%” 問題。因?yàn)橹苯与p擊網(wǎng)頁文件，訪問協(xié)議是 file，而不是 http，會(huì)導(dǎo)致一些資源無法請求，缺失文件。
因此，我們需要在本地搭建一個(gè) web 服務(wù)器，以支持 http 協(xié)議訪問。
最簡單的方式就是使用 serve 工具。只需三步，就能使用，已完成的步驟可以直接跳過：
安裝 Node 和 npm
Node 是服務(wù)器端運(yùn)行 Js 代碼的引擎；npm 則是依賴包管理工具，可以輕松安裝工具和代碼類庫。
進(jìn)入 Node 中文網(wǎng) http://nodejs.cn/download/，下載 Node.js，會(huì)自動(dòng)安裝 npm。
安裝成功后，進(jìn)入命令行 cmd，輸入命令來判斷 npm 是否安裝成功：
npm?-v輸出版本號(hào)，則安裝成功：
安裝成功 一行命令安裝 serve 工具：
npm?i -g?serve進(jìn)入源代碼目錄（我這里是
daxigua），啟動(dòng) serve：serve啟動(dòng)成功后，打開瀏覽器訪問
localhost:5000即可！
啟動(dòng)成功
動(dòng)手魔改及原理
在魔改前，我們要先認(rèn)清游戲過程，然后根據(jù)自己要修改的內(nèi)容去找對應(yīng)的文件，再做修改。
游戲的過程是：點(diǎn)擊鼠標(biāo) => 水果下落 => 水果碰撞 => 計(jì)算分?jǐn)?shù) => 展示分?jǐn)?shù)
下面列舉幾種簡單的魔改方式，包括改游戲分?jǐn)?shù)、替換游戲圖片、無敵模式、控制水果生成、由大水果合成小水果、讓水果更 Q 彈等。
（部分創(chuàng)意源于 B 站 UP GJhuxiao，給大佬跪了?。?/strong>
1. 改分?jǐn)?shù)
拿到源代碼后，怎么最快的定位要修改哪里呢？
通過分析游戲過程，發(fā)現(xiàn)改分?jǐn)?shù)有兩種實(shí)現(xiàn)方式，在計(jì)算分?jǐn)?shù)階段修改，或者直接修改最后要展示的分?jǐn)?shù)。
再簡單瀏覽下項(xiàng)目里的各個(gè)文件，發(fā)現(xiàn) project.js 就是影響游戲邏輯的核心文件。
那么很簡單，直接在 project.js 中搜索代碼。分?jǐn)?shù)對應(yīng)的英文單詞是 "score" ，添加分?jǐn)?shù)的英文單詞是 "addScore"，搜搜看能不能找到線索。
果然，很快就發(fā)現(xiàn)了，分?jǐn)?shù)是由 default.score 變量作為統(tǒng)計(jì)值的，有這么一行代碼：
a.default.score?+=?this.fruitNumber?+?1
顯然，"+1" 是參與分?jǐn)?shù)計(jì)算的，那我只要把基數(shù) "1" 改為自己定義的數(shù)字即可~
//?extraScore?可以自己改為任意值
a.default.score?+=?this.fruitNumber?+?extraScore
當(dāng)然也可以在進(jìn)入游戲前讓用戶自己輸入！我在 project.js 開頭加入了這樣一段代碼：
//?讓用戶輸入分?jǐn)?shù)加成
let?extraScore;
let?extraScoreStr?=?'';
//?輸入有效數(shù)字才進(jìn)入游戲
while?(isNaN(extraScore))?{
??extraScoreStr?=?prompt('請輸入分?jǐn)?shù)加成數(shù)字',?'1').trim();
??extraScore?=?parseInt(extraScoreStr);
}
效果如下：
當(dāng)然，這種方式玩游戲更多地是曬個(gè)圈，希望別影響大家的樂趣~
通過這種方式，代碼中的所有變量和配置，理論上都可以支持讓用戶來輸入?？梢酝ㄟ^新增一個(gè)菜單頁面來實(shí)現(xiàn)，有大佬已經(jīng)做出來了，效果很好，瑞思拜！
2. 改圖片
改圖片應(yīng)該是目前樂趣最大的魔改了吧！我看到了很多有趣的創(chuàng)意，合成 B 站硬幣、合成大胸、合成 xx 等等。
但其實(shí)，改圖片的原理非常簡單！
直接在 res 資源目錄下，找到原有的圖片，然后用相同名稱、相同格式、相同尺寸的圖片進(jìn)行替換即可！
我?guī)痛蠹艺砹藞D片替換表哦，幫助提升替換效率，地址如下：
魔改大西瓜可替換的素材：https://docs.qq.com/sheet/DS0d2VVVJYmpvZ0pZ
3. 無敵模式
無敵模式是指水果堆積到頂部、超出線條，游戲依然不會(huì)結(jié)束。
既然游戲會(huì)結(jié)束，那么必定有一個(gè)判斷游戲結(jié)束的邏輯，也就是條件表達(dá)式。
那就在代碼中搜索 "end"（結(jié)束），果然找到了下面這串判斷邏輯，運(yùn)算結(jié)果為 true 則游戲結(jié)束，為 false 則繼續(xù)。
這里 B 站 UP GJhuxiao 哥提供了非常好的思路，增加一個(gè)條件判斷，而不是修改原有判斷邏輯，極大地方便大家修改！
4. 控制水果生成
能不能控制下一個(gè)水果是什么呢？比如每次都出現(xiàn)大西瓜。
當(dāng)然，同樣的思路，先找到水果生成的邏輯在代碼的哪個(gè)位置。通過搜索 "fruit"、"create" 等關(guān)鍵字，定位到了這段代碼：
這段代碼的功能是，根據(jù)當(dāng)前的水果決定下一個(gè)水果。
邏輯看起來很復(fù)雜，但其實(shí)就是，前 5 個(gè)水果的生成是固定的，類似新手教程，總不能剛開始就給大水果吧！
當(dāng)生成第幾個(gè)水果（用 createFruitCount 統(tǒng)計(jì)）之后，開始隨機(jī)生成水果。
每一個(gè)水果都對應(yīng)一個(gè)數(shù)字序號(hào)（下標(biāo)），由小到大依次是 0-9，葡萄到西瓜。因此剛開始是兩次 createOneFruit(0)，即生成兩次葡萄，后面就是隨機(jī)生成葡萄（0）到西紅柿（5）。
那如果想要生成第一個(gè)水果，怎么辦？
第一個(gè)水果是葡萄，對應(yīng)序號(hào) 0，那直接搜索 createOneFruit(0) 不就成了！
直接找到對應(yīng)代碼，可以把 0 修改成其他數(shù)字~
5. 大水果合成小水果
大水果合成小水果聽起來很有趣，即可以把游戲 “倒著玩”，兩個(gè)西瓜合成椰子，最終合成葡萄即勝利！??
如果把水果膨脹理解為 “升級”，那說白了，就是反轉(zhuǎn)下水果的升級順序。這里的代碼不是很好定位，主要是先找到水果的合成邏輯，可以通過搜索邊界值（比如 < 9）、或者關(guān)鍵詞 LevelUp 的方式找到下面代碼，將 "+1" 變?yōu)?"-1" 即可！
每次合并水果，升級改為降級。
當(dāng)然，只改這里肯定是有問題的，B 站的 UP GJhuxiao 也犯了一個(gè)小小小小的錯(cuò)誤，就是沒有處理邊界值。
原本當(dāng)合成大西瓜后，會(huì)有特殊邏輯，比如閃光特效。在順序反轉(zhuǎn)后，我們要把邊界值由 9 改為 0。同時(shí)記得修改一下初始生成的水果，應(yīng)該是大西瓜而不是小葡萄啦！
6. 讓水果更 Q 彈
現(xiàn)在的水果好像沒什么彈性，怎么讓它們像果味香濃、Q 彈多汁的旺仔 QQ 糖一樣彈性十足呢？
這就涉及到物理引擎層面的修改，由于我本人對 cocos2d 不熟悉，以下依然是 B 站的 UP GJhuxiao 的實(shí)現(xiàn)方式。
在生成水果的函數(shù)中，可以看到 ?cc.PhysicsCircleCollider，就是控制水果下落行為的物理引擎。
由于整個(gè)游戲是基于 cocos2d 開發(fā)，我們可以看看官方 API 文檔中，該物理引擎有哪些參數(shù)，很快就找到了彈性系數(shù)：
然后去修改物理引擎的參數(shù)即可，此處設(shè)置為 0.9。
別看數(shù)值改動(dòng)不大，設(shè)置 0.9 后，水果就已經(jīng)能飛起來了。如果你樂意，想要讓它一飛沖天也是可以的！
記得打開無敵模式，否則一下就 GameOver 了！
還可以看看 cocos2d 有什么其他的參數(shù)，試著修改一下，也許會(huì)發(fā)現(xiàn)新的創(chuàng)意和驚喜哦~
發(fā)布上線
最多同學(xué)關(guān)心的問題，在本地修改好代碼后，怎么發(fā)布到網(wǎng)上供其他人訪問呢？
這里提供最簡單的兩種方法，使用『 騰訊云靜態(tài)網(wǎng)站托管 』或『 Vercel 』，不需要購買域名、也不需要買服務(wù)器！
而且自己娛樂、用戶量不大的話，免費(fèi)空間完全夠用！
1. 騰訊云靜態(tài)網(wǎng)站托管
使用騰訊云靜態(tài)網(wǎng)站托管，服務(wù)器完全在國內(nèi)，還有 CDN（靜態(tài)內(nèi)容分發(fā)）加速，讓你的網(wǎng)站飛起來~
使用步驟也很簡單。
首先進(jìn)入騰訊云的云開發(fā) (cloudbase) 控制臺(tái)，地址：https://cloud.tencent.com/product/wh：
點(diǎn)擊立即創(chuàng)建，開通一個(gè)云環(huán)境：
點(diǎn)擊立即開通，喝杯 ??，稍等片刻即可創(chuàng)建完成。
創(chuàng)建完成后，進(jìn)入到提示頁，點(diǎn)擊開始使用，初始化靜態(tài)網(wǎng)站服務(wù)。
現(xiàn)在我們就可以使用云開發(fā)提供的靜態(tài)網(wǎng)站服務(wù)了，可以通過界面上傳，也可以使用 cloudbase 命令行上傳。推薦后者，效率更高！
首先，安裝 cloudbase 命令行工具：
npm?install?-g?@cloudbase/cli
執(zhí)行登錄命令：
cloudbase?login
在彈出的頁面確認(rèn)授權(quán)：
進(jìn)入到已開通的云環(huán)境查看頁面，復(fù)制剛剛創(chuàng)建的云環(huán)境 id：
接著，在 index.html 所在目錄中（我的是 daxigua），執(zhí)行 cloudbase 的 deploy 命令將目錄中的網(wǎng)站文件全部發(fā)布：
cd?daxigua
cloudbase?hosting:deploy?.?-e?
這里的
看到如下結(jié)果，就算成功啦，點(diǎn)擊鏈接即可訪問和分享！
2. Vercel
Vercel 是免費(fèi)網(wǎng)站托管平臺(tái)，可以幫我們部署網(wǎng)站，并生成可訪問的簡短網(wǎng)址，還能夠和自己購買的域名進(jìn)行綁定。
先在命令行通過 npm 命令安裝 Vercel：
npm?install?-g?vercel
安裝完成后，進(jìn)入 index.html 所在目錄（我的是 daxigua），使用 vercel 命令發(fā)布網(wǎng)站：
cd?daxigua
vercel?--prod
然后會(huì)讓你輸入一些選項(xiàng)，比如項(xiàng)目名稱、是否修改配置等，一路回車就可以了~
發(fā)布成功，會(huì)得到一個(gè)網(wǎng)址，打開就可以看到游戲啦，還可以把網(wǎng)址分享給別人！
最后
通過這個(gè)小游戲，我們能夠看到大家各種奇思妙想的創(chuàng)意，在樂趣之外，還能學(xué)習(xí)一些編程小知識(shí)，何樂而不為呢？
可惜由于工作，我沒有時(shí)間去完成自己的其他創(chuàng)意啦，比如水果爆炸、水果圍城、反重力 ??
需要上面所有代碼和文檔，可以關(guān)注下面公眾號(hào)，回復(fù)關(guān)鍵詞【魔改】