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);
            })
        }

时间： 2024-11-09 00:44:13

Egret初体验–躲避类小游戏

Egret初体验–躲避类小游戏的相关文章

WEBGL学习笔记（七）：实践练手1-飞行类小游戏之游戏控制

你的智商几年级，来体验这款小游戏吧！

微信小游戏入门与实战引爆朋友圈

使用Laya引擎开发微信小游戏（上）

微信小游戏入门与实战刷爆朋友圈

微信为什么要搞一个小游戏？

小游戏:线圈打方块

谋哥：社交小游戏App将是下一个金矿!

了解python,利用python来制作日常猜拳，猜价小游戏