Je n'étais pas particulièrement adepte des salles de jeux d'arcade étant jeune. En fait, je n'en voyais pas spécialement l'uitilité avec les jeux fantastiques de mon C64. Il y avait pourtant trois jeux d'arcade pour lesquels j'étais prêt à dépenser mon argent : Donkey Kong, Dragons Lair et Outrun…

… et j'adorais Outrun, la vitesse, les montagnes, les palmiers et la musique ! Y compris sur la version minimale de mon C64.

Alors j'ai voulu mettre les doigts dans la création d'un jeu de course ancien, du type Outrun, PitStop ou Pole Position. Je n'ai pas l'intention de créer un jeu peaufiné et fini mais je souhaitais juste revenir sur les mécanismes et les astuces utilisées pour la création de ces anciens jeux. Les courbes, les collines, les sprites et l'impression de vitesse…

Au final, un projet « d'un week-end » qui se prolonge sur cinq ou six week-ends…

Vous pouvez déjà :

• jouer au jeu ;
• télécharger le code source ou le consulter sur GitHub ;
• lire les articles de cette série.

La version jouable est plus une preuve de faisabilité (Proof Of Concept - POC) qu'un véritable jeu. En fait, si vous deviez développer un véritable jeu, ce serait juste un point de départ à partir duquel vous le transformeriez en jeu.

En terme plus direct, la version finale n'est pas aboutie, mais elle est fonctionnelle et je vais vous montrer comment l'implémenter en quatre étapes.

• Démarrer : v1 - avancer tout droit.
• Etape 2 : v2 - les courbes.
• Etape 3 - v3 - les collines.
• Terminer : v4 - tout ensemble.

• Jouer avec : v1 - avancer tout droit.
• Jouer avec : v2 - les courbes.
• Jouer avec - v3 - les collines.
• Jouer avec : v4 - tout ensemble.

Faites-vous plaisir !

Les performances de ce jeu dépendent principalement de votre machine et de votre navigateur. Il fonctionne correctement sur tous les navigateurs récents et particulièrement ceux supportant l'accélération GPU pour les canvas, mais un mauvais driver graphique peut plomber les performances. De ce fait, votre kilométrage peut varier. Des réglages sont disponibles pour adapter le rendu aux performances de votre machine.

Les navigateurs compatibles sont :

• Firefox (12+) : fonctionne parfaitement, 60fps en résolution maximale. Parfait !
• Chrome (19+) : fonctionne parfaitement, 60 fps en résolution maximale… pour peu que votre accélérateur GPU soit convenable…
• IE9 : fonctionne correctement, 30fps en résolution moyenne… pas idéal, mais au moins, ça fonctionne.

Concernant les appareils mobiles, les performances sont trop disparates pour envisager un support cohérent.

Je n'ai pas pris en compte l'optimisation des performances. Il est donc fort probable de pouvoir les améliorer sur des navigateurs plus anciens.

Ce projet est codé en JavaScript (pour ses capacités de prototypage) mais le but n'est pas destiné à montrer des techniques ou des bonnes pratiques en JavaScript. En fait, pour rendre l'ensemble facilement compréhensible, le JavaScript est placé dans le contenu HTML (ce n'est pas bien !) et utilise des variables globales (encore pire !)

S'il s'agissait de créer un vrai jeu, la structure et l'organisation du code seraient complètement différents, mais s'agissant juste d'une démo, j'ai opté pour le principe KISS

Cet article a été traduit avec l'aimable autorisation de Jake Gordon. L'article original : How to build a racing game peut être vu sur le site de Code inComplete.

Nous tenons à remercier XXX pour sa relecture attentive de cet article.