合成大西瓜（西瓜雨版）及改版思路（保姆式教程）
最近一款名為”合成大西瓜“的小游戲突然火了，上了幾次微博熱搜，身邊有些人還在感慨：瓜都吃不完了，還叫我合成瓜～
自己玩了也覺得很有意思，水果掉落，啪嗒一聲，兩個變一個，輕松上手又解壓，玩法簡單，通過移動大小不一的球，使其下落與大小統一的球發生碰撞合成更大的球，這個游戲打開也沒有廣告（好評），
但是，無論怎么玩，分數都在3位數4位數徘徊，而且要合成大西瓜又不是特別簡單，覺得不能滿足于此，作為一名程式員，總是想著透過表面看原始碼，于是去網上搜集資料，魔改一番，于是有了這個改版的游戲“合成大西瓜（西瓜雨版）”，給自己來場西瓜盛宴！（?乛v乛?嘿嘿），
改版后在線玩鏈接：http://dxgcd8b107-6gdxik88d74dfc78-1304937467.tcloudbaseapp.com/
改版后效果圖：
改版的步驟：
- 下載源代碼
- 開發
- 部署上線
（1）下載原始碼后在本地環境先嘗試運行，看開發環境有沒有問題
1）需要先安裝 Node 和 npm：
可以通過 “http://nodejs.cn/download/” 官網安裝 Node.js，會自動安裝 npm，安裝后用命令列輸入 npm -v，如果有版本號出現，就說明安裝成功（舒服～）
C:\Users\w1396>npm -v
6.14.8
2）安裝 serve 服務：
在命令列輸入npm i -g serve 安裝（ -g 代表 global ，全域安裝 ）
C:\Users\w1396>npm i -g serve
（如果用 npm 命令下載很慢的話，可以修改成淘寶的鏡像，用 cnpm 命令安裝）
安裝后通過命令 serve -v 查看安裝是否成功：
C:\Users\w1396>serve -v
11.3.2
3）進入原始碼目錄（有 index.html的目錄），進入命令列模式，執行 serve命令運行專案
根據命令列視窗提示，在瀏覽器輸入localhost:5000 即可訪問，
（2）開發（魔改）
這個小游戲是基于cocos2d 游戲引擎開發的，在改版時，主要關注這幾個檔案：
-
index.html：整個專案的主頁面
-
project.js：專案核心代碼，游戲邏輯都在這里
-
settings.js：專案組態檔
-
res 目錄：存放圖片和音頻等資源
注：
如果只是修改圖片，直接將自己的圖片改成和原始碼的資源檔案（目錄：
/res/raw-assets/）的圖片相同尺寸、相同名稱、相同后綴即可，各種水果對應的目錄如下：
- 葡萄：ad
- 櫻桃：0c
- 橘子：d0
- 檸檬：74
- 獼猴桃：13
- 西紅柿：03
- 桃：66
- 菠蘿：84
- 椰子：5f
- 西瓜：56
- 大西瓜：50
- 右上角廣告圖：8c、47
音頻檔案目錄：
- 勝利音頻檔案：a7
（3）部署
有多種方式，最簡單的我覺得是用“騰訊云靜態網站托管”，因為服務器在國內，所以訪問的速度比較快，而且頁面操作都是中文，對開發者也比較友好，
訪問以下鏈接進入 騰訊云靜態網站托管平臺：https://cloud.tencent.com/product/wh
只要新建一個云開發環境，然后安裝cloudbase命令列工具，使用命令：
npm install -g @cloudbase/cli
然后執行登錄命令：
cloudbase login
彈出頁面點擊授權，既可完成，
完成后可以看到自己的云環境id，復制它，待會需要用到，
用同樣的方式進入到原始碼目錄的命令列視窗：
執行以下命令將專案發布上線：
cloudbase hosting:deploy . -e <你的云環境id>
檔案上傳成功后會得到一個訪問鏈接，訪問即可開玩！！！
（4）文末彩蛋
”不會吧不會吧，
不會還有人沒合成出西瓜出來吧？“
如果這篇文章有幫到你，請 點個贊、點個關注 鼓勵支持一下，互相交流學習，一起進步，感謝您的閱讀～
注：
本次修改創意及原始碼來源為 “ 公眾號：’程式員魚皮‘ ”
感謝提供這么好的創意思路，附上他的原始碼地址：https://github.com/liyupi/daxigua
感謝分享！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/256810.html
標籤：其他
上一篇：Web學"前"班~
下一篇：CSS3只讓背景圖片旋轉180度