目錄
步驟一:下載大西瓜源代碼
步驟二:嘗試運行大西瓜游戲專案
步驟三:安裝 nodejs
步驟四:安裝 serve 工具
步驟五:運行本地大西瓜游戲專案
步驟六:部署大西瓜游戲專案到遠程服務器
1. 注冊 vercel 賬號
2. 安裝 vercel 命令列工具
3. 開始部署到 vercel 系統
技術指導
最近合成大西瓜非常火,很多編程愛好者將大西瓜改成了各種版本,非常魔性,哈哈,
如果你也想魔改大西瓜,或者想研究一下專案怎么玩的,下面的教程從下載到游戲專案部署一條龍搞定,
步驟一:下載大西瓜源代碼
貼心的我已經將各種版本的代碼整理到百度網盤了,大家可以按需下載:
鏈接: https://pan.baidu.com/s/1fV72Om4hKZGNp8YTn3nx0g 提取密碼: vjlf
步驟二:嘗試運行大西瓜游戲專案
下載的原始碼結構如下圖

如果你雙擊打開 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
回傳版本號表示安裝成功
+ serve@11.3.2
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 的地址已經被微信屏蔽了,大家可以將生成的地址拷貝到手機瀏覽器中運行,

技術指導
如果對上面的教程有任何歡迎與我交流,搞不定的也可以找我指導😄

CSDN認證博客專家
Java
分布式架構
微服務
轉載請註明出處,本文鏈接:https://www.uj5u.com/qita/256700.html
標籤:其他
上一篇:C語言實作五子棋以及多子棋小游戲
下一篇:Java飛機大戰
