1、while循环

循环的作用:重复执行某一段代码。

语法格式

while(条件){
相关代码;
}
while循环的条件成立时,程序将会重复执行{}花括号中的代码。直到条件不成立,循环结束。

示例

  1. var app = new PIXI.Application(400,400);
  2. document.body.appendChild(app.view);
  3. var i = 0;
  4. while(i<5) {
  5. var plane = new PIXI.Sprite.fromImage("res/enemy_04.png");
  6. app.stage.addChild(plane);
  7. plane.y = i * 100;
  8. i += 1;
  9. }

代码讲解

1、通过while循环,向舞台添加5架飞机

       var i = 0;    <br />while(i<5) {    <br />var plane = new PIXI.Sprite.fromImage("res/enemy_04.png");    <br />app.stage.addChild(plane);    <br />plane.y = i * 100;    <br />i += 1;    <br />}    <br />通过 i 变量来控制 while 循环的次数,实现向舞台添加 5 架飞机

2、for循环

循环的作用:重复执行某一段代码。

语法格式

for( 初始值 ; 条件 ; 递增或递减 ){
相关代码;
}
for 循环的条件成立时,程序将会重复执行 {} 花括号中的代码。直到条件不成立,循环结束。
注意:for循环中的三要素“初始值、条件、递增或递减”,必须用分号来分隔。

示例

var app = new PIXI.Application(400,400);
document.body.appendChild(app.view);

for(var i=0;i<5;i++){
       var plane = new PIXI.Sprite.fromImage("res/enemy_04.png");
       app.stage.addChild(plane);
       plane.x = i * 50;
       plane.y = i * 100;
}

代码讲解

1、通过for循环,向舞台添加5架飞机

        for(var i=0;i<5;i++){    <br />var plane = new PIXI.Sprite.fromImage("res/enemy_04.png");    <br />app.stage.addChild(plane);    <br />plane.x = i * 50;    <br />plane.y = i * 100;    <br />}    <br />通过 i 变量控制 for 循环的次数,向舞台添加 5 架飞机 

3、定义数组

数组就是变量的集合,用于存储多个数据。

语法格式

1、定义一个空数组

var 数组名称 = [];
或者
var 数组名称 = new Array();

2、定义数组并赋值

var 数组名称 = [值,值,值…];
或者
var 数组名称 = new Array(值,值,值…);
注意: [] 或 new Array() 创建数组的功能完全一样,例如下边示例,通过 [] 来创建数组。

示例

var arr1 = [ ];
var arr2 = [10,"中国",3.14];

注意:数组中的多个值,是用逗号来分隔的

4、数组的存值

语法格式:

数组名称.push(值);

示例

var arr = [];
arr.push(100);
arr.push("北京市海淀区");
arr.push(9.8);

代码讲解

1、向数组中添加数据

arr.push(100);
将 100 添加到名称为arr的数组中
arr.push(“北京市海淀区”);
将 “北京市海淀区” 添加到名称为arr的数组中
arr.push(9.8);
将 9.8 添加到名称为arr的数组中
注意:数组中可以存储任意类型的数据,包括:数字型、字符串型、布尔型、Sprite类型等。

5、数组的取值

语法格式:

数组名称[下标];

什么是数组下标?

下标就是数组中每个值对应的序号。而且下标默认都是从0开始,向后依次加1。如下图:

多飞机移动 - 图2示例

var arr = [10,20,"上海",3.14];
console.log(arr[2]);
console.log(arr[0]);

代码讲解

1、获得数组中某下标对应的值

console.log(arr[2]);
显示数组中 2 下标对应的值
console.log(arr[0]);
显示数组中 0 下标对应的值

6、删除数组中的值

语法格式:

数组名称.splice(下标 , 个数);

示例

var arr = [10,20,"上海",3.14];
arr.splice(2,1);

代码讲解

1、删除数组中某一个值

arr.splice(2,1);
删除名称为arr数组中的值,从2下标开始删除,向后,一共删除一个值

示例

var arr = [10,20,"上海",3.14,56,73];
arr.splice(1,3);

代码讲解

1、删除数组中多个值

arr.splice(1,3);
删除名称为arr数组中的值,从1下标开始删除,向后,一共删除3个值

7、数组长度

数组长度:就是数组中值的个数。

语法格式:

数组名称.length;

示例

var arr = [10,20,"上海",3.14];
console.log(arr.length);

代码讲解

1、显示数组长度

console.log(arr.length);
获得名称为arr数组的长度

8、数组与循环

示例

var arr = [10,20,"上海",3.14];
for(var i=0;i<arr.length;i++){
    console.log(arr[i]);
}

代码讲解

1、通过for循环显示数组中所有值

for(var i=0;iconsole.log(arr[i]);
}
在 for 循环执行过程中,i 变量的值分别为:0 1 2 3,所以我们可以拿 i 变量充当数组的下标,从而实现获得数组中所有值


9、break

break是循环语句中的一个关键字。作用:跳出循环 或 终止循环

示例

console.log("程序开始");
for(var i=0;i<5;i++){
    console.log("循环变量值为:"+i);
    if(i == 3){
        break;
    }
}
console.log("程序结束");

代码讲解

1、for循环

for(var i=0;i<5;i++){
console.log(“循环变量值为:”+i);
}
通过i变量控制for循环的次数,一共循环5次,每次循环,都将i变量的值打印到控制台

2、break跳出循环

        if(i == 3){    <br />break;    <br />}    <br />当i变量的值等于3时,循环语句全部结束,程序将从循环语句后的代码继续向下执行    

10、continue

continue是循环语句中的一个关键字。作用:终止本次循环,进入下一次循环

示例

for(var i=0;i<5;i++){
    if(i == 3){
        continue;
    }
    console.log("循环变量值为:"+i);
}

代码讲解

1、for循环

for(var i=0;i<5;i++){
console.log(“循环变量值为:”+i);
}
通过i变量控制for循环的次数,一共循环5次,每次循环,都将i变量的值打印到控制台

2、continue终止本次循环,进入下一次循环

if(i == 3){
continue;
}
当i变量的值等于3时,i==3的这次循环将不再执行,而是直接进入下一次i==4的循环

11、浏览器调试 之 数组遍历删除

示例

var app = new PIXI.Application(500,600);
document.body.appendChild(app.view);

var bg = new PIXI.Sprite.fromImage("res/plane/bg/img_bg_level_3.jpg");
app.stage.addChild(bg);

var list = [];
for(var i=0;i<5;i++){
    var plane = new PIXI.Sprite.fromImage("res/plane_blue_01.png");
    plane.x = i * 100;
    plane.y = 200;
    app.stage.addChild(plane);

    list.push(plane);
}

bg.interactive = true;
bg.on("click", removePlane);
function removePlane() {
   for(var i=0;i<list.length;i++){
       app.stage.removeChild(list[i]);
       list.splice(i,1);
   }
}

//改循环
function removePlane() {
   for(var i=list.length-1;i>=0;i--){
       app.stage.removeChild(list[i]);
       list.splice(i,1);
   }
}