看一眼就学会的 HTML 小游戏搭建!_腾云 CODING的博客-程序员秘密

技术标签: 技术分享  CODING Pages  CODING  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 协议头为例,为克隆项目到本地做准备。本示例项目的远程仓库链接是:
https://git.dev.tencent.com/dtid_1d9eee295ed8d822/html_2048.git

图片
至此我们在 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 服务已经搭建完成了,访问提供的地址:
http://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。绑定好以后的效果如下图所示:

图片

其中 首选跳转至首选 的区别是:前者不会将原先的 http://tuercun.coding.me/html_2048 废弃,仍可以访问,同时也可以访问自己的域名;后者是强制将原先的访问地址自动跳转到自定义的域名地址上。

还有一个需求:
能不能使用 HTTPS 访问?答案是能,而且是会给你的自定义域名自动配置一个相应的 HTTPS 证书。这个功能真的是很让人感动。

图片

如图笔者开启了强制 HTTPS 访问,意味着访问 2048.starcode.cn 这个地址会强制使用 HTTPS 访问,保证了数据传输的安全。

小结

至此我们通过使用 CODING Pages 服务快速搭建了一个 HTML 版的 2048 小游戏,除去小游戏的开发时间,搭建过程非常便捷快速。各位小伙伴们还不赶紧来“薅羊毛”!

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/CODING_devops/article/details/89885053

智能推荐

Flan Scan:Cloudflare开源轻量级网络漏洞扫描软件_NOSEC2019的博客-程序员秘密

大家好!Cloudflare内部的轻量级网络漏洞扫描器——Flan Scan于此刻正式开源!Flan Scan是一种基于Nmap的扫描器,我们把这个知名流行的开源工具转换成一个漏洞扫描器,并提供很多新特性,非常易于部署。在两次尝试使用符合“行业标准”的扫描器进行合规性扫描但失败后,我们创建了Flan Scan。一年多以前,我们为某家大型厂商的漏洞扫描器支付了一大笔钱,而到后来,我们意识到这是我...

CUDA编程与硬件架构理解_cuda硬件架构_simple_whu的博客-程序员秘密

Nvidia GPU的CUDA编程模型预览版,内容有待完善。1. Kernelkernel函数是CUDA单个线程所执行的函数。其调用方式如下所述:kernel_name<<< Dg, Db, Ns, S >>>([kernel arguments]);Dg is of type dim3 and specifies the dimensions and size of the gridDb is of type dim3 and specifies t

颜色HSL(色调,饱和度,亮度)_yacper的博客-程序员秘密

面的每一个表代表一种色调。每个色调以30度间隔从色环取得。表中的X轴代表饱和度(100%, 75%, 50%, 25%, 0%)。Y轴代表亮度。50% 属于 正常。 0度   红   100%75%50%25%0%100#FFFFFF#FFFFFF#FFFFFF#FFFFFF#FFFFF

cnn本质_DL_CreepingBird的博客-程序员秘密_cnn底层逻辑

cnn的核心在于卷积核,其实关于卷积核还有另一个名字叫做滤波器,从信号处理的角度而言,滤波器是对信号做频率筛选,这里主要是空间-频率的转换,cnn的训练就是找到最好的滤波器使得滤波后的信号更容易分类,还可以从模版匹配的角度看卷积,每个卷积核都可以看成一个特征模版,训练就是为了找到最适合分类的特征模版,一点浅见。  -----------------------------------分割

Multi-modal Multi-task Masked Autoencoder:一种简单、灵活且有效的 ViT 预训练策略_deephub的博客-程序员秘密

MAE是一种使用自监督预训练策略的ViT,通过遮蔽输入图像中的补丁,然后预测缺失区域进行子监督的与训练。尽管该方法既简单又有效,但 MAE 预训练目标目前仅限于单一模态——RGB 图像——限制了在通常呈现多模态信息的实际场景中的应用和性能。在新论文 MultiMAE: Multi-modal Multi-task Masked Autoencoders 中,来自瑞士洛桑联邦理工学院 (EPFL) 的团队提出了 Multi-modal Multi-task Masked Autoencoders (Mult

内存相关知识_小阳先生的宝库的博客-程序员秘密_内存相关知识

系列文章目录文章目录系列文章目录前言一、区别二、Flash三、DRAM,SDRAM和SRAM的区别1、DRAM2、SDRAM3、SRAM总结前言一、区别内存是存储器的一种,而存储器又是计算机的重要组成部分,按其用途可以分为主存储器(主存)和辅助存储器(辅存),主存储器又称内存储器,内存器又分为随机存储器RAM和只读存储器ROM。RAM:即随机存储内存,这种存储器断电时将丢失其存储的内容,故只要用于存储短时间使用的程序。ROM:即只读内存,是一种只能读出事先所存数据的固态半

随便推点

物理内存低于4g如何内存管理(使用分页机制):_三三three的博客-程序员秘密

每个进程都拥有4G(2的32次方)的虚拟地址空间。在实际编程过程中,指针中存放的地址也都是32位的线性地址(虚拟地址),经过页目录、页表等分页机制变换以后可以得到真正的物理地址,而这个物理地址也是32位的。对于32位的CPU来说没有任何问题,因为它的地址总线是32位的,寻址空间也就是2的32次方(4G)。那么问题就出来了:CPU的寻址空间是2的32次方(4G),程序要访问的物理地址(线性地址经过分...

软件设计全程演练与最佳实践_shenmanli的博客-程序员秘密_软件设计的最佳实践

一、授课思路一般的书籍和培训,往往是重点介绍设计原则和模式,之后给出几个简单的在理想情况下的应用;或者是拿出最终设计来讲解,然后告诉他的设计的是多么灵活,多么的好。但是当你课程结束后,回到工作之中却发现情况是完全的不一样,这时你只有束手无策。本课程重点关注提升软件设计师技能,整个课程由多个实战案例贯串始终,老师带领大家通过案例实战练习,一起走完项目的全过程。案例练习中老师着重阐述和分析在实

display:table-cell_leadn的博客-程序员秘密

display:table-cell指让标签元素以表格单元格的形式呈现,使元素类似于td标签。IE8+及现代版本的浏览器都支持此属性,IE6/7不支持(可用其他方法实现类似效果)。同样,display:table-cell属性也会被float,position:absolute等属性破坏效果,应避免同时使用。设置了display:table-cell的元素:对宽度高度敏感对margin值无

求和为指定数字的所有组合_weixin_30321449的博客-程序员秘密

(July——微软等面试100题 21和25http://topic.csdn.net/u/20101023/20/5652ccd7-d510-4c10-9671-307a56006e6d.html)21.输入两个整数 n 和 m,从数列1,2,3.......n 中 随意取几个数,使其和等于 m ,要求将其中所有的可能组合列出来.解法:采用0-1背包的思想,使用递归方法:  当...

操作系统面试题总结_一只鱼哥的博客-程序员秘密

操作系统面试题总结(持续更新中)

db2解决insertBatch超长问题_知乎关注八戒来了的博客-程序员秘密_insertbatch 大批量

2018年11月5日 于南昌高新区 临近项目上线最近在做一个银行的项目,银行存量交易很大,比如省银行下面有1亿多用户,行方将数据存放到ftp,我们下载下来,读文件入库。用Scanner读取文件,将每一行的数据,加入到list中,然后调用Mybaits的insertBatch方法,插入到数据库,举个栗子public void addScCostRevAlctFromFile(String fi...

推荐文章

热门文章

相关标签