Pixi Treasure Hunter

//随机数
function randomRange(min, max){
    return Math.floor(Math.random() * (max - min + 1)) + min;
}
//键盘方向键控制
const keycode = {left:37, up:38, right:39, down:40};
const keyboard = code=>{
    let key = {};
    key.code = code;
    key.isDown = false;
    key.isUp = true;
    key.press = undefined;
    key.release = undefined;

    key.down = function(evt){
        if(evt.keyCode === code){
            if(key.isUp && key.press){
                key.press();
            }
            key.isDown = true;
            key.isUp = false;
        }
        evt.preventDefault();
    };

    key.up = function(evt){
        if(evt.keyCode === key.code){
            if(key.isDown && key.release){
                key.release();
            }
            key.isUp = true;
            key.isDown = false;
        }
        evt.preventDefault();
    };

    window.addEventListener("keydown", key.down.bind(key), false);
    window.addEventListener("keyup", key.up.bind(key), false);

    return key;
};

//边缘检查 精灵在容器中的位置 
function contain(sprite, container){
    let collision;
    //left
    if(container.x > sprite.x){
        collision = "left";
        sprite.x = container.x;
    }
    //top
    if(container.y > sprite.y){
        collision = "top";
        sprite.y = container.y;
    }
    //right
    if(sprite.x + sprite.width > container.width){
        collision = "right";
        sprite.x = container.width - sprite.width;
    }
    //bottom
    if(sprite.y + sprite.height > container.height){
        collision = "bottom";
        sprite.y = container.height - sprite.height;
    }
    return collision;
}

//矩形碰撞检查
function hitTestRectangle(r1, r2){
    let hit = false;//是否发生碰撞

    //获取矩形中心点
    r1.centerX = r1.x + r1.width/2;
    r1.centerY = r1.y + r1.height/2;
    r2.centerX = r2.x + r2.width/2;
    r2.centerY = r2.y + r2.height/2;
    //计算矩形中心点距离
    const vx = Math.abs(r1.centerX - r2.centerX);
    const vy = Math.abs(r1.centerY - r2.centerY);
    //计算矩形合并时尺寸
    const combinedHalfWidth = (r1.width + r2.width)/2;
    const combinedHalfHeight = (r1.height + r2.height)/2;
    //检测矩形是否发生碰撞
    if(combinedHalfWidth>vx && combinedHalfHeight>vy){
        hit = true;
    }
    
    return hit;
}

