fingerGuessing
项目介绍
fingerGuessing:一款有趣的猜拳游戏,基于egret白鹭游戏引擎开发(ps:游戏中试玩榜后台数据均为随机虚假)。
演示视频
部分截图
image.png项目功能结构
猜拳游戏.png项目运行
$ egret build xxx(项目名)
$ egret startserver xxx(项目名) -a
项目搭建教程
该项目主要分为4个页面
1. 开始页面
创建bitmap对象,做背景图和位图的绘制,涉及到2个按钮(开始游戏按钮、试玩榜按钮)的事件监听(touch_begin、touch_end、touch_release_outside)。
startBtn涉及dispatchEvent,下面篇幅会有详解
2.游戏页面
- 背景和相关位图绘制
- 出拳tween动画处理 + random出拳
- 根据所剩时间,动态调整出拳动画频率
- timerPanel.ts 用于控制游戏倒计时
- 倒计时栏目UI绘制
- listen TimerEvent中的timer和timer——complete,做倒计时数字的update
- 将default_time存入localStorage中,用于game页面使用
- 猜况按钮逻辑处理
- 根据出拳情况,用户判断那边赢(左边赢、打平、右边赢)
- 为了精简代码,抽象一个commonCallback,用于left、middle和right使用
3.结束页面
- 位图绘制
- 抽象出commonImgConf函数,来绘制多个按钮
- 按钮事件派发、处理
- 抽出commonCallback,分别控制3个gameEvent
4.试玩榜页面
- 返回按钮事件派发
- 文本绘制
- 抽出commonTxt用于控制多段文本绘制
private commonTxt(size: number, isCenter: boolean, isAssignment: boolean ,y: number, x?: number) {
const txt = new egret.TextField();
txt.width = egret.MainContext.instance.stage.stageWidth;
this.addChild(txt);
txt.y = y;
if (x) txt.x = x;
txt.textAlign = isCenter == true ? egret.HorizontalAlign.CENTER : egret.HorizontalAlign.LEFT;
txt.size = size;
txt.textColor = 0xffffff;
isAssignment ? this.txt = txt : txt.text = "试玩榜";
}
- 请求发送和请求解析
- onComplete() + onGetComplete()
private onComplete(): void {
const url: string = "xxxx";
const loader: egret.URLLoader = new egret.URLLoader();
loader.dataFormat = egret.URLLoaderDataFormat.TEXT;
loader.addEventListener(egret.Event.COMPLETE, this.onGetComplete, this);
const request: egret.URLRequest = new egret.URLRequest(url);
request.method = egret.URLRequestMethod.GET;
loader.load(request);
}
private onGetComplete(event: egret.Event):void {
const loader:egret.URLLoader = <egret.URLLoader> event.target;
let data:egret.URLVariables = loader.data;
// 采用js解析方法
let res = eval("("+data.toString()+")");
... // TODO: 其他处理
}
- easy-mock数据格式:
{
"data": {
"array|5-9": [{
"score": "@integer(1,100)",
"name": "@cname"
}]
}
}
3.发布游戏
当整个游戏制作完成后,我们需要将它进行发布,这里只涉及H5方面发布。
一句命令行而已的事:
参数说明:
egret publish [project_name] [--version [version]] [--runtime html5|native] [--passWorld]
$ egret publish xxx(项目名) --version 0.03(版本号)
发布项目,如果是在项目文件夹下编译,可以不加项目名称
打包成功后,会出现一个bin-release的文件夹
image.png然后把我框出来的1903....这个文件夹里面的东西,拖到服务器上,然后对应访问,就可以啦。
敲黑板划重点
如果说,我们平时在自我测试环节,起一个本地服务,然后手机在同一个网络下访问本机ip地址就可以
这样应该会比较方便,简单介绍一下这个步骤:
简单的http服务
首先安装http-server模块。
$ npm i -g http-server
运行发布完成的包
$ cd bin-release/web/190311152632
$ ls
index.html js manifest.json resource
$ hs -p 8088
Starting up http-server, serving ./
Available on:
http://127.0.0.1:8088
http://192.168.1.100:8088
Hit CTRL-C to stop the server
最后一级文件夹名字其实是时间戳。
这样我们便可以在pc浏览器或者手机浏览器中查看游戏了。
项目细究
>=2次使用,或有大部分common的,都抽象出来使用,尽量尝试用新语法来简化代码量
今日给自己灌的鸡汤:代码应该是一日写的比一日优雅才行,一个需求应思考多种写法,再找到最优解
精简繁琐for循环
在判断猜况的时候,需要使用到多重嵌套for循环,看着特别恶心,后面采用了这种方法用于简化:
const actions = () => {
const answerFalse = () => { this.answer_type = false };
const addScore = () => { this.score++; this.answer_type = true };
return new Map([
[{ left_type: 0, right_type: 0 }, answerFalse],
[{ left_type: 0, right_type: 1 }, answerFalse],
[{ left_type: 0, right_type: 2 }, addScore],
[{ left_type: 1, right_type: 0 }, addScore],
[{ left_type: 1, right_type: 1 }, answerFalse],
[{ left_type: 1, right_type: 2 }, answerFalse],
[{ left_type: 2, right_type: 0 }, answerFalse],
[{ left_type: 2, right_type: 1 }, addScore],
[{ left_type: 2, right_type: 2 }, answerFalse]
])
}
let action = [...actions()].filter(([key, value]) => (
key.left_type == this.left_type && key.right_type == this.right_type
));
action.forEach(([key, value]) => value.call(this));
Egret核心显示类
需要重新梳理一下这些类,以便下次写的时候,有点混
类 | 描述 |
---|---|
DisplObject | 显示对象基类,所有显示对象均继承自此类 |
DisplObjectContainer | 显示对象容器接口,所有显示对象容器均实现此接口 |
Bitmap | 位图,用来显示图片 |
Shape | 用来显示矢量图,可以用里面的方法绘制矢量图形 |
TextField | 文本类 |
BitmapText | 位图文本类 |
Sprite | 带有矢量绘制功能的显示容器 |
Stage | 舞台类 |
这里面的startscene,使用继承sprite,而没用displaObjeContainer,在这里简单列出它们之间的继承关系:
egret.Sprite -> egret.DisplayObjectContainer -> egret.DisplayObject
同时,提一点:shape与sprite的diff:
- shape:显示对象,一般用于绘制图形
- sprite:显示容器,在此基础上可以添加子容器 + 显示对象,一般用于create可以装载content的游戏层或者游戏对象
http://blog.sina.com.cn/s/blog_6b80d2ca0102vjx4.html
Egret中事件处理
egret中的事件机制是一套比较标准的事件处理架构。
简单来说,数据的提供者只需要在意发出数据对象,以及确保数据对象是egret.event类或者子类的实例即可,这种数据对象,也就是事件event
。
我们在游戏中涉及到按钮的一些交互效果,比如:点击开始游戏,进入游戏页面;点击Rank icon,弹出rank的弹框。
以上这些都会涉及倒egret的事件处理,我先简单罗列事件处理的一个基本流程:
- step1: 注册侦听器listener
- step2:发送事件
- step3:侦听事件
- step4:移除事件侦听器
这里我用startScene中点击开始游戏的事件处理,做一个简单事例:
startscene .ts:
// init fn
private init(){
...
// 注册listener
rank_btn.addEventListener(egret.TouchEvent.TOUCH_BEGIN, this.rank_btnCallback, this);
...
}
// start_btnCallback fn
private start_btnCallback(evt:egret.TouchEvent):void {
...
// 派发事件
let event:GameEvent = new GameEvent(GameEvent.GAME_GO);
this.dispatchEvent(event);
...
}
main.ts:
private createGameScene() {
....
//侦听事件
startScene.addEventListener(GameEvent.GAME_GO, this.go, this);
startScene.addEventListener(GameEvent.GAME_BLEED, this.startrank, this);
}
private go(){
// 手动回收侦听器
this.removeEventListener(GameEvent.GAME_GO, this.go, this);
this.removeChildren();
...
}
注意:这里存在一个问题:
在显示对象容器里的子显示对象上增加了事件侦听器(addEventListener),如果通过父级显示对象的removeChild移除了这个容器,那么有必要在egret.Event.REMOVED_FROM_STAGE事件里手动删除所有子对象注册的事件侦听器吗(removeEventListener)?还是说引擎会自动处理?
答案是:如果没有引用的话就会回收,但是为了保证一定回收最好手动移除,不然可能造成内存泄露
Egret支持ES6
在egret中默认设置是es5,所有很多es6的语法是不支持的,比如map这些...
yiwen那么如何更改配置项,让其支持es6语法呢?
step1:
找到根目录下的tsconfig.json文件,这是默认生成的:
{
"compilerOptions": {
"target": "es5",
"outDir": "bin-debug",
"experimentalDecorators": true,
"lib": [
"es5",
"dom",
"es2015.promise"
],
"types": []
},
"include": [
"src",
"libs"
]
}
step2:
- 将lib下的
es5
改成es2015
,也就是es6 - 在compilerOptions下加一行
"downlevelIteration": true,
,用于降级迭代器
更改后是这样:
{
"compilerOptions": {
"target": "es5",
"outDir": "bin-debug",
"experimentalDecorators": true,
"downlevelIteration": true,
"lib": [
"es2015",
"dom",
"es2015.promise"
],
"types":[]
},
"exclude": [
"node_modules"
]
}
step 3:
由于配置项更改了,需要重新build和run,再次执行:
> $ egret build xxx
> $ egret startserver xxx -a
之前...由于一些原因,本地的lib和远程github上的lib冲突了,导致项目跑不起来,然而各种...奇怪的方法尝试,最后找到问题,本地解决了,发现...无法把本地的lib推到远程的lib上...然和各种奇怪,反正那啥最后就强制了一把:git push -f ... 唉唉 真是粗暴
项目源码
代码中写了很多注释,基本都能看懂就不再赘述啦~
网友评论