Egret 开发HTML5⼩游戏代码分享
本游戏为《Egret 游戏开发指南》中的案例。作者将代码在这⾥做⼀下分享。案例中有两个主要的代码⽂件，⼀个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 .dFill (); this .addChild (bg); this .textCount = new egret .TextField (); this .Color = 0xffffff ; this .textCount.y = 530; this . = "分数：0"; this .textTimer = new egret .TextField (); this .Color = 0xffffff ; this .textTimer.y = 620; this . = "倒计时"; this .textDes = new egret .TextField (); this . = "点击第⼀个颜⾊开始"; this .textDes.y = 700;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
这是Circle.ts： this .textDes.y = 700; this .Align = this .Align = this .Align = egret .HorizontalAlign.CENTER ; this .textCount.width = this .textTimer.width = this .textDes.width = stageW ; this .Color = this .Color = this .Color = 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 .textCoun
< = "分数:" + (++this .count ); this .timer.start (); }else if(this .color == e .data ){ this . = "分数:" + (++this .count ); } } private onTimer(e: egret .TimerEvent ): void{ this . = "倒计时：" + (this .peatCount -this .timer.currentCount ); } private onTimerComplete(e: egret .TimerEvent ): void{ this . = "这不是极限，刷新再来⼀次!"; this .removeEventListener (Circle .Event _Click, this .onClickCircle , this); }}
38
39
40
41
42
html5颜代码43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83class 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];
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//随机函数来实现每次创建圆时，从colorList 数组中随机获取颜⾊值。 private randomColor ():number{ return this .und(Math.random() * this .colorList.length)]; } //初始化⽅法 private init (cx: number,cy: number,cr: number):void { this .color = this .randomColor(); this .shape = new egret.Shape(); this .aphics.beginFill(this .color); this .aphics.drawCircle(0, 0, cr); this .dFill(); //设定⽮量圆的位置为⽗类中⼼点 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 = (this );
({alpha:0.1}, 500, egret.Ease.sineOut); tween.call(function(){ this .visible = !1; veChild(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] = (circleList[g]); tweenList[g].to({ alpha: 1,scaleX:1, scaleY:1},1000, egret.Ease.sineIn); g++; }
1718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
效果如图所⽰： } }}
828384
发表评论