本文是從 0 到 1 的教程，讓小白也能夠魔改和上線發布屬于你的合成大西瓜！
最近，一款名為『 合成大西瓜 』的游戲突然火了！看來真的是大家吃瓜吃太多了，這個小游戲深抓人心！
當然，游戲本身非常有趣，玩法簡單，就是俄羅斯方塊、2048、水果忍者的結合，控制水果的下落，相同的兩個水果會合成更大的水果，然后消除，并發出濺射效果，
玩了一會后，看到朋友圈的曬圖，我也安耐不住了，開始思考怎么拿高分，對于程式員來說，最簡單的方式就是直接改造程式，
正好在知乎上偶然刷到了一個相關問題，“ 小游戲《合成大西瓜》源代碼有嗎？”
那就開工吧！
首先去 GitHub 搜索源代碼，發現原始碼已經被曝光的稀巴爛了，然后就下載了一份源代碼到本地，摩拳擦掌，
瀏覽原始碼后，發現只是魔改一些基礎功能的話，不要太簡單！
這是我魔改的自定義加分版，輕輕松松千萬分！可在線玩：https://dadaxigua.liyupi.com
大西瓜魔改版
下面一起來打造自己的魔改合成大西瓜吧！
主要分為如下幾個步驟：
- 下載源代碼及本地運行
- 動手魔改及原理分析
- 發布上線
1. 下載原始碼，本地運行
下載原始碼
首先從 GitHub 上下載源代碼（地址在文末）：
下載源代碼
下載代碼后，我們得到這樣的目錄結構：
目錄結構
可以看到整個代碼目錄并不復雜，是基于 cocos2d 游戲引擎開發，我們只需要了解幾個重要檔案：
- index.html，整個專案的主頁面
- project.js，專案核心代碼，游戲邏輯都在這里
- settings.js，專案組態檔
- res 目錄，存放圖片和音頻等資源
下面我們先試著在本地運行小游戲，
本地運行
如果直接雙擊 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. Vercel
Vercel 是免費網站托管平臺，可以幫我們部署網站，并生成可訪問的簡短網址，還能夠和自己購買的域名進行系結，
先在命令列通過 npm 命令安裝 Vercel：
npm install -g vercel
安裝完成后，進入 index.html 所在目錄（我的是 daxigua），使用 vercel 命令發布網站：
cd daxigua
vercel --prod
然后會讓你輸入一些選項，比如專案名稱、是否修改配置等，一路回車就可以了~
發布成功，會得到一個網址，打開就可以看到游戲啦，還可以把網址分享給別人！
發布成功
專案地址
https://github.com/liyupi/daxigua
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/255266.html
標籤：其他
上一篇：基于Mac下使用c++11