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

一文,梳理,小游戏,开发,流程 · 浏览次数 : 982

小编点评

**Cocos2d Web项目2048小游戏上云开发指南** **一、代码托管** 创建项目前往软件开发平台DevCloud,进行以下步骤: 1. 点击免费试用 2. 输入项目参数 3. 创建Scrum项目 4. 创建代码仓 5. 创建编译构建任务 6. 创建部署任务 7. 访问应用 **二、编译构建任务** 在“选择构建模板”中选择“Shell”,点击“确定”,并在右侧命令行输入内容: ``` zip -qr WebGames.zip ./ ``` **三、部署应用** 在弹出的运行时参数页面,填写参数值: * host_group:可通过下拉箭头,选择之前创建的主机组 * package_url:构建包在发布仓库的地址 * service_port:8080 **四、健康测试** 在“URL 健康测试”中,将 URL 地址修改成 http://云服务器弹性公网IP:8080/WebGames/index.html,点击“保存并执行”。 **五、部署成功后访问** 进入部署任务的“访问方式”页签,点击“访问”查看应用浅浅体验一把2048小游戏演绎我的“这一生”,看看能到哪一级别吧~ **六、释放资源** 在ECS列表页,删除释放ECS资源。

正文

摘要:本文主要以Cocos2d Web项目2048小游戏的开发上云为例,介绍DevOps开发实践的全流程

前言

本文主要以Cocos2d Web项目2048小游戏的开发上云为例,介绍DevOps开发实践的全流程,主要涉及开发工具为华为云软件开发平台DevCloud和CocosCreator。按照整体的开发流程:代码托管->编译构建->发布(仓库)->部署,将文章分为两部分详细介绍,第一部分为2048小游戏的代码开发,第二部分为该小游戏项目上云的操作指导,详细内容请见下文!

在正式开始前,首先对本文用到的代码仓库进行说明:

1.x小节中使用的代码仓库为CocosCreator开发代码,源码地址:https://github.com/potato47/so-many-games.git

2.x小节中使用的代码仓库为:经过CocosCreator构建后的Web端文件,仓库地址:https://codehub.devcloud.cn-north-4.huaweicloud.com/yxdmmsymbgl00001/soManyGames.git

2048小游戏代码开发

游戏功能描述

在4x4的格子布局中,玩家通过手势上下左右滑动以使与滑动方向相同的同值数字相加,直到累加到2048,如此逻辑也衍生了众多高热度的小游戏。

此次展示demo中的2048游戏,就是在此基础上将数字改写为“幼儿园”“小学生”等,模拟我们这一生的学习成长路径增强了游戏的趣味性,并且本demo中设置的上限也不再是2048,具体是什么不如亲手来试试吧~

CocosCreator开发流程

在CocosCreator新建一个场景,在Canvas下创建节点。根据需求不同,可以添加一些Sprite、Label、Button等不同的节点。

针对于每个节点,我们也可以为其添加相应组件,这些组件可以是CocosCreator自带的组件,也可以是我们自己编写好的代码。

实现逻辑:六个关键点

该游戏的逻辑主要有六点:创建格子类、游戏初始化设计、随机初始值设置、手势识别、手势滑动逻辑实现和结束游戏判断,详细方法如下:

格子类创建

格子类是组成2048游戏的基础,4*4的方格的16个位置放置不同的格子,每个位置为独立的一张格子。对于每个格子而言,我们需要记录3个值(也可以说是2个值):横坐标x、竖坐标y、(x、y共同确定格子位置)。格子中的数值n。根据实际数值n值的不同,格子内显示的文字和颜色也都会变化。代码参考如下:

游戏初始化

在游戏开始时,执行棋盘的初始化,将所有格子都清零,再新设置两个格子的值,所有格子的值归零,代码参考如下:

随机初始值

代码参考如下:

手势识别

在场景的初始化时添加监听事件,获取到触摸事件后,记录点击开始的位置和结束的位置。通过手势位移的变化量确定位移方向,再调用手势滑动方法,参考代码如下:

手势滑动逻辑

根据滑动方向的不同,需要使用不同的方法进行处理。

此处以左滑为例:

