<footer><div id=version></div></footer>
html, body {
height: 100%;
}
body {
margin: 0;
padding: 0;
background: #111;
color: #eee;
font: caption;
}
#version {
position: absolute;
left: 5px;
top: 5px;
}
// console.clear();
var player;
var platforms;
var cursors;
var movingPlatform;
function preload() {
this.load.image("sky", "src/games/firstgame/assets/sky.png");
this.load.image("ground", "src/games/firstgame/assets/platform.png");
this.load.image("star", "src/games/firstgame/assets/star.png");
this.load.spritesheet("dude", "src/games/firstgame/assets/dude.png", {
frameWidth: 32,
frameHeight: 48
});
}
function create() {
// this.add.image(400, 300, 'sky');
platforms = this.physics.add.staticGroup();
platforms.create(400, 568, "ground").setScale(2).refreshBody();
// Walls
platforms.create(0, 450, "ground").setScale(0.1, 10).refreshBody();
platforms.create(800, 450, "ground").setScale(0.1, 10).refreshBody();
movingPlatform = this.physics.add.image(400, 400, "ground");
movingPlatform.setImmovable(true);
movingPlatform.body.allowGravity = false;
movingPlatform.setVelocityX(50);
player = this.physics.add.sprite(100, 150, "dude");
player.setBounce(0.2);
player.setCollideWorldBounds(true);
player.setDrag(640, 0);
player.body.setAllowDrag(false); // will be toggled in update()
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
});
cursors = this.input.keyboard.createCursorKeys();
this.physics.add.collider(player, platforms);
this.physics.add.collider(player, movingPlatform);
}
function update() {
// `touching` includes the moving platform (dynamic body)
player.body.setAllowDrag(!player.body.blocked.none || !player.body.touching.none);
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);
}
if (cursors.up.isDown && player.body.touching.down) {
player.setVelocityY(-320);
}
if (player.body.velocity.x === 0) {
player.anims.play("turn", true);
}
if (movingPlatform.x >= 500) {
movingPlatform.setVelocityX(-50);
} else if (movingPlatform.x <= 300) {
movingPlatform.setVelocityX(50);
}
}
document.getElementById("version").textContent = "Phaser v" + Phaser.VERSION;
var config = {
type: Phaser.AUTO,
width: 800,
height: 600,
parent: "phaser-example",
physics: {
default: "arcade",
arcade: {
gravity: { y: 300 },
debug: true
}
},
scene: {
preload: preload,
create: create,
update: update
},
loader: {
baseURL: "https://labs.phaser.io",
crossOrigin: "anonymous"
},
plugins: {
scene: [
// <https://github.com/samme/phaser-plugin-debug-body-colors>
{
key: "DebugBodyColorsPlugin",
plugin: PhaserDebugBodyColorsPlugin,
mapping: "debugBodyColors"
}
]
}
};
var game = new Phaser.Game(config);
This Pen doesn't use any external CSS resources.