使用PixiJS做一个小游戏

var opt = {
    width: window.innerWidth,
    height: window.innerHeight,
    antialias: true,    // default: false
    transparent: false, // default: false
    resolution: 1       // default: 1
};
//生成app对象，指定宽高，这里直接全屏
var app = new PIXI.Application(opt);
app.renderer.backgroundColor = 0xffffff;
app.renderer.autoResize = true;
//这里使用app生成的app.view(canvas)
document.body.appendChild(app.view);
//这里是APP的ticker，会不断调用此回调
//我们在这里去调用游戏的状态更新函数
app.ticker.add(function(delta) {
    //理论上要用delta去做时间状态处理，我们这里比较简单就不去处理时间问题了
    //每次执行都当做一个有效的更新
    game.update(delta);
});

var textures = PIXI.loader.resources[‘qq‘].textures;
var sprite = new PIXI.Sprite(textures[‘qq_head.png‘]);

var textures = PIXI.loader.resources[‘bling‘];
var expTextures = [];//当前动画所有材质集合
var keys = textures.data.animations[‘f‘];
//按索引排个序，以免侦次序乱了
keys.sort(function(k1,k2){
    return k1.replace(/[^\d]/g,‘‘) - k2.replace(/[^\d]/g,‘‘);
});
for(var i=0;i<keys.length;i++) {
    var t = textures[keys[i]];
    expTextures.push(t);
}
var side = new PIXI.extras.AnimatedSprite(expTextures);
side.animationSpeed = 0.15;//指定其播放速度
app.stage.addChild(side);

this.die = function() {
    this.state = ‘dead‘;
    this.sprite.visible = false;
    map.removeBob(this);
}
//发生碰撞，炸弹会导致气球破裂
this.hitEnd = function() {
    //气球破裂
    heart.break(function(){
        console.log(‘我跟气球撞了‘);
    });
}
//更新炸弹状态
this.update = function(delta) {
    //计算当前在屏幕中的坐标
    var p = map.toLocalPosition(this.position.x, this.position.y);
    //运行中，障碍物到屏幕时才需要显示
    if(game.state == ‘play‘ && p.y >= -this.sprite.height) {
        this.start();
    }
    if(!this.sprite.visible) return;
    //移动精灵
    this.sprite.x = p.x;
    this.sprite.y = p.y;
    //出了屏外，则不需要再显示
    if(p.y > game.app.screen.height) {
        this.die();
        return;
    }
    //如果碰到当前精灵，则精灵死
    if(heart.hitTest(this)) {
        this.hitEnd();
    }
    this.position.y += this.vy; //保持自身的速度
}

this.background = new pixiContainer(); //地图元素的container
this.scale = (this.width / this.bg_width).toFixed(4) * 1;//地图宽缩放比例，为整个地图缩放比例
this.height =  this.bg_height * this.scale;
this.background.scale.x = this.scale;
this.background.scale.y = this.scale;

//转为画布坐标
toLocalPosition: function(x, y) {
    if(typeof x == ‘object‘) {
        y = x.y;
        x = x.x;
    }
    x = x||0;
    y = y||0;
    //x坐标为地图偏移量在对象在地图的坐标
    x = x + this.offsetPosition.x;
    //y为屏高+当前地图相对屏的偏移量，加上对象在地图的Y坐标再减去屏幕高度。
    y = y + game.app.screen.height + this.offsetPosition.y - this.height;

    return {
        x: x,
        y: y
    };
},

//初始化背景图
var bgspOffsetY = 0;
var bgHeights = [1646,1640,1652,1652,1637];
//默认只加载了第一张图，其它的全用第一张图占位先，加载完后再覆盖
for(var i=bgHeights.length-1; i>=0; i--) {
    var bgsp = new pixiSprite(pixiResources[‘map_background1‘].texture);
    bgsp.position.set(0, bgspOffsetY);
    this.background.addChild(bgsp);
    bgspOffsetY += bgHeights[i];
}
//load其它背景图
loadBackground: function(hs) {
    var bg2=loadSource(‘map_background2‘, cdnDomain+‘img/bg_2-min.jpg‘);
    var bg3=loadSource(‘map_background3‘, cdnDomain+‘img/bg_3-min.jpg‘);
    var bg4=loadSource(‘map_background4‘, cdnDomain+‘img/bg_4-min.jpg‘);
    var bg5=loadSource(‘map_background5‘, cdnDomain+‘img/bg_5-min.jpg‘);
    if(!bg2.isComplete||!bg3.isComplete||!bg4.isComplete||!bg5.isComplete){
        pixiLoader.load(function(){
            //children中，第一张是第五张，依次
            for(var i=5;i>1;i--) {
                map.background.children[5-i].texture = pixiResources[‘map_background‘ + i].texture;
            }
        });
    }
    else {
        for(var i=5;i>1;i--) {
            this.background.children[5-i].texture = pixiResources[‘map_background‘ + i].texture;
        }
    }
}

//二个矩形是否有碰撞
function hitTestRectangle(r1, r2) {
    var hitFlag, combinedHalfWidths, combinedHalfHeights, vx, vy, x1, y1, x2, y2, width1, height1, width2, height2;
    hitFlag = false;

    x1 = r1.x;
    x2 = r2.x;
    y1 = r1.y;
    y2 = r2.y;
    width1 = r1.width;
    width2 = r2.width;
    height1 = r1.height;
    height2 = r2.height;
    //如果对象有指定碰撞区域，则我们采用指定的坐标计算
    if(r1.hitArea) {
        x1 += r1.hitArea.x * map.scale;
        y1 += r1.hitArea.y * map.scale;
        width1 = r1.hitArea.width * map.scale;
        height1 = r1.hitArea.height * map.scale;
    }
    if(r2.hitArea) {
        x2 += r2.hitArea.x * map.scale;
        y2 += r2.hitArea.y * map.scale;
        width2 = r2.hitArea.width * map.scale;
        height2 = r2.hitArea.height * map.scale;
    }

    //中心坐标点
    r1.centerX = x1 + width1 / 2;
    r1.centerY = y1 + height1 / 2;
    r2.centerX = x2 + width2 / 2;
    r2.centerY = y2 + height2 / 2;

    //半宽高
    r1.halfWidth = width1 / 2;
    r1.halfHeight = height1 / 2;
    r2.halfWidth = width2 / 2;
    r2.halfHeight = height2 / 2;

    //中心点的X和Y偏移值
    vx = r1.centerX - r2.centerX;
    vy = r1.centerY - r2.centerY;

    //计算宽高一半的和
    combinedHalfWidths = r1.halfWidth + r2.halfWidth;
    combinedHalfHeights = r1.halfHeight + r2.halfHeight;

    //如果中心X距离小于二者的一半宽和
    if (Math.abs(vx) < combinedHalfWidths) {
        //如果中心V偏移量也小于半高的和，则二者碰撞
        if (Math.abs(vy) < combinedHalfHeights) {
            hitFlag = true;
        } else {
            hitFlag = false;
        }
    } else {
        hitFlag = false;
    }
    return hitFlag;
};