【小游戏：顺序击破格子】egret引擎实战(一)

最近因为项目的需要，开始接触egret引擎，现在把第一写的练手小游戏总结一下，方便以后回顾走了什么坑。

egret是基于TypeSc语言和JavaScript语言的2D引擎。该引擎目前功能还比较简单，使用的人感觉还不太多，由于HTML5游戏是流行趋势，所以也开始有比较多的人投入这个开发中。

具体的egret详细介绍可到官网查看。

练手的这个游戏很简单，就是在一定的时间内，每一轮的格子按照某个随机顺序出现，然后用户需要按照格子出现的顺序点击，顺序点对加分，顺序点错没得分。

1.首先创建一个工程，在命令行下输入：

egret creat SequenceGrid

此处的SequenceGrid是我们的工程名。

2. 使用webStorm这个ide打开我们工程。

首先我关注的是格子的实现问题。

由于游戏比较简单，我们最多创建9个格子。

格子是一个对象，在egret可以继承Sprite。

格子需要有几个接口，例如点对时候的动画，点错时候的动画，开始出现的时候的动画。

而格子内部显示的对象，我们可以Bitmap来实现。

class Grid extends egret.Sprite {public  constructor(width:number, height:number) {super();this.width = this.fWidth = width;this.height = this.fHeight = height;this.spaceMargin = 10;this.createSubviews();}private spaceMargin:number;private fWidth:number;private fHeight:number;public grid:egret.Bitmap;private createSubviews():void {var shape:egret.Bitmap = new egret.Bitmap();shape.width = this.fWidth - this.spaceMargin * 2;shape.height = this.fHeight - this.spaceMargin * 2;shape.x = this.spaceMargin + shape.width / 2;shape.y = this.spaceMargin + shape.height / 2;shape.anchorX = shape.anchorY = 0.5;this.grid = shape;}/*** 填充颜色* @param color*/private updateTextureWithName(name:string):void {var texture:egret.Texture = RES.getRes(name);this.grid.texture = texture;}/*** 填充为粉色*/public fillPinkColor():void {this.updateTextureWithName( "grid_pink" );}/*** 出现时由小变大动画,0.2s*/public gridShow() : void {this.updateTextureWithName( "grid_gray" );this.grid.alpha = 1;this.grid.scaleX = this.grid.scaleY = 0.5;this.addChild(this.grid);var tween = egret.Tween.get(this.grid);tween.to({scaleX:1.2, scaleY:1.2}, 150);tween.to({scaleX:1, scaleY:1}, 50);this.grid.scaleX = this.grid.scaleY = 1;}/*** 正确击中，放大，淡化*/public gridHitRight() : void {var tween = egret.Tween.get(this.grid);tween.to({scaleX:1.3, scaleY:1.3, alpha:0.1}, 170);tween.call(this.removeFromSuperview, this);}/*** 将grid移除出视图*/public removeFromSuperview() : boolean {if (this.getChildIndex(this.grid) != -1) {this.removeChild(this.grid);return true;}return false;}/*** 击错格子，闪一闪*/public gridHitWrong() : void {this.updateTextureWithName( "grid_gray" );var tween = egret.Tween.get(this.grid);tween.to({alpha:0.3},120);tween.to({alpha:1},50);tween.to({alpha:0.0},120);}
}

3. 以上是格子的一些实现,现在我们来做一个控制器，来实现九个格子的逻辑操作：

我们创建多一个类，叫做 GridContainer.ts ，用它来作为控制器。

我们先创建一些成员变量。

    public index:number; //索引public gridArray:Array<Grid>; //存放9个格子引用的数组public sequenceArray:Array<number>; //存放随机数列public soundMan:SoundManager; //音频播放管理private sequence:GridSequence;  //正序还是反序，enum

首先我们要在GridContainer 里面创建9个Grid：

