<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;
var graphics;
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.body.useDamping = true;
// Player body `drag` is set conditionally, in update().
graphics = this.add.graphics();
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() {
player.setDrag(player.body.touching.none ? 0.99 : 0.9);
if (this.physics.world.drawDebug) {
drawDrag();
}
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) {
// With air drag he needs a larger jump velocity
player.setVelocityY(-420);
}
// Damping can have a long decay near velocity 0.
// Below |6| px/s we'll just stop.
if (Phaser.Math.Fuzzy.Equal(player.body.velocity.x, 0, 6)) {
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);
}
}
function drawDrag () {
var body = player.body;
var dx = body.useDamping ?
-body.velocity.x * (1 - body.drag.x) :
-Math.sign(body.velocity.x) * body.drag.x;
var dy = body.useDamping ?
-body.velocity.y * (1 - body.drag.y) :
-Math.sign(body.velocity.y) * body.drag.y;
graphics
.clear()
.lineStyle(1, body.allowDrag ? 0xff9900 : 0x666666)
.lineBetween(
body.center.x,
body.center.y,
body.center.x + dx,
body.center.y + dy
);
}
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.