合并:先遍历竖轴y,再遍历横轴x,每一竖轴y中,从左至右对应x轴的值为0至3。若其右侧有值且与其相等,则其值x2,其右侧值置0.

移动:重复一遍如上遍历,如有某一格子值为0,且其右侧有值,则该格子值置为右侧值,右侧值置为0。
如有“合并”或“移动”,则为有效滑动操作,即新生成格子值,并返回是否是有效操作,参考代码如下:

游戏结束判断

若为有效操作后,判断是否可以结束游戏,结束游戏,参考代码如下:

应用上云运行

以华为云软件开发平台DevCloud为开发工具,进行该项目上云运行的流程:创建项目、创建代码仓、创建编译构建任务、创建部署任务、访问应用、释放资源。

创建项目

前往软件开发平台DevCloud>>>

点击免费试用,开通基础版套餐

新建Scrum项目,参数如下:

  • 项目流程:Scrum
  • 项目名称:自定义
  • 点击“确定”完成项目创建

实践步骤二:创建代码仓

前往代码托管,导入外部仓库,并按如下填写外部仓库信息:

注:本次导入的代码仓为经过CocosCreator构建之后的Web文件仓库。

  • 源仓库地址:ü  https://codehub.devcloud.cn-north-4.huaweicloud.com/yxdmmsymbgl00001/soManyGames.git
  • 源仓库访问权限:不需要用户名/密码
  • 勾选“我已阅读并同意 《隐私政策声明》 和 《软件开发服务使用声明》”
  • 点击“下一步”按钮。

实践步骤三:编译构建任务

前往编译构建新建任务

编辑构建模板

(1)选择Shell,点击确定,并在右侧命令行输入内容:zip -qr WebGames.zip ./

(2)在Shell下方添加“选择上传软件包到软件发布库”,按以下内容填写后,点击新建并执行。

  • 构建包路径:WebGames.zip
  • 发布版本号:1.0.0
  • 包名:WebGames

实践步骤四:部署应用

部署应用在云上,需配置云服务器资源以替代服务器资源。

(1)前往弹性云服务器资源>>>,购买云资源。

(2)按照需求进行云资源配置

A)基础配置如下:

  • 计费模式:按需收费
  • 区域:华北-北京四
  • 可用区:随机分配
  • CPU架构:x86计算
  • 规格:c6.large.2(2核4G)
  • 镜像:CentOS 7.5 64bit(40GB)

B)网络配置如下 :

  • 网络:vpc-default/subnet-default
  • 安全组:Sys-WebServer(入向规则需包括TCP:8080端口)
  • 弹性公网IP:现在购买
  • 公网宽带:按宽带计算
  • 宽带大小:1
  • 释放行为:随实例释放

C) 高级配置如下:

  • 云服务器名称:自定义
  • 登录凭证:密码
  • 密码:自定义 (后续部署需使用)

D)确认配置完成ECS创建,注购买ECS数量为1即可。

进入部署服务,添加主机组。

(1)输入主机组名,选择Linux。

(2)添加主机,导入ECS。

  • 主机名称(自拟,云服务名称webGames)、
  • IP(云服务弹性公网IP)
  • 认证方式:密码
  • 用户名:root
  • 密码:自己云服务器ECS的密码
  • ssh端口:22

创建部署任务

(1)进入部署任务,新建任务

(2)选择“Tomcat应用部署”模板,Tomcat 应用部署模板会预置 jdk、tomcat 安装、启动等步骤。

(3)在“选择部署来源”步骤后,添加“解压文件”,并在其中添加构建包的解压路径后,保存。

  • 压缩文件路径:/usr/local/tomcat/apache-tomcat-8.5.38/webapps/WebGames.zip
  • 解压目录:/usr/local/tomcat/apache-tomcat-8.5.38/webapps/WebGames

(4)“URL 健康测试”,将 URL 地址修改成 http://云服务器弹性公网IP:8080/WebGames/index.html,点击“保存并执行”。

(5)在弹出的运行时参数页面,填写参数值。

  • host_group 可通过下拉箭头,选择之前创建的主机组
  • package_url 是构建包在发布仓库的地址:/WebGames/1.0.0/WebGames.zip,
  • service_port 为:8080.

