[]【简单跑酷--JS版】---Lv.6 终篇

终于到终篇了~~~ 这是laya第一篇分享文章
很感谢laya提供的平台和引擎以及工具 方便我们来开发自己想做的东西 
关键是方便啊~~~ 希望laya越来越来 ~~~~ 

PS:可能太仓促 有许多地方表述的不是很到位 朋友们多多谅解和包涵~~~~
 
废话不多说 迈入正题~~
从前面几节分析下来我们还有哪些功能没有实现？ 这里列出来
1、能量条
2、道具
3、玩家特效
4、随机NPC
5、游戏介绍
6、游戏结束
7、优化
 
好像没记错的话就上面这些东东了吧~~~ 
好 摩擦摩擦双手 开始 搞起来
我们先把要用到的资源放到res目录

图片13.png

 
红框是我们这次新增的资源
嗯 有了新资源 我们第一步要干嘛啊？
对 先把这些资源预加载~~~ 我们打开LayaSample.js 把新的资源放到预加载列表中

图片14.png

 
======================== 能量条 ========================
先讲能量条
我们游戏中有两种能量条
1、玩家悬空能量
2、玩家加速能量
根据我们的UI来分析一下 其实两个能量条都是一样的 只是颜色不一样
那我们可以只写一个HP.js 来实现两个能量条的功能，我们创建一个Hp.js 
代码如下
 
(function () {

	

    

    /**

     * 血条

     * 

     */

	function Hp(type){

        //背景

        this.bg = null;

        //进度条

        this.bar = null;

        //最小值

        this.MIN_VALUE = 0;

        //最大值

        this.MAX_VALUE = 100;



        //值

        this.value = 100;



	    Hp.__super.call(this);



		this.init(type);

	}

    //能量类型

    Hp.HP_TYPE_ENERGY = "hp_type_energy";

    //速度类型

    Hp.HP_TYPE_SPEED = "hp_type_speed";



	//Hp

	Laya.class(Hp,"Hp", laya.display.Sprite);

	

	var _proto = Hp.prototype;

	

	_proto.init = function(type){



        this.width = 180;

        this.height = 21;



        var texture1 = Laya.loader.getRes("res/hp_bg.png");

        var texture2;

        switch (type) {

            case Hp.HP_TYPE_ENERGY:

                texture2 = Laya.loader.getRes("res/en_bar.png");

                break;

            case Hp.HP_TYPE_SPEED:

                texture2 = Laya.loader.getRes("res/hp_bar.png");

                break;

        }



        this.bg = new Sprite();

        this.bar = new Sprite();

        this.bar.x = 15;

        this.bar.y = 2;



        this.bg.graphics.drawTexture(texture1, 0, 0, 180, 21);

        this.bar.graphics.drawTexture(texture2, 0, 0, 155, 12);



        this.addChild(this.bg);

        this.addChild(this.bar);

	}



    /**

     * 修改当前状态

     */

    _proto.changeValue = function(value){

        this.value += value;

        if(this.value < this.MIN_VALUE){

            this.value = this.MIN_VALUE;

        }else if(this.value > this.MAX_VALUE){

            this.value = this.MAX_VALUE;

        }

        this.bar.scale(this.value / this.MAX_VALUE, 1);

    }

    

    

	

	

})();

这里我们通过初始化的type来区分是 悬空能量条还是加速能量条
这里我们提供一个外部的方法 changeValue 来让外部控制 能量条的 进度

