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

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

预览地址：http://132.232.2.225/

本文从一个 HTML5 游戏引擎 Egret 开始谈起，从 Egret 项目的搭建到它选用的语言，到游戏的核心逻辑及设计思路，再到游戏的界面开发，最后讲一下游戏的打包发布。简单整理一下，在这里做个目录。

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

一、项目简介

1.1 项目说明

• 本项目实现了斗地主游戏的单机版、联机版核心功能。
• 由于文章篇幅问题，本文只讲解单机版斗地主的开发过程。根据情况联机版会考虑在下一期 Chat 中讲解（含界面、服务端、数据库的主要逻辑）。
• 项目运行方式：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 Wing：支持主流开发语言与技术的编辑器。
3. Egret Native：将基于 Egret 引擎开发的 HTML5 游戏轻松转换为 Android 或 iOS 的原生游戏。
4. ResDepot：可视化资源管理工具。
5. Texture Merger：纹理集打包和动画转换工具。
6. Egret Inspector：供 Chrome 开发者使用的插件。
7. Egret Feather：粒子编辑器。
8. 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 或更高的版本。

3.3 安装 Egret Wing（编辑器）

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

3.4 新建项目

安装完引擎和编辑器后，就可以写我们的的 Hello World 了，切到 “项目” 界面，点击“创建项目”，创建完成后，在项目列表中点击右边的翅膀图标即可在 Egret Wing 中愉快地写代码了。

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

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

如下图：

3.5 看一眼代码

（图 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

整个界面分为五部分：

• 背景图

//创建一张背景图
let sky = this.createBitmapByName("bg_jpg");
        //将背景图加载到画布上
        this.addChild(sky);
        //取画布的宽
        let stageW = this.stage.stageWidth;
        //取画布的高
        let stageH = this.stage.stageHeight;
        //设置背景图的宽度等于画布的宽
        sky.width = stageW;
        //设置背景图的高度等于画布的高
        sky.height = stageH;

• 遮罩层

//创建一个图形
let topMask = new egret.Shape();
        //设置图形填充为黑色，透明度0.5
        topMask.graphics.beginFill(0x000000, 0.5);
       //设置该图形为矩形，相对坐标（0，0）,与画布同宽，高度172
        topMask.graphics.drawRect(0, 0, stageW, 172);
        //结束矩形绘制
        topMask.graphics.endFill();
        //设置矩形y坐标为33
        topMask.y = 33;
        //将矩形添加到画布
        this.addChild(topMask);

• 图标

//创建一个位图
let icon = this.createBitmapByName("egret_icon_png");
        //将位图添加到画布
        this.addChild(icon);
        //设置位图x坐标是26
        icon.x = 26;
        //设置y坐标为33
        icon.y = 33;

• 分割线

//创建一个图形对象
let line = new egret.Shape();
        //设置线宽为2，颜色为白色
        line.graphics.lineStyle(2, 0xffffff);
        //从相对坐标(0,0)开始绘图
        line.graphics.moveTo(0, 0);
        //向下划117长的线段