<span style="white-space:pre">  </span>var gridWidth = this.fWidth / 3;var gridHeight = this.fHeight / 3;for (var i:number = 0; i < 9; i++) {var grid:Grid = new Grid(gridWidth, gridHeight);grid.x = (i % 3) * gridWidth;grid.y = ((i / 3) >> 0) * gridHeight;grid.name = (i + 1).toString();this.gridArray.push(grid);this.addChild(grid);console.log(grid.x,grid.y,grid.width,grid.height);}

4. 接下来，我们创建一个接口，当这个接口被调用的时候，我们就开始依照顺序显示格子。

/*** 根据序列显示格子*/public showGridBySequenceArray(arr:Array<number>,sequence:GridSequence):void {this.sequenceArray = arr;this.index = 0;this.sequence = sequence;this.showGridWithIndex();}/*** 根据具体索引显示格子*/public showGridWithIndex() :void {var realIndex:number = this.sequenceArray[this.index] - 1;var grid:Grid =  <Grid>this.gridArray[realIndex];grid.gridShow();this.index ++;if (this.index < this.sequenceArray.length) {//继续下一个格子的显示var timer:egret.Timer = new egret.Timer(100,1);timer.addEventListener(egret.TimerEvent.TIMER_COMPLETE,this.showGridWithIndex,this);timer.start();} else {//按照序列已经显示完全部格子，进行下一步，开启用户点击var timer:egret.Timer = new egret.Timer(300,1);timer.addEventListener(egret.TimerEvent.TIMER_COMPLETE,this.allGridBeEnableTouch,this);timer.start();}}

5. 当加载格子完毕后，我们开始让格子可以接受点击事件

    /*** 变换颜色，启动点击事件*/private allGridBeEnableTouch():void {for (var i:number = 0; i < this.sequenceArray.length; i++) {var realIndex:number = this.sequenceArray[i] - 1;var grid:Grid =  <Grid>this.gridArray[realIndex];grid.fillPinkColor();grid.addEventListener(egret.TouchEvent.TOUCH_TAP,this.onGridDidTouch,this);grid.touchEnabled = true;}if (this.sequence == GridSequence.InvertedSequence) {this.index = this.sequenceArray.length - 1;} else {this.index = 0;}}

6. 加载完毕后，每个格子都有了监听功能，这个时候就等待用户的点击。

当用户开始点击后，我们要根据预先设置好的正序反序来查看点击顺序是否正确。

/*** 点击事件处理*/private onGridDidTouch(event:egret.TouchEvent):void {var grid = <Grid>event.target;grid.removeEventListener(egret.TouchEvent.TOUCH_TAP,this.onGridDidTouch,this);grid.touchEnabled = false;this.isGridBeHitRight(grid);}/*** 检测是否点击正确*/private isGridBeHitRight(grid:Grid):void {var nameIndex = this.sequenceArray[this.index];if (parseInt(grid.name) == nameIndex) {grid.gridHitRight();this.checkRoundDone();} else {this.soundMan.tapWithWrongSound();for (var i:number = 0; i < this.gridArray.length; i++) {var otherGrid:Grid = <Grid>this.gridArray[i];otherGrid.removeEventListener(egret.TouchEvent.TOUCH_TAP,this.onGridDidTouch,this);otherGrid.touchEnabled = false;otherGrid.gridHitWrong();}// notification that next playvar timer:egret.Timer = new egret.Timer(750,1);timer.addEventListener(egret.TimerEvent.TIMER_COMPLETE,this.gridNotFinishedNotification,this);timer.start();}}

7. 在上面的处理中，如果用户点击错误，则直接发出结束这一回合的通知，如果用户点击正确，这个时候也要检测一下，是否已经把所有的格子都点击完了

当然，根据正反序不一样，我们检测的逻辑也不一样。

/*** 检测这局是否结束*/private checkRoundDone() :void {if (this.sequence == GridSequence.InvertedSequence) {if ( (--this.index) < 0 ) {// notification that all donethis.soundMan.tapWithRightSound();var timer:egret.Timer = new egret.Timer(800,1);timer.addEventListener(egret.TimerEvent.TIMER_COMPLETE,this.gridDidFinishedNotification,this);timer.start();}} else {if ( (++this.index) > ( this.sequenceArray.length - 1) ) {// notification that all donethis.soundMan.tapWithRightSound();var timer:egret.Timer = new egret.Timer(800,1);timer.addEventListener(egret.TimerEvent.TIMER_COMPLETE,this.gridDidFinishedNotification,this);timer.start();}}}

【小游戏：顺序击破格子】egret引擎实战(一)相关推荐

c语言做搬山游戏,C语言实现搬山小游戏，适合新手的项目实战，超易上手！
原标题:C语言实现搬山小游戏,适合新手的项目实战,超易上手! 问题描述设有n座山,计算机与人作为比赛的双方,轮流搬山.规定每次搬山数不能超过k座,谁搬最后一座谁输. 游戏开始时,计算机请人输入山的总 ...
淘宝小游戏了解一下？技术引擎让你喜提2000条锦鲤
今天的淘宝是月活过6亿的超级APP,它承载的不仅仅是购物的能力,实际上在淘宝有非常丰富的内容生态和内容体验.比如说以淘宝头条为代表的资讯类模块,以淘宝直播为代表的直播模块.对于游戏这种内容形态,会在淘 ...
吐槽laya：H5小游戏开发应该用什么引擎好？laya、cocos还是unity？
我看有人推荐laya,放在H5小游戏的前三排名,这压根不靠谱. laya只能算个半成品,整体非常垃圾,如果是首次选择游戏引擎,至少转去cocos,实在选laya,那也没办法了. 下面说说laya有什么 ...
python猜谜语小游戏代码_树莓派趣学实战100例--网络应用+Python编程+传感器+服务器搭建...
导语内容提要本书是面向第4代树莓派(Raspberry Pi4B)的全新实战指南.树莓派(Raspberry Pi)是一款价格低廉.只有一张信用卡大小的计算机.然而麻雀虽小,却五脏俱全,树莓派是一 ...
h5小游戏嵌入到微信小游戏中（以egret为例）
H5小游戏源代码不能直接转换为微信小游戏发布,但是可以把现有的h5小游戏嵌入到微信小游戏中,这里使用egret举例.使用egret创建一个空的微信小游戏,在main.ts中资源加载完成后执行Webvi ...
微信小游戏分包资源要放服务器吗,微信小游戏的分包（Laya引擎）
2020年8月15为止,微信小游戏的代码包总大小规定是最大16M,每个包不超过4M.未来随着5G的普及是否会扩大容量不得而知,但是16M一个小游戏基本也够用,再加上云资源的加载,实际游戏体积还能变得更 ...
白鹭引擎正式支持微信小游戏开发
12月28日微信迎来更新,正式上线小游戏,并开放了小游戏开发文档和开发者工具.在微信发布新版本后,白鹭引擎立即添加了对于微信小游戏开发的支持,开发者只需要使用白鹭引擎的最新版本,通过使用白鹭引擎完整工 ...
白鹭引擎开发微信小游戏新手教程文档
开发环境准备 • Egret Launcher 1.0.32 以上版本(包括 1.0.32) • 白鹭引擎 5.1.2 以上版本(包括 5.1.2) • 准备最新版微信开发者工具.下 ...
白鹭引擎开发微信小游戏进阶教程文档
注意: • 因为小游戏特殊机制,涉及到的小游戏接口主要逻辑都需要写在小游戏逻辑代码内,但是可以通过 Egret 代码来调用 • 后续版本 Egret 将会提供调用小游戏接口模板,届时大家可 ...

【小游戏：顺序击破格子】egret引擎实战(一)

【小游戏：顺序击破格子】egret引擎实战(一)相关推荐

最新文章

热门文章