看一眼就學會的 HTML 小遊戲搭建！

Coding發表於2019-05-06
HTML遊戲

本文作者：CODING 使用者 - xfly 點選閱讀原文，還有更多實用教程等你發現！

身邊經常會有小夥伴問我有沒有辦法不買伺服器也能上線自己的個人專案，比如不少同學都非常喜歡搭建一個屬於自己的部落格站點或者小遊戲等。

目前相對比較簡便的且不花自己一分錢的方法就是 Pages 服務。這類服務在國外比較知名的如 GitHub Pages 服務，在國內雖然能訪問到，不過訪問速度不盡人意。那麼我們國內自家的有沒有這類服務呢？當然是有的，也就是今天要向大家推薦的 CODING Pages。

CODING Pages 是一個提供免費靜態網頁託管的服務平臺，你可以使用 CODING Pages 託管部落格、專案官網等靜態網頁。

今天教大家如何通過 CODING Pages 服務快速搭建一個 HTML 小遊戲，非常方便。本文以 HTML 版的 2048 小遊戲為例，完整地帶大家走一遍搭建流程。

提前準備

1. 騰訊雲開發者平臺賬號。因為要使用 CODING Pages 服務，所以我們需要一個騰訊雲開發者平臺賬號，如果已經有了可以跳過該部分，如果沒有請前往 騰訊雲開發者平臺 | 技術助力開發 官網進行註冊。
2. 一些基本的 Git 命令列知識。 比如初始化本地倉庫、提交程式碼到本地倉庫、提交程式碼到遠端倉庫等。
3. 本地需要安裝好 Git 開發環境。 你可以選擇使用方便的 GUI 客戶端，也可以下載官方的 Git 命令列，點選前往下載頁面。
注意：以下對騰訊雲開發者平臺均使用「平臺」作為簡稱。

建立 CODING 專案

首先我們在平臺上新建一個專案，填寫一些必要資訊，如下圖所示：

圖片

建立完成後，會進入我們的專案首頁，複製右下角的遠端倉庫連結，以 HTTPS 協議頭為例，為克隆專案到本地做準備。本示例專案的遠端倉庫連結是： git.dev.tencent.com/dtid_1d9eee…

圖片
至此我們在 CODING 上的專案就初始化完成了。

克隆專案至本地

我們可能會有兩種情況：

  1. 本地沒有任何程式碼，屬於新專案。那麼我們把專案克隆下來後就可以開始在專案目錄下進行開發工作了。

  2. 本地已有程式碼，只需要繫結遠端倉庫。

第一種情況

我們需要先將遠端倉庫中的專案克隆到本地開發環境，可以藉助 Git GUI 客戶端來操作，也可以使用 Git 命令列來完成。筆者以命令列為例： 假設在現有目錄下克隆專案，開啟命令列，輸入如下命令，其中 clone 後面的引數即為我們上一步驟中複製的遠端倉庫連結。

$ git clone https://git.dev.tencent.com/tuercun/html_2048.git 
Cloning into 'html_2048'... 
remote: Enumerating objects: 4, done. 
remote: Counting objects: 100% (4/4), done. 
remote: Compressing objects: 100% (3/3), done. 
remote: Total 4 (delta 0), reused 0 (delta 0) 
Unpacking objects: 100% (4/4), done.  
複製程式碼

需要注意的是，如果在平臺建立專案的時候未勾選公開原始碼選項，此時克隆命令執行的時候會提示你輸入平臺的賬號和密碼，輸入按回車即可。 接下來只需要在這個專案下進行程式碼的開發，或者你也可以將寫好的程式碼拷貝到該目錄下。

第二種情況

假設我們本地已經有 html_2048 這個專案了（不需要和遠端倉庫的專案名一致），那麼我們只需要對這個專案進行 Git 倉庫初始化，並繫結遠端倉庫連結即可，具體操作如下：

  1. 進入已有專案進行 Git 倉庫初始化。