实践步骤五:部署成功后,进入部署任务的“访问方式”页签,点击“访问”查看应用

浅浅体验一把2048小游戏演绎我的“这一生”,看看能到哪一级别吧~

2000 years later……

罢了,我的学历只能止步于高中了……

实践步骤六:释放资源,华为云DevCloud免费版不收费,但ECS资源按需收费需及时释放。

前往ECS列表页,删除释放ECS资源。

以上,即为2048小游戏开发到云上运行的全流程,想要学习了解更多内容,欢迎关注华为云一行代码秒上云活动>>>,加入我们的学习交流群获得更多云上开发的技能吧~

 

点击关注,第一时间了解华为云新鲜技术~

与一文梳理2048小游戏从开发到上云全流程相似的内容:

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

摘要:本文主要以Cocos2d Web项目2048小游戏的开发上云为例,介绍DevOps开发实践的全流程 前言 本文主要以Cocos2d Web项目2048小游戏的开发上云为例,介绍DevOps开发实践的全流程,主要涉及开发工具为华为云软件开发平台DevCloud和CocosCreator。按照整体

一文讲透产品经理如何用好ChatGPT

4.0版本推出后,在中文互联网上并没有辅助产品经理工作的详细介绍。因此,我基于GPT-4,梳理了帮助产品经理全流程提效的方法,整理了一些prompt,本文旨在分享这些收获,希望能抛砖引玉。

[转帖]InnoDB Page结构详解

1导读 本文花了比较多的时间梳理了InnoDB page的结构以及对应的分裂测试,其中测试部分大部分是参考了叶老师在《InnoDB表聚集索引层什么时候发生变化》一文中使用的方法,其次,本文中的测试工具用到了如下两个工具: innblock:https://github.com/gaopengcarl

面试官让列举Spring的事务会失效的场景,我说了8个

今天,我们就一起梳理下有哪些场景会导致Spring事务失效。

鞭尸没 jj

提前退役了。现在我想说一点无关紧要的闲话。 与其说是 OI 回忆录,不如说是对这主线明确的六年做的一个梳理,倒不一定 OI 强相关。 ## 壹、零度下的相遇 > 视线就这样交叠 与你 最初接触到 OI 约莫是在小五。当时小学的对口中学是 cqsyz,cqsyz 在我们小学开设了一个信奥班,老师给我们

痞子衡嵌入式:盘点国内Cortex-M内核MCU厂商高主频产品(2023)

大家好,我是痞子衡,是正经搞技术的痞子。今天痞子衡给大家介绍的是国内Cortex-M内核MCU厂商高主频产品。 在 2021 年初痞子衡写了篇 《盘点国内Cortex-M内核MCU厂商高性能产品》,搜罗了当时市面上主频不低于 96MHz 的 CM 核国产 MCU。如今过去了两年,痞子衡又一次梳理了国

Thread 和 ThreadPool 简单梳理(C#)【并发编程系列_3】

现在已经出现了 Task 和 PLinq 等更高效率的并发类,线程和线程池在实际开发中逐渐减少了,但是别人用了你也得能看懂,所以本文简单梳理一下。

关于DDD和COLA的一些总结和思考

写在前面: 其实之前一直想汇总一篇关于自己对于面向对象的思考以及实践的文章,但是苦于自己的“墨迹”,一延再延,最近机缘巧合下仔细了解了一下COLA的内容,这个想法再次被勾起,所以这次一鼓作气,准备好好梳理一篇。至于标题,因为是被DDD和COLA唤起的,索性就叫这个吧。 思维:面向对象和面向过程 领域

2.如何选择go语言基础类型——Leetcode习题9

[TOC] # 本篇前瞻 欢迎来go语言的基础篇,这里会帮你梳理一下go语言的基本类型,注意本篇有参考[go圣经](https://gopl-zh.github.io/),如果你有完整学习的需求可以看一下。另外,go语言的基本类型比较简单,介绍过程就比较粗暴,不过我们需要先从一个例题开始。 # Le

保姆级指南,从0到1打造你的个人开源项目

本文主要是想给希望开始写开源项目的同学们一些开源项目维护的实操建议,也算是给自己梳理一下做一个开源项目需要注意的事项。