Html 5 、Android、iOS 全平台的斗地主游戏全程讲解

前言：本来定这个主题的时候，想着写个三五页也就好了，一个没刹住车，巴拉巴拉写了一大堆。

预览地址：http://132.232.2.225/

一、项目简介：介绍项目运行方式和运行效果 二、Egret 简介：介绍 Egret 及环境搭建 三、一起写个 Hello World：介绍如何新建及运行游戏项目 四、TypeScript 简介：介绍 TypeSctipt 语法特性 五、斗地主游戏规则及核心逻辑：详细说明游戏核心逻辑设计思路及具体实现 六、斗地主游戏（单机版）界面开发：主要介绍游戏各界面开发思路 七、游戏打包发布：介绍游戏打包到各平台的方法及运行效果

一、项目简介

1.1 项目说明

• 本项目实现了斗地主游戏的单机版、联机版核心功能。
• 项目运行方式：git 直接克隆上面的源码，使用 Egret Wing 打开运行即可（别急，Egret Wing 的使用马上告诉你）。
• 由于本人只是个码农，不擅长 UI 和审美，界面设计在我的审美能力限制内用 Adobe Illustrator 简单形容了一下。觉得欣赏不动的同志们可以自己设计一套 UI，欢迎分享你们实现的效果（坏笑）。
• 由于个人能力和代码风格的不同，欢迎大家对项目提出意见或建议。

1.2 预览效果

1. 开始界面

2. 游戏大厅界面

3. 游戏界面

二、Egret 简介

Egret 是一套 HTML5 游戏开发解决方案，使用 Egret 开发的游戏可以轻松发布到 HTML5、iOS、Android、微信小游戏、Facebook、QQ 玩一玩、百度小游戏、Blockchain Game 等各个平台运行。

官 地址：https://www.egret.com/

Egret 包含以下生态：

1. Egret Engine：遵循 HTML5 标准的 2D 引擎及全新打造的 3D 引擎。
2. Egret Native：将基于 Egret 引擎开发的 HTML5 游戏轻松转换为 Android 或 iOS 的原生游戏。
3. ResDepot：可视化资源管理工具。
4. Texture Merger：纹理集打包和动画转换工具。
5. Egret Inspector：供 Chrome 开发者使用的插件。
6. DragonBones：面向设计师的 2D 游戏动画和富媒体内容创作平台。

比较人性化的是，这么一堆东东不需要你一个一个去找，只要下载个 Egret Launcher 就好了。

Egret Launcher 相当于一个启动器，负责 Egret 所有构件的管理和使用。

三、一起写个 Hello World

3.1 安装 Egret Launcher（启动器）

官方下载地址：https://www.egret.com/products/engine.html

下载安装好 Egret Launcher 后，打开，界面是这样子的：

可以看到，首页会有很多介绍和教程的链接，如果懒得去官方翻文档，在这里一样可以找到你想要到了解的东西。

3.2 安装 Egret Engine（2D 引擎）

切到“引擎页面”，选择一个引擎安装。选一个，直接下载就行了，我项目中用的是 5.2.4 版本，你可以选择用 5.2.4 或更高的版本。

切到 “工具” 界面，选择安装 Egret Wing。这个界面可以看到 Egret 的所有构件，有兴趣的可以挨个鼓捣鼓捣，挺好玩的。

3.4 新建项目

在 “创建项目” 界面，注意：

• 填写项目名称，选择项目路径
• 项目类型要选 Egret 游戏项目
• 其他设置按默认的来

如下图：

3.5 看一眼代码

Egret Wing 界面介绍

• 快捷菜单：有保存、发布、版本控制、搜索等菜单
• 文件列表：显示当前项目的目录结构
• 控制台：代码调试、日志输出、命令行输入的地方
• 帮助文档：显示当前文件的一些信息，包含一些教程的链接
• 快捷启动按钮组：有调试项目、运行项目、编译项目、发布项目等快捷按钮

3.6 运行项目

点击“运行项目”，终端会出现如下提示，并自动打开浏览器。注意，当我们在开发过程中，代码发生变化后页面并不会实时显示变化，要先点击 “编译项目” 后刷新页面。

如果没有自动打开浏览器，使用浏览器访问终端输出的地址（如本例地址为：http://192.168.31.105:3000/index.html） 即可看到效果，运行效果图如下：

好了，至此，我们的 Hello World 项目运行完毕，对照着图 3.5 （往前数第 3 张图，发现文章中用到的图有点多，尽量一图多用吧）蓝字标注的代码，我们简单了解下 Egret Engine2D 的语法格式。

 

这里做下简单说明，具体语法参照官方文档：

http://developer.egret.com/cn/github/egret-docs/Engine2D/update/update5213/index.html

整个界面分为五部分：

• 背景图

• 遮罩层

• 图标

• 分割线

• 文字

这就是新建一个项目后自动生成的代码，通过阅读代码我们发现，Egret 2D 引擎实际上相当于使用 HTML5 的 canvas 在画布上绘图，通过控制位图、文字、图形的移动、显示与隐藏来实现游戏效果。

Canvas 参考：

http://www.runoob.com/html/html5-canvas.html

好了，我们的 Hello World 写完了（虽然我们实际上没有写一行代码）， 你会发现这个例子使用的还是 JS 语法，如果我们写个完整的游戏，是不是去搞令人头疼的 JS 呢反正我是一想到要写 JS 脑袋就疼）

答案是否定的。

选择 Egret 的原因就是，我能摆脱用 JS 写 页游戏的噩梦，Egret 使用的是 TS，TypeScript。

What慌，没坑你，嘿嘿。

四、TypeScript 简介

4.1 TypeScript 是什么

以下是官方比较书面化的一些介绍：

TypeScript 是一种由微软开发的自由和开源的编程语言。它是 JavaScript 的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。安德斯 · 海尔斯伯格，C# 的首席架构师，已工作于 TypeScript 的开发。

TypeScript 扩展了 JavaScript 的语法，所以任何现有的 JavaScript 程序可以不加改变的在 TypeScript 下工作。TypeScript 是为大型应用之开发而设计，而编译时它产生 JavaScript 以确保兼容性。

TypeScript 支持为已存在的 JavaScript 库添加类型信息的头文件，扩展了它对于流行的库如 jQuery、MongoDB、Node.js 和 D3.js 的好处。

其实巴拉巴拉这么多，我们看了可能还是不知道这是个什么鬼，可以简单地理解为：

1. TypeScript 在 JavaScript 的基础上进行了扩展，增加了类型，同时完全兼容 JavaScript 语法。
2. TypeScript 在 JavaScript 的基础上添加了基于类的面向对象编程。

TypeScript 是 JavaScript + 类型声明

直接放段代码：

这段代码实现了一个方法，用来生成一个随机的数组：

1. 先定义了一个数组 arrayA，赋值为 1 到 8；
2. 又定义了一个空的数组 arrayB；
3. 循环 10 次，每次都随机取 arrayA 中的一个元素，放入 arrayB；
4. 循环完毕后，控制台输出 arrayB，并将其作为方法的返回值返回。

通过代码的介绍，你会发现，这里面除了方法和变量的定义时后面跟了一个 、 外，完全就是一段标准的 JavaScript 代码。

这就是 TypeScript 的第一个特点：

在 JavaScript 的基础上进行了扩展，增加了类型，同时完全兼容 JavaScript 语法。

JavaScript + 面向对象

我们再来看下面这段代码：

声明：本站部分文章及图片源自用户投稿，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！