[]【简单跑酷--JS版】---Lv.2 类之间的引用以及背景滚动实现

hello~ 俺又来了 （如果描述的不清楚的朋友可以到私信我 或者到layaair群里咨询~~ ）
第二节教程来了 这一节其实和 打飞机的 背景地图实现方式差不多
此次讲解的主要是类之间的引用和循环横向背景的实现方法~~~
 
没看第一遍的朋友 可以 点击查看

关于浏览器调试失败的朋友可以看看 这篇文章
 
//=======================  游戏二维码 =======================



 
//=======================  美丽的分割线 =======================
新建LayaAir项目
打开LayaAirIDE，新建一个空项目，项目名称为 AirRunGame，本例以 JavaScript 语言为版本，其他语言同理。
如何用LayaAirIDE创建项目及环境配置，大家可以参考官网的说明，这里就不再絮讲。不了解的同学建议先看一下。


 
上一篇教程有提到我们游戏的包含哪些模块，从简到难，我们先从显示游戏背景开始。
 
//=======================  美丽的分割线 =======================
 
测试laya引擎是否成功驱动了
找到项目目录下面的src 里面有一个默认的LayaSample.js 双击打开 删除里面的代码
输入laya初始化代码

//laya初始化

Laya.init(852, 480, Laya.WebGL);

//FPS

Laya.Stat.show(0,0);

//设置适配模式

Laya.stage.scaleMode = "exactfit";

//设置剧中对齐

Laya.stage.alignH = "center";

//设置横屏

Laya.stage.screenMode = "horizontal";

 
打开浏览器（哦这里要说一下 因为浏览器有本地加载文件策略 具体可以看下laya这方面的说明）看到下图 这样 说明 咱第一步成功啦~~  来啦来 喝杯冰水庆祝一下



//=======================  美丽的分割线 =======================
 
创建好目录结构
找到项目src目录 创建一个文件夹名字为runGame
分别创建RunGame.js 和 Background.js
将我们需要的素材放到项目目录下面bin -> res
RunGame.js是我们游戏的入口类  //后面会提到具体的作用
Background,js 是我们的背景类
 



 
//=======================  美丽的分割线 ========================
 
加载图片并且测试图片是否可用
一个游戏当然会有预加载图片的功能 那这节我们讲的是背景 那我们先把需要加载的图片在游戏开始之前都加载好 这里我们用到了两张图片
继续打开LayaSample.js
在之前的基础上增加加载图片的代码：

//加载图片

Laya.loader.load(["res/background.png", "res/m_background.png"], laya.utils.Handler.create(this, onLoaded), laya.utils.Handler.create(this, onLoading, null, false));



//加载进度

function onLoading(progress){

    console.log("onLoading: " + progress);

}

//加载完毕

function onLoaded(){

    console.log("onLoaded");

} 

我们刷新页面看看有什么效果
如下图所示 我们看到 图片加载了 而且也有我们打印出来的加载进度日志以及加载完毕日志


 
我们测试一下图片是否可以用
继续在LayaSample.js里面编写我们的测试代码
找到onLoaded方法（为什么要在这里写 因为onLoaded方法是所有预加载资源都加载完毕的时候执行的函数

//从资源来表中获取加载好的background图片纹理

var texture = Laya.loader.getRes('res/background.png');

//创建一个bg显示对象

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

//将上面的texture纹理绘制到bg图像里面

bg.graphics.drawTexture(texture, 0, 0);

//将bg添加到舞台

Laya.stage.addChild(bg);

 
我们再次刷新页面看看有什么效果


 
嗯 看来图片出来了~~~不错 现在我们可以开始继续了
 
//=======================  美丽的分割线 =======================
 
编写RunGame类
刚才我们有提到RunGame是我们的入口类 为什么要这个 因为我希望后面 在入口类里面管理后面我们会写到的玩家 地图 等模块
可能这里会问 为什么不写在LayaSample里面呢？
我个人是这样么想的 LayaSample里面只干laya引擎初始化和图片加载功能 其他不管 
言归正传
我们打开RunGame.js 开始编写代码

(function () {

	/**

	 * 游戏入口

	 */

	function RunGame(){

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

	}

})();

此处我们要说一下 
Laya.class(RunGame,"RunGame", laya.display.Sprite);
这是JS特有的继承写法 TS 和 AS 不需要这么写 

 
RunGame写好了 怎么调用呢？
打开LayaSample 找到onLoaded方法修改为