我们把能量条都添加到舞台上面吧~~ 打开runGame.js
(function () {

	/**

	 * 游戏入口

	 */

	function RunGame(){



		this.bg = null;

		this.mapFloor = null;

		this.player = null;



		this.flyEnergy = null;

		this.speedEnergy = null;



		RunGame.__super.call(this);

		this.init();

	}

	//RunGame 是一个显示对象 继承此 Sprite

	Laya.class(RunGame,"RunGame", laya.display.Sprite);

	

	//定义RunGame的prototype

	var _proto = RunGame.prototype;

	

	//初始化

	_proto.init = function(){

		console.log('RunGame Init');



		//背景

		this.bg = new Background();

		this.addChild(this.bg);

		//地板

		this.mapFloor = new MapFloor();

		this.addChild(this.mapFloor);

		

		//飞行能量条

		this.flyEnergy = new Hp(Hp.HP_TYPE_ENERGY);

		this.flyEnergy.y = 7;

		this.addChild(this.flyEnergy);

		

		//速度能量条

		this.speedEnergy = new Hp(Hp.HP_TYPE_SPEED);

		this.speedEnergy.y = 7;

		this.speedEnergy.x = this.flyEnergy.width + 10;

		this.addChild(this.speedEnergy);

		

		//玩家

		this.player = new Player();

		this.player.x = 32 * 8;

		this.player.y = 32 * 4;

		this.addChild(this.player);



		



		

		//监听 按下 弹起 事件

		Laya.stage.on(laya.events.Event.MOUSE_DOWN, this, this.onMouseDown);

		Laya.stage.on(laya.events.Event.MOUSE_UP, this, this.onMouseUp);



        //创建一个帧循环处理函数

        Laya.timer.frameLoop(1, this, this.onLoop);

	}

	_proto.onLoop = function(){

		// 检测人物是否踩在地板上面了

		for(var i = this.mapFloor.numChildren - 1; i > -1; i--){

			var floor = this.mapFloor.getChildAt(i);

			//检测人物是否踩在地板上面了

			if(floor.checkHit(this.player.x, this.player.y)){

				//人物如果踩到地板了 就把人物的坐标设置到地板上面

				this.player.y = floor.y;

				//如果到地板上面的 就得重置跳的方法

				this.player.jumpReset();

			}

		}

	}

	//点击 出发人物 跳跃

	_proto.onMouseDown = function(){

		this.player.jump();

	}

	_proto.onMouseUp = function(){

		this.player.gotoJump();

	}

})();


友情提醒 每次增加了新的模块我们要做什么？
对。我们要在index.html里面引入这个模块js文件 否则会报错哦
好 我们刷新页面看看效果


 

图片15.png

 
======================== 道具 ========================
接下来我们来讲讲道具
道具我们有那几种？
1、普通积分道具

图片16.png


2、加速道具

图片17.png


3、悬空能量道具

图片18.png

 
同样我们新建一个Item.js
 
(function(){

    

    /**

     * 物品类

     */

    function Item(){



        //图标

        this.icon = null;

        //星星贴图

        this.starTexture = null;

        //加速贴图

        this.speedTexture = null;

        //悬空贴图

        this.flyTexture = null;



        this.type = "";



        Item.__super.call(this);

    }

    //类型分类

    //星星

    Item.ITEM_TYPE_STAR = "item_type_star";

    //加速

    Item.ITEM_TYPE_SPEED = "item_type_speed";

    //悬空

    Item.ITEM_TYPE_FLY = "item_type_fly";

    

	//Item

	Laya.class(Item,"Item", laya.display.Sprite);

    

    var _proto = Item.prototype;

    

    _proto.init = function(type){

        this.type = type;

        if(this.icon == null){

            this.starTexture = Laya.loader.getRes("res/item_1.png");

            this.speedTexture = Laya.loader.getRes("res/item_3.png");

            this.flyTexture = Laya.loader.getRes("res/item_4.png");

            this.icon = new Sprite();            

	        this.addChild(this.icon);

        }

        this.icon.graphics.clear();

        switch (type) {

            case Item.ITEM_TYPE_STAR:

                this.icon.graphics.drawTexture(this.starTexture, 0, 0, 32, 32);

                break;

            case Item.ITEM_TYPE_SPEED:

                this.icon.graphics.drawTexture(this.speedTexture, 0, 0, 40, 53);

                break;

            case Item.ITEM_TYPE_FLY:

                this.icon.graphics.drawTexture(this.flyTexture, 0, 0, 40, 48);

                break;

            default:

                break;

        }

    }

})();


