魔改和上線你的合成大西瓜，超詳細圖文教程！源碼分析！

本文是從 0 到 1 的教程，讓小白也能夠魔改和上線發佈屬於你的合成大西瓜！

最近，一款名爲『 合成大西瓜 』的遊戲突然火了！看來真的是大家喫瓜喫太多了，這個小遊戲深抓人心！

當然，遊戲本身非常有趣，玩法簡單，就是俄羅斯方塊、2048、水果忍者的結合。控制水果的下落，相同的兩個水果會合成更大的水果，然後消除，併發出濺射效果。

玩了一會後，看到朋友圈的曬圖，我也安耐不住了，開始思考怎麼拿高分。對於程序員來說，最簡單的方式就是直接改造程序。

正好在知乎上偶然刷到了一個相關問題，“ 小遊戲《合成大西瓜》源代碼有嗎？”

那就開工吧！

首先去 GitHub 搜索源代碼，發現源碼已經被曝光的稀巴爛了，然後就下載了一份源代碼到本地，摩拳擦掌。

瀏覽源碼後，發現只是魔改一些基礎功能的話，不要太簡單！

這是我魔改的自定義加分版，輕輕鬆鬆千萬分！可在線玩：https://dadaxigua.liyupi.com

大西瓜魔改版

下面一起來打造自己的魔改合成大西瓜吧！

---

主要分爲如下幾個步驟：

1. 下載源代碼及本地運行
2. 動手魔改及原理分析
3. 發佈上線

1. 下載源碼，本地運行

下載源碼

首先從 GitHub 上下載源代碼（地址在文末）：

下載源代碼

下載代碼後，我們得到這樣的目錄結構：

目錄結構

可以看到整個代碼目錄並不複雜，是基於 cocos2d 遊戲引擎開發，我們只需要瞭解幾個重要文件：

1. index.html，整個項目的主頁面
2. project.js，項目核心代碼，遊戲邏輯都在這裏
3. settings.js，項目配置文件
4. res 目錄，存放圖片和音頻等資源

下面我們先試着在本地運行小遊戲。

本地運行

如果直接雙擊 index.html，是無法運行遊戲的，也就是很多同學遇到的 “卡在 99%” 問題。因爲直接雙擊網頁文件，訪問協議是 file，而不是 http，會導致一些資源無法請求，缺失文件。

因此，我們需要在本地搭建一個 web 服務器，以支持 http 協議訪問。

最簡單的方式就是使用 serve 工具。只需三步，就能使用，已完成的步驟可以直接跳過：

1. 安裝 Node 和 npm

   Node 是服務器端運行 Js 代碼的引擎；npm 則是依賴包管理工具，可以輕鬆安裝工具和代碼類庫。

   進入 Node 中文網 http://nodejs.cn/download/，下載 Node.js，會自動安裝 npm。

   安裝成功後，進入命令行 cmd，輸入命令來判斷 npm 是否安裝成功：

   npm -v
   

   輸出版本號，則安裝成功：

   安裝成功

2. 一行命令安裝 serve 工具：

   npm i -g serve
   

3. 進入源代碼目錄（我這裏是 daxigua），啓動 serve：

   serve
   

   啓動成功後，打開瀏覽器訪問 localhost:5000 即可！

   啓動成功

動手魔改及原理

在魔改前，我們要先認清遊戲過程，然後根據自己要修改的內容去找對應的文件，再做修改。

遊戲的過程是：點擊鼠標 => 水果下落 => 水果碰撞 => 計算分數 => 展示分數

下面列舉幾種簡單的魔改方式，包括改遊戲分數、替換遊戲圖片、無敵模式、控制水果生成、由大水果合成小水果、讓水果更 Q 彈等。

（部分創意源於 B 站 UP GJhuxiao，給大佬跪了！）

1. 改分數

拿到源代碼後，怎麼最快的定位要修改哪裏呢？

通過分析遊戲過程，發現改分數有兩種實現方式，在計算分數階段修改，或者直接修改最後要展示的分數。

再簡單瀏覽下項目裏的各個文件，發現 project.js 就是影響遊戲邏輯的核心文件。

