Flying 物体牵引类飞行Phaserjs游戏


let game;
let gameOptions = {
    gravity: 1,             // game gravity
    terrainObjects: 20,     // amount of terrain objects
    heroSize: 20,           // hero size
    constraintSpeed: 2,     // constraint shrinkage speed
    minBoxSize: 50,         // minimum box size
    maxBoxSize: 200,        // maximum box size
    hookSpeed: 20           // speed use to fire the hook
}
const WALL = 0;
const BALL = 1;
const HOOK = 2;
window.onload = function() {
 
    // game configuration
    let gameConfig = {
        type: Phaser.AUTO,
        scale: {
            mode: Phaser.Scale.FIT,
            autoCenter: Phaser.Scale.CENTER_BOTH,
            parent: "thegame",
            width: 1334,
            height: 750
        },
        scene: playGame,
        physics: {
            default: "matter",
            matter: {
                gravity: {
                    y: gameOptions.gravity
                },
                debug: true
            }
        }
    }
    game = new Phaser.Game(gameConfig);
    window.focus();
}
class playGame extends Phaser.Scene{
    constructor(){
        super("PlayGame");
    }
    create(){
 
        // I want physics world to be updated 30 times per second
        this.matter.world.update30Hz();
 
        // adding world bounds. Basically four walls
        this.matter.world.setBounds(10, 10, game.config.width - 20, game.config.height - 20);
 
        // placing some random static boxes labeled as WALL
        for (let i = 0; i < gameOptions.terrainObjects; i++){ let posX = Phaser.Math.Between(0, game.config.width); let posY = Phaser.Math.Between(0, game.config.height); let width = Phaser.Math.Between(gameOptions.minBoxSize, gameOptions.maxBoxSize); let height = Phaser.Math.Between(gameOptions.minBoxSize, gameOptions.maxBoxSize); let poly = this.matter.add.rectangle(posX, posY, width, height, { isStatic: true }); poly.label = WALL; } // adding a bouncing ball labeled as BALL this.hero = this.matter.add.rectangle(game.config.width / 2, game.config.height / 2, gameOptions.heroSize, gameOptions.heroSize, { restitution: 0.5 }); this.hero.label = BALL; // the hook this.hook = null; // event listeners this.input.on("pointerdown", this.fireHook, this); // no ropes at the beginning this.rope = null; // collision listener this.matter.world.on("collisionstart", function(e, b1, b2){ // when the ball collides with something, we'll remove the hook if(b1.label == BALL || b2.label == BALL){ this.releaseHook(); return; } // when the hook collides with something, let's make it static and create the joint if((b1.label == HOOK || b2.label == HOOK) && !this.rope){ // make the hook static Phaser.Physics.Matter.Matter.Body.setStatic(this.hook, true); // calculate the distance between the ball and the hook let distance = Phaser.Math.Distance.Between(this.hero.position.x, this.hero.position.y, this.hook.position.x, this.hook.position.y); // is the distance fairly greater than hero size? if(distance > gameOptions.heroSize * 2){
 
                    // add the constraint
                    this.rope = this.matter.add.constraint(this.hero, this.hook, distance, 0);
                }
 
            }
        }, this)
    }
 
    // method to fire the hook
    fireHook(e){
 
        // destroy current constraint
        this.releaseHook();
 
        // calculate the angle between the pointer and the ball
        let angle = Phaser.Math.Angle.Between(this.hero.position.x, this.hero.position.y, e.position.x, e.position.y);
 
        this.hook = this.matter.add.rectangle(this.hero.position.x + (gameOptions.heroSize * 2) * Math.cos(angle), this.hero.position.y + (gameOptions.heroSize * 2) * Math.sin(angle), 10, 10);
        this.hook.label = HOOK;
 
        // give the hook the proper velocity
        Phaser.Physics.Matter.Matter.Body.setVelocity(this.hook, {
            x: gameOptions.hookSpeed * Math.cos(angle),
            y:gameOptions.hookSpeed * Math.sin(angle)
        });
    }
 
    // method to remove the hook
    releaseHook(){
 
        // is there a constraint? Remove it
        if(this.rope){
            this.matter.world.removeConstraint(this.rope);
            this.rope = null;
        }
 
        if(this.hook){
            this.matter.world.remove(this.hook);
        }
    }
 
    // method to be executed at every frame
    update(){
 
        // is there a constraint? Shrink it
        if(this.rope){
            this.rope.length -= gameOptions.constraintSpeed;
 
            // rope too short? Remove it
            if(this.rope.length <= gameOptions.heroSize * 2){
                this.releaseHook();
            }
        }
    }
};

来源:https://www.emanueleferonato.com/2019/03/04/the-basics-behind-fling-unity-game-built-in-html5-with-phaser-and-matter-js/

打赏

Leave a Reply