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