本文是從 0 到 1 的教程，讓小白也能夠魔改和上線發布屬於你的合成大西瓜！
最近，一款名為『 合成大西瓜 』的遊戲突然火了！看來真的是大家吃瓜吃太多了，這個小遊戲深抓人心！
當然，遊戲本身非常有趣，玩法簡單，就是俄羅斯方塊、2048、水果忍者的結合。控制水果的下落，相同的兩個水果會合成更大的水果，然後消除，並發出濺射效果。
玩了一會後，看到朋友圈的曬圖，我也安耐不住了，開始思考怎麼拿高分。對於程式設計師來說，最簡單的方式就是直接改造程序。
正好在知乎上偶然刷到了一個相關問題，「 小遊戲《合成大西瓜》原始碼有嗎？」
那就開工吧！
首先去 GitHub 搜索原始碼，發現源碼已經被曝光的稀巴爛了，然後就下載了一份原始碼到本地，摩拳擦掌。
瀏覽源碼後，發現只是魔改一些基礎功能的話，不要太簡單！
這是我魔改的自定義加分版，輕輕鬆鬆千萬分！可在線玩：https://dadaxigua.liyupi.com
大西瓜魔改版下面一起來打造自己的魔改合成大西瓜吧！
主要分為如下幾個步驟：
1. 下載源碼，本地運行下載源碼首先從 GitHub 上下載原始碼（地址在文末）：
下載原始碼下載代碼後，我們得到這樣的目錄結構：
目錄結構可以看到整個代碼目錄並不複雜，是基於 cocos2d 遊戲引擎開發，我們只需要了解幾個重要文件：
project.js，項目核心代碼，遊戲邏輯都在這裡下面我們先試著在本地運行小遊戲。
本地運行如果直接雙擊 index.html，是無法運行遊戲的，也就是很多同學遇到的 「卡在 99%」 問題。因為直接雙擊網頁文件，訪問協議是 file，而不是 http，會導致一些資源無法請求，缺失文件。
因此，我們需要在本地搭建一個 web 伺服器，以支持 http 協議訪問。
最簡單的方式就是使用 serve 工具。只需三步，就能使用，已完成的步驟可以直接跳過：
安裝 Node 和 npm
Node 是伺服器端運行 Js 代碼的引擎；npm 則是依賴包管理工具，可以輕鬆安裝工具和代碼類庫。
進入 Node 中文網 http://nodejs.cn/download/，下載 Node.js，會自動安裝 npm。
安裝成功後，進入命令行 cmd，輸入命令來判斷 npm 是否安裝成功：
npm -v
輸出版本號，則安裝成功：
安裝成功一行命令安裝 serve 工具：
npm i -g serve
進入原始碼目錄（我這裡是 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. VercelVercel 是免費網站託管平臺，可以幫我們部署網站，並生成可訪問的簡短網址，還能夠和自己購買的域名進行綁定。
先在命令行通過 npm 命令安裝 Vercel：
npm install -g vercel安裝完成後，進入 index.html 所在目錄（我的是 daxigua），使用 vercel 命令發布網站：
cd daxigua
vercel --prod然後會讓你輸入一些選項，比如項目名稱、是否修改配置等，一路回車就可以了~
發布成功，會得到一個網址，打開就可以看到遊戲啦，還可以把網址分享給別人！
發布成功最後通過這個小遊戲，我們能夠看到大家各種奇思妙想的創意，在樂趣之外，還能學習一些編程小知識，何樂而不為呢？
可惜由於工作，我沒有時間去完成自己的其他創意啦，比如水果爆炸、水果圍城、反重力 😢
大家還有什麼好的創意歡迎在評論區告訴我吧！
以上所有代碼和文檔都發布到了我的 GitHub 中，點擊下方閱讀原文進入。