contact@lyceefulbert.fr 02 37 88 27 00

Tutoriel Phaser 3 : créer un jeu vidéo web en JavaScript (pas à pas)

Ce tutoriel Phaser 3 t’apprend à développer ton premier jeu vidéo web en JavaScript : chargement d’images, déplacements, collisions, score… Un guide complet idéal pour débutants, étudiants en BTS SIO ou passionnés de développement de jeux 2D.

🎮 Voir la démo finale du jeu : kferrandonfulbert.github.io/montgoldfiere/

Pourquoi apprendre à créer un jeu web avec Phaser 3 ?

Phaser est l’un des frameworks JavaScript les plus utilisés pour créer des jeux web 2D. Il est simple, rapide à prendre en main et permet de créer un jeu complet avec très peu de code.

  • ✔️ Idéal pour apprendre la logique d'un jeu vidéo
  • ✔️ Fonctionne directement dans le navigateur
  • ✔️ Parfait pour les projets étudiants ou portfolios

Objectifs du tutoriel Phaser

Dans ce tutoriel, tu vas apprendre à :

  • Installer Phaser 3 via CDN
  • Créer une scène de jeu complète (preload, create, update)
  • Déplacer un personnage avec le clavier
  • Gérer une collision et un système de score
  • Publier ton jeu vidéo web en ligne

Code source du tutoriel Phaser

Tu peux télécharger le projet Phaser complet ici :

Pré-requis

  1. Visual Studio Code
  2. Extension Live Server
  3. Les fichiers : index.html, script.js, images du jeu

Apercu

Aperçu du jeu vidéo web créé avec Phaser 3
Aperçu du jeu vidéo web créé avec Phaser 3

Étape 1 — Installer Phaser 3 dans ton projet

Pour commencer, ajoute Phaser 3 dans ton index.html grâce au CDN : 

<script src="https://cdn.jsdelivr.net/npm/phaser@3/dist/phaser.js"></script>

Ce script charge automatiquement Phaser dans ton navigateur. Tu vas maintenant pouvoir créer ton jeu vidéo web en JavaScript.

Étape 2 — Configurer ton jeu vidéo web

Dans ton fichier script.js, commence par définir la configuration Phaser : 

const config = {  type: Phaser.AUTO,  width: 800,  height: 600,  physics: {    default: 'arcade',    arcade: { debug: false }  },  scene: { preload, create, update }};const game = new Phaser.Game(config);

Cette configuration crée automatiquement un canvas et initialise le moteur physique arcade.

Étape 3 — Charger les images dans preload()

preload() sert à charger toutes les ressources nécessaires à ton jeu : 

function preload() {  this.load.image('player', 'balloon.webp');  this.load.image('coin', 'pieces.webp');  this.load.image('bg', 'background.webp');}

Une fois chargées, ces ressources pourront être utilisées dans la scène de jeu.

Étape 4 — Créer la scène de jeu avec create()

Dans cette étape, tu vas :

  • Afficher le fond
  • Placer le joueur
  • Créer la pièce à ramasser
  • Initialiser le score
function create() {  this.add.image(400, 300, 'bg');  this.player = this.physics.add.sprite(100, 100, 'player')    .setCollideWorldBounds(true);  this.coin = this.physics.add.sprite(300, 200, 'coin');  this.score = 0;  this.scoreText = this.add.text(20, 20, 'Score : 0', { fontSize: '20px' });  this.physics.add.overlap(this.player, this.coin, collectCoin, null, this);}

Étape 5 — Gérer les déplacements dans update()

update() s’exécute en continu. C’est ici que le joueur se déplace avec les touches fléchées. 

function update() {  const cursors = this.input.keyboard.createCursorKeys();  if (cursors.left.isDown) this.player.setVelocityX(-200);  else if (cursors.right.isDown) this.player.setVelocityX(200);  else this.player.setVelocityX(0);  if (cursors.up.isDown) this.player.setVelocityY(-200);  else if (cursors.down.isDown) this.player.setVelocityY(200);  else this.player.setVelocityY(0);}

Étape 6 — Ajouter un score dans ton jeu Phaser

function collectCoin(player, coin) {  this.score++;  this.scoreText.setText('Score : ' + this.score);  coin.x = Phaser.Math.Between(50, 750);  coin.y = Phaser.Math.Between(50, 550);}

Chaque collision augmente le score et repositionne la pièce aléatoirement dans la zone de jeu.

Aller plus loin : améliorations possibles

  • Ajouter plusieurs pièces
  • Créer un ennemi (Game Over en cas de collision)
  • Ajouter des animations
  • Créer un high-score sauvegardé
  • Ajouter un chrono

Ce tutoriel Phaser t’a permis de créer ton premier jeu vidéo web. Tu peux maintenant développer des jeux plus avancés et enrichir ton portfolio de développeur.