Run & Debug

Front-endÉtude de cas

Un mini-jeu arcade de course et de saut qui travaille le rythme, les collisions, le score et le feedback instantané.

« Je voulais un jeu qu’on comprenne en quelques secondes et qu’on relance aussitôt : esquiver les bugs, attraper les bonus, battre son record. »
Éva Dauphin, créatrice de Run & Debug
Version ordinateur du projet Run & Debug
01

Le contexte

Run & Debug est un endless runner dans lequel le personnage évite des bugs, récupère des bonus et tente de battre son record.

Le défi était de créer une boucle de jeu courte, immédiatement compréhensible et suffisamment réactive pour donner envie de recommencer.

02

Mon rôle

J’ai réalisé le mini-jeu de A à Z : direction artistique, game design, boucle de jeu, écrans, collisions, rendu et retours visuels.

DA & game designCanvas 2DJavaScriptUIResponsiveTests
03

Le processus, étape par étape

1. Comprendre

Définir une boucle simple : courir, sauter, esquiver, récupérer et améliorer son score.

2. Structurer

Séparer logique, entrées, collisions, rendu, états du jeu et interface pour garder le code lisible.

3. Dessiner

Créer des écrans courts et colorés pour lancer une partie, choisir un niveau et comprendre le résultat.

4. Coder & tester

Ajuster vitesse, hitboxes, difficulté, responsive et mémorisation locale du record.

04

Les choix visuels

Le décor pastel, les personnages très contrastés et les effets courts rendent chaque obstacle et récompense immédiatement identifiable.

La palette
#6C63FF
#FF6FAE
#FFD45C
#EAF7FF
La typographieAa

Une typographie ronde et énergique pour le jeu, avec des chiffres très lisibles pour le HUD.

Les composants

Écran de chargement, choix du niveau, HUD, canvas de jeu, game over et célébration du record.

05

Sous le capot

Le jeu est structuré en modules JavaScript distincts pour le moteur, le rendu, les entrées, les collisions, les obstacles, les effets et la persistance locale.

L'architecture
input → logique → collisions → rendu
                 ↘ score + record ↗
06

Là où ça a coincé

Le mur 1

Rendre les collisions justes alors que les sprites ont des silhouettes irrégulières.

Ma solution

Hitboxes ajustées à la zone utile et séparation claire entre rendu visuel et collision réelle.

Le mur 2

Conserver une vitesse agréable sur différentes tailles d’écran.

Ma solution

Boucle de jeu basée sur le temps, redimensionnement contrôlé du canvas et interface indépendante du rendu.

07

Le résultat

Canvasrendu temps réel
3niveaux de jeu
Localrecord mémorisé

Le jeu propose une boucle complète avec difficulté, vies, score, bonus, écran de fin et conservation du record.

08

Ce que j’en retiens

Run & Debug a consolidé ma pratique du JavaScript interactif et ma compréhension du lien entre rythme, feedback visuel et sensation de contrôle.

Envie du même genre de projet ?