最近合成大西瓜非常火，很多程式設計愛好者將大西瓜改成了各種版本，非常魔性，哈哈。

如果你也想魔改大西瓜，或者想研究一下專案怎麼玩的，下面的教程從下載到遊戲專案部署一條龍搞定。

步驟一：下載大西瓜原始碼

貼心的我已經將各種版本的程式碼整理到百度網盤了，大家可以按需下載：

連結: https://pan.baidu.com/s/1DfRdj2s2yGW_XbQhhjSM1w

提取碼: 4t3d

步驟二：嘗試執行大西瓜遊戲專案

下載的原始碼結構如下圖

如果你雙擊開啟 index.html 檔案可能卡在98%或者99%不動：

按 F12開啟 chrome 瀏覽器的開發者除錯模式發現，有大量的報錯：

這是因為本地開啟是檔案是靜態的，是 file 協議，並不是 http。所以我們需要在本地跑一個 WEB 伺服器。

步驟三：安裝 nodejs

如果本地沒有安裝 nodejs 工具，先裝一下 nodejs，主要是要通過 npm 安裝 serve

nodejs 下載地址：http://nodejs.cn/download/

不同的系統選擇不一樣的包。

安裝完成開啟終端命令列工具，執行 npm -v 命令：

npm -v

如果返回版本號表示安裝成功。

6.14.10

步驟四：安裝 serve 工具

注意是 serve 不是 server 哦，別打錯了。

npm i -g serve --registry=https://registry.npm.taobao.org

返回版本號表示安裝成功

+ [email protected]
updated 41 packages in 3.083s

步驟五：執行本地大西瓜遊戲專案

通過終端命令列cd 進入到上面下載的遊戲原始碼中，直接執行 serve 命令就可以啟動服務了，如下圖所示：

上面圖中有兩個地址，第一個是可以在電腦瀏覽器本地訪問的，第二是可以通過手機瀏覽器遠端訪問的，你可以拿手機試試哈。

溫馨提醒：由於遊戲主要適配的手機端，如果你要通過電腦瀏覽器玩，需要切到手機螢幕模式。

開啟 chrome 瀏覽器，F12開啟控制檯，我把控制檯放右邊了，預設是在下邊。

步驟六：部署大西瓜遊戲專案到遠端伺服器

在本地執行會有一個限制，關了電腦手機就不能玩了，那女朋友豈不是要生氣啦

有沒有辦法將遊戲部署到遠端伺服器呢？當然有啦。

是不是很貴啊？我下面會介紹一個免費的方式，超級好用。

主角就是 vercel ，可能很多人沒有聽說話，沒關係，簡單來說這個系統提供了靜態網站專案的託管服務，有付費也有免費的，我們使用免費的就足夠了。

1. 註冊 vercel 賬號

先登入 Github 官網：

https://github.com

這裡有個坑需要規避一下，如果你的 Github 賬號是繫結的 QQ 郵箱，建議你換成其他郵箱，Vercel 不支援 QQ 郵箱，這個比較坑

然後開啟另外一個頁面開始註冊 vercel 賬號

https://vercel.com/ 建議直接使用 Github 賬號登入。

註冊完了之後就可以進行下一步了。

2. 安裝 vercel 命令列工具

我們需要將專案部署到 vercel 系統，通過使用命令列工具比較方便。

在命令列終端中執行命令：

npm install -g vercel --registry=https://registry.npm.taobao.org

返回 vercel 版本號就表示安裝成功了。

3. 開始部署到 vercel 系統

cd 到原始碼根目錄然後執行： vercel --prod

第一次需要驗證郵件，如下圖：

驗證完之後可以繼續執行 vercel --prod

如果圖所示專案就釋出成功了，遠端訪問地址是： https://daxigua01.vercel.app/

這個地址是我釋出的地址，大家可以點選試玩， 這個地址是可以分享給其他朋友一起玩， 手機瀏覽器開啟效果更加哦。

注意：vercel 的地址已經被微信遮蔽了，大家可以將生成的地址拷貝到手機瀏覽器中執行。

到此這篇關於合成大西瓜開發原始碼手把手教你執行和部署大西瓜遊戲專案(附原始碼)的文章就介紹到這了,更多相關合成大西瓜開發原始碼內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！