//定义别名
const Application = PIXI.Application;
const loader = PIXI.loader;
const resources = PIXI.loader.resources;
const Container = PIXI.Container;
const Sprite = PIXI.Sprite;
const Graphics = PIXI.Graphics;
const TextStyle = PIXI.TextStyle;
const Text = PIXI.Text;
//定义变量
//创建画布
const width = window.innerWidth;
const height = window.innerHeight;
let options = {
    width:512,
    height:512,
    resolution:1,
    transparent:false,
    antialias:true
};
let app = new Application(options);
document.body.appendChild(app.view);
//加载资源
let urls = [
    {name:"hunter", url:"../images/treasureHunter.json"}
];
loader.add(urls).on("progress", onLoaderProgress).load(setup);
function onLoaderProgress(loader, resource){
    console.log("loading", loader.progress, resource.name, resource.url);
}
//初始化精灵并设置游戏状态，开始游戏循环。
let gameScene, overScene, healthBar;
let dungeon, door, explorer, treasure;
let x, y;
let state;
let blobs = [];
let message;
function setup(){
    console.log("loaded");
    //获取纹理
    const textures = resources["hunter"].textures;
    //创建游戏场景
    gameScene = new Container();
    gameScene.name = "gameScene";
    gameScene.visible = true;
    overScene = new Container();
    overScene.name = "overScene";
    overScene.visible = false;
    healthBar = new Container();
    healthBar.name = "healthBar";
    //游戏场景制作
    dungeon = new Sprite(textures["dungeon.png"]);
    dungeon.name = "dungeon";
    gameScene.addChild(dungeon);
    //game scene door
    door = new Sprite(textures["door.png"]);
    door.name = "door";
    door.position.set(32, 0);
    gameScene.addChild(door);
    //game scene explorer
    explorer = new Sprite(textures["explorer.png"]);
    explorer.name = "explorer";
    y = (gameScene.height - explorer.height)/2;
    explorer.position.set(68, y);
    explorer.vx = 0;
    explorer.vy = 0;
    gameScene.addChild(explorer);
    // game scene treasure
    treasure = new Sprite(textures["treasure.png"]);
    treasure.name = "treasure";
    x = gameScene.width - treasure.width - 48;
    y = (gameScene.height - treasure.height)/2;
    treasure.position.set(x, y);
    gameScene.addChild(treasure);
    // game scene blobs
    let numBlobs = 6;
    let space = 48;
    let offset = 150;
    let speed = 2;
    let direction = 1;
    for(let i=0; i<numBlobs; i++){
        let blob = new Sprite(textures["blob.png"]);
        blob.name = "blob"+i;
        x = space * i + offset;
        y = randomRange(32, app.screen.height - blob.height-32);
        blob.position.set(x, y);
        blob.vy = speed * direction;
        blobs.push(blob);
        gameScene.addChild(blob);
    }
    // game scene healthbar
    x = app.screen.width - 170;
    y = 4;
    healthBar.position.set(x, y);
    // game scene healthbar inner
    let innerBar = new Graphics();
    innerBar.name = "innerBar";
    innerBar.beginFill(0x000000);
    innerBar.drawRect(0, 0, 128, 8);
    innerBar.endFill();
    healthBar.addChild(innerBar);
    // game scene healthbar outer
    let outerBar = new Graphics();
    outerBar.name = "outerBar";
    outerBar.beginFill(0xFF3300);
    outerBar.drawRect(0, 0, 128, 8);
    outerBar.endFill();
    healthBar.addChild(outerBar);
    healthBar.outer = outerBar;
    gameScene.addChild(healthBar);
    // over scene text
    let style = new TextStyle({fontFamily:"Futura", fontSize:64, fill:"white"});
    message = new Text("GAME OVER", style);
    message.name = "message";
    x = (app.screen.width - message.width)/2;
    y = (app.screen.height - message.height)/2;
    message.position.set(x, y);
    overScene.addChild(message);
    //键盘方向键控制
    let keyLeft = keyboard(keycode.left);
    console.log(keyLeft);
    let keyRight = keyboard(keycode.right);
    let keyUp = keyboard(keycode.up);
    let keyDown = keyboard(keycode.down);

    keyLeft.press = function(){
        explorer.vx = -5;
        explorer.vy = 0;
    };
    keyLeft.release = function(){
        if(!keyRight.isDown && explorer.vy===0){
            explorer.vx = 0;
        }
    };
    // right arrow key press
    keyRight.press = function(){
        explorer.vx = 5;
        explorer.vy = 0;
    };
    keyRight.release = function(){
        if(!keyLeft.isDown && explorer.vy===0){
            explorer.vx = 0;
        }
    };
    // up arrow key press
    keyUp.press = function(){
        explorer.vx = 0;
        explorer.vy = -5;
    };
    keyUp.release = function(){
        if(!keyDown.isDown && explorer.vx === 0){
            explorer.vy = 0;
        }
    };
    //down arrow key press and release
    keyDown.press = function(){
        explorer.vx = 0;
        explorer.vy = 5;
    };
    keyDown.release = function(){
        if(!keyUp.isDown && explorer.vx===0){
            explorer.vy = 0;
        }
    };

    //舞台添加场景
    app.stage.addChild(gameScene);
    app.stage.addChild(overScene);
    //设置游戏状态
    state = play;
    //开始游戏循环
    app.ticker.add(delta=>loop(delta));
}

function loop(delta){
    state(delta);
}

let hit = false;
let area = {x:20, y:10, width:488, height:488};
function play(delta){
    //主角移动
    explorer.x += explorer.vx;
    explorer.y += explorer.vy;
    //边缘检测 设置主角移动范围
    contain(explorer, area);
    //设置blob移动 碰撞反弹
    blobs.forEach(function(blob){
        blob.y += blob.vy;
        let collision = contain(blob, area);
        if(collision === "top" || collision === "bottom"){
            blob.vy *= -1;
        }
        //判断explorer是否和blob发生碰撞
        if(hitTestRectangle(explorer, blob)){
            hit = true;
        }
    });
    //explorer发生碰撞自身与血量变化
    if(hit){
        explorer.alpha = 0.5;
        healthBar.outer.width -= 1;
    }else{
        explorer.alpha = 1;
    }
    //血条归零游戏结束
    if(healthBar.outer.width < 0){
        state = end;
        message.text = "GAME OVER";
    }
    //explorer获取treasure
    if(hitTestRectangle(explorer, treasure)){
        treasure.x = explorer.x + 8;
        treasure.y = explorer.y + 8;
    }
    //treasure到达door
    if(hitTestRectangle(treasure, door)){
        state = end;
        message.text = "YOU WIN";
    }
}

function end(){
    gameScene.visible = false;
    overScene.visible = true;
}