看代码 我们发现 依旧是将三种不同的图片默认初始化好 然后我们通过初始化的type来区分不同的物品

物品有了 我们得把他们放到地板上面
首先我们来简单理顺一下思路
1、地板上面出现最多的是星星
2、所有物品在地板上面 需要居中显示
3、物品需要有碰撞检测


上一节我们有讲到 Floor 这个类的作用 它主要就是一个块地板 
而游戏刚开始的时候 我们会创建一个普通地板 宽度是素材的正常宽度 那我们第一次进入游戏的时候的第一块地板 我们就不添加道具了 也就是说 我们在随机宽度的地板上面才添加道具

还记得前面我们讲Floor是怎么生成的吗？ 每次移除屏幕外面我们都会创建一个新的Floor对象 如果游戏玩久了 可能就会很卡 造成对象太多 
其实我想一想 跑出屏幕外面的地板是不是可以重复利用？ 
答案是肯定可以得~~ 


Laya为我们考虑到了这一点，就是大名鼎鼎的 对象池
我们看看API

图片19.png

 
我们打开MapFloor.js 改造一下
 

图片20.png

 
接下来我们打开Floor.js 修改一下代码 把道具添加出来
 
(function(){

    

    /**

     * 地板类

     */

    function Floor(){

        

        //背景贴图纹理

        this.bgTexture = null;

        //最大右边距离

        this.maxRight = 0;

        //判断是否超过右边最大距离了

        this.isOutComplete = false;

        //背景

        this.bg = null;

        //背景右边补丁

        this.rightBg = null;

        //当前地板上面的物品集合

        this.itemList = ;

        

		Floor.__super.call(this);

    }

    

    

    //事件名称

    //超过屏幕一定值出发新的floor事件

    Floor.OUT_COMPLETE = "floor_out_complete";

    //整个地板都不在屏幕里面事件

    Floor.OUT_DIE = "floor_out_die";



	//Floor 是一个显示对象 继承此 Sprite

	Laya.class(Floor, "Floor", laya.display.Sprite);

    

    var _proto = Floor.prototype;



    /**

     * type int  1->地板默认宽度 other->随机宽度 

     */

    _proto.init = function(type){

        //是否需要在地板上面增加道具

        var needItem = true;

        this.maxRight = 0;

        //如果不开启autoSize 父容器的宽度和高度无法获取 

        this.autoSize = true;

        //初始化的时候将坐标放到屏幕右边

        this.x = Config.GameWidth;

        //y坐标取一个随机值 为什么是32 因为我们的整个素材是 32 * 20 拼起来的

        this.y = 32 * 6 + 32 * parseInt(8 * Math.random());

        if(this.bg == null){

            //贴图纹理

            this.bgTexture = Laya.loader.getRes("res/floor.png");

            

            this.bg = new laya.display.Sprite();

            this.bg.graphics.clear();

            this.addChild(this.bg);

            

            //因为上面的图片是截取的 所以右边可能没有图片了 这里补一个

            this.rightBg = new laya.display.Sprite();

			this.rightBg.graphics.drawTexture(laya.resource.Texture.createFromTexture(this.bgTexture,32*29,0,32,96), 0, 0, 32, 96);

            this.rightBg.width = 32;

            this.addChild(this.rightBg);

        }

        switch(type){

            case 1:

                this.rightBg.visible = false;

			    this.bg.graphics.drawTexture(this.bgTexture, 0, 0, 960, 96);

                //默认宽度的地板不要道具

                needItem = false;

            break;

            default:

                //随机计算一个宽度 当然 最小是3倍 以防难度太难

                var _w = 32 * (3 + parseInt(19 * Math.random()));

                this.bg.graphics.clear();

                //这里用到了 laya.resource.Texture.createFromTexture 就是根据宽度和高度来截取一个图片并且返回一个Texture对象

			    this.bg.graphics.drawTexture(laya.resource.Texture.createFromTexture(this.bgTexture,0,0,_w,96), 0, 0, _w, 96);

                this.rightBg.visible = true;

                this.rightBg.x = _w;

            break;

        }

        //这个是用来补上右边的图片 所以X轴坐标正好是bg的宽度

        this.rightBg.x = _w;

        // this.bg.graphics.drawTexture(this.bgTexture, 0, 0, 960, 96);



        //计算一下右边还剩下多少 用来判断什么时候生成新的floor 

        //这里是通过游戏宽度 减去 固定 2个 32的宽度 再随机一个长度 这样 可以让地板时间点的出现 更加随机性

        this.maxRight = Config.GameWidth - 32 * 2 - 32 * parseInt(10 * Math.random());



        if(needItem){

            this.addItem();

        }



        //创建一个帧循环处理函数

        Laya.timer.frameLoop(1, this, this.onLoop);

    }

    //在地板上面添加物品

    _proto.addItem = function(){

        

        //创建一个随机数

        var m = parseInt(Math.random() * 10);

        //如果随机数小于5 我们就不添加了 主要是怕道具太多了

        if(m < 5)return;

        //添加的数量

        var addNum = 0;

        //计算一下道具最大数量 我们强制道具的宽度都是32

        var maxNum = parseInt(this.width / 32);

        //这里自己订制一种数量的规则 

        if(maxNum > 5){

            addNum = 5 + parseInt((maxNum - 5) * Math.random());

        }else{

            addNum = maxNum;

        }

        //计算居中的点

        var sx = (this.width - addNum * 32) * 0.5;

        var arr = ;

        var randNum;

        var specialItem = false;

        for(var i = 0; i < addNum; i++){

            //每隔两个创建一个 然物品分开一点

		    if(i % 2 == 0)continue;

            randNum = Math.random()

            //查询一下当前物品列表里面是否有 有的话 就从里面拿

            if(this.itemList.length > 0){

                item = this.itemList.shift();

                item.visible = true;

            }else{

                //对象池中拿Item

                var item = Pool.getItemByClass("item",Item);

            }

            //是否有特殊物品 如果有 我们就生成特殊物品

            if(randNum > 0.95 && !specialItem){

                specialItem = true;

                item.init(Item.ITEM_TYPE_SPEED);

            }else if(randNum > 0.9 && !specialItem){

                specialItem = true;

                item.init(Item.ITEM_TYPE_FLY);

            }else{

                item.init(Item.ITEM_TYPE_STAR);

            }

            

            item.x = sx + i * 32;

            item.y = -30;

            this.addChild(item);

            arr.push(item);

        }

        //存储当前所有item

        this.itemList = .concat(arr);

    }

    //获取当前地板上面的所有物品 

    _proto.getItems = function(){

        return this.itemList;

    }



    _proto.onLoop = function(){

        //让地板的速度和移动比背景快一点

        this.x -= 5 * 1.2;

        

        //判断是否除了边界 如果出了 就通知生成新的floor 这里增加一个变量来判断当前是否已经通知外部了 

        //因为此处是一个循环的处理

        if(!this.isOutComplete && (this.x + this.width) < this.maxRight){

            this.isOutComplete = true;

            this.event(Floor.OUT_COMPLETE, this);

        }else if((this.x + this.width) < 0){

            //判断整个floor是否不在屏幕里面了 如果不在了 移除当前floor

            Laya.timer.clear(this, this.onLoop);

            //如果有物品先隐藏

            for(var i = 0; i < this.itemList.length; i++){

                this.itemList[i].visible = false;

            }

            this.visible = false;

            this.event(Floor.OUT_DIE, this);

        }

    }

    /**

     * 检测碰撞

     * x 坐标

     * y 坐标

     */

    _proto.checkHit = function(x,y){

        if(x > this.x && x < (this.x + this.width) && y > this.y && y < (this.y + this.height)){

            return true;

        }

        return false;

    }

})();[/i]
总上面的代码 我们主要是新增了一个itemList 存储地板上面所有的物品
因为Floor用到了对象池的方式来创建 所以 地板上面的物品 我们也缓存起来 每次地板消失 我们就让item隐藏 然后再创建item的时候 先看看原先地板上面有没有可以用到的item 如果有 我们就让它显示出来 这样就可以避免重复去创建item 减少sprite的创建和内存的消耗

