数组(JavaScript)

创建数组:var arr = [];

在数组中添加元素:arr.push().

循环数组

for(var i= 0;i<arr.length;i++){

var a = arr[i];
}

arr.splice(0,5) 是一个在JavaScript中用于修改数组的方法调用。这个方法会改变原数组(arr),并返回被删除的元素组成的新数组,但不会改变数组的元素顺序。

具体来说,splice() 方法接受两个参数:

  1. 开始位置(从0开始计数):这个参数指定了修改的开始位置。在这个例子中,0 表示从数组的第一个元素开始。
  2. 删除的元素数量:这个参数指定了要删除的元素数量。在这个例子中,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);
    
}//这里用了把用过的牌从数组里删除,从而达到不重复的效果

  • 4
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值