//加载完毕

function onLoaded(){

   console.log("onLoaded");

   //实例化RunGame

   var runGame = new RunGame();

   //添加到舞台

   Laya.stage.addChild(runGame);

} 

因为RunGame.js是一个新的JS文件 我们的页面没有引用 如果这个时候刷新页面会报错 所以我们有两种方式引用
第一种 当然是用IDE自带的功能 如下图 点击红框的按钮，这时候会弹出一个DEBUG框 我们不用管它 关掉就行了 因为我们这次使用浏览器来做测试 暂时不用ide自带的调试


 
第二种 我们找到index.html
手动引用RunGame.js也可以
如下图


 
我们继续刷新页面看看有什么效果

咦~~ 看到RunGame里面的日志打印出来了 看来我们现在知道如何在模块中互相引用其他模块了~~~

说了这么多还是没有说到背景 不要急 因为前面说的这些对后面帮助很大 例如上面刚才说到的在LayaSample里面怎么引用RunGame 我们在上一节有提到我们有很多模块 都牵涉到模块之间如何引用 因此这里说得较多 希望能后面开发有帮助~~~~

 
 
编写Background类
打开Background.js 开始编写代码

(function () {

	

    

    /**

     * 背景类

     * 

     */

	function Background(){

        //图片的宽度

        this.BG_WIDTH = 1600;

        //记录当前移动的值

        this.moveX = 0;

        //定义背景1

        this.bg1 = null;

        //定义背景2

        this.bg2 = null;

        //草堆

        this.grass = null;

        

		Background.__super.call(this);

		this.init();

	}

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

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

	

	var _proto = Background.prototype;

	

	_proto.init = function(){

        var texture1 = Laya.loader.getRes('res/background.png');

        var texture2 = Laya.loader.getRes('res/m_background.png');

        //创建背景1

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

        //绘制背景图1

        this.bg1.graphics.drawTexture(texture1, 0, 0);

        //把背景1添加到当前容器对象里。

        this.addChild(this.bg1);



        //创建背景2

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

        //绘制背景图2

        this.bg2.graphics.drawTexture(texture1, 0, 0);

        //设置背景2 的坐标。

        this.addChild(this.bg2);

        //把第二个背景放到第一个背景屁股后面紧跟着

        this.bg2.pos(this.BG_WIDTH, 0);

        

        //前景图片草垛

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

        //绘制草垛

        this.grass.graphics.drawTexture(texture2, 0, 0);

        //把草垛居底部显示

        // this.grass.y = Browser.clientHeight - this.grass.height;

        this.addChild(this.grass);

        

        //创建一个帧循环处理函数，用于背景位置的更新，实现背景滚动效果。

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

	}

    

    _proto.onLoop = function(){



        //移动

        this.x -= 5;

        this.moveX = Math.abs(this.x);

        

        //当背景1向左移动出游戏的显示区域 1600，则将背景1的x轴坐标,向右移动 1600*2.

        if (this.moveX - this.bg1.x >= this.BG_WIDTH) {

            this.bg1.x += this.BG_WIDTH * 2;

        }

        //当背景2向左移动出游戏的显示区域 1600，则将背景2的x轴坐标,向右移动 1600*2.

        if (this.moveX - this.bg2.x >= this.BG_WIDTH) {

            this.bg2.x += this.BG_WIDTH * 2;

        }

        //草移动

        this.grass.x -= 5 * 0.5;

        if(this.grass.x + 960 < 0){

            this.grass.x = this.moveX + 852;

        }

    }

})();

 RunGame类

(function () {

	/**

	 * 游戏入口

	 */

	function RunGame(){

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

        //初始化背景

		var bg = new Background();

		this.addChild(bg);

	}

})();

记住哦 这里右有一个新的Background增加了 所以别忘记在index.html里面引入

然后刷新界面 动起来了 有木有~~~
 


 
引用打飞机里面的一句话：适当的代码封装，把相同逻辑隔离，保持类的功能单一清晰，怎么封装，如何封装每个人都有自己的方式，这就是面向对象编程的魔力。
 
谢谢~~~ 下节将会开始讲解 Floor 和 MapFloor
也就是地板的制作方式
 
PS：附件是这一节的源码