QU'EST QUE SKYREN & EAGLE FLAMES ?
Skyren Eagle Flames est un jeu vidéo 2D en vue isométrique, jouable dans le navigateur, développé en HTML5 Canvas et JavaScript / JQuery.
On y incarne Skyren, un jeune aventurier qui doit explorer une carte et retrouver cinq flammes mystiques disséminées dans le monde. Une fois réunies, ces flammes ouvrent un portail vers un autre monde, qui dévoile la suite de l’histoire
Ce projet m’a valu la deuxième place dans les meilleurs jeux de ma promo, pour sa finition, sa narration et sa fluidité globale.
OBJECTIF DU PROJET
L’objectif du projet était de créer un jeu jouable en JavaScript à partir d’un canevas pédagogique (gestion du canvas, déplacements, collisions, événements clavier, sprites…), en respectant un ensemble de contraintes techniques.
Je devais concevoir un gameplay simple mais cohérent (exploration, collecte, portail, cinématique de fin) et l’implémenter entièrement : contrôles, collisions, gestion des objets, feedbacks visuels et sonores.
Le projet visait à mettre en pratique l’algorithmique, la logique de jeu et la gestion de l’animation dans le canvas, tout en proposant une expérience fluide pour le joueur.
DÉROULEMENT
J’ai commencé par définir le concept : un jeu d’exploration isométrique où l’on collecte des flammes pour ouvrir un portail, avec une ambiance sonore et une petite histoire autour du personnage de Skyren.
Ensuite, j’ai mis en place le moteur du jeu : boucle principale, gestion des états (menu, intro, monde 1, autre monde, crédits), lecture du clavier et dessin dans le canvas.
Puis j’ai développé les systèmes clés :
- déplacements isométriques sans touche Z (uniquement avec les flèches),
- collisions basées sur un masque de pixels,
- collecte d’objets (flammes) qui activent un portail,
- cinématique de transition vers un “autre monde”, lettre finale et écran de crédits.
Enfin, j’ai ajouté les assets graphiques et sonores, ajusté les timings et géré les petites finitions (fades, rotation de l’icône de chargement, apparition progressive du livre, etc.).
SOUS LE CAPOT : LOGIQUE ET EXTRAIT DE CODE
1. États du jeu et boucle principale
Le jeu est structuré en plusieurs états (menu, intro, monde principal, autre monde, crédits) gérés dans une seule fonction boucle() appelée régulièrement avec setInterval.
Cela permet de séparer clairement les phases (affichage du menu, transition, loading, gameplay, cinématique, crédits) sans se perdre dans des conditions imbriquées.
2. Déplacements isométriques + collisions
Les déplacements se font uniquement avec les flèches, mais comme la vue est isométrique, chaque touche déplace le personnage en diagonale (par exemple, flèche haut = haut‑droite).
Je gère aussi la collision avec le décor via un masque de pixels : un canvas invisible où la zone “bloquante” est définie par un canal alpha non nul.
3. Collecte des flammes et activation du portail
Les flammes sont des objets placés sur la carte, chacune avec sa position, son état (collected) et son alpha (pour l’animation de disparition).
Quand le joueur s’en approche, la flamme est collectée, un son se joue et un compteur s’incrémente ; à cinq flammes, le portail s’active progressivement (alpha + scale animés).
3. Cinématique, transitions et UX (fin du jeu + crédits)
Système de cinématique et de transitions (fade‑in/fade‑out, affichage d’une lettre, disparition du portail, écran de crédits synchronisé avec la musique). Cet extrait montre ma capacité à travailler sur l’expérience globale du joueur, pas seulement sur la mécanique de base.
RÉSULTAT
Skyren Eagle Flames est un prototype de jeu d’exploration isométrique jouable dans le navigateur, avec déplacements fluides, collisions, collecte d’objets, cinématique et écran de crédits.
Ce projet m’a valu la 2ᵉ place des meilleurs jeux de ma promotion, et illustre ma capacité à concevoir et développer un jeu complet en JavaScript / HTML5 Canvas.