那麼很簡單，直接在 project.js 中搜索代碼。分數對應的英文單詞是 “score” ，添加分數的英文單詞是 “addScore”，搜搜看能不能找到線索。

果然，很快就發現了，分數是由 default.score 變量作爲統計值的，有這麼一行代碼：

a.default.score += this.fruitNumber + 1

顯然，"+1" 是參與分數計算的，那我只要把基數 “1” 改爲自己定義的數字即可~

// extraScore 可以自己改爲任意值
a.default.score += this.fruitNumber + extraScore

當然也可以在進入遊戲前讓用戶自己輸入！我在 project.js 開頭加入了這樣一段代碼：

// 讓用戶輸入分數加成
let extraScore;
let extraScoreStr = '';

// 輸入有效數字才進入遊戲
while (isNaN(extraScore)) {
  extraScoreStr = prompt('請輸入分數加成數字', '1').trim();
  extraScore = parseInt(extraScoreStr);
}

效果如下：

自行輸入加分

當然，這種方式玩遊戲更多地是曬個圈，希望別影響大家的樂趣~

通過這種方式，代碼中的所有變量和配置，理論上都可以支持讓用戶來輸入。可以通過新增一個菜單頁面來實現，有大佬已經做出來了，效果很好，瑞思拜！

GitHub xiaopengand 哥製作

2. 改圖片

改圖片應該是目前樂趣最大的魔改了吧！我看到了很多有趣的創意，合成 B 站硬幣、合成大胸、合成 xx 等等。

但其實，改圖片的原理非常簡單！

直接在 res 資源目錄下，找到原有的圖片，然後用相同名稱、相同格式、相同尺寸的圖片進行替換即可！

我幫大家整理了圖片替換表哦，幫助提升替換效率，地址如下：

魔改大西瓜可替換的素材：https://docs.qq.com/sheet/DS0d2VVVJYmpvZ0pZ

替換素材表

3. 無敵模式

無敵模式是指水果堆積到頂部、超出線條，遊戲依然不會結束。

既然遊戲會結束，那麼必定有一個判斷遊戲結束的邏輯，也就是條件表達式。

那就在代碼中搜索 “end”（結束），果然找到了下面這串判斷邏輯，運算結果爲 true 則遊戲結束，爲 false 則繼續。

這裏 B 站 UP GJhuxiao 哥提供了非常好的思路，增加一個條件判斷，而不是修改原有判斷邏輯，極大地方便大家修改！

4. 控制水果生成

能不能控制下一個水果是什麼呢？比如每次都出現大西瓜。

當然，同樣的思路，先找到水果生成的邏輯在代碼的哪個位置。通過搜索 “fruit”、“create” 等關鍵字，定位到了這段代碼：

生成指定水果

這段代碼的功能是，根據當前的水果決定下一個水果。

邏輯看起來很複雜，但其實就是，前 5 個水果的生成是固定的，類似新手教程，總不能剛開始就給大水果吧！

當生成第幾個水果（用 createFruitCount 統計）之後，開始隨機生成水果。

每一個水果都對應一個數字序號（下標），由小到大依次是 0-9，葡萄到西瓜。因此剛開始是兩次 createOneFruit(0)，即生成兩次葡萄，後面就是隨機生成葡萄（0）到西紅柿（5）。

那如果想要生成第一個水果，怎麼辦？

第一個水果是葡萄，對應序號 0，那直接搜索 createOneFruit(0) 不就成了！

直接找到對應代碼，可以把 0 修改成其他數字~

修改第一個水果

5. 大水果合成小水果

大水果合成小水果聽起來很有趣，即可以把遊戲 “倒着玩”，兩個西瓜合成椰子，最終合成葡萄即勝利！✌️

如果把水果膨脹理解爲 “升級”，那說白了，就是反轉下水果的升級順序。這裏的代碼不是很好定位，主要是先找到水果的合成邏輯，可以通過搜索邊界值（比如 < 9）、或者關鍵詞 LevelUp 的方式找到下面代碼，將 “+1” 變爲 “-1” 即可！