好 我们刷新看看页面

图片21.png

 
有木有？ 道具出来了 而且都在地板的中间
嗯~~ 其实这里代码量有点多 大家休息休息 消化一下~~~

既然有道具了

那我们来增加玩家和道具的碰撞代码 打开runGame.js
 
[i](function () {

	/**

	 * 游戏入口

	 */

	function RunGame(){



		this.bg = null;

		this.mapFloor = null;

		this.player = null;



		this.flyEnergy = null;

		this.speedEnergy = null;



		this.scoreTxt = null;

		this.score = 0;



		//物品碰撞检测坐标点

        this.itemPoint = new Point();



		RunGame.__super.call(this);

		this.init();

	}

	//RunGame 是一个显示对象 继承此 Sprite

	Laya.class(RunGame,"RunGame", laya.display.Sprite);

	

	//定义RunGame的prototype

	var _proto = RunGame.prototype;

	

	//初始化

	_proto.init = function(){

		console.log('RunGame Init');



		//背景

		this.bg = new Background();

		this.addChild(this.bg);

		//地板

		this.mapFloor = new MapFloor();

		this.addChild(this.mapFloor);

		

		//飞行能量条

		this.flyEnergy = new Hp(Hp.HP_TYPE_ENERGY);

		this.flyEnergy.y = 7;

		this.addChild(this.flyEnergy);

		

		//速度能量条

		this.speedEnergy = new Hp(Hp.HP_TYPE_SPEED);

		this.speedEnergy.y = 7;

		this.speedEnergy.x = this.flyEnergy.width + 10;

		this.addChild(this.speedEnergy);

		

		//玩家

		this.player = new Player();

		this.player.x = 32 * 8;

		this.player.y = 32 * 4;

		this.addChild(this.player);



		//分数

		this.scoreTxt = new Text();

		this.scoreTxt.color = "#ffffff";

		this.scoreTxt.fontSize = 30;

		this.scoreTxt.text = "0";

		this.scoreTxt.width = Config.GameWidth;

		this.scoreTxt.align = "right";

		this.scoreTxt.x = -10;

		this.scoreTxt.y = 10;

		this.addChild(this.scoreTxt);



		



		

		//监听 按下 弹起 事件

		Laya.stage.on(laya.events.Event.MOUSE_DOWN, this, this.onMouseDown);

		Laya.stage.on(laya.events.Event.MOUSE_UP, this, this.onMouseUp);



        //创建一个帧循环处理函数

        Laya.timer.frameLoop(1, this, this.onLoop);

	}

	_proto.onLoop = function(){

		// 检测人物是否踩在地板上面了

		for(var i = this.mapFloor.numChildren - 1; i > -1; i--){

			var floor = this.mapFloor.getChildAt(i);

			//检测人物是否踩在地板上面了

			if(floor.checkHit(this.player.x, this.player.y)){

				//检测是否碰到道具了

				var itemList = floor.getItems();

				for(var j = 0; j < itemList.length; j++){

					var item = itemList[j];

					//只有显示的物品才做碰撞检测

					if(item.visible){

						//拿到物品的坐标 

						this.itemPoint.x = item.x + floor.x + this.player.width;

						this.itemPoint.y = item.y + floor.y + this.player.height;

						//物品碰到人物了

						if(this.player.hitTestPoint(this.itemPoint.x, this.itemPoint.y)){

							//物品有多个类型 分类型进行判断

							if(item.type == Item.ITEM_TYPE_SPEED){

								item.visible = false;

							}else if(item.type == Item.ITEM_TYPE_FLY){

								item.visible = false;

							}else{

								//星星物品播放动画

        						Tween.to(item, {y : -10, scaleX : 0.1, alpha : 0}, 300, null, Handler.create(this, this.itemTweenComplete, [item]));

								this.updateScore();

							}

						}

					}

				}

				//人物如果踩到地板了 就把人物的坐标设置到地板上面

				this.player.y = floor.y;

				//如果到地板上面的 就得重置跳的方法

				this.player.jumpReset();

			}

		}

	}

	//点击 出发人物 跳跃

	_proto.onMouseDown = function(){

		this.player.jump();

	}

	_proto.onMouseUp = function(){

		this.player.gotoJump();

	}

	//更新分数

	_proto.updateScore = function(){

		this.score++;

		this.scoreTxt.text = this.score;

	}

})();[/i]
试一下~~~ 是不是能碰到道具了？ 嘿嘿
好道具都OK了 上面的代码也增加了积分 
还有 我们在上面的代码也增加了当前道具类型的判断 方便后面 我们给道具增加特效
 
 
======================== 特效 ========================
1、特效触发时画面暂停
2、玩家残影（触发游戏暂停和 加速效果）
3、玩家特效

