
Dans cet article, je vous montre comment initialiser le développement d’un jeu vidéo html5 avec javascript. Entre autres, l’arborescence adéquat, les fonctions de base à implémenter, le requestAnimationFrame, et une fonction nécessaire à la compatibilité multiplateforme. English version.
Prérequis
– Savoir ce qu’est html et connaître la balise canvas;
– avoir des connaissances de base en javascript.
Création du projet
Comme pour tout projet de développement, la création d’une arborescence de dossiers ou répertoires est indispensable pour organiser les composants du jeu vidéo.
Tout d’abord, créez un dossier projet nommé game, qui encapsulera tous les éléments de votre jeu vidéo.
Dans le dossier créé précédemment, vous devez créer:
– un dossier js qui comportera tous les fichiers et librairies javascript;
– un dossier img qui comportera toutes les fichiers images (fond, sprites…);
– un dossier sound qui comportera tous les fichiers audio relatifs aux bruitages de votre jeu;
– un dossier music qui comportera tous les fichiers audio relatifs aux musiques de votre jeu;
– un dossier css qui comportera tous les fichiers css.
Le fichier html du jeu game.html est quant à lui placé à la racine du dossier projet.
Le code javascript doit être isolé de tout autre code javascript
pour éviter les mauvaises interactions avec un autre code javascript et ainsi éviter des effets de bord incontrôlés.
Il était d’usage avec ECMAScript 5 de définir une fonction anonyme auto exécutée qui encapsule tout le code javascript de votre jeu vidéo.
<script> (function() { // code exécuté })(); </script>
Avec ECMAScript 6, la notation évolue pour se simplifier:
<script> { // code exécuté } </script>
C’est la base tout développement javascript quel qu’il soit.
Une fonction d’initialisation exécutée au démarrage
Cette fonction sert à initialiser les éléments de votre jeu vidéo tel que les canvas, les sprites, ou encore les périphériques d’interaction comme le clavier, la souris, un joystick ou une interface tactile. Elle n’est exécutée qu’une seule fois au démarrage de votre jeu.
<script> // début du code isolé { var initialisation = function() { } window.onload = initialisation; // appel de la fonction initialisation au chargement de la page } // fin du code isolé </script>
Une fonction principale exécutée en boucle
Cette fonction sert à appeler le différents traitements liés au jeu tels que les gestion du clavier, la souris ou interaction tactile. Mais aussi le déplacement et la gestion des sprites, la gestion du score etc… Cette fonction est le cœur de votre jeu.
<script> // début du code isolé { var initialisation = function() { } var principale = function() { } window.onload = initialisation; // appel de la fonction initialisation au chargement de la page } // fin du code isolé </script>
Cette fonction est à appeler en boucle. Là où certains utilisent setInterval ou setTimeout, je préconise un appel synchronisé avec le rafraichissement de l’écran.
Cette synchronisation se fait par le biais d’une fonction spécifique à html5 qui est le requestAnimationFrame qui appelle au prochain rafraichissement de la page la fonction donnée en paramètre. L’appel se fait donc une seule fois.
requestAnimId = window.requestAnimationFrame(principale);
Pour que la synchronisation et le rafraichissement soit constant, il est donc nécessaire que la fonction principale demande aussi son rappel au rafraichissement de la page:
var principale = function() { // le code du jeu requestAnimId = window.requestAnimationFrame(principale); // rappel de principale au prochain rafraichissement de la page }
Cette fonction n’est pas supportée par tous les navigateurs ou prend une appellation différente. Il est donc nécessaire de gérer cela si on souhaite s’assurer que le jeu soit supporter par la plupart des navigateurs :
var vendors = ['ms', 'moz', 'webkit', 'o']; for (var x = 0; x &amp;amp;amp;amp;amp;lt; vendors.length &amp;amp;amp;amp;amp;amp;&amp;amp;amp;amp;amp;amp; !window.requestAnimationFrame; ++x) { window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame']; window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame']; }
Je suppose que vous avez remarqué aussi une fonction cancelAnimationFrame qui annule le prochain appel à la fonction requestAnimationFrame.
Je vous conseille d’encapsuler cette fonction dans une librairie utilitaires javascript util.js.
Le code de base complet pour démarrer le développement d’un jeu vidéo
<script> // début du code isolé { var requestAnimId; var initialisation = function() { // le code de l'initialisation requestAnimId = window.requestAnimationFrame(principale); // premier appel de principale au rafraichissement de la page } var principale = function() { // le code du jeu requestAnimId = window.requestAnimationFrame(principale); // rappel de principale au prochain rafraichissement de la page } window.onload = initialisation; // appel de la fonction initialisation au chargement de la page } // fin du code isolé </script>
Et JQuery ?
Ce code est aisément adaptable en JQuery qui est moins verbeux. Alors pourquoi ne pas le faire ?
Il me semble important de savoir comment les choses fonctionnent pour les maitriser. De manière générale, les librairies masquent beaucoup d’aspects. Donc si vous souhaitez adapter ce code en JQuery ou voyez des améliorations possibles, transmettez les moi, je les diffuserai en votre nom et avec votre accord sur le site.
By Set video game development 28 janvier 2019 - 10 h 49 min
[…] In this post, I show you how to run html5 video game development with javascript. Among others, the tree project, basics functions to implement, the requestAnimationFrame, and a function needed to multiplatform compatibility.French version. […]
By Le HTML5 pour l’interactivité – Prographie 8 septembre 2018 - 15 h 32 min
[…] https://www.developper-jeux-video.com/initialiser-developpement-jeu-video/ […]
By rdpz 4 septembre 2015 - 9 h 00 min
Merci pour ce tuto très clair!
Petite question: vous parlez au début d’encapsuler tout le code javascript pour éviter d’avoir de mauvaises surprises..
En quoi l’encapsulation règle ce problème?
Merci beaucoup!
By Franck Dubois 4 septembre 2015 - 19 h 16 min
Encapsuler le code javascript dans une fonction auto exécutée vous permet d’intégrer votre code dans n’importe quelle page web sans soucis : votre code javascript ne viendra pas perturber un code javascript existant et inversement. L’encapsulation rend imperméable votre code à tout autre code.
Imaginez que vous utilisiez une variable nommée maVariable et que votre code seul fonctionne correctement.
Vous l’intégrez ensuite sans l’encapsuler dans un code qui utilise aussi une variable nommée maVariable.
Cette variable aura des valeurs déterminées par votre code mais aussi celui existant et donc vous pourriez avoir des valeurs chaotiques qui rendrait votre code ainsi que l’existant non fonctionnels.
L’encapsulation évite cet écueil.
Cela répond t-il à votre question ?
By rdpz 5 septembre 2015 - 14 h 38 min
Je vous remercie pour votre réponse!
Je vous avoue que j’ai toujours un peu de mal à voir comment l’encapsulation va permettre cela..
Auriez vous un exemple?
Et à propos de l’encapsulation: c’est une méthode utilisée lors de la création de classes en POO (arrêtez moi si je me trompe) et j’ai cru comprendre qu’il n’y avait pas à proprement parler de classe en JavaScript puisque tout est objet. N’est il pas abusif d’utiliser ce terme pour JS ?
D’avance merci!
By Franck Dubois 6 septembre 2015 - 19 h 33 min
En POO, on crée des objets à partir de classes.
En javascript, on crée des objets sans créer préalablement de classes.
Dans les 2 cas, on peut faire de l’encapsulation, donc lier l’encapsulation à la création de classes est, à mon sens, une erreur.
Encapsuler, c’est protégé et masqué son code. L’encapsulation permet de créer des boites noires : le développeur utilise une librairie mais n’a aucune idée du comment elle fonctionne et en général ne souhaite pas le savoir.
Prenez l’exemple de JQuery : la plupart des utilisateurs ne connaissent pas le cœur du code.
L’encapsulation est aussi une méthode permettant de rendre son code imperméable et de s’assurer qu’il fonctionnera dans toute circonstance.
Dans une page html, vous pouvez intégrer des codes de tout horizon sans qu’ils interfèrent les uns avec les autres si chaque développeur l’a rendu imperméable, l’a encapsulé.
Intégrez des pubs de plusieurs diffuseurs, y mettre un jeu vidéo, ajouter un formulaire de contact etc…
Si aucune protection (encapsulation) n’est mise en place, il suffit qu’un nom de variable soit identique pour que plus rien ne fonctionne.
By layer html5, optimisation html5 24 avril 2014 - 16 h 26 min
[…] Initialiser le développement d’un jeu vidéo (6 107) […]
By papaours 12 juillet 2013 - 2 h 32 min
Pour le requestAnimFrame il y a aussi cet article anglophonne ( http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/ ) qui propose de redéfinir requestAnimFrame. Je la trouve plus clair perso. Son avantage et qu’en cas d’incompatibilité, elle initialise le setTimeout().
By Tigralt 12 mai 2013 - 11 h 33 min
Très bon tuto, merci beaucoup !
By Tutjeu canvas html5 Pong 18 avril 2013 - 8 h 34 min
[…] – avoir des connaissances de base en javascript; – il est conseillé d’avoir lu les articles Initialiser le développement d’un jeu vidéo et Tutorial […]
By Tutotial pour créer jeu vidéo Pong 8 février 2013 - 20 h 36 min
[…] – avoir des connaissances de base en javascript; – il est conseillé d’avoir lu les articles Initialiser le développement d’un jeu vidéo et Tutorial […]
By Je vous montre comment développer Pong en html5 3 février 2013 - 20 h 19 min
[…] – avoir des connaissances de base en javascript; – il est conseillé d’avoir lu les articles Initialiser le développement d’un jeu vidéo et Tutorial […]