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

2022-03-17 17:38:34 字數 4037 閱讀 7532

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

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

coding pages是乙個提供免費靜態網頁託管的服務平台,你可以使用 coding pages 託管部落格、專案官網等靜態網頁。

點選還有更多實用教程等你發現!

首先我們在平台上新建乙個專案,填寫一些必要資訊,如下圖所示:

建立完成後,會進入我們的專案首頁,複製右下角的遠端倉庫鏈結,以 https 協議頭為例,為轉殖專案到本地做準備。本示例專案的遠端倉庫鏈結是:

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

我們可能會有兩種情況:

本地沒有任何**,屬於新專案。那麼我們把專案轉殖下來後就可以開始在專案目錄下進行開發工作了。

本地已有**,只需要繫結遠端倉庫。

第一種情況

我們需要先將遠端倉庫中的專案轉殖到本地開發環境,可以借助 git gui 客戶端來操作,也可以使用 git 命令列來完成。筆者以命令行為例:

假設在現有目錄下轉殖專案,開啟命令列,輸入如下命令,其中 clone 後面的引數即為我們上一步驟中複製的遠端倉庫鏈結。

$ git clone  

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.

需要注意的是,如果在平台建立專案的時候未勾選公開源**選項,此時轉殖命令執行的時候會提示你輸入平台的賬號和密碼,輸入按回車即可。

接下來只需要在這個專案下進行**的開發,或者你也可以將寫好的**拷貝到該目錄下。

第二種情況

進入已有專案進行 git 倉庫初始化。

$ git init 

initialized empty git repository in ~/2048/.git/

繫結遠端倉庫鏈結。

$ git remote add origin
你可以選擇在任何時候提交**,為方便講解,我們假設到這已經開發完成我們的小遊戲了。

每一次提交的步驟都是類似的,我們這裡只涉及最基本的提交流程,對於 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 2f8c4d9..42196b8 master -> master

此時我們回到平台,前往**瀏覽頁面,可以看到我們剛才提交的**已經在遠端倉庫裡面了。

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

首先我們進入 pages 服務頁面,入口如下圖所示:

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

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

到這裡其實已經完成了 pages 服務的搭建,有些同學就想能否不使用 coding pages 服務提供的預設網域名稱,改成自己的網域名稱呢?貼心的 coding pages 服務知道會有不少同學有這種需求,所以答案自然是可以的。

我們點選 pages 服務頁面的設定,如下圖所示:

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

其中首選跳轉至首選的區別是:前者不會將原先的 廢棄,仍可以訪問,同時也可以訪問自己的網域名稱;後者是強制將原先的訪問位址自動跳轉到自定義的網域名稱位址上。

還有乙個需求:

能不能使用 https 訪問?答案是能,而且是會給你的自定義網域名稱自動配置乙個相應的 https 證書。這個功能真的是很讓人感動。

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

至此我們通過使用 coding pages 服務快速搭建了乙個 html 版的 2048 小遊戲,除去小遊戲的開發時間,搭建過程非常便捷快速。各位小夥伴們還不趕緊來「薅羊毛」!

茶杯大小的狗狗,看一眼整個人都酥了!

最近去大學授課,下課後看到很多同學圍到一起,湊近一看發現很多同學在教室外走廊裡圍在一起有說有笑,太可愛了!很多女同學甚至因為興奮抱在一起,心想到底是怎麼了,湊近了才發現很多同學在看很多飯盒形狀的茶杯,茶杯的上方密密麻麻的扎了很多氣孔,這也能樂成這個樣子?不就是傳達室大爺用來點蚊香的盒子嗎?就在這時,...

潛力十足的手機軟體,看一眼就會愛上的實力APP!

印象 小睡眠每個熱愛生活的人,都值得擁有好睡眠,而想要擁有好睡眠就用小睡眠。它提供助眠曲 睡眠監測 錄製夢話 睡前習慣養成 入睡提醒等等。專業 全面和暖心的睡眠服務,幫你睡得更好睡得更香,更能夠籍此此喚醒你對睡眠重要性和睡眠質量的關注。迅捷錄屏大師 是一款功能強大,簡單易用的安卓手機螢幕錄 快速投屏...

HTML5小遊戲動手做(一) 簡單的連連看

從本篇起,我將在此展示製作一些html5小遊戲的過程和經驗。本文描述的是乙個經典又簡單的小遊戲,連連看。我們使用隨機演算法來實現。按總格仔數的一半生成隨機圖示 符號串行 把序列複製乙份追加到尾部,這樣保證每個圖示都是成對的 隨機從序列中取出圖示 符號填充到 中 var symbols abcdefg...