Egret开发HTML5小游戏代码分享

本游戏为《Egret HTML5游戏开发指南》中的案例。作者将代码在这里做一下分享。案例中有两个主要的代码文件，一个Main.ts，一个Circle.ts。在Circle.ts中使用了egret.Tween，这是用来创建动画缓存的类。需要在egretProperties.json中配置tween模块。如图所示：
下面给出两个主要代码，这是Main.ts：

class Main extends egret.DisplayObjectContainer {public constructor() {super();this.addEventListener(egret.Event.ADDED_TO_STAGE, this.onAddToStage, this);this.addEventListener(Circle.Event_Click, this.onClickCircle, this);}private textCount: egret.TextField;private textTimer: egret.TextField;private textDes: egret.TextField;private timer: egret.Timer;private color: number;private onAddToStage(event:egret.Event){var stageW: number = this.stage.stageWidth;var stageH: number = this.stage.stageHeight;var bg = new egret.Shape();bg.graphics.beginFill(0xffffcc);//绘制背景，设定背景大小为应用窗口大小bg.graphics.drawRect(0, 0, stageW, stageH);bg.graphics.endFill();this.addChild(bg);this.textCount = new egret.TextField();this.textCount.textColor = 0xffffff;this.textCount.y = 530;this.textCount.text = "分数：0";this.textTimer = new egret.TextField();this.textTimer.textColor = 0xffffff;this.textTimer.y = 620;this.textTimer.text = "倒计时";this.textDes = new egret.TextField();this.textDes.text = "点击第一个颜色开始";this.textDes.y = 700;this.textCount.textAlign = this.textTimer.textAlign = this.textDes.textAlign = egret.HorizontalAlign.CENTER;this.textCount.width = this.textTimer.width = this.textDes.width = stageW;this.textCount.textColor = this.textTimer.textColor = this.textDes.textColor = 0x000000;this.addChild(this.textCount);this.addChild(this.textTimer);this.addChild(this.textDes);this.timer = new egret.Timer(1000,30);this.timer.addEventListener(egret.TimerEvent.TIMER, this.onTimer, this);this.timer.addEventListener(egret.TimerEvent.TIMER_COMPLETE, this.onTimerComplete, this);//初始化4个矢量圆var radius: number = 50;for(var i: number = 0; i < 4; i++){for(var t: number = 0; t < 4; t++){var tempx: number = 150 + radius * 2 * t;var tempy: number = 140 + radius * 2 * i;var circle:Circle = new Circle(tempx, tempy, radius);this.addChild(circle);}}  }private count: number = 0;private onClickCircle(e:any): void{if(this.count == 0){this.color = e.data;this.textCount.text = "分数:" + (++this.count);this.timer.start();}else if(this.color == e.data){this.textCount.text = "分数:" + (++this.count);}}private onTimer(e: egret.TimerEvent): void{this.textTimer.text = "倒计时：" + (this.timer.repeatCount-this.timer.currentCount);}private onTimerComplete(e: egret.TimerEvent): void{this.textDes.text = "这不是极限，刷新再来一次!";this.removeEventListener(Circle.Event_Click, this.onClickCircle, this);}
}

这是Circle.ts：

class Circle extends egret.Sprite{public constructor(cx: number,cy: number,cr:number){super();this.init(cx,cy,cr);}private shape:egret.Shape;//用来画圆的矢量类private shapex:number;//记录当前圆X坐标的属性private shapey:number;//记录当前圆Y坐标的属性private shaper:number;//记录当前圆半径的属性private color:number;//记录当前圆的颜色public static Event_Click:string = "event_click";private colorList:number[] = [13408665, 16777113, 6710937, 16750848,16776960, 39372, 13421721,13382553, 10079232, 16737894, 16776960, 3381708, 13395456, 10066329, 13421619,16750899, 16777164, 39219, 39372, 13421772, 16737894, 16737792, 16777062,39270, 13395507, 16764057, 13395456, 13369446, 39321,16763955];//随机函数来实现每次创建圆时，从colorList数组中随机获取颜色值。private randomColor():number{return this.colorList[Math.round(Math.random() * this.colorList.length)];}//初始化方法private init(cx: number,cy: number,cr: number):void{this.color = this.randomColor();this.shape = new egret.Shape();this.shape.graphics.beginFill(this.color);this.shape.graphics.drawCircle(0, 0, cr);this.shape.graphics.endFill();//设定矢量圆的位置为父类中心点this.shape.x = -cr;this.shape.y = -cr;this.shapex = cx;this.shapey = cy;this.shaper = cr;this.touchEnabled = !0;//当前显示对象可以被触摸//侦听用户端移动与触摸事件this.addEventListener(egret.TouchEvent.TOUCH_TAP, this.onTouch, this, !1);this.addChild(this.shape);this.x = cx;this.y = cy;}//触摸事件private onTouch(e: egret.TouchEvent): void{var par = this.parent;par.dispatchEventWith(Circle.Event_Click, false, this.color);this.touchEnabled = !1;var tween:egret.Tween = egret.Tween.get(this);tween.to({alpha:0.1}, 500, egret.Ease.sineOut);tween.call(function(){this.visible = !1;par.removeChild(this);this.removeEventListener(egret.TouchEvent.TOUCH_TAP, this.onTouch, this);}, this);var circleList: Circle[] = [];var tweenList:egret.Tween[] = [];var radius: number = this.shaper/2;var tempx: number;var tempy: number;var tempr: number;var g: number = 0;for(var i: number = 0; i < 2; i++){for(var t: number = 0;t < 2;t++){tempx = this.shapex-this.shaper + radius*2 * t;tempy = this.shapey-this.shaper + radius*2 * i;circleList[g] = new Circle(tempx,tempy,radius);circleList[g].alpha = 0.1;circleList[g].scaleX = 0.8;circleList[g].scaleY = 0.8;par.addChild(circleList[g]);tweenList[g] = egret.Tween.get(circleList[g]);tweenList[g].to({ alpha: 1,scaleX:1, scaleY:1},1000, egret.Ease.sineIn);g++;}}}
}

效果如图所示：

Egret开发HTML5小游戏代码分享相关推荐

egret开发HTML5小游戏-《猫猫大作战》（一）
ps:本文适用于和我一样刚刚入门egret的同学们,大佬看到这里可以忙别的去了. 之前用egret引擎设计了一款双人设计小游戏-<疯狂大乱斗>,算是初步了解了引擎的使用,这次打算开发一款基 ...
egret开发HTML5小游戏-疯狂大乱斗
简介寒假开始,花了5天时间利用Egret引擎开发了一款HTML5小游戏,最终界面效果如下: [游戏首页] [游戏图鉴] [游戏截图] 项目结构主要的类就是list.ts和Main.ts,再就是存放 ...
如何使用egret开发微信小游戏（一）Hello World
如何使用egret开发微信小游戏(一)Hello World 微信小游戏上线以来,凭借微信海量的用户,取得了巨大的成功,从跳一跳到大家一起来滑水,从2d游戏到3d游戏,许多游戏开发者都赚的盆满钵满,我 ...
开发 HTML5 小游戏
Html5小游戏在介绍小游戏之前,先看一个框架 Phaser. Phaser 框架是一个快速.免费且开源的 HTML5 游戏开发框架,它提供了 Canvas 和 WebGL 两种渲染方式,兼容 P ...
第一次使用Egret开发微信小游戏经验总结（包括排行榜排序，每周一数据清零，超越好友等处理）
最近项目组立项了个小游戏,用Egret(白鹭)开发,本来游戏核心功能2天就完成了,后来准备接入微信好友排行榜的时候,用到了子域,加入分享给好友的时候,图片合成后分享给微信好友有时候不能显示出图片内容. ...
一款WP小游戏代码分享
首先声明游戏是H5的代码,当然游戏部分不是我写的,感谢@LeZhi的分享,关于H5我还在学习,这里只是简单介绍一下如何把一款现成的H5游戏封装成一款WP游戏(当然也可以做成Windows游戏). 大家 ...
Egret 开发H5小游戏
Egret Wing 代码编辑器 ResDepot 静态资源加载器项目目录主要构成:resource文件夹下的新建的游戏文件(用于存放图片,音频和json文件等资源).新建游戏同名的 .ts 文件( ...
H5页面制作和HTML5小游戏制作平台哪家好
H5页面是由第五代HTML互联网超文本语言进行开发实现的,多数在微信上进行宣传,例如TOM游戏制作平台的游戏案例中也是基于h5进行开发的,包括现在我们看到的网页,都是基于h5这个规范的实现的,现在随着 ...
Egret白鹭引擎开发微信小游戏之保存图片到相册
玩家在玩小游戏的过程中,很多时候想要保存一下当前的截图.或者保存游戏内精美的画面到相册,一方面是为了记录在游戏中的美好时刻,另一方面则是能够更好地和朋友们分享我在这游戏中获得的荣耀和快乐,因为我们就会 ...

Egret开发HTML5小游戏代码分享

Egret开发HTML5小游戏代码分享相关推荐

最新文章

热门文章