Pixi.js学习（六）数组

前言

为了提高作者的代码编辑水品，作者在使用博客的时候使用的集成工具为 HBuilderX。

下文所有截图使用此集成工具，读者随意。

此系列文章需要：HTML ，JavaScript 基础知识

操作系统：

版本   Windows 11 家庭中文版
版本   23H2
安装日期   ‎2024/‎5/‎28
操作系统版本   22631.3593
体验   Windows Feature Experience Pack 1000.22700.1003.0

一、数组

用来存储多个数据（变量）的容器，存储在数组中的数据称为数组的元素。

优点：便于集中统一处理某些数据

例：定义多个变量表示学生的成绩，不便于同一维护

var stu1 = 59;
var stu2 = 60;
var stu3 = 70;
var stu4 = 80;
var stu5 = 45;
var stu6 = 50;
var stu7 = 55;
var stu8 = 61;
//.....100名学生就要定义 100个变量
//如何同时为每位同学的成绩加十分？
//如何计算班级平均分？
//如何将不及格的学生成绩改为及格？

1.1 定义数组

定义数组语法

var 数组名称 = [];

例

var as = [];

创建数组时添加数据语法

var as = [数据1,数据2,数据3...]

例

var as = [59 , 60 , 70 , 80 , 45 , 50 , 55 , 61];
//在控制台输出as中的内容
console.log( as );

此时as 就表示了一组数据

运行效果：

1.2 数组存取与删除

有些时候数组由系统创建或无法在创建时得到数据并存入数据此时必须通过数组提供的函数，当得到数据时再存入数组中

1.2.1、添加元素（数据）

语法

数组名称.push( 数据 );

例：向数组中添加数据

//定义数组
var as = [];
//向数组中添加一个元素10
as.push( 10 );
//向数组中添加一个元素20
as.push( 20 );
as.push( 30 );
as.push( 40 );
as.push( 50 );
//在控制台中输出 as
console.log( as );

运行效果：

1.2.2、获取元素（数据）

数组为每个元素都进行了编号，编号表示该元素在数组中的位置在程序中我们称该编号为数组的下标下标从0开始到数组长度-1结束，通过下标可以获取数组中的元素

语法

数组名称[下标];

例

			var as = [50,10,800];
			as[0];//数组中的第 1 个元素
			as[1];//数组中的第 2 个元素
			as[2];//数组中的第 3 个元素
			var a1 = as[0];//提取数组中的第 1 个元素
			var a2 = as[1];//提取数组中的第 2 个元素
			var a3 = as[2];//提取数组中的第 3 个元素
			//输出数组中的第 1 个元素
			console.log( "输出数组中的第 1 个元素："+as[0] );
			//输出数组中的第 2 个元素
			console.log( "输出数组中的第 2 个元素："+as[1] );
			//输出数组中的第 3 个元素
			console.log( "输出数组中的第 3 个元素："+as[2] );

运行效果：

使用循环遍历数组【重点】

遍历数组：获取数组中的每一个元素

例：当数组元素很多时不便于统一操作

var as = [50,10,800];
//输出数组中的第 1 个元素
console.log( as[0] );
//输出数组中的第 2 个元素
console.log( as[1] );
//输出数组中的第 3 个元素
console.log( as[2] );

(重复的步骤放到循环中，不重复的步骤放到循环之外，有规律的变量想办法用循环变量替代)

例：使用循环遍历【重点】

var as = [50,10,800];
//已知as数组长度为3，下标范围0~2
//使用循环变量i充当下标，控制下标范围区间在0~2
//每次循环可以获取数组中的一个元素，直到最后一个元素
for(var i=0; i<3; i++){
//输出数组中的某个元素
console.log( as[i] );
}

1.2.3、获取数组长度

数组的长度等于数组中的元素个数在程序中可以动态的获取数组长度，以便在数组元素个数改变时，依然能够正确遍历

动态获取数组长度

数组名.length;
例如
var as = [10,20,30];
as.length;//获取as数组长度，结果为：3

使用数组长度增强遍历

//遍历数组
for( var i = 0; i<数组名.length; i++){
//获取数组中的某个数据
var a = as[i]);
//输出到控制台中
console.log( a );
}

1.2.4、删除元素（数据）

语法

数组名称.splice(下标 , 个数);
个数：从下标位置开始（含下标位置的元素）删除几个元素

例：删除数组中的某一个元素

			var as = [100,200,300,400,500];
			//删除数组中的某一个元素 数组名称.splice(下标 , 1);
			//2：下标
			//1：删除1个元素
			as.splice(2,1);
			//结果：[100,200,400,500];
			console.log( as );

例：删除数组中的多个元素

			var as = [100,200,300,400,500];
			//输出as数组中的元素
			//从下标0开始删除3个元素 0、1、2元素将被删除
			as.splice(0,3);
			//结果[400,500];
			console.log( as );

运行

二、实战

例题一：使用数组统一操作敌机

1. 创建一个名为 app 的应用，宽：500，高：700
2.用数组创建敌机，实现敌机的移动，超过窗口回到起始位置。

示范图：

例题一代码：

		<script type="text/javascript">
			
			var app=new PIXI.Application(500,700);
			
			document.body.appendChild(app.view);																							

			function add(img,x,y){
				//创建图片元素
				var a=new PIXI.Sprite.fromImage(img);
				//将元素添加到页面中
				app.stage.addChild(a);
				//调整位置
				a.x=x
				a.y=y 
				
				//对当前元素直接开启监听
				a.interactive=true;
				
				return a;
			}


			var bg = add("img/bg2.jpg",0,0); 

			//创建用于存储敌机元素的数组【关键步骤】
			var enemys = [];

			//循环添加5架敌机
			for(var i=1; i<=5; i++){
				var enemy = new PIXI.Sprite.fromImage("img/enemy1.png");
				//i变量的值不同，所生成的敌机位置也不同
				enemy.x = i*60;
				enemy.y = i*70;
				//将飞机元素保存到数组中【关键步骤】
				enemys.push( enemy );
				app.stage.addChild(enemy);
			}

			//自定义帧频函数
			function animate(){
				//遍历数组获取每个敌机元素【关键步骤】
				for(var i=0; i<enemys.length; i++){
				//提取数组中的敌机元素【关键步骤】
				var e = enemys[i];
				//敌机元素下移
				e.y += 2;
				//当敌机元素超出边界时，返回顶部
				if( e.y >= 700) e.y = -74;
				}
			}

			//添加帧频函数
			app.ticker.add( animate );

				
					
					
		</script>

运行效果：

Pixi.js学习（六）数组源码以及图片地址：https://download.csdn.net/download/qq_56376552/89423325