Skip to content

Instantly share code, notes, and snippets.

@julianfrank
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.
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment