babylonsample.js

babylonsample.js

<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>