一文梳理2048小游戏从开发到上云全流程 _格子

摘要：本文主要以 Web项目2048小游戏的开发上云为例，介绍开发实践的全流程前言
本文主要以 Web项目2048小游戏的开发上云为例，介绍开发实践的全流程，主要涉及开发工具为华为云软件开发平台和。按照整体的开发流程：代码托管->编译构建->发布（仓库）->部署，将文章分为两部分详细介绍，第一部分为2048小游戏的代码开发，第二部分为该小游戏项目上云的操作指导，详细内容请见下文！
在正式开始前，首先对本文用到的代码仓库进行说明：
1.x小节中使用的代码仓库为开发代码，源码地址：
2.x小节中使用的代码仓库为：经过构建后的Web端文件，仓库地址：
2048小游戏代码开发游戏功能描述
在4x4的格子布局中，玩家通过手势上下左右滑动以使与滑动方向相同的同值数字相加，直到累加到2048，如此逻辑也衍生了众多高热度的小游戏。
此次展示demo中的2048游戏，就是在此基础上将数字改写为“幼儿园”“小学生”等，模拟我们这一生的学习成长路径增强了游戏的趣味性，并且本demo中设置的上限也不再是2048，具体是什么不如亲手来试试吧~
开发流程
在新建一个场景，在下创建节点。根据需求不同，可以添加一些、Label、等不同的节点。
针对于每个节点，我们也可以为其添加相应组件，这些组件可以是自带的组件，也可以是我们自己编写好的代码。
实现逻辑：六个关键点
该游戏的逻辑主要有六点：创建格子类、游戏初始化设计、随机初始值设置、手势识别、手势滑动逻辑实现和结束游戏判断，详细方法如下：
格子类创建
格子类是组成2048游戏的基础，4*4的方格的16个位置放置不同的格子，每个位置为独立的一张格子。对于每个格子而言，我们需要记录3个值（也可以说是2个值）：横坐标x、竖坐标y、（x、y共同确定格子位置）。格子中的数值n 。根据实际数值n值的不同，格子内显示的文字和颜色也都会变化。代码参考如下：
游戏初始化
在游戏开始时，执行棋盘的初始化，将所有格子都清零，再新设置两个格子的值，所有格子的值归零，代码参考如下：
随机初始值
代码参考如下：
手势识别
在场景的初始化时添加监听事件，获取到触摸事件后，记录点击开始的位置和结束的位置。通过手势位移的变化量确定位移方向，再调用手势滑动方法，参考代码如下：
手势滑动逻辑
根据滑动方向的不同，需要使用不同的方法进行处理。
此处以左滑为例：
合并：先遍历竖轴y，再遍历横轴x，每一竖轴y中，从左至右对应x轴的值为0至3 。若其右侧有值且与其相等，则其值x2，其右侧值置0.
移动：重复一遍如上遍历，如有某一格子值为0，且其右侧有值，则该格子值置为右侧值，右侧值置为0 。
如有“合并”或“移动”，则为有效滑动操作，即新生成格子值，并返回是否是有效操作，参考代码如下：
游戏结束判断

文章插图
若为有效操作后，判断是否可以结束游戏，结束游戏，参考代码如下：
应用上云运行
以华为云软件开发平台为开发工具，进行该项目上云运行的流程：创建项目、创建代码仓、创建编译构建任务、创建部署任务、访问应用、释放资源。
创建项目
前往软件开发平台>>>
点击免费试用，开通基础版套餐
新建Scrum项目，参数如下：
实践步骤二：创建代码仓
前往代码托管，导入外部仓库，并按如下填写外部仓库信息：