画面暂停？
嗯 也就是让游戏中的背景 地板 等都不做运动
那我们想一下之前我们的背景和地板的运动都是在自己本身模块中操作的
因此我们只要增加一个游戏暂停的开关来控制她们是否需要运动
同时我们上面提到游戏要有加速的效果 也就是物品移动的速度是可以动态改变的 
因此 打开Config.js 我们创建一些需要的变量

图片22.png

 



接下来我们修改一下Background.js 和 floor.js




图片23.png


图片24.png

 
这样子我们只要设置一下Config.isPause 就可以控制背景和地板是否停止运动了
同时还可以动态去改变Config.speed 来改变加速度
（因为我们这个游戏比较小 所以采用这种全局静态变量来达到我们需要的效果 如果是比较复杂的游戏 可能做法不一样 这个大家可以互相给一些小提议~~）



我们先做残影 什么是残影？ 

图片25.png


看图说话~~~ 
这个最简单了
我们只要复制2个玩家 然后设置一下x轴和透明度即可

图片26.png


图片27.png

 
我们增加两个动画 设置不同透明度和X轴坐标 然后再播放动作的时候 让这两个动画和当前玩家的动画同步即可~~

残影有了 我们再给玩家加上特效动画
比如一个光圈放大
[i]var texture = Laya.loader.getRes("res/spiritEffect.png");

            this.spiritEffect = new Sprite();

            this.spiritEffect.pivot(154 * 0.5, 190 * 0.5);

            this.spiritEffect.visible = false;

            this.spiritEffect.scale(5, 5);

            this.spiritEffect.graphics.drawTexture(texture, 0, 0, 154, 190);

            this.addChild(this.spiritEffect);[/i]
