OSOM Reflex : créer un jeu mobile en une session

On avait un jeu Pong sur la page Agence. Problème : il était injouable sur mobile (canvas + touch = frustration). On a créé OSOM Reflex, un jeu de réflexes conçu pour mobile. En une session de 2h.

Le brief

Problème :

Pong Beast Mode utilisait un canvas HTML5. Sur mobile, les contrôles tactiles étaient imprécis et frustrants.

Objectif :

Un jeu simple, optimisé tactile, qui montre notre capacité technique de façon ludique.

Contraintes :

- Jouable en <30 secondes (attention limitée)

- Tactile-first (thumb-friendly zones)

- Tracking GA4 pour A/B testing

Le concept

OSOM Reflex - Test de réflexes

Règles :

1. Une cible apparaît à l'écran (position aléatoire)

2. Tap sur la cible le plus vite possible

3. 5 rounds, la cible rétrécit à chaque round (80px → 45px)

4. Temps moyen affiché à la fin

Twist :

On compare le temps du joueur à celui d'une IA (23ms). C'est injouable de battre 23ms, mais ça crée un défi ludique.

Anti-triche :

Si le joueur tap avant que la cible apparaisse, pénalité de +500ms.

Implémentation technique

Stack :

- React useState/useEffect (pas de library externe)

- CSS transforms pour les animations

- Touch events natifs

Structure du composant :

1. État : phase (countdown/playing/result), round actuel, temps cumulé

2. Countdown 3-2-1 avant chaque round

3. Target position calculée aléatoirement (avec padding pour éviter les bords)

4. onTouchStart capture le temps de réaction

Responsive :

- Target size minimum 45px (accessible au pouce)

- Zone de jeu adaptée à l'écran

- Pas de scroll pendant le jeu (touch-action: none)

Ce que l'IA a fait

Instruction initiale :

"Crée un jeu de réflexes tactile. 5 rounds, cible qui rétrécit, compare avec temps IA 23ms."

Génération (45 min) :

1. Composant React complet avec game loop

2. Styles Tailwind responsive

3. Logique de scoring et anti-triche

4. Intégration GA4 events

Itérations demandées :

- "Ajoute un countdown 3-2-1" → fait en 2 min

- "La cible est trop proche des bords" → padding ajusté

- "Messages de fin personnalisés selon le score" → 3 variantes créées

Tracking et résultats

Events GA4 :

- game_start : quand le joueur lance une partie

- game_complete : temps moyen, nombre de rounds, device type

Données après 2 semaines :

- 340 parties jouées

- Temps moyen : 412ms (humains)

- Taux de completion : 78% (abandons = impatience countdown)

- 92% mobile, 8% desktop

Impact :

Temps passé sur /agence : +45 secondes en moyenne (engagement).

Ce qu'il faut retenir

-Mobile-first = tactile-first. Les contrôles desktop ne se transposent pas.
-Un jeu simple bien exécuté > un jeu complexe mal adapté.
-Le tracking permet de valider les hypothèses (78% completion = bon UX).
-L'IA peut générer des jeux fonctionnels. L'itération humaine affine l'UX.

Stack

ReactTailwind CSSTouch Events APIGoogle Analytics 4

jeu mobile React | touch events JavaScript | game development IA | OSOM Reflex | game development