当前位置: 首页 > Web前端 > HTML

构建一目了然的HTML游戏!

时间:2023-04-02 17:10:45 HTML

本文作者:CODING用户-xfly点击阅读原文,还有更多实用教程等你发现!身边的朋友经常问我有没有什么办法不用买服务器就可以启动自己的个人项目。比如很多同学喜欢自己搭建博客网站或者小游戏。目前比较简单而且一分钱都不花的方法就是Pages服务。这种服务在国外比较知名,比如GitHubPages服务,国内虽然可以访问,但是访问速度不尽人意。那么我们自己国家有这样的服务吗?当然还有,就是今天要给大家推荐的CODINGPages。CODINGPages是一个提供免费静态虚拟主机的服务平台。您可以使用CODINGPages来托管博客和项目官网等静态网页。今天教大家如何通过CODINGPages服务快速搭建一个HTML小游戏,非常方便。本文以HTML版2048小游戏为例,带您完成搭建过程。提前准备1.腾讯云开发者平台账号。因为我们要使用CODINGPages服务,所以需要一个腾讯云开发者平台账号。如果你已经有一个,你可以跳过这一部分。如果没有,请上腾讯云开发者平台|技术援助开发官网注册。2、一些基本的Git命令行知识。比如初始化本地仓库,提交代码到本地仓库,提交代码到远程仓库等。3.本地需要安装Git开发环境。你可以选择使用方便的GUI客户端,也可以下载官方的Git命令行,点击进入下载页面。注:以下“平台”为腾讯云开发者平台的简称。创建CODING项目首先,我们在平台上新建一个项目,填写一些必要的信息,如下图:创建完成后,会进入我们的项目首页,复制下方的远程仓库链接右上角,以HTTPS协议头为例,clone到本地准备工程。本示例项目的远程仓库链接为:https://git.dev.tencent.com/d...至此,我们在CODING上的项目已经完成初始化。我们在将项目克隆到本地时可能会遇到两种情况:本地没有代码,属于新项目。然后我们clone项目后,就可以在项目目录下开始开发了。本地已经有代码,只需要绑定远程仓库即可。第一种情况,我们需要将远程仓库中的项目克隆到本地开发环境中,这可以借助GitGUI客户端或者Git命令行来完成。笔者以命令行为例:假设在现有目录下克隆项目,打开命令行,输入如下命令,其中clone后的参数为我们上一步复制的远程仓库链接。$gitclonehttps://git.dev.tencent.com/tuercun/html_2048.git克隆到'html_2048'...远程:枚举对象:4,完成。远程:计数对象:100%(4/4),完成。远程:压缩对象:100%(3/3),完成。远程:总计4(delta0),重复使用0(delta0)拆包对象:100%(4/4),完成。需要注意的是,如果在平台创建项目时没有勾选开源代码选项,此时执行clone命令时会提示输入平台的账号和密码,输入即可然后按Enter。接下来你只需要开发这个项目下的代码,或者你也可以把写好的代码复制到这个目录下。第二种情况,假设我们本地已经有了html_2048项目(不需要和远程仓库的项目名一样),那么我们只需要为这个项目初始化Git仓库,绑定远程仓库即可关联。具体操作如下:进入一个已经存在的项目,初始化Git仓库。$gitinit在~/2048/.git/中初始化空的Git仓库绑定远程仓库链接。$gitremoteaddoriginhttps://git.dev.tencent.com/tuercun/html_2048.git提交代码到远程仓库。您可以随时选择提交代码。为了方便说明,我们假设我们的小游戏结束了。每次提交的步骤都是相似的。我们这里只覆盖最基本的提交流程,对于tag、release等操作我们不展开说明。#将所有修改的代码文件提交到暂存区(stage)$gitadd.#将暂存区的修改记录推送到本地仓库,并包含提交备注$gitcommit-m"init"#更改本地仓库记录推送到远程仓库$gitpushoriginmasterEnumeratingobjects:43,done.Countingobjects:100%(43/43),done.Deltacompressionusingupto8threadsCompressingobjects:100%(39/39),done.写入对象:100%(41/41),291.76KiB|11.22MiB/s,完成。总计41(增量2),重复使用0(增量0)到https://git.dev.tencent.com/tuercun/html_2048.git2f8c4d9..42196b8master->master现在我们回到进入平台,进入代码浏览页面,可以看到刚才提交的代码已经在远程仓库中了。部署Pages服务接下来,我们就要进入最激动人心的一步——部署Pages服务。其实只需要在平台上点几下鼠标就可以完成。首先,我们进入Pages服务页面,入口如下图:勾选我已阅读《Coding Pages 服务声明》,点击一个按钮打开CodingPages,然后你会发现最神奇的事情发生了。已构建CODINGPages服务。访问提供的地址:http://tuercun.coding.me/html...完美运行。这里有同学会觉得奇怪,CODINGPages服务怎么知道要访问哪个文件呢?事实上,Pages服务有一个限制。默认情况下,它只能识别项目根目录下的索引文件。在本例中,它是根目录中的index.html文件。配置Pages服务至此,Pages服务才真正搭建完成。有同学想知道能否用自己的域名替换CODINGPages服务提供的默认域名?贴心的CODINGPages服务知道很多同学都会有这样的需求,所以答案自然是肯定的。我们在Pages服务页面点击设置,如下图:在Bindingnewdomainname部分填写你要绑定的域名,在你的域名DNS提供的解析工具中添加一条CNAME记录绑定前的域名解析提供商,其中记录类型为CNAME,host记录为您要绑定的域名,本例为2048.starcode.cn,记录值为CODINGPages提供的tuercun.coding.me服务。绑定后的效果如下图所示:第一种选择和跳转到第一种选择的区别是前者不会丢弃原来的http://tuercun.coding.me/html...仍然可以被访问。您可以访问自己的域名;后者是强制原访问地址自动跳转到自定义域名地址。还有一个需求:是否可以使用HTTPS访问?答案是肯定的,它会自动为你的自定义域名配置对应的HTTPS证书。这个功能确实令人印象深刻。如图,作者开启了强制HTTPS访问,也就是说访问地址2048.starcode.cn会强制HTTPS访问,保证数据传输的安全。总结到目前为止,我们已经使用CODINGPages服务快速构建了2048小游戏的HTML版本。搭建过程非常方便快捷,除了小游戏的开发时间。亲们赶紧“扫个羊毛”吧!