一起魔改大西瓜！

大家好，我是沉默王二。

周六了，總是忍不住想放飛下自己。于是就試玩了一會(huì)大西瓜合成的小游戲，結(jié)果愣是停不下來，有點(diǎn)上頭啊。

這小游戲很有特點(diǎn)啊，界面第一次打開的時(shí)候只有 loading，竟然沒有廣告，良心了。說白了，這款小游戲就是俄羅斯方塊、2048、水果忍者的結(jié)合體，通過控制水果的下落，兩個(gè)相同的水果碰撞到一塊的時(shí)候就會(huì)合成更大的水果，同時(shí)迸發(fā)出濺射的效果。

第一次合成大西瓜的時(shí)候界面效果簡(jiǎn)直亮瞎了我的雙眼。不過說句實(shí)在話，可能有戲還不太完善，我第一把就卡死了，可能得分太高了吧！

六天前就有朋友在安利這款小游戲，第一次看到的時(shí)候我想，這破游戲有什么好玩的，不就是合成個(gè)大西瓜嘛，對(duì)此不屑一顧。

直到昨天我看到魚皮老弟分享了一篇《魔改大西瓜》的文章，就忍不住也想自己魔改下，畢竟吃瓜群眾玩合成大西瓜，吃瓜程序員當(dāng)然要玩源碼，這才是正確的姿勢(shì)嘛。

整個(gè)代碼目錄并不復(fù)雜，是基于 cocos2d 游戲引擎開發(fā)的。

• index.html，游戲的主頁面
• project.js，核心代碼，游戲邏輯都在這里面
• settings.js，配置文件
• res 目錄，存放圖片和音頻等資源

我以為直接雙擊 index.html 就可以在本地運(yùn)行，結(jié)果卡在了 99% 的 loading 上。

原因也很簡(jiǎn)單，雙擊網(wǎng)頁文件的訪問協(xié)議是 file，而不是 HTTP，導(dǎo)致一些資源無法加載。解決方案是本地搭建一個(gè) Web 服務(wù)器，怎么搭呢？

第一步，安裝 Node.js，可以通過下面的路徑下載安裝包。

http://nodejs.cn/download/

安裝完成后通過 npm -v 查看是否安裝成功。npm 是 Node.js 的模塊管理器，功能及其強(qiáng)大。

第二步，安裝 Vue CLI，一個(gè)基于 Vue.js 進(jìn)行快速開發(fā)的完整系統(tǒng)，提供了一個(gè)運(yùn)行時(shí)依賴。文檔見一下路徑：

https://cli.vuejs.org/zh/guide/

安裝完成后通過 vue --version 查看是否安裝成功。

第三步，安裝 serve 服務(wù)，可通過 npm i serve -g 命令進(jìn)行安裝，如果 npm 安裝比較慢的話，可以通過 cnpm 來安裝。cnpm 是淘寶提供的一個(gè) npm 的鏡像，國(guó)內(nèi)訪問的速度更快。

如果出現(xiàn) Error: EACCES: permission denied 表示沒有權(quán)限，需要在命令前面加上 sudo，我在《Shell，牛逼》 這篇內(nèi)容里有解釋。

安裝完成后通過 serve -v 查看是否安裝成功。

第四步，進(jìn)入到合成大西瓜的源碼包下，執(zhí)行 serve 啟動(dòng)本地 Web 服務(wù)。

第五步，在瀏覽器地址欄鍵入本地或者網(wǎng)絡(luò)可以訪問的地址就可以啟動(dòng) Web 服務(wù)器了。趁機(jī)玩了一把，舒服了。

關(guān)于魔改的更多參數(shù)，可以參照魚皮老弟的文章：

https://juejin.cn/post/6923047027475644430

如果大家想要在線玩大西瓜和源碼的話，可以在沉默王二公眾號(hào)對(duì)話框中回復(fù)「大西瓜」獲取，見下圖。

具體步驟如下：

第一步，掃碼或者長(zhǎng)按識(shí)別下面的二維碼，關(guān)注「沉默王二」公眾號(hào)：

第二步，在公眾號(hào)后臺(tái)發(fā)送?大西瓜?獲取在線地址和源碼地址。

最后，點(diǎn)贊或者分享吧！周末愉快，玩得開心！