Skip to content

Instantly share code, notes, and snippets.

@julianfrank

julianfrank/babylonsample.js

Created September 2, 2019 09:30
Show Gist options
  • Save julianfrank/906fd2c01d0a954908f12cc1569ccd46 to your computer and use it in GitHub Desktop.
Save julianfrank/906fd2c01d0a954908f12cc1569ccd46 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. julianfrank created this gist Sep 2, 2019.
    182 changes: 182 additions & 0 deletions babylonsample.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,182 @@
    <template>
    <div id="phaserCanvas"></div>
    </template>

    <script>

    export default {
    data() {
    return {
    game: () => {}
    };
    },
    mounted() {
    if (process.client) {
    import("phaser")
    .then(this.bootStrapPhaser)
    .catch(console.error);
    }
    },
    methods: {
    bootStrapPhaser(Phaser) {
    window.Phaser = Phaser;
    const phaserConfig = {
    parent: "phaserCanvas",
    transparent:true,
    type: Phaser.AUTO,
    width: window.innerWidth,
    height: window.innerHeight,
    physics: {
    default: "arcade",
    arcade: {
    gravity: { y: 300 },
    debug: true
    }
    },
    scene: {
    preload,
    create,
    update
    }
    };
    this.game = window.game = new Phaser.Game(phaserConfig);

    function preload() {
    //this.load.setBaseURL("http://labs.phaser.io");

    this.load.image("sky", "/sky.png");
    this.load.image("ground", "/platform.png");
    this.load.image("star", "/star.png");
    this.load.image("bomb", "bomb.png");
    this.load.spritesheet("dude", "dude.png", {
    frameWidth: 32,
    frameHeight: 48
    });
    }
    let platforms,
    player,
    cursors,
    stars,
    score = 0,
    scoreText,
    bombs;
    function create() {
    this.add.image(400, 300, "sky");

    platforms = this.physics.add.staticGroup();

    platforms
    .create(400, 568, "ground")
    .setScale(2)
    .refreshBody();

    platforms.create(600, 400, "ground");
    platforms.create(50, 250, "ground");
    platforms.create(750, 220, "ground");

    player = this.physics.add.sprite(100, 450, "dude");

    player.setBounce(0.2);
    player.setCollideWorldBounds(true);

    this.anims.create({
    key: "left",
    frames: this.anims.generateFrameNumbers("dude", { start: 0, end: 3 }),
    frameRate: 10,
    repeat: -1
    });

    this.anims.create({
    key: "turn",
    frames: [{ key: "dude", frame: 4 }],
    frameRate: 20
    });

    this.anims.create({
    key: "right",
    frames: this.anims.generateFrameNumbers("dude", { start: 5, end: 8 }),
    frameRate: 10,
    repeat: -1
    });

    this.physics.add.collider(player, platforms);

    cursors = this.input.keyboard.createCursorKeys();

    scoreText = this.add.text(16, 500, "score: 0", {
    fontSize: "32px",
    fill: "#000"
    });

    stars = this.physics.add.group({
    key: "star",
    repeat: 11,
    setXY: { x: 12, y: 0, stepX: 70 }
    });
    stars.children.iterate(function(child) {
    child.setBounceY(Phaser.Math.FloatBetween(0.4, 0.8));
    });
    this.physics.add.collider(stars, platforms);
    this.physics.add.overlap(player, stars, collectStar, null, this);
    function collectStar(player, star) {
    star.disableBody(true, true);
    score += 10;
    scoreText.setText("Score: " + score);

    if (stars.countActive(true) === 0) {
    stars.children.iterate(function(child) {
    child.enableBody(true, child.x, 0, true, true);
    });
    var x =
    player.x < 400
    ? Phaser.Math.Between(400, 800)
    : Phaser.Math.Between(0, 400);
    var bomb = bombs.create(x, 200, "bomb");
    bomb.setBounce(1);
    bomb.setCollideWorldBounds(true);
    bomb.setVelocity(Phaser.Math.Between(-200, 200), 20);
    }
    }

    bombs = this.physics.add.group();
    this.physics.add.collider(bombs, platforms);
    this.physics.add.collider(player, bombs, hitBomb, null, this);
    function hitBomb(player, bomb) {
    this.physics.pause();
    player.setTint(0xff0000);
    player.anims.play("turn");
    gameOver = true;
    }
    }

    function update() {
    if (cursors.left.isDown) {
    player.setVelocityX(-160);
    player.anims.play("left", true);
    } else if (cursors.right.isDown) {
    player.setVelocityX(160);
    player.anims.play("right", true);
    } else {
    player.setVelocityX(0);
    player.anims.play("turn");
    }
    if (cursors.up.isDown && player.body.touching.down) {
    player.setVelocityY(-330);
    }
    }
    }
    }
    };
    </script>


    <style scoped>
    * {
    margin: 0%;
    padding: 0%;
    }
    #phaserCanvas{
    position: absolute;
    top:52px;
    }
    </style>