<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();
// Icy platform
platforms.create(300, 450, 'ground')
.setData('drag', new Phaser.Math.Vector2(40, 0))
.setTintFill(0xccccff);
// Sticky platform
platforms.create(500, 300, 'ground')
.setData('drag', new Phaser.Math.Vector2(1280, 0))
.setTintFill(0xff0000);
player = this.physics.add.sprite(100, 150, 'dude');
player.setBounce(0.2);
player.setCollideWorldBounds(true);
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, function (_player, platform) {
var drag = platform.getData('drag');
if (drag) {
player.body.drag.copy(drag);
} else {
player.setDrag(320, 0);
}
});
}
function update () {
// Player drag was already set in collider callback, if colliding.
if (player.body.blocked.none) {
player.setDrag(0);
}
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) {
player.setVelocityY(-320);
}
if (player.body.velocity.x === 0) {
player.anims.play('turn', true);
}
}
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.