[]飞机大战js源码中判断语句问题

(function Game() {
var Sprite = laya.display.Sprite;
//定义背景容器
var box;
//定义背景1
var bg1;
//定义背景2
var bg2;

(function () {
//初始化引擎,设置游戏的宽高
Laya.init(480, 852);

//创建一个容器,用于存放背景图。
box = new Sprite();
//把这容器添加到舞台。
Laya.stage.addChild(box);

//创建背景1
bg1 = new Sprite();
//加载并显示背景图1
bg1.loadImage("res/background.png");
//把背景1添加到容器 box
box.addChild(bg1);

//创建背景2
bg2 = new Sprite();
//加载并显示背景图2
bg2.loadImage("res/background.png");
//设置背景图2的坐标
bg2.pos(0, -852);
//把背景2添加到容器
box.addChild(bg2);

//设置一个帧循环处理函数,用于背景位置的更新,实现背景滚动效果。
Laya.timer.frameLoop(1, this, onLoop);

})()

/**
* 在onLoop函数内,更新box容器的位置。
*/
function onLoop() {
//设置背景容器由上向下移动 1px
box.y += 1;

//当背景1向下移动出游戏的显示区域 480*852,则将背景1的y轴坐标,向上移动 852*2.
if (bg1.y + box.y >= 852) {
bg1.y -= 852 * 2;
}

//当背景2向下移动出游戏的显示区域 480*852,则将背景2的y轴坐标,向上移动 852*2.
if (bg2.y + box.y >= 852) {
bg2.y -= 852 * 2;
}
}
})()
这是飞机大战js源码中的,请问onloop()语句中的
if (bg1.y + box.y >= 852)是什么意思?

 
已邀请:

cuixueying

赞同来自:

Loop函数实现的是飞机大战背景图的滚动和衔接
看你上面的代码
1、舞台的宽高为480*852,表示背景图的高度是852(保证全屏显示)
2、如果要实现背景图的滚动和衔接,那么首先需要2张背景图片(中心点为左上角),第一张显示在舞台上,与舞台坐标(0,0)点对齐,第二张显示在舞台上方,底部与第一张衔接。这样当box++移动时,会出现第一张图片跑到了舞台最下方(0,852),第二张图片跑到了舞台中央(第一张图片的初始位置),这时候为了避免舞台上方出现空白,就需要将第一张图片放置到第二张图片的初始位置,依次交替

if (bg1.y + box.y >= 852这个值就是来判断背景图片是否到了舞台外部,如果是,重新计算坐标并显示
bg1是添加在box内部,坐标为(0,0)不变
box1坐标为(0,0)【只有当box1沿Y轴移动852个像素,那么bg1.y + box.y才会等于852】
也就是说,当第一张背景跑到舞台最下方,第二张背景图跑到第一张背景图的初始化位置的时候,让第一张图的位置移到第二张背景图的初始位置。以此实现无缝衔接

Monica - 知识达人

赞同来自:

也可以看下这个示意图
1.png2.png3.png4.png

sizee

赞同来自:

if(box.y>=852)
{
  box.y=0
}
这样编写不是更直接更容易理解

要回复问题请先

商务合作
商务合作