每次合併水果，升級改爲降級。

修改合成水果邏輯

當然，只改這裏肯定是有問題的，B 站的 UP GJhuxiao 也犯了一個小小小小的錯誤，就是沒有處理邊界值。

原本當合成大西瓜後，會有特殊邏輯，比如閃光特效。在順序反轉後，我們要把邊界值由 9 改爲 0。同時記得修改一下初始生成的水果，應該是大西瓜而不是小葡萄啦！

6. 讓水果更 Q 彈

現在的水果好像沒什麼彈性，怎麼讓它們像果味香濃、Q 彈多汁的旺仔 QQ 糖一樣彈性十足呢？

這就涉及到物理引擎層面的修改，由於我本人對 cocos2d 不熟悉，以下依然是 B 站的 UP GJhuxiao 的實現方式。

在生成水果的函數中，可以看到 cc.PhysicsCircleCollider，就是控制水果下落行爲的物理引擎。

由於整個遊戲是基於 cocos2d 開發，我們可以看看官方 API 文檔中，該物理引擎有哪些參數，很快就找到了彈性係數：

cocos2d API 文檔

然後去修改物理引擎的參數即可，此處設置爲 0.9。

修改物理引擎參數

別看數值改動不大，設置 0.9 後，水果就已經能飛起來了。如果你樂意，想要讓它一飛沖天也是可以的！

飛了起來

記得打開無敵模式，否則一下就 GameOver 了！

還可以看看 cocos2d 有什麼其他的參數，試着修改一下，也許會發現新的創意和驚喜哦~

發佈上線

最多同學關心的問題，在本地修改好代碼後，怎麼發佈到網上供其他人訪問呢？

這裏提供最簡單的兩種方法，使用『 騰訊雲靜態網站託管 』或『 Vercel 』，不需要購買域名、也不需要買服務器！

而且自己娛樂、用戶量不大的話，免費空間完全夠用！

1. 騰訊雲靜態網站託管

使用騰訊雲靜態網站託管，服務器完全在國內，還有 CDN（靜態內容分發）加速，讓你的網站飛起來~

使用步驟也很簡單。

首先進入騰訊雲的雲開發 (cloudbase) 控制檯，地址：https://cloud.tencent.com/product/wh：

進入控制檯

點擊立即創建，開通一個雲環境：

一定要開啓免費資源

點擊立即開通，喝杯 ☕️，稍等片刻即可創建完成。

創建完成後，進入到提示頁，點擊開始使用，初始化靜態網站服務。

初始化靜態服務

現在我們就可以使用雲開發提供的靜態網站服務了，可以通過界面上傳，也可以使用 cloudbase 命令行上傳。推薦後者，效率更高！

首先，安裝 cloudbase 命令行工具：

npm install -g @cloudbase/cli

執行登錄命令：

cloudbase login

登錄

在彈出的頁面確認授權：

授權

進入到已開通的雲環境查看頁面，複製剛剛創建的雲環境 id：

複製雲環境 id

接着，在 index.html 所在目錄中（我的是 daxigua），執行 cloudbase 的 deploy 命令將目錄中的網站文件全部發布：

cd daxigua
cloudbase hosting:deploy . -e <EnvID>

這裏的 <EnvID> 要替換爲剛剛複製的雲環境 id！

看到如下結果，就算成功啦，點擊鏈接即可訪問和分享！

發佈網頁文件

2. Vercel

Vercel 是免費網站託管平臺，可以幫我們部署網站，並生成可訪問的簡短網址，還能夠和自己購買的域名進行綁定。

先在命令行通過 npm 命令安裝 Vercel：

npm install -g vercel

安裝完成後，進入 index.html 所在目錄（我的是 daxigua），使用 vercel 命令發佈網站：

cd daxigua
vercel --prod

然後會讓你輸入一些選項，比如項目名稱、是否修改配置等，一路回車就可以了~

發佈成功，會得到一個網址，打開就可以看到遊戲啦，還可以把網址分享給別人！

發佈成功

項目地址

https://github.com/liyupi/daxigua