Get started with phaser CDN
MIT licensed
Phaser: HTML5 library, JS, interactive games, applications.
Tags:- HTML5
- game
- canvas
- 2d
- WebGL
- web audio
- physics
- tweens
- javascript
- typescript
Stable version
Copied!
How to start using phaser CDN
// Create a new Phaser game with a 800px width and 600px height
const game = new Phaser.Game({
type: Phaser.CANVAS,
parent: 'game-container', // replace with the id of your HTML element
width: 800,
height: 600,
physics: {
default: 'arcade',
arcade: {
gravity: { y: 200 }
}
},
scene: {
preload: PreloadScene,
create: CreateScene,
update: UpdateScene
}
});
// Preload assets
class PreloadScene extends Phaser.Scene {
preload() {
this.load.image('ground', 'assets/ground.png');
this.load.image('player', 'assets/player.png');
}
}
// Create game objects
class CreateScene extends Phaser.Scene {
create() {
this.ground = this.physics.add.staticGroup();
this.ground.create(400, 570, 'ground').setScale(2).refreshBody();
this.player = this.physics.add.sprite(100, 550, 'player');
this.player.setBounce(0.2);
this.player.setCollideWorldBounds(true);
this.cursors = this.input.keyboard.createCursorKeys();
this.physics.add.collider(this.ground, this.player);
this.anims.create({
key: 'run',
frames: this.anims.generateFrameNumbers('player', { start: 0, end: 3 }),
frameRate: 10,
repeat: -1
});
}
}
// Update game logic
class UpdateScene extends Phaser.Scene {
update(time, delta) {
if (this.cursors.left.isDown) {
this.player.setAccelerationX(-500);
} else {
this.player.setAccelerationX(0);
}
if (this.cursors.right.isDown) {
this.player.setAccelerationX(500);
}
}
}
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
All versions
0.9.1
0.9.2
0.9.3
0.9.4
0.9.5
0.9.6
0.9.7
1.0
1.0.1
1.0.2
1.0.3
1.0.4
1.0.5
1.0.6
1.1
1.1.1
1.1.2
1.1.3
1.1.4
1.1.5
1.1.6
2.0.0
2.0.1
2.0.2
2.0.3
2.0.4
2.0.5
2.0.6
2.0.7
2.1.0
2.1.1
2.1.2
2.1.3
2.2.0
2.2.1
2.2.2
2.3.0
2.4.0
2.4.0-a
2.4.0a
2.4.1
2.4.2
2.4.3
2.4.4
2.4.5
2.4.6
2.4.7
2.4.8
2.4.9
2.5.0
2.6.0
2.6.1
2.6.2
3.0.0
3.0.0-beta.19
3.0.0-beta.20
3.1.0
3.1.1
3.1.2
3.10.0
3.10.1
3.11.0
3.12.0
3.12.0-beta1
3.12.0-beta2
3.12.0-beta3
3.13.0
3.14.0
3.15.0
3.15.1
3.16.0-rc1
3.16.0-rc2
3.16.0-rc3
3.16.1
3.16.2
3.17.0
3.18.0
3.18.0-beta1
3.18.1
3.19.0
3.2.0
3.2.1
3.20.0
3.20.1
3.21.0
3.22.0
3.23.0
3.24.0
3.24.1
3.25.0-beta.0
3.3.0
3.4.0
3.5.0
3.5.1
3.50.0
3.50.0-beta.1
3.50.0-beta.10
3.50.0-beta.11
3.50.0-beta.12
3.50.0-beta.2
3.50.0-beta.4
3.50.0-beta.7
3.50.0-beta.8
3.50.0-beta.9
3.50.1
3.51.0
3.52.0
3.53.0
3.53.1
3.54.0
3.54.0-dev
3.55.0
3.55.1
3.55.2
3.6.0
3.6.1
3.60.0
3.60.0-beta.1
3.60.0-beta.10
3.60.0-beta.11
3.60.0-beta.12
3.60.0-beta.13
3.60.0-beta.14
3.60.0-beta.15
3.60.0-beta.16
3.60.0-beta.17
3.60.0-beta.18
3.60.0-beta.19
3.60.0-beta.2
3.60.0-beta.20
3.60.0-beta.21
3.60.0-beta.22
3.60.0-beta.23
3.60.0-beta.3
3.60.0-beta.4
3.60.0-beta.5
3.60.0-beta.6
3.60.0-beta.7
3.60.0-beta.8
3.60.0-beta.9
3.61.0-beta.1
3.61.0-beta.2
3.61.0-beta.3
3.61.0-beta.4
3.7.0
3.7.1
3.70.0
3.8.0
3.80.0
3.80.0-beta.1
3.80.0-beta.2
*** 3.80.1
3.9.0
4.0.0-alpha.0
4.0.0-alpha.1
4.0.0-alpha.2
4.0.0-alpha.3