魔改和上線你的合成大西瓜，最全教程！

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

PS. 最新上線了 大西瓜改圖工具，效率提高十倍！

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

固然，遊戲自己很是有趣，玩法簡單，就是俄羅斯方塊、204八、水果忍者的結合，控制水果的下落，相同的兩個水果會合成更大的水果，而後消除，併發出濺射效果。

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

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

那就開工吧！

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

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

這是我魔改的自定義加分版，輕輕鬆鬆千萬分！可在線玩：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 中文網 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);
}
複製代碼

效果以下：

固然，這種方式玩遊戲更多地是曬個圈，但願別影響你們的樂趣~

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

2. 改圖片

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

但其實，改圖片的原理很是簡單！

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

我幫你們整理了圖片替換表哦，幫助提高替換效率，地址以下：

魔改大西瓜可替換的素材：docs.qq.com/sheet/DS0d2…

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 文檔中，該物理引擎有哪些參數，很快就找到了彈性係數：

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

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

記得打開無敵模式，不然一下就 GameOver 了！

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

發佈上線

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

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

並且本身娛樂、用戶量不大的話，免費空間徹底夠用！

1. 騰訊雲靜態網站託管

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

使用步驟也很簡單。

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

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

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

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

如今咱們就可使用雲開發提供的靜態網站服務了，能夠經過界面上傳，也可使用 cloudbase 命令行上傳。推薦後者，效率更高！

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

npm install -g @cloudbase/cli
複製代碼

執行登陸命令：

cloudbase login
複製代碼

在彈出的頁面確認受權：

進入到已開通的雲環境查看頁面，複製剛剛建立的雲環境 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
複製代碼

而後會讓你輸入一些選項，好比項目名稱、是否修改配置等，一路回車就能夠了~

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

最後

經過這個小遊戲，咱們可以看到你們各類奇思妙想的創意，在樂趣以外，還能學習一些編程小知識，何樂而不爲呢？

惋惜因爲工做，我沒有時間去完成本身的其餘創意啦，好比水果爆炸、水果圍城、反重力 😢

你們還有什麼好的創意歡迎在評論區告訴我吧！

以上全部代碼和文檔都發布到了個人 GitHub 中

github.com/liyupi/daxi…