然后增加一个特效触发的方法
 
[i]//是否处于特效效果中

    _proto.isEffect = function(){

        return this.bodyEffect1.visible;

    }

    //开始显示特效

    _proto.showEffect = function(){

        Config.isPause = true;

        Config.speed = Config.SPEED_FAST;

        this.spiritEffect.visible = true;

        Tween.to(this.spiritEffect, {scaleX : 0.1, scaleY : 0.1, rotation : 360}, 1000, null, Handler.create(this, this.spiritEffectTweenComplete));

    }

    _proto.spiritEffectTweenComplete = function(){

        this.spiritEffect.visible = false;

        this.spiritEffect.scale(5, 5);

        this.bodyEffect1.visible = true;

        this.bodyEffect2.visible = true;

        Config.isPause = false;

}[/i]
然后我们在碰到特效道具的时候 执行showEffect就可以了 我们刷新页面看看效果哦
 

4.gif

 
 
是不是很炫（哈哈~~~~ 其实好像不是很炫）反正效果是出来了
既然有了加速效果我们得控制加速的时间 不能一直加速 也就是我们前面提到的 加速能量条 和 悬空能量条

因为我们所有的玩家操作都在Player.js里面 所以我们这里简单处理一下 吧前面提到的两种能量条 引用到 Player.js里面 具体操作如下
1、玩家悬空的时候需要慢慢扣除悬空能量，而非悬空状态会慢慢的恢复能量
2、玩家捡到悬空能量药水 可以立马恢复悬空能量
 
 
======================== 其他 ========================
关于游戏开始当然得有介绍 以及游戏结束啦
我们把Loading.js GameInfo.js GameOver.js加上
 
