练习一

  1. var app = new PIXI.Application(480,800);
  2. document.body.appendChild(app.view);
  4. var bg = new PIXI.Sprite.fromImage("res/racer/bg.jpg");
  5. app.stage.addChild(bg);
  7. var cars = [];
  9. for(var i =0;i<7;i++){
  10.     var car = new PIXI.Sprite.fromImage("res/racer/saiche-3_03.png");
  11.     car.x = 140 + i * 26;
  12.     car.y = Math.random() * 700 + 100;
  13.     app.stage.addChild(car);
  14.     cars.push(car);
  15. }
  17. app.ticker.add(animate);
  18. function animate(){
  19.     for(var i = 0;i<7;i++){
  20.         cars[i].y -= 5;
  21.         if(cars[i].y < 0){
  22.             cars[i].y = 800;
  23.         }
  24.     }   
  25. }

练习二

1. 现有知识实现

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

var bg = new PIXI.Sprite.fromImage("res/lianxi/yu2/bg.png");
app.stage.addChild(bg);

// 定义用来保存所有的小鱼的数组
var fishs = [];
// 用来存放所有的小鱼的横向移动速度
var speedX = [];
// 用来存放所有的小鱼的纵向移动 速度 
var speedY = [];

// 开启背景的交互功能
bg.interactive = true;

// 将小鱼的图片资源路径保存到一个数组中
var srcs = ["res/lianxi/yu2/yu1.png", "res/lianxi/yu2/yu2.png"];

// 添加点击事件
bg.on("click", function (event){
    // 通过随机数来选取一个小鱼图片的索引下标
    var idx = Math.round(Math.random());
    // 通过下标获取一个图片路径 
    var imgSrc = srcs[idx];
    // 创建一条小鱼
    var fish = new PIXI.Sprite.fromImage(imgSrc);
    // 通过点击方式的响应函数的参数 event 来获取点击位置 坐标,赋给小鱼
    var pos = event.data.getLocalPosition(app.stage);
    fish.x = pos.x;
    fish.y = pos.y;
    fish.anchor.set = (0.5,0.5);
    // 添加小鱼到数组和舞台中
    app.stage.addChild(fish);
    fishs.push(fish);

    // 根据下标的不同,来给小鱼确定速度 
    if(idx == 0){
        speedX.push(Math.random() * 2);
        speedY.push(Math.random() * 2);
    }else{
        speedX.push(-Math.random() * 2);
        speedY.push(-Math.random() * 2);
    }
});


// 添加帧频函数
app.ticker.add(function(){
    // 遍历所有的小鱼
    for(var i=0;i<fishs.length;i++){
        // 取出一条小鱼
        var fish = fishs[i];
        // 改变坐标
        fish.x += speedX[i];
        fish.y += speedY[i];
        // 判断小鱼的边界
        if(fish.x < 40 || fish.x > 760){
            speedX[i] *= -1;
            // 让小鱼掉头,通过缩放实现
            fish.scale.x *= -1;
        }
        if(fish.y < 115 || fish.y > 570){
            speedY[i] *= -1;
        }
    }


});

2. 面向对象思想更合理的方式实现(了解)

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

var bg = new PIXI.Sprite.fromImage("res/lianxi/yu2/bg.png");
app.stage.addChild(bg);


var fishs = [];

bg.interactive = true;

srcs = ["res/lianxi/yu2/yu1.png","res/lianxi/yu2/yu2.png"];

bg.on("click",function(event){
    var idx = Math.round(Math.random());
    var src = srcs[idx];
    var fish = new PIXI.Sprite.fromImage(src);
    var pos = event.data.getLocalPosition(app.stage);
    fish.x = pos.x;
    fish.y = pos.y;
    if(idx == 0){
        // 为每条鱼动态绑定两个属性变量,来记录自己的移动速度 
        fish.xs = Math.random() * 2;
        fish.ys = Math.random() * 2;
    }else{
        fish.xs = -Math.random() * 2;
        fish.ys = -Math.random() * 2;
    }
    app.stage.addChild(fish);
    fishs.push(fish);
});

