Phaser 3 Collision Example - Phaser3 Typing CST Test
Loading…
Phaser 3 Collision Example — Phaser3 Code
Detects collision between two sprites.
# phaser3/demo/collision.html
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/phaser@3.60.0/dist/phaser.min.js"></script>
</head>
<body>
<script>
const config = { type: Phaser.AUTO, width: 800, height: 600, physics: { default: 'arcade' }, scene: { preload, create, update } };
const game = new Phaser.Game(config);
let player, enemy;
function preload() {
this.load.image('player', 'https://examples.phaser.io/assets/sprites/phaser-dude.png');
this.load.image('enemy', 'https://examples.phaser.io/assets/sprites/asteroid.png');
}
function create() {
player = this.physics.add.sprite(400, 500, 'player');
enemy = this.physics.add.sprite(400, 100, 'enemy');
this.physics.add.collider(player, enemy, () => { console.log('Collision!'); });
}
function update() {
enemy.y += 1;
}
</script>
</body>
</html>Phaser3 Language Guide
Phaser 3 is a fast, open-source HTML5 game framework for creating 2D games for the web and mobile. It provides a complete ecosystem for rendering, physics, input, audio, and animation, allowing developers to build rich, interactive games in JavaScript or TypeScript.
Primary Use Cases
- ▸2D browser-based games
- ▸Interactive educational content
- ▸Gamified UI experiences
- ▸HTML5 advertising and promotional games
- ▸Rapid prototyping of interactive experiences
Notable Features
- ▸WebGL and Canvas rendering support
- ▸Physics engines: Arcade, Matter.js, Impact
- ▸Tilemaps for 2D worlds
- ▸Sprite animations, particle systems, and tweens
- ▸Scene management and modular game architecture
Origin & Creator
Phaser was originally created by Richard Davey and maintained by Photon Storm, with Phaser 3 released in 2018 as the modern version of the framework.
Industrial Note
Phaser 3 is widely used for web-based games, educational games, interactive demos, gamified apps, and HTML5 advergames.