[i](function () {

	

	/**

	 * 加载类

	 */

	function Loading(){

		this.bg = null;

		this.txt = null;

		Loading.__super.call(this);

		this.init();

	}

	//Loading

	Laya.class(Loading,"Loading", laya.display.Sprite);

	

	var _proto = Loading.prototype;

	

	_proto.init = function(){

		

		//黑色背景

		this.bg = new Sprite();

		this.bg.graphics.drawRect(0,0,Config.GameWidth,Config.GameHeight,"#000000");

		this.addChild(this.bg);

		

		//loading文本

		this.txt = new Text();

		this.txt.color = "#ffffff";

		this.txt.fontSize = 30;

		this.txt.text = "Loading";

		this.txt.width = Config.GameWidth;

		this.txt.align = "center";

		this.txt.y = (Config.GameHeight - this.txt.height) * 0.5;

		this.addChild(this.txt);

		

	}

	_proto.progress = function(value){

		this.txt.text = "Loading " + parseInt(value * 100) + "%";

	}

	

})();[/i]
[i](function () {

	

	/**

	 * 游戏介绍

	 */

	function GameInfo(){

		this.bg = null;

		this.txt = null;

		GameInfo.__super.call(this);

		this.init();

	}

	//GameInfo

	Laya.class(GameInfo,"GameInfo", laya.display.Sprite);

	

	var _proto = GameInfo.prototype;

	

	_proto.init = function(){

		this.width = Config.GameWidth;

		this.height = Config.GameHeight;

		//黑色背景

		this.bg = new Sprite();

		this.bg.alpha = 0.8;

		this.bg.graphics.drawRect(0,0,Config.GameWidth,Config.GameHeight,"#000000");

		this.addChild(this.bg);

		

		//loading文本

		this.txt = new Text();

		this.txt.color = "#ffffff";

		this.txt.fontSize = 20;

		this.txt.text = "游戏介绍\n\n点击可控制人物跳跃\n\n（小提示 点两次可触发人物连跳 再连跳后 再次点击可出发人物飞行哦！）\n\n左上角紫色条代表当前飞行的精力 黄色条 代表加速状态\n\n\n好了 点击屏幕开始狂奔之旅吧~~";

		this.txt.width = Config.GameWidth;

		this.txt.align = "center";

		this.txt.y = (Config.GameHeight - this.txt.height) * 0.5;

		this.addChild(this.txt);

		

	}

	

	

})();[/i]
 