app.ticker.add(animate);
function animate(){
    for(var i = 0;i<fishs.length;i++){
        f = fishs[i];
        // 根据自身记录的速度进行移动 
        f.x += f.xs;
        f.y += f.ys;
        if(f.x < 40 || f.x > 760){
            // 将速度反转
      f.xs *= -1;
      f.scale.x *= -1; 
    }
    if(f.y < 115 || f.y > 570){
      f.ys *= -1;
    }
    }
}

练习三

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

var bg = new PIXI.Sprite.fromImage("res/lianxi/zhuan/bg3.png");
bg.width = 500;
bg.height = 700;
app.stage.addChild(bg);
// 双循环实现
for(var i=0;i<5;i++){
    for(var j=0;j<10;j++){
        var rect = new PIXI.Sprite.fromImage("res/lianxi/zhuan/zhuankuai-3_10.png");
        rect.x = j * 32 + 100;
        rect.y = i * 32 + 200;
        app.stage.addChild(rect);
    }
}
// 单循环实现
for(var i=0;i<50;i++){
    var rect = new PIXI.Sprite.fromImage("res/lianxi/zhuan/zhuankuai-3_10.png");
    rect.x = 100 + (i%10) * 32;
    rect.y = 400 + Math.floor(i/10) * 32;
    app.stage.addChild(rect);
}

练习四

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

var bg = new PIXI.Sprite.fromImage("res/lianxi/zhuan/bg3.png");
bg.x = 0;
bg.y = 0;
app.stage.addChild(bg);

var picture = ["1_06","2_08","3_10","4_12","5_14","6_16","7_18"];
function Brick(x,y,z){
    var brick = new PIXI.Sprite.fromImage("res/lianxi/zhuan/zhuankuai-"+z+".png");
    bg.addChild(brick);
    brick.x = x;
    brick.y = y;
}

function add(){
    //代码编写区域
    for(var i = 0; i < 13; i++){
        for(var k = 0; k < 13; k++){
            if((i+k)%2==0) continue;
            var x = 33 * i + 33;
            var y = 33 * k + 113;
            var z = Math.round(Math.random()*6);
            Brick(x,y,picture[z]);
        }
    }
}
add();

// function add(){
//     for(var i=0;i<13*13;i++){
//         if(i % 2 == 1){
//             var x = Math.floor(i % 13) * 33 + 33;
//             var y = Math.floor(i / 13) * 33 + 113;
//             var z = Math.round(Math.random()*6);
//             Brick(x,y,picture[z]);
//         }
//     }
// }
// add();

数组求极值

var nums = [0,9,8,7,6,5,4,3,2,1];
console.log(nums);
var l = nums.length;
var max = nums[0];
var min = nums[0];

for(var i=0;i<l;i++){
    if(max < nums[i]){
        max = nums[i];
    }
    if(min > nums[i]){
        min = nums[i];
    }
}
console.log(nums);

数组排序

var nums = [0,9,8,7,6,5,4,3,2,1];
console.log(nums);
var l = nums.length;
// 普通方式实现
for(var i=0;i<l-1;i++){
    for(var j=0;j<l-i-1;j++){
        if(nums[j] > nums[j+1]){
            var tmp = nums[j];
            nums[j] = nums[j+1];
            nums[j+1] = tmp;
        }
    }
}
console.log(nums);


// 函数方式实现
function swap(arr,idx1,idx2){
    var tmp = arr[idx1];
    arr[idx1] = arr[idx2];
    arr[idx2] = tmp;
}

for(var i=0;i<l-1;i++){
    for(var j=0;j<l-i-1;j++){
        if(nums[j] < nums[j+1]){
            swap(nums,j,j+1);
        }
    }
}
console.log(nums);

冒泡排序思维图（9.14）

image.png