首页 > 代码库 > Egret初体验–躲避类小游戏
Egret初体验–躲避类小游戏
下面简单介绍一下我这个游戏：
基本上就3个画面（准备再添加一个胜利的界面）
开始画面，一个按钮，点击进入游戏
游戏画面，滚动的背景，触摸移动的老鹰，从天而降的翔，以及右上角的时间条
结束画面，显示结果，关注按钮和重玩一次按钮
游戏主文件：GameContainer.ts（游戏逻辑）
4个类文件：GameUtil.ts（功能集合），BgMap.ts（背景滚动），Shit.ts（翔的创建和回收），ScorePanel.ts（结果展示）
/**GameUtil.ts*//**基于圆心的碰撞检测*/ public static hitTestP(obj1:egret.DisplayObject,obj2:egret.DisplayObject):boolean { var rect2x:number; var rect2y:number; rect2x = obj2.x + obj2.width/2; rect2y = obj2.y + obj2.height/2; return obj1.hitTestPoint(rect2x, rect2y); }/**根据name关键字创建一个Bitmap对象。name属性请参考resources/resource.json配置文件的内容。*/ export function createBitmapByName(name:string):egret.Bitmap { var result:egret.Bitmap = new egret.Bitmap(); var texture:egret.Texture = RES.getRes(name); result.texture = texture; return result; }
/**BgMap.ts*//**可滚动的背景*/ export class BgMap extends egret.DisplayObjectContainer { /**图片引用*/ private bmpArr:egret.Bitmap[]; /**图片数量*/ private rowCount:number; /**stage宽*/ private stageW:number; /**stage高*/ private stageH:number; /**纹理本身的高度*/ private textureHeight:number; /**控制滚动速度*/ private speed:number = 4; public constructor() { super(); this.addEventListener(egret.Event.ADDED_TO_STAGE,this.onAddToStage,this); } /**初始化*/ private onAddToStage(event:egret.Event){ this.removeEventListener(egret.Event.ADDED_TO_STAGE,this.onAddToStage,this); this.stageW = this.stage.stageWidth; this.stageH = this.stage.stageHeight; var texture:egret.Texture = RES.getRes("bgImage"); this.textureHeight = texture.textureHeight;//保留原始纹理的高度，用于后续的计算 this.rowCount = Math.ceil(this.stageH/this.textureHeight)+1;//计算在当前屏幕中，需要的图片数量 this.bmpArr = []; //创建这些图片，并设置y坐标，让它们连接起来 for(var i:number=0;i<this.rowCount;i++) { var bgBmp:egret.Bitmap = AvoidShit.createBitmapByName("bgImage"); bgBmp.y = this.textureHeight*i-(this.textureHeight*this.rowCount-this.stageH); this.bmpArr.push(bgBmp); this.addChild(bgBmp); } } /**开始滚动*/ public start():void { this.removeEventListener(egret.Event.ENTER_FRAME,this.enterFrameHandler,this); this.addEventListener(egret.Event.ENTER_FRAME,this.enterFrameHandler,this); } /**逐帧运动*/ private enterFrameHandler(event:egret.Event):void { for(var i:number=0;i<this.rowCount;i++) { var bgBmp:egret.Bitmap = this.bmpArr[i]; bgBmp.y+=this.speed; //判断超出屏幕后，回到队首，这样来实现循环反复 if(bgBmp.y > this.stageH) { bgBmp.y = this.bmpArr[0].y-this.textureHeight; this.bmpArr.pop(); this.bmpArr.unshift(bgBmp); } } } /**暂停滚动*/ public pause():void { this.removeEventListener(egret.Event.ENTER_FRAME,this.enterFrameHandler,this); } }/**Shit.ts*//**大便，利用对象池*/ export class Shit extends egret.Bitmap { private static cacheDict:Object = {}; /**生产*/ public static produce(textureName:string):AvoidShit.Shit { if(AvoidShit.Shit.cacheDict[textureName]==null) AvoidShit.Shit.cacheDict[textureName] = []; var dict:AvoidShit.Shit[] = AvoidShit.Shit.cacheDict[textureName]; var shit:AvoidShit.Shit; if(dict.length>0) { shit = dict.pop(); } else { shit = new AvoidShit.Shit(RES.getRes(textureName)); } shit.textureName = textureName; return shit; } /**回收*/ public static reclaim(shit:AvoidShit.Shit,textureName:string):void { if(AvoidShit.Shit.cacheDict[textureName]==null) AvoidShit.Shit.cacheDict[textureName] = []; var dict:AvoidShit.Shit[] = AvoidShit.Shit.cacheDict[textureName]; if(dict.indexOf(shit)==-1) dict.push(shit); } public textureName:string; public constructor(texture:egret.Texture) { super(texture); } }/**ScorePanel.ts*//**成绩显示*/ export class ScorePanel extends egret.Sprite { private txt:egret.TextField; public constructor() { super(); var g:egret.Graphics = this.graphics; g.drawRect(0,0,100,100); g.endFill(); this.txt = new egret.TextField(); this.txt.width = 100; this.txt.height = 100; this.txt.textAlign = "center"; this.txt.textColor = 0x00dddd; this.txt.size = 24; this.txt.y = 60; this.addChild(this.txt); this.touchChildren = false; this.touchEnabled = false; } public showScore(value:number):void { var msg:string = value+""; this.txt.text = msg; } }上面4个源码基本是基于官方的Demo而来，下面是游戏逻辑的代码：（这个代码太长就只贴主要部分）
游戏初始画面就是把标题，按钮都堆积在上面，比较简单，给按钮增加一个点击事件的监听就行了
this.icon.addEventListener(egret.TouchEvent.TOUCH_TAP, this.gameStart, this);
游戏进行界面，主要有三点：时间轴，翔，碰撞检测（GameUtil做了，直接用就行）
时间轴有三部分：背景框，中间的轴，遮罩层。
/**背景框*/ this.timelinebg = AvoidShit.createBitmapByName("tlbgImage"); this.timelinebg.x = this.stageW - this.timelinebg.width - 10; this.timelinebg.y = 10; this.addChild(this.timelinebg);/**中间的轴*/ this.timeline = AvoidShit.createBitmapByName("tlImage"); this.timeline.x = this.stageW - this.timeline.width - 13; this.timeline.y = 14; this.addChild(this.timeline);/**遮罩层*/ this.timelinemask = new egret.Rectangle(0, 0, this.timeline.width, this.timeline.height); this.timeline.mask = this.timelinemask;/*计时器增加遮罩层刷新的方法*/ this.gameTimer = new egret.Timer(this.timeDelay,this.timeCount); this.gameTimer.addEventListener(egret.TimerEvent.TIMER, this.timelineDown, this);/**遮罩层移动*/private timelineDown(evt:egret.TimerEvent):void { this.timelinemask.y += this.timeline.height/20; }翔的产生和销毁都是调用Shit.ts中的方法
/**创建大便*/ private createShit(evt:egret.TimerEvent):void{ var shit:AvoidShit.Shit = AvoidShit.Shit.produce("shitImage"); shit.x = Math.random()*(this.stageW-shit.width); shit.y = -shit.height-Math.random()*300; this.addChildAt(shit,this.numChildren-1); this.shits.push(shit); }//大便运动 var theShit:AvoidShit.Shit; var enemyFighterCount:number = this.shits.length; for(i=0;i<enemyFighterCount;i++) { theShit = this.shits[i]; theShit.y += this.downTimes * speedOffset; if(theShit.y>this.stageH) delArr.push(theShit); } for(i=0;i<delArr.length;i++) { theShit = delArr[i]; this.removeChild(theShit); AvoidShit.Shit.reclaim(theShit,"shitImage"); this.shits.splice(this.shits.indexOf(theShit),1); }游戏结束有两个条件，一是时间到了，二是碰到翔
结束画面就是展示成绩和提供两个按钮
最主要的应该是微信分享功能:
需要用到两个文件libs/WeixinAPI.d.ts和launcher/WeixinAPI.js
并在html页面中增加调用
private doShare(n:number,m:number) { WeixinApi.ready(function(api:WeixinApi) { var info:WeixinShareInfo = new WeixinShareInfo(); info.title = "我本卖萌鸟，何处惹尘埃？"; if (m == 0) { info.desc = "我本卖萌鸟，何处惹尘埃？"; } else { info.desc = "我本卖萌鸟，何处惹尘埃？屎开，屎开～～我躲过了" + n + "坨大便，你行吗？"; } info.link = "http://games.11wj.com/fly/launcher/release.html"; info.imgUrl = "http://games.11wj.com/fly/resource/assets/icon.png"; api.shareToFriend(info); api.shareToTimeline(info); }) }Egret初体验–躲避类小游戏
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。