[i](function () {

	

	/**

	 * 游戏结束

	 */

	function GameOver(){

		this.bg = null;

		this.txt = null;

		GameOver.__super.call(this);

		this.init();

	}

	//GameOver

	Laya.class(GameOver,"GameOver", laya.display.Sprite);

	

	var _proto = GameOver.prototype;

	

	_proto.init = function(){

		this.width = Config.GameWidth;

		this.height = Config.GameHeight;

		//黑色背景

		this.bg = new Sprite();

		this.bg.alpha = 0.8;

		this.bg.graphics.drawRect(0,0,Config.GameWidth,Config.GameHeight,"#000000");

		this.addChild(this.bg);

		

		//loading文本

		this.txt = new Text();

		this.txt.color = "#ffffff";

		this.txt.fontSize = 30;

		this.txt.text = "GameOver\n\nClick Again";

		this.txt.width = Config.GameWidth;

		this.txt.align = "center";

		this.addChild(this.txt);

		

	}



	_proto.setScore = function(score){

		var _score = LocalStorage.getItem('runGameScore');

		if(_score && parseInt(_score) > score){

			score = _score;

		}

		LocalStorage.setItem('runGameScore',score);

		this.txt.text = "GameOver\n\n Click Again\n\n Best Score : " + score;

		this.txt.y = (Config.GameHeight - this.txt.height) * 0.5;

	}

	

	

})();[/i]
剩下的都是比较简单的~~ 如果看过前面章节的人 很快就知道如何去应对 实在不行 我们看源码嘿嘿
源码都有相应的注释 如果有问题 可以留言或者私信 谢谢大家捧场~~~
 
 



好啦~ 到此为止 本系列教程都结束了 源码在下面~~ 
如果有建议可以互相讨论  嘿嘿~~

尽量开启下一个小游戏之旅~~~~ 有什么小游戏也可以私聊或者留言 大家一起分享 一起学习~~ 一起进步。。  
TKS~~~



 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2016-08-03 1 条评论 免费帖
分享

没有找到相关结果

    已邀请:

    cwugs

    赞同来自: lzh1589300156

     _proto.onLoop = function(){
            //监听有没有地板要移除
            while(this.dieFloorList.lenght > 0){
                var floor = this.dieFloorList.shift();
                floor.removeSelf();
                //回收
                Pool.recover("floor",floor);
            }
        }
     
    this.dieFloorList.lenght 里面lenght写错了，里面的代码不会执行，对象也没有回收
    2016-12-22 1 0
    分享

    cuixueying

    赞同来自:

    感谢，受教，顶！d=====(￣▽￣*)b
    2016-08-03 0 0
    分享

    lift6220819

    赞同来自:

    您是从lufylegend转过来的么
    2016-08-31 0 1
    分享

    yung

    赞同来自:

    赞，很不错
    2016-08-31 0 0
    分享

    jj940620231

    赞同来自:

            RunGame._super.call(this);
            this.init();
     
    求解这句话是什么意思 每个类里面都会出现这句话
    2016-09-01 0 3
    分享

    trackway - no

    赞同来自:

    虽然以前做过跑酷游戏，不过还是看了一遍，纯粹因为文章写得好看，哈哈哈，赞一个
    2016-09-21 0 0
    分享

    huhang2004

    赞同来自:

    作为例子看下
    2016-09-22 0 0
    分享

    jayson1234

    赞同来自:

    写的不错 mark!
    2016-12-15 0 0
    分享

    senlypan

    赞同来自:

    真棒！
    2017-01-05 0 0
    分享

    jacksing888

    赞同来自:

    感谢 楼主好人
    2017-01-20 0 0
    分享

    ht657990995

    赞同来自:

    为了回复而登录的
    2017-04-24 0 0
    分享

    zibenwxh

    赞同来自:

    谷歌运行不起来~
    2017-05-17 0 3
    分享

    wjwjw

    赞同来自:

    支持多一点这样的入门教程
    2017-07-10 0 0
    分享

    pancw3

    赞同来自:

    支持多一点这样的入门教程
    2017-07-15 0 0
    分享

    zjw123456

    赞同来自:

    楼主，分数感觉不太准确，是什么原因？
    2017-09-20 0 0
    分享

    thebackpacker

    赞同来自:

    刚下载下来，感谢楼主分享，官方的完整例子太少了，网上也没找到相关JS项目，好苦逼
    2018-03-28 0 0
    分享
    为什么被折叠? 0 个回复被折叠

    要回复问题请先

    公司简介 | 联系方式 | 人才招聘

    LayaAir引擎2D开发者3群（QQ群）：674885952    LayaAir引擎3D开发者8群（QQ群）：693598845

    Copyright © 2024

    商务合作
    商务合作