API 文档

开发 H5 五子棋

最近更新时间:2021-03-01 17:29:29

本文主要介绍如何使用云开发搭建一个 H5 五子棋小游戏。最终 H5 五子棋成果展示如下:

体验代码

本文五子棋的案例代码,请参见 五子棋源码

步骤1:创建云开发环境

  1. 登录腾讯云 云开发控制台,单击【立即创建并使用】,新建一个环境来进行部署。

    如果您之前创建过环境,可以继续使用已创建的按量计费环境,或者再次【新建环境】。
  2. 在新建环境窗口中,根据实际需求填写环境名称,选择【按量计费】,单击【立即开通】即可开通环境。
  3. 开通成功之后,单击环境名称,进入环境总览页面。请记住您的环境 ID,这个 ID 在后续步骤将被使用,如下所示:
  4. 单击左侧菜单栏中的【静态网站托管】,在页面中单击【开启使用】,开通静态托管服务。

    当您能看到如下界面时,即说明静态网站托管开通成功。

步骤2:初始化云开发 CLI

  1. 运行命令提示符,执行如下命令:

    cloudbase login
  2. 执行命令时,系统将拉起浏览器授权,请登录上述步骤2中创建云开发环境的账号,进行确认授权。

步骤3:获取 H5五子棋源码

  1. 下载 H5 五子棋 源码。
    初级项目的五子棋源码结构如下:
     - index.html
     - black.png
     - white.png
  2. 五子棋项目的棋盘以及棋子使用 canvas 构建,最后落子使用图片绝对布局来实现。
  3. 在初级五子棋项目中,未提供与服务器交互的能力,只能进行单机的电脑对战。对此项目更加深入的兴趣请微信关注“腾讯云云开发公众号”,获得该项目第一手资料。
  4. 运行命令提示符,定位到源码所在的目录,执行如下命令,将项目部署到云开发静态托管中(需要将 EnvID 替换为 步骤1 中您所创建的环境 ID)。
    cloudbase hosting:deploy -e [EnvID]

步骤4:浏览部署的五子棋项目

  1. 回到云开发控制台 静态网站托管 页面。
  2. 单击【基础配置】,在域名信息中找到默认域名。
  3. 在浏览器中打开此链接,则看到线上部署好的 H5 五子棋。
目录