$ git init 
Initialized empty Git repository in ~/2048/.git/ 
複製程式碼
  1. 繫結遠端倉庫連結。
$ git remote add origin https://git.dev.tencent.com/tuercun/html_2048.git 
複製程式碼

提交程式碼至遠端倉庫

你可以選擇在任何時候提交程式碼，為方便講解，我們假設到這已經開發完成我們的小遊戲了。 每一次提交的步驟都是類似的，我們這裡只涉及最基本的提交流程，對於 tag 、release 等操作就不擴充開來說明了。

# 將修改過的程式碼檔案全部提交到暫存區（stage）
$ git add .
# 將暫存區的修改記錄推送到本地倉庫，幷包含提交備註
$ git commit -m "init"
# 將本地倉庫更改記錄推送到遠端倉庫
$ git push origin master
Enumerating objects: 43, done.
Counting objects: 100% (43/43), done.
Delta compression using up to 8 threads
Compressing objects: 100% (39/39), done.
Writing objects: 100% (41/41), 291.76 KiB | 11.22 MiB/s, done.
Total 41 (delta 2), reused 0 (delta 0)
To https://git.dev.tencent.com/tuercun/html_2048.git
2f8c4d9..42196b8 master -> master
複製程式碼

此時我們回到平臺，前往程式碼瀏覽頁面，可以看到我們剛才提交的程式碼已經在遠端倉庫裡面了。

圖片

部署 Pages 服務

接下來我們就要進入最激動人心的步驟 —— 部署 Pages 服務了，其實到這裡只需要在平臺上滑鼠點幾下就能完成。

首先我們進入 Pages 服務頁面，入口如下圖所示：

圖片

勾選 我已閱讀 《Coding Pages 服務宣告》，點選一鍵開啟Coding Pages，然後你會發現最神奇的事情發生了。

圖片

CODING Pages 服務已經搭建完成了，訪問提供的地址： tuercun.coding.me/html_2048，完…

圖片

到這裡有些同學會感到奇怪，CODING Pages 服務怎麼知道要訪問哪一個檔案呢？ 其實這裡 Pages 服務有一個限制，預設只能識別專案根目錄的 index 檔案，在本示例中就是根目錄下的 index.html 檔案。

配置 Pages 服務

到這裡其實已經完成了 Pages 服務的搭建，有些同學就想能否不使用 CODING Pages 服務提供的預設域名，改成自己的域名呢？貼心的 CODING Pages 服務知道會有不少同學有這種需求，所以答案自然是可以的。 我們點選 Pages 服務頁面的 設定，如下圖所示：

圖片

在繫結新域名部分填寫自己想要繫結的域名，在繫結前需要前往自己域名的 DNS 域名解析商提供的解析工具上增加一條 CNAME 記錄，其中記錄型別為 CNAME、主機記錄為你要繫結的域名，本示例為 2048.starcode.cn、記錄值為 CODING Pages 服務提供的 tuercun.coding.me。繫結好以後的效果如下圖所示：

圖片

其中 首選 和 跳轉至首選 的區別是：前者不會將原先的 tuercun.coding.me/html_2048 廢棄，仍可以訪問，同時也可以訪問自己的域名；後者是強制將原先的訪問地址自動跳轉到自定義的域名地址上。

還有一個需求： 能不能使用 HTTPS 訪問？答案是能，而且是會給你的自定義域名自動配置一個相應的 HTTPS 證書。這個功能真的是很讓人感動。

圖片

如圖筆者開啟了強制 HTTPS 訪問，意味著訪問 2048.starcode.cn 這個地址會強制使用 HTTPS 訪問，保證了資料傳輸的安全。

小結

至此我們通過使用 CODING Pages 服務快速搭建了一個 HTML 版的 2048 小遊戲，除去小遊戲的開發時間，搭建過程非常便捷快速。各位小夥伴們還不趕緊來“薅羊毛”！

相關文章