Egret白鹭引擎实例开发之密室逃生RoomRun(五)游戏场景

一、点击开始游戏后通过游戏控制类将游戏场景添加到舞台

image.png

游戏场景初始化游戏背景图、分数框、关卡框、上下墙体、角色

二、墙体

墙体分为上下两个区域,总共有8列,每一列先随机生成底部的高度,再利用舞台的高度减去底部的高度,即为顶部的高度。当然这里边顶部高度需要随机至少一个减去主角可以容纳空间的高度,否则主角必死无疑

		let min:number = 150;
		let flag:boolean = false;
		let len:number = 8;
		let w:number = GameConst.StageW / len;        
		for(let i:number = 0; i < len; i++) {
			var h:number = min + Math.floor(Math.random() * 8) * 10;
            this.bottomRects.push(new egret.Rectangle(i * w, GameConst.StageH - h, w, h));

            h = GameConst.StageH - h; 
            if (Math.random() < 0.2 || (!flag && i == len - 1)) {
                var index:number = Math.floor(Math.random() * this.spaceArr.length);
                h -= this.spaceArr[index];
                flag = true;
            }
            this.topRects.push(new egret.Rectangle(i * w, 0, w, h));
		}

然后通过墙体图片填充对应位置的区域

    private fullFront(bgSptite:egret.Sprite, rects:Array<egret.Rectangle>, isBottom:boolean = false):void {
        bgSptite.cacheAsBitmap = false;

        this.clearBg(bgSptite);
        var len:number = rects.length;
        for (var i:number = 0; i < len; i++) {
            var rec:egret.Rectangle = rects[i];
            var bitmap:egret.Bitmap;
            
            if (this.bgBitmaps.length) {
                bitmap = this.bgBitmaps.pop();
            } else {
                bitmap = new egret.Bitmap();
                bitmap.texture = this.bg;
            }
            bitmap.scrollRect = rec;
            bitmap.x = rec.x;
            bitmap.y = rec.y;
            bgSptite.addChild(bitmap);
        }
    }

可以看到底部的上边缘和顶部的下边缘有画线,这样看起来比较美观,画线主要lineTo将边缘修饰好

    private drawLine():void {
        var lineH:number = 10;
        this.topLine.graphics.clear();
        this.topLine.graphics.lineStyle(lineH, 0x33E7FE);
        this.bottomLine.graphics.clear();
        this.bottomLine.graphics.lineStyle(lineH, 0x33E7FE);
        this.drawTopLine(lineH / 2);
        this.drawBottomLine(lineH / 2);
        this.topLine.graphics.endFill();
        this.bottomLine.graphics.endFill();
    }
    private drawTopLine(lineH:number):void {
        var len:number = this.topRects.length;
        for (var i:number = 0; i < len; i++) {
            var rec:egret.Rectangle = this.topRects[i];
            if (i == 0) {
                this.topLine.graphics.moveTo(rec.x, rec.height);
                this.topLine.graphics.lineTo(rec.x + rec.width, rec.height);
            } else {
                this.topLine.graphics.lineTo(rec.x, rec.height);
                this.topLine.graphics.lineTo(rec.x + rec.width, rec.height);
            }
        }
    }
    private drawBottomLine(lineH:number):void {
        var len:number = this.bottomRects.length;
        for (var i:number = 0; i < len; i++) {
            var rec:egret.Rectangle = this.bottomRects[i];
            if (i == 0) {
                this.bottomLine.graphics.moveTo(rec.x, rec.y + lineH);
                this.bottomLine.graphics.lineTo(rec.x + rec.width, rec.y + lineH);
            } else {
                this.bottomLine.graphics.lineTo(rec.x, rec.y + lineH);
                this.bottomLine.graphics.lineTo(rec.x + rec.width, rec.y + lineH);
            }
        }
    }

最后将顶部的墙体上移-200的距离,这样开始阶段上下墙体将是敞开状态

this.topContianer.y = -200;

三、主角

通过setRolePos设置主角的位置

private setRolePos(index:number, offY:number = 17, offX:number = 0, isInit:boolean = false):void {
        if (!isInit) {
            if (this.rolePosIndex > index) {
                index = this.rolePosIndex - 1;
            }
            else if (this.rolePosIndex < index) {
                index = this.rolePosIndex + 1;
            }
        }
        this.rolePosIndex = index;
        var rec:egret.Rectangle = this.bottomRects[index];
        //一次只移动一格
        this.role.x = rec.x + rec.width / 2 + offX;
        this.role.y = rec.y + offY;
    }

在舞台上添加点击事件,点击屏幕主角之多移动一格,向点击位置靠拢

    /**点击事件 */
    private onClick(e:egret.TouchEvent):void {
        let len:number = this.bottomRects.length;
        for(let i:number = 0; i < len; i++) {
            let rec:egret.Rectangle = this.bottomRects[i];
            if(e.stageX > rec.x && e.stageX < rec.x + rec.width) {
                this.setRolePos(i);
                break;
            }
        }
    }

主角需要在有限时间内移动到合适的位置躲避墙体的掉落

四、结果

墙体会在1.5s后晃动然后掉落

    private shakeRun() {
        //墙体晃动效果
       this.shake1.run(this.topContianer, 5, this.land.bind(this));
    }
    private land() {
        let self = this;
        //一波墙体运动之后移除点击事件
        this.stage.removeEventListener(egret.TouchEvent.TOUCH_TAP, this.onClick, this);
        //上面的模块往下运动
        egret.Tween.get(this.topContianer).to({"y":0}, 100).call(function():void {
            self.landOver();
        })
    }

掉落结束后,设置主角的状态,并判断主角是否存活,若是进入下一关,否则游戏结束

    public landOver() {
        //根据离墙体的高度判断现在的状态
        this.checkState();
        // this.shake1.run(this.topContianer, 3);
        //
        this.shake2.run(this.bottomContianer, 3, this.checkResult.bind(this));
    }
    //
    private checkState() {
        let space:number = this.getSpace();
        if (space == 0) {
            this.role.setState(Role.STATE5);
        } else if (space == this.spaceArr[2]) {
            this.role.setState(Role.STATE4);
        } else if (space == this.spaceArr[0]) {
            this.role.setState(Role.STATE3);
        } else if (space == this.spaceArr[1]) {
            this.role.setState(Role.STATE2);
        }
        if (space == 0) {
            this.setRolePos(this.rolePosIndex, -10, 4);
        }
    }
    /**检验这关结束主角是否存活 */
    private checkResult() {
        let space:number = this.getSpace();
        let self = this;
        if(space == 0) {
            this.dieNum ++;
            if(this.dieNum == 1) {
                this.role.stop();
                setTimeout(function() {
                    //游戏结束
                    GameControl.Instance.getGameOverDisplay().setGameOverDataHandler(self.score, self.curretMaxScore); 
                    GameControl.Instance.showGameOverSceneHandler();
                }, 500);
                
                return;
            }
        }
        //进入下一关
        else {
            this.curretLevel++;
            this.score += 10;
            if(this.score > this.curretMaxScore) {
                this.curretMaxScore = this.score;
            }
            //刷新成绩
            this.refreshScore();
        }
        setTimeout(function() {
            self.refreshPoint()
        }, 1000);
    }


发表评论

(必填)

(必填)

(以便回访)

博客已稳定运行: 访问量:191,810 views 网站备案号:闽ICP备17026396号-1