创建数组:var arr = [];
在数组中添加元素:arr.push().
循环数组
for(var i= 0;i<arr.length;i++){
var a = arr[i];
}
arr.splice(0,5)
是一个在JavaScript中用于修改数组的方法调用。这个方法会改变原数组(arr
),并返回被删除的元素组成的新数组,但不会改变数组的元素顺序。
具体来说,splice()
方法接受两个参数:
- 开始位置(从0开始计数):这个参数指定了修改的开始位置。在这个例子中,
0
表示从数组的第一个元素开始。 - 删除的元素数量:这个参数指定了要删除的元素数量。在这个例子中,
5
表示从开始位置(即数组的第一个元素)开始,删除5个元素
例题:
1、点击加号按钮 addButton 时,生成一节竹子并存入到数组 bambooArr 中,如果为舞台中第一节竹子,则坐标设置为(200, 300),后续生成的竹子在上一节竹子坐标的基础上 Y 轴减 89 像素,竹子图片路径为:"res/lianxi/zhuzi/zhuzi.png"
2、每点击一次减号按钮 deleteButton 把最上一节的竹子移除舞台同时把数组 bambooArr 中对应的竹子删除
3、变量 i 为记录舞台上创建竹子的数量
var app = new PIXI.Application(400,430);
document.body.appendChild(app.view);
var bg = new PIXI.Sprite.fromImage("res/lianxi/zhuzi/bg.png");
app.stage.addChild(bg);
var bambooArr = [];
//代码编写区域
var addButton = new PIXI.Sprite.fromImage("res/lianxi/ji/jsq11.png");
addButton.x = 330;
addButton.y = 250;
app.stage.addChild(addButton);
addButton.interactive = true;
addButton.on("click",add);
var i = 0;
//添加竹子图片,并放入 bambooArr 数组
function add(){
var zhuzi = new PIXI.Sprite.fromImage("res/lianxi/zhuzi/zhuzi.png");
i++;
if(i==1){
zhuzi.x = 200;
zhuzi.y = 300;
app.stage.addChild(zhuzi);
bambooArr.push(zhuzi);
}else if(i>1){
zhuzi.y = 300-89*(i-1);
zhuzi.x = 200;
app.stage.addChild(zhuzi);
bambooArr.push(zhuzi);
}
}
var deleteButton = new PIXI.Sprite.fromImage("res/lianxi/ji/jsq7.png");
deleteButton.x = 330;
deleteButton.y = 330;
app.stage.addChild(deleteButton);
deleteButton.interactive = true;
deleteButton.on("click",remove);
//删除竹子图片
function remove(){
if(i>0){
var zhuzi = bambooArr[bambooArr.length-1];
app.stage.removeChild(zhuzi);
bambooArr.splice(bambooArr.length-1,1);
i--;
}
}
例题:遍历数组 arr 中所有的值,将所有值的和赋值给变量 num
var arr = [3,5,2,6];
var num = 0;
function getNum(){
//代码编写区域
for(var i = 0;i<arr.length;i++){
num += arr[i];
}
}
getNum();
例题:
补全帧频函数 animate
循球数组 ballList 移动小球
x 方向移动速度: 对应 xList[下标]/帧
y 方向移动速度: 对应 yList[下标]/帧
水平方向,小球在 35 ~ 465 之间移动
垂直方向,小球在 120 ~ 530 之间移动
var app = new PIXI.Application(500,600);
document.body.appendChild(app.view);
var bg = new PIXI.Sprite.fromImage("res/lianxi/zhuan/bg.png");
bg.width = 500;
bg.height = 600;
app.stage.addChild(bg);
var xList = [];
var yList = [];
var ballList = [];
for(var i=0;i<10;i++){
var ball = new PIXI.Sprite.fromImage("res/lianxi/zhuan/qiu-2_77.png");
ball.anchor.set(0.5,0.5);
ball.x = Math.random()*(465-35)+35;
ball.y = Math.random()*(520-120)+120;
app.stage.addChild(ball);
ballList.push(ball);
var r1 = Math.random();
if(r1 < 0.5){
xList.push(1);
}else{
xList.push(-1);
}
var r2 = Math.random();
if(r2 < 0.5){
yList.push(1);
}else{
yList.push(-1);
}
}
app.ticker.add(animate);
function animate(){
for(var i=0;i<ballList.length;i++){
var ball = ballList[i];
ball.x += xList[i];
ball.y +=yList[i];
if(ball.x<35){
xList[i]=1;
}
if(ball.x>465){
xList[i]=-1;
}
if(ball.y<120){
yList[i]=1;
}
if(ball.y>530){
yList[i]=-1;
}
}
}
例题:
1、随机创建 30 张不重复的扑克牌,并添加到舞台上。
2、所有牌的 y 坐标为 400 像素。
3、第一张牌的 x 坐标为 100 像素,从左到右依次递增 20 像素。
var app = new PIXI.Application(800,600);
document.body.appendChild(app.view);
var bg = new PIXI.Sprite.fromImage("res/lianxi/dou/bg.png");
app.stage.addChild(bg);
var pkUrlArr = [];
for(var i = 1; i <= 54; i ++) {
pkUrlArr.push("res/lianxi/dou/" + i + ".jpg");
}
//随机发 30 张扑克牌
for(var i = 0;i < 30;i++){
var j = parseInt(Math.random()*pkUrlArr.length);
var url =pkUrlArr[j];
var puk = new PIXI.Sprite.fromImage(url);
app.stage.addChild(puk);
puk.y = 400;
puk.x = 100+20*i;
pkUrlArr.splice(j,1);
}//这里用了把用过的牌从数组里删除,从而达到不重复的效果