unslug fr: move

22 files changed, 920 insertions, 0 deletions

diff --git a/files/fr/games/anatomy/index.html b/files/fr/games/anatomy/index.html
new file mode 100644
index 0000000000..61f5534983
--- /dev/null
+++ b/files/fr/games/anatomy/index.html
@@ -0,0 +1,327 @@
+---
+title: Anatomie d'un jeu vidéo
+slug: Jeux/Anatomie
+tags:
+  - Boucle Principale
+  - JavaScript
+  - Jeux
+  - requestAnimationFrame
+translation_of: Games/Anatomy
+---
+<div>{{GamesSidebar}}</div><p>  {{IncludeSubnav("/fr/docs/Jeux")}}</p>
+
+<div class="summary">
+<p><span class="seoSummary">Cet article se concentre sur l'anatomie et le flux de la plupart des jeux video à partir d'un point de vue technique, concernant la manière dont la boucle principale devrait tourner. Cela aide les débutants dans l'arène du développement à comprendre  ce qui est requis quand il est question de bâtir un jeu et comment les standards du web comme JavaScript leur est offert comme outil.</span> Les programmeurs de jeux expérimentés et nouveaux dans le développement web pourront aussi en tirer bénéfice.</p>
+</div>
+
+<h2 id="Présenter_accepter_interpréter_calculer_repéter">Présenter, accepter, interpréter, calculer, repéter</h2>
+
+<p>Le but de chaque jeu vidéo est de <strong>présenter</strong> à (aux) utilisateur(s) une situation, <strong>accepter </strong>leur entrée, <strong>interpréter</strong> ces signaux en actions, et <strong>calculer</strong> une nouvelle situation résultant de ces actes. Les jeux bouclent continuellement à travers ces niveaux, jusqu'à ce qu'une condition finale arrive (comme gagner, perdre, ou quitter le jeu). Sans surprise, ce modèle correspond à la manière dont un moteur de jeu est programmé.</p>
+
+<p>Ces spécificités dépendent du jeu.</p>
+
+<p>Certains jeu maintiennent ce cycle par les entrées du joueur. Imaginez que vous développez un jeu du type <em>"trouvez les différences entre ces deux images"</em>. Ces jeux <strong>présentent</strong> deux images à l'utilisateur; ils <strong>accèptent</strong> leur clics (ou touchés); ils <strong>interprètent</strong> l'entrée comme un succès, une erreur, une pause, une interaction de menu, etc.; finalement, ils <strong>calculent</strong> une scène mise à jour resultant de l'entrée de donnée. La boucle du jeu évolue par l'entrée de l'utilisateur et s'arrête jusqu'à ce qu'il en soumette une nouvelle. C'est plus une approche au coup par coup qui ne demande pas une mise à jour continuelle de chaque image, mais juste quand le joueur réagit.</p>
+
+<p>D'autres jeux demandent un contrôle précis à chaque fraction de seconde. Les principes sont les mêmes avec une légère différence: chaque animation fait progresser le cycle et tout changement d'entrée d'un utilisateur est capturé dès que possible. Ce modèle au coup par image  est implementé dans ce que l'on appelle la <strong>boucle principale</strong>. Si vos boucles de jeu sont basées sur le temps alors ce sera là-dessus que seront basées vos simulations.</p>
+
+<p>Mais parfois ce n'est pas un contrôle dans le temps. Votre boucle de jeu peut être similaire à l'exemple <em>cherchez les différences</em> et se baser directement sur les entrées. Cela peut être nécessaire d'avoir à la fois les entrées et un temps simulé. Cela peut aussi être basé sur une boucle qui utilise d'autre chose.</p>
+
+<p>Le JavaScript moderne — comme décrit dans les prochaines sections — heureusement, facilite le développement d'une boucle efficace éxécutée une fois par seconde. Bien sûr, votre jeu sera optimisé au long de sa conception. Si quelque chose doit s'apparenter à un évènement peu fréquent alors il sera préférable de briser la boucle principale (mais pas tout le temps).</p>
+
+<h2 id="Construire_une_boucle_principale_en_JavaScript">Construire une boucle principale en JavaScript</h2>
+
+<p>JavaScript travaille beaucoup mieux avec des évènements et des fonctions de rappel. Les navigateur modernes s'efforcent d'appeler des méthodes au moment où elles sont nécessaires et mises en pause (ou font leur travail) le reste du temps. Il est de bonne pratique d'attacher votre code au moment le plus approprié. Pensez à quel moment votre fonction à besoin d'être appelée sur un interval de temps strict, à chaque image, ou seulement après que quelque chose se soit passé. Être plus spécifique avec le navigateur quand votre fonction à besoin d'être appelée permet au navigateur d'être optimisé une fois votre boucle appelée. De plus, cela peut rendre votre tâche plus aisée.</p>
+
+<p>Certain programmes ont besoin d'être lancés image-par-image alors pourquoi y attacher quelque chose d'autre que le taux de rafraîchissement du navigateur ? Dans le web, <code>{{ domxref("window.requestAnimationFrame()") }}</code> sera la fondation de bien des boucles principales. Une fonction de rappel doit lui être passée quand elle est appelée. Cette fonction de rappel sera éxécutée à un moment précis avant le prochain rafraîchissement. Voici un exemple d'une simple boucle principale:</p>
+
+<pre>window.main = function () {
+  window.requestAnimationFrame( main );
+
+  //Qu'importe ce que votre boucle principale doit faire.
+};
+
+main(); //Débuter le cycle.</pre>
+
+<p><strong>Note</strong>: Dans chaque méthodes <code>main()</code> présentées ici, nous planifions un nouveau <code>requestAnimationFrame</code> avant de lancer le contenu de notre boucle. Ce n'est pas par accident et c'est considéré comme une meilleure pratique. Appeler le prochain <code>requestAnimationFrame</code> plus tôt assure que le navigateur la recevra à temps pour le planifier convenablement même si vous image courrante rate la fenêtre de synchronisation principale (VSync).</p>
+
+<p>La portion de code ci-dessus comporte deux déclarations. La première créée une fonction comme variable globale appelée <code>main()</code>. Cette fonction effectue un travail et indique aussi au navigateur de s'appeler elle-même au prochain <code>window.requestAnimationFrame()</code>. La seconde déclaration appelle la fonction <code>main()</code>, definie dans la première déclaration. Parceque <code>main()</code> est appelé une fois dans la seconde déclaration et chaque appel de celle-ci la place dans la queue des choses à faire à chaque image, <code>main()</code> est synchronisée à votre taux de rafraîchissement.</p>
+
+<p>Bien sûr, cette boucle n'est pas parfaite. Avant que nous discutions de manières de la modifier, parlons de ce qu'elle fait de bien.</p>
+
+<p>Temporiser la boucle principale avec le rafraîchissement du navigateur permet à votre boucle d'être éxécutée aussi fréquemment que le navigateur à besoin de rafraîchir l'écran. Cela vous permet de contrôler chaque image de votre animation. C'est aussi beaucoup plus simple car <code>main()</code> est la seule fonction qui est bouclée. Dans un jeu de tir à la première personne (ou un jeu équivalent) on présente une nouvelle scène à chaque image. Vous ne pouvez donc pas obtenir quelque chose de plus fluide que cela.</p>
+
+<p>Pourtant n'imaginez pas que les animations requièrent un contrôle image-par-image. De simples animations peuvent être éxécutées, même avec une accélération matérielle, avec des animations CSS et d'autres outils inclus dans le navigateur. Bon nombre vont vous faciliter la vie.</p>
+
+<h2 id="Construire_une_meilleure_boucle_principale_en_Javascript">Construire une <em>meilleure</em> boucle principale en Javascript</h2>
+
+<p>Il y a deux problèmes évidents avec notre boucle principale précédente: <code>main()</code> pollue l'objet <code>{{ domxref("window") }}</code> (où sont stockées toutes les variables globales) et l'exemple donné ne nous permet pas de <em>stopper</em> la boucle à moins que l'onglet du navigateur ne soit fermé ou rafraîchit. Pour le premier problème, si vous désirez que la boucle principale tourne simplement sans y accéder directement, vous pouvez en crééer une fonction à accès immédiat -(FAI ou "Immediately-Invoked Function Expression - IIFE").</p>
+
+<pre>/*
+* Débuter avec le point virgue au cas où le code qui réside au-dessus de cet exemple
+* s'appuie sur l'insertion automatique de point virgule (ASI). Le navigateur peut alors accidentellement
+* penser que c'est un exemple complet provenant de la ligne précédente. Le point virgule de tête
+* marque le début de notre nouvelle ligne si la précédente n'était pas vide ou complétée.
+*/
+
+;(function () {
+  function main() {
+    window.requestAnimationFrame( main );
+
+    // Contenu de votre boucle principale.
+  }
+
+  main(); // Débute le cycle
+})();</pre>
+
+<p>Quand le navigateur passe à travers la FAI, cela va définir votre boucle principale et immédiatement la mettre en file d'attente pour la prochaine image. Cela ne sera attaché à aucun objet et <code>main</code> (ou <code>main()</code> pour les méthodes) sera un nom valide inutilisé dans le reste de l'application, libre d'être défini comme quelque chose d'autre.</p>
+
+<p>Note: En pratique, il est plus courant de prévenir le prochain requestAnimationFrame() avec une déclaration "if", plutôt que d'appeler cancelAnimationFrame().</p>
+
+<p>Pour le second problème, arrêter la boucle principale, vous aurez besoin d'annuler l'appel à <code>main()</code> avec <code>{{ domxref("window.cancelAnimationFrame()") }}</code>. Vous aurez besoin de passer la valeur donneé par <code>cancelAnimationFrame()</code> en référence à <code>requestAnimationFrame()</code> quand elle a été appelée en dernier. Assumons que vos fonctions de jeu et les variables sont bâties dans un espace de nom appelé <code>MyGame</code>. Avec notre dernier exemple étendu, la boucle principale aura maintenant l'air de ceci:</p>
+
+<pre>/*
+* Débuter avec le point virgue au cas où le code qui réside au-dessus de cet exemple
+* s'appuie sur l'insertion automatique de point virgule (ASI). Le navigateur peut alors accidentellement
+* penser que c'est un exemple complet provenant de la ligne précédente. Le point virgule de tête
+* marque le début de notre nouvelle ligne si la précédente n'était pas vide ou complétée.
+*
+* Assumons aussi que MyGame est défini précédemment.
+*/
+
+;(function () {
+  function main() {
+    MyGame.stopMain = window.requestAnimationFrame( main );
+
+    // Contenu de votre boucle principale.
+  }
+
+  main(); // Début du cycle
+})();</pre>
+
+<p>Nous avons maintenant une variable déclarée dans l'espace de nom <code>MyGame</code>, que nous appelons <code>stopMain</code>, qui contient la valeur de l'appel de notre boucle principale <code>requestAnimationFrame()</code> la plus récente. À tout moment, nous pouvons stopper la boucle principale en disant au navigateur d'annuler la requête qui correspond à notre valeur.</p>
+
+<pre>window.cancelAnimationFrame( MyGame.stopMain );</pre>
+
+<p>La clé pour programmer une boucle principale, en JavaScript, est d'attacher n'importe quel évènement qui doit diriger votre action et porter attention aux systèmes interconnectés. Vous pourriez avoir différents composants dirigés par différents évènements. Cela paraît comme d'une complexité inutile mais cela peut être une bonne optimisation (pas nécessairement, bien sûr). Le problème c'est que vous ne programmez pas une boucle principale typique. En Javascript, vous utilisez la boucle principale du navigateur et vous essayez de le faire avec efficacité.</p>
+
+<h2 id="Construire_une_boucle_principale_encore_plus_optimisée_en_JavaScript">Construire une boucle principale <em>encore plus optimisée</em> en JavaScript</h2>
+
+<p>En fin de compte, en JavaScript, le navigateur roule sa propre boucle principale et votre code existe dans certaines de ses étapes. La section ci-dessus décrit des boucles principales qui essaient de ne pas lâcher le contrôle du navigateur. Ces méthodes principales s'attachent à <code>window.requestAnimationFrame()</code>, qui demandent au navigateur le contrôle sur la prochaine image qui arrive. C'est au navigateur de décider de la gestion de sa boucle principale. Les spécifications du <a href="http://www.w3.org/TR/animation-timing/">W3C en matière de requestAnimationFrame</a> ne définissent pas exactement quand les navigateur doivent éxécuter les rappels de requestAnimationFrame. Cela pourrait être bénéfique car cela laisse aux concepteurs de navigateurs la liberté d'expérimenter les solutions qu'ils pensent être les meilleures au travers du temps.</p>
+
+<p>Les versions modernes de Firefox et Google Chrome (et probablement d'autres)<em>tentent</em> de connecter les rappels de <code>requestAnimationFrame</code> à leur fil principal au tout début de chaque image. De ce fait, le déroulement principal <em>essaye</em> d'être le plus possible comme ci-dessous:</p>
+
+<ol>
+ <li>Débuter une nouvelle image (pendant que la précédente est prise en charge par l'affichage).</li>
+ <li>Passer à travers la liste de retours <code>requestAnimationFrame</code> et les appeler.</li>
+ <li>Passer le ramasse-miettes et autres tâches par-images quand les retours ci-dessous cessent de controler le fil principal.</li>
+ <li>Se mettre en veille (à moins qu'un évènement interrompe la sieste du navigateur) jusqu'à ce que le moniteur ne soit prêt pour votre image (<a href="http://www.techopedia.com/definition/92/vertical-sync-vsync">VSync</a>) et répète.</li>
+</ol>
+
+<p>Vous pouvez considérer que développer une application en temps réél est comme avoir un temps donné pour faire le travail. Toutes les étapes ci-dessus doivent prendre effet toutes les 16.5 millisecondes pour fonctionner avec un affichage de 60Hz. Les navigateurs invoquent leur code aussitôt que possible pour donner un maximum de temps aux calculs. Votre fil principal va souvent débuter par les tâches qui ne sont même pas dans le fil principal (tel que la rasterisation ou les ombrages en WebGL). Les longs calculs peuvent être fait par un Web Worker ou une accélération matérielle en même temps que le navigateur utilise son propre fil principal pour passer le ramasse-miette, ces autres tâches, ou gérer les évènements asynchrones.</p>
+
+<p>Bien que nous ne discutons pas du gain de temps, plusieurs navigateur ont un outil appelé <em>Temps Haute Résolution</em>. L'objet {{ domxref("Date") }} n'est plus la méthode reconnue pour temporiser les évènements car elle est très imprécise et peut être modifiée par l'horloge système. Le Temps Haute Résolution, d'un autre côté, compte le nombre de millisecondes depuis <code>navigationStart</code> (quand le document précédent est déchargé). Cette valeur est retournée en un nombre décimal précis au millième de seconde. Il est connu comme étant <code>{{ domxref("DOMHighResTimeStamp") }}</code> mais, à toutes fins utiles, considérez le comme un nombre décimal à virgule flottante.</p>
+
+<p><strong>Note</strong>: Les systèmes (matériels ou logiciels) qui ne sont pas capables d'avoir une précision à la microseconde sont autorisés à fournir une précision à la milliseconde au minimum. Sinon, ils devraient fournir une précision de 0.001ms s'ils en sont capables.</p>
+
+<p>Seule, cette valeur n'est pas très utile, considérant qu'il est relatif à un évènement peu intéressant, mais ils peut quand même être soustrait d'une autre prise de temps pour déterminer plus précisément combien de temps s'est déroulé entre ces deux poins. Pour obtenir une de ces prises de temps, vous pouvez appeler la fonction <code>window.performance.now()</code> et stocker le résultat dans une variable.</p>
+
+<pre>var tNow = window.performance.now();
+</pre>
+
+<p>Retournons sur le sujet de la boucle principale. Il vous arrivera souvent de vouloir savoir quand votre boucle principale a été invoquée. Parce que cela est commun, la fonction <code>window.requestAnimationFrame()</code> fourni toujours un <code>DOMHighResTimeStamp</code> avec un argument de retour quand elles sont éxécutées. Cela mène à une amélioration de notre boucle précédente.</p>
+
+<pre>/*
+* Débuter avec le point virgue au cas où le code qui réside au-dessus de cet exemple
+* s'appuie sur l'insertion automatique de point virgule (ASI). Le navigateur peut alors accidentellement
+* penser que c'est un exemple complet provenant de la ligne précédente. Le point virgule de tête
+* marque le début de notre nouvelle ligne si la précédente n'était pas vide ou complétée.
+*
+* Assumons aussi que MyGame est défini précédemment.
+*/
+
+;(function () {
+  function main( tFrame ) {
+    MyGame.stopMain = window.requestAnimationFrame( main );
+
+    // Contenu de votre boucle principale.
+    // tFrame, provenant de "function main ( tFrame )", est maintenant un DOMHighResTimeStamp (Temps Haute Résolution du DOM) fourni par rAF.
+  }
+
+  main(); // Débute le cycle
+})();</pre>
+
+<p>Plusieurs autres optimisations sont possibles et cela dépend vraiment de ce que votre jeu tente d'accomplir. Le genre de votre jeu va visiblement faire la différence mais il peut être aussi subtil que cela. Vous pourriez dessiner un pixel à la fois sur un canvas ou vous pourriez étager des éléments du DOM (incluant de multiples canvas de WebGL avec des arrières-plans transparents si vous le désirez) en une hierarchie complexe. Chacunes de ces solutions mènera à des contraintes et opportunités différentes.</p>
+
+<h2 id="Il_est_temps_de_la..._décision">Il est temps de la... décision</h2>
+
+<p>Vous aurez besoin de faire un choix difficile concernant votre boucle principale: comment simuler l'évolution du temps. Si vous désirez un contrôle par image alors vous aurez besoin de déterminer combien sera-t-il nécessaire à votre jeu d'être remis à jour et dessiné. Vous pourriez même vouloir une mise à jour et dessiner à différents taux (de rafraîchissement). Vous aurez aussi besoin de considérer combien comment votre jeu échouera gracieusement si le système de l'utilisateur ne peut soutenir la charge de travail. Commençons par considérer que vous serez capables de gérer les entrées de l'utilisateur et de mettre à jour l'état du jeu à chaque fois que vous dessinez. Nous ramifierons après.</p>
+
+<p><em><strong>Note</strong>: </em>Changer la manière dont votre boucle principale gère le temps est un cauchemar de débuggage, partout. Pensez à vos besoins, précautionneusement, avant de travailler sur votre boucle principale.</p>
+
+<h3 id="De_quoi_les_jeux_dans_le_navigateur_devraient_avoir_l'air">De quoi les jeux dans le navigateur devraient avoir l'air</h3>
+
+<p>Si votre jeu peut atteindre le maximum du taux de rafraîchissement sur n'importe quel matériel que vous supportez, alors votre travail est plutôt facile. Vous pouvez simplement mettre à jour, effectuer le rendu, et ne rien faire avant la synchronisation verticale (VSync).</p>
+
+<pre>/*
+* Débuter avec le point virgue au cas où le code qui réside au-dessus de cet exemple
+* s'appuie sur l'insertion automatique de point virgule (ASI). Le navigateur peut alors accidentellement
+* penser que c'est un exemple complet provenant de la ligne précédente. Le point virgule de tête
+* marque le début de notre nouvelle ligne si la précédente n'était pas vide ou complétée.
+*
+* Assumons aussi que MyGame est défini précédemment.
+*/
+
+;(function () {
+  function main( tFrame ) {
+    MyGame.stopMain = window.requestAnimationFrame( main );
+
+    update( tFrame ); //Appelez votre méthode de mise à jour. Dans notre cas, nous lui donnons la capture de temps rAF.
+    render();
+  }
+
+  main(); // Start the cycle
+})();</pre>
+
+<p>Si le maximum du taux de rafraîchissement ne peut être atteind, les paramètres de qualités pourraient être mis à jour pour rester sous notre gain en temps. L'exemple le plus célèbre de ce concept est le jeu de id Software, RAGE. Ce jeu a retiré à l'utilisateur le contrôle afin de conserver son temps de calcul à environ 16ms (ou environ 60ips). Si le calcul prenait trop de temps alors la résolution serait diminuée, les textures et autres éléments échoueraient au chargement et à l'affichage, et ainsi de suite. Ce cas (non-web) a créé plusieurs hypothèses et faits:</p>
+
+<ul>
+ <li>Chaque image d'animation compte pour une entrée utilisateur.</li>
+ <li>Aucune image n'a besoin d'être extrapolée (devinée) car chaque élément à sa propre mise à jour.</li>
+ <li>Les systèmes simulés peuvent en gros considérer que chaque mise à jour complète est d'environ 16ms.</li>
+ <li>Permettant à l'utilisateur le contrôle à travers des paramètres serait un cauchemar.</li>
+ <li>Des moniteur différents apportent des taux de rafraîchissement différents: 30 FPS, 75 FPS, 100 FPS, 120 FPS, 144 FPS, etc.</li>
+ <li>Des systèmes qui ne sont pas capables de fonctionner avec 60 FPS vont perdre en qualité pour permettre au jeu de rouler à une vitesse optimale (éventuellement, il échouera complètement si cela devient trop bas).</li>
+</ul>
+
+<h3 id="Autres_manières_de_gérer_les_besoins_du_taux_de_rafraîchissement_variable">Autres manières de gérer les besoins du taux de rafraîchissement variable</h3>
+
+<p>D'autres méthodes d'approcher le problème existent.</p>
+
+<p>Une technique commune est de mettre à jour la simulation à une fréquence constante et dessiner autant (ou au moins) que le taux actuel le permet. Cette méthode de mise à jour peut continuer à boucler sans se soucier de ce que l'utilisateur voit. Cette méthode peut voir la dernière mise à jour, et quand elle est arrivée. Quand le dessin sait quand il est représenté, et le temps simulé pour la dernière mise à jour, il peut prédire une image plausible à dessiner. Cela n'a pas d'importance si c'est plus fréquent que la mise à jour officielle (ou même moins fréquente). La méthode de mise à jour établis des points de contrôle, autant que le système le permet, la méthode de rendu va dessiner autour de ces intants de temps. Il y a plusieurs manières de séparer la méthode de mise à jour dans les standards du web:</p>
+
+<ul>
+ <li>Dessiner à chaque <code>requestAnimationFrame</code> et mettre à jour {{ domxref("window.setInterval") }} ou {{ domxref("window.setTimeout") }}.
+
+  <ul>
+   <li>Cela utilise le temps du processeur même quand il n'a pas l'attention ou qu'il est minimisé, qu'il ne monopolise pas le fil principal, et est probablement un artefact de la traditionnelle boucle principale (mais plus simple).</li>
+  </ul>
+ </li>
+ <li>Dessiner à chaque <code>requestAnimationFrame</code> et mettre à jour sur un <code>setInterval</code> ou <code>setTimeout</code> dans un <a href="/en-US/docs/Web/Guide/Performance/Using_web_workers">Web Worker</a>.
+  <ul>
+   <li>C'est la même chose que ci-dessus, excepté que la mise à jour ne monopolise pas le fil principal (ni le fil principal ne le monopolise). C'est une solution plus complexe, et ce pourrait être trop de travail pour de simples mises à jours.</li>
+  </ul>
+ </li>
+ <li>Dessiner à chaque <code>requestAnimationFrame</code> et l'utiliser pour solliciter un Web Worker qui contient la méthode de mise à jour avec la quantité de temps à calculer, s'il y a lieu.
+  <ul>
+   <li>Cela se met en veille jusqu'à ce que <code>requestAnimationFrame</code> est appelée et ne pollue pas le fil principal, et de plus vous ne vous reposez pas sur d'anciennes méthodes. À nouveau, c'est un peu plus complexe que les deux premières options, et <em>débuter</em> chaque mise à jour sera bloqué tant que le navigateur ne décide de lancer les retours rAF.</li>
+  </ul>
+ </li>
+</ul>
+
+<p>Chacune de ces méthodes ont un compromis similaire:</p>
+
+<ul>
+ <li>Les utilisateurs peuvent éviter le rendu d'images ou interpoler celles en sus dépendant de leurs performances.</li>
+ <li>Vous pouvez compter sur tous les utilisateurs mettant à jours les variables non-cosmetiques à la même fréquence constante, moins quelques hoquets.</li>
+ <li>Beaucoup plus compliquée à programmer que la boucle de base que nous avons vu précédemment.</li>
+ <li>Les entrées utilisateurs sont complètement ignorées jusqu'à la prochaine mise à jour (même si l'utilisateur à un système rapide).</li>
+ <li>L'interpolation obligatoire à un défaut de performance obligatoire.</li>
+</ul>
+
+<p>Une méthode séparée de mise à jour et de dessin pourrait avoir l'air de l'exemple suivant. Pour les besoins de la démonstration, l'exemple est basé sur le troisième point, sans l'utilisation des Web Workers par soucis de lecture (et, soyons honnête, pour faciliter l'écriture).</p>
+
+<p><em>Note: Cet exemple spécifiquement, aurait besoin d'une relecture.</em></p>
+
+<pre>/*
+* Débuter avec le point virgue au cas où le code qui réside au-dessus de cet exemple
+* s'appuie sur l'insertion automatique de point virgule (ASI). Le navigateur peut alors accidentellement
+* penser que c'est un exemple complet provenant de la ligne précédente. Le point virgule de tête
+* marque le début de notre nouvelle ligne si la précédente n'était pas vide ou complétée.
+*
+* Assumons aussi que MyGame est défini précédemment.
+*
+*
+* MyGame.lastRender fait le suivi du dernier poinçon de temps fourni par requestAnimationFrame.
+* MyGame.lastTick fait le suivi de la dernière mise à jour. Toujours incrémenté par tickLength.
+* MyGame.tickLength est à quelle fréquence le jeu est mis à jour. C'est 20 Hz (50ms) ici.
+*
+* timeSinceTick est le temps entre un retour de requestAnimationFrame et la dernière mise à jour.
+* numTicks est combien de mises à jour auraient dû avoir lieu entre 2 rendus d'images.
+*
+* render() se voit passé tFrame car il est considéré que la méthode de rendu va calculer
+           combien de temps se sera écoulé depuis la mise à jour la plus récente pour
+           extrapolation (purement cosmétique pour des systèmes rapides). La scène est dessinée.
+*
+* update() calcule l'état du jeu comme point donné dans le temps. Ça devrait toujours être
+           incrémenté par tickLength. C'est l'autorité de l'état du jeu. On lui passe le
+           DOMHighResTimeStamp pour le temps que cela représente (qui, à nouveau, est toujours
+           la dernière mise à jour + MyGame.tickLength qu'une pause ne soit ajoutée, etc.)
+*
+* setInitialState() réalise n'importe quel tâche mise de côté avant que la boucle principale ne doive tourner.
+*                   Ceci est juste un exemple générique d'une fonction que vous devriez ajouter.
+*/
+
+;(function () {
+  function main( tFrame ) {
+    MyGame.stopMain = window.requestAnimationFrame( main );
+    var nextTick = MyGame.lastTick + MyGame.tickLength;
+    var numTicks = 0;
+
+    //Si tFrame &lt; nextTick alors 0 ticks doit être mis à jour (0 est par défaut pour numTicks).
+    //Si tFrame = nextTick alors 1 tick doit être mis à jour (et ainsi de suite).
+    //Note: Comme nous le mentionons dans le sommaire, vous devriez faire un suivi de la taille de numTicks.
+    //S'il est important, alors soit votre jeu est en veille, soit votre machine ne répond plus.
+    if (tFrame &gt; nextTick) {
+      var timeSinceTick = tFrame - MyGame.lastTick;
+      numTicks = Math.floor( timeSinceTick / MyGame.tickLength );
+    }
+
+    queueUpdates( numTicks );
+    render( tFrame );
+    MyGame.lastRender = tFrame;
+  }
+
+  function queueUpdates( numTicks ) {
+    for(var i=0; i &lt; numTicks; i++) {
+      MyGame.lastTick = MyGame.lastTick + MyGame.tickLength; //Maitenant lastTick est ce tick.
+      update( MyGame.lastTick );
+    }
+  }
+
+  MyGame.lastTick = performance.now();
+  MyGame.lastRender = MyGame.lastTick; //Prétendre que le premier dessin était sur la première mise à jour.
+  MyGame.tickLength = 50; //Cela positionne votre simulation pour tourner à 20Hz (50ms)
+
+  setInitialState();
+  main(performance.now()); // Débute le cycle
+})();</pre>
+
+<p>Une autre alternative est de simplement faire certaines choses moins souvent. Si une portion de votre boucle de mise à jour est difficile à calculer et intense (en temps), vous devrier considérer réduire sa fréquence et, idéalement, la diviser en portions à travers une période plus allongée. Un exemple implicite de cela est rencontré dans "The Artillery Blog for Artillery Games", où ils <a href="http://blog.artillery.com/2012/10/browser-garbage-collection-and-framerate.html">ajustent leur taux de création de miettes</a> pour optimiser leur ramasse-miettes. Apparemment, le nettoyage des ressources n'est pas sensible au temps (spécialement si le nettoyage est plus dérangeant que le la miette elle-même).</p>
+
+<p>Cela peut aussi s'appliquer à vos propres tâches. Elles sont de bonnes candidates pour en générer quand les ressources disponibles deviennent un problème.</p>
+
+<h2 id="Sommaire">Sommaire</h2>
+
+<p>J'aimerai être clair que rien de ce qu'il y a ci-dessus, ou rien de cela, ne puisse être ce qu'il y a de mieux pour votre jeu. La décision correcte dépend entièrement des compromis que vous êtes prêts (ou pas) à faire. La préocupation est principalement de permuter vers une autre option. Heureusement, je n'en ai pas l'expérience mais j'ai entendu dire que c'est un jeu de cache-cache exténuant.</p>
+
+<p>Une chose importante à retenir pour les plateformes gérées, telles que le web, est que votre boucle pourrait arrêter son éxécution pour une période de temps significative. Cela pourrait arriver quand l'utilisateur déselectionne votre onglet et que le navigateur tombe en veille (ou ralenti) son interval de retour <code>requestAnimationFrame</code>. Vous avez plusieurs façons de gérer cela et cela peut dépendre de votre jeu, s'il est pour un seul joueur ou multijoueurs. Certains des choix sont:</p>
+
+<ul>
+ <li>Considérer le écart comme "une pause" et ne pas prendre en compte le temps.
+  <ul>
+   <li>Vous pouvez probablement voir comment cela peut être problématique pour la plupart des jeux multijoueurs.</li>
+  </ul>
+ </li>
+ <li>Vous pouvez stimuler l'écart pour faire du rattrapage.
+  <ul>
+   <li>Cela peut être un problème pour de longues pauses et/ou des mises à jour complexes.</li>
+  </ul>
+ </li>
+ <li>Vous pouvez récupérer l'état du jeu à partir d'un pair sur le serveur.
+  <ul>
+   <li>Ceci n'est pas efficace si votre pair ou le serveur sont périmés eux-aussi, ou s'ils n'existent pas car le jeu en mode un seul joueur n'existe pas et n'a pas de serveur.</li>
+  </ul>
+ </li>
+</ul>
+
+<p>Une fois que votre boucle principale a été développée et que vous avez pris vos décisions sur un lot d'hypothèses et de compromis qui conviendront à votre jeu, cela devient juste une question d'utilisation de vos décisions pour calculer n'importe quelle physique applicable, intelligence artificielle, sons, synchronisation réseau, et quoique votre jeu ai besoin.</p>
diff --git a/files/fr/games/examples/index.html b/files/fr/games/examples/index.html
new file mode 100644
index 0000000000..363e25ed7a
--- /dev/null
+++ b/files/fr/games/examples/index.html
@@ -0,0 +1,132 @@
+---
+title: Exemples
+slug: Jeux/Exemples
+tags:
+  - Demos
+  - Exemples
+  - Jeux
+  - Web
+translation_of: Games/Examples
+---
+<div>{{GamesSidebar}}</div><div>  {{IncludeSubnav("/fr/docs/Jeux")}}</div>
+
+<p class="summary">Cette page liste un grand nombre de démos de technologies web impressionnantes vous permettant de vous inspirer et de vous amuser. Une preuve de ce qui peut être fait avec Javascript, WebGL et autres. Les deux premières sections listent des jeux tandis que la troisième est une liste de démos de technologies web.</p>
+
+<div class="column-container">
+<div class="column-half">
+<h2 id="DémosJeux_gratuits">Démos/Jeux gratuits</h2>
+
+<dl>
+ <dt><a href="http://orpe.ga/">Orpega</a></dt>
+ <dd><span id="result_box" lang="fr"><span>Jeu de tir massivement multijoueur sur le thème de l'espace en HTML5 / JavaScript sans moteur et NodeJS pour le serveur (http://orpe.ga/)</span></span></dd>
+ <dt><a href="http://www.beloola.com">Beloola</a></dt>
+ <dd>Plateforme sociale de réalité virtuelle web pour les passionnés. Expérience disponible à la fois sur écrans 2D et casques de réalité virtuelle (<em>Paramètres / Passer en mode VR</em>)</dd>
+ <dt><a href="http://playcanv.as/p/aP0oxhUr">Tanx</a></dt>
+ <dd>Un jeu de combat de tanks multijoueurs, créé avec <a href="https://playcanvas.com/">PlayCanvas</a>.</dd>
+ <dt><a href="https://robertsspaceindustries.com/comm-link/transmission/14704-Hyper-Vanguard-Force">Hyper Vanguard Force</a></dt>
+ <dd>Un "space shooter" <em>(tireur de l'espace)</em> à défilement vertical.</dd>
+ <dt><a href="http://playcanv.as/p/JtL2iqIH">Swooop</a></dt>
+ <dd>Un jeu d'aviation : contrôle ton avion et récupère les joyaux. Aussi créé avec <a href="https://playcanvas.com/">PlayCanvas</a>.</dd>
+ <dt><a href="https://ga.me/games/save-the-day">Save the Day</a></dt>
+ <dd>Volez à bord de votre hélicoptère de sauvetage vers la zone sinistrée et sauvez les victimes coincées (ga.me).</dd>
+ <dt><a href="https://ga.me/games/polycraft">Polycraft</a></dt>
+ <dd>Un jeu de survie, explore l'île et bats les monstres.</dd>
+ <dt><a href="http://hexgl.bkcore.com/">HexGL</a></dt>
+ <dd>Un jeu de course futuriste rythmé.</dd>
+ <dt><a href="http://beta.unity3d.com/jonas/DT2/">Dead Trigger 2</a></dt>
+ <dd>Un jeu d'action avec des zombies, créé avec <a href="http://unity3d.com/">Unity3D</a>.</dd>
+ <dt><a href="http://beta.unity3d.com/jonas/AngryBots/">Angry Bots</a></dt>
+ <dd>Une démo de jeu de tir futuriste à la 3ème personne, créé avec <a href="http://unity3d.com/">Unity3D</a>.</dd>
+ <dt><a href="http://sandbox.photonstorm.com/html5/nutmeg/">Nutmeg</a></dt>
+ <dd>Jeu de plateforme action rétro.</dd>
+ <dt><a href="http://www.zibbo.com/game/match-3-games-top/back-to-candyland-episode-1">Back to Candyland</a></dt>
+ <dd>Un jeu de type Match 3 (Candy Crush).</dd>
+ <dt><a href="http://playbiolab.com/">Biolab Disaster</a></dt>
+ <dd>Un jeu de plateforme et de tir à défilement horizontal.</dd>
+ <dt><a href="http://phoboslab.org/xtype/">X-Type</a></dt>
+ <dd>Une démo de "space shooter" <em>(tireur de l'espace) </em>à défilement vertical.</dd>
+ <dt><a href="http://phoboslab.org/xibalba/">Xibalba</a></dt>
+ <dd>Un jeu rétro de tir à la première personne (Doom-style).</dd>
+ <dt><a href="https://timeinvariant.github.io/gorescript/play/">Gorescript</a></dt>
+ <dd>Un autre jeu rétro de tir à la première personne.</dd>
+ <dt><a href="http://hypnoticowl.com/games/the-wizard/">The Wizard</a></dt>
+ <dd>Un jeu de réflexion au tour par tour.</dd>
+ <dt><a href="http://hextris.io/">Hextris</a></dt>
+ <dd>Un jeu de réflexion hexagonal ressemblant à Tetris.</dd>
+ <dt><a href="https://gabrielecirulli.github.io/2048/">2048</a></dt>
+ <dd>Un jeu de réflexion où il faut faire glisser des tuiles.</dd>
+ <dt><a href="/en-US/demos/detail/bananabread" title="/en-US/demos/detail/bananabread">BananaBread</a></dt>
+ <dd>Un jeu de tir à la première personne en 3D développé en utilisant Emscripten, WebGL et WebRTC.</dd>
+ <dt><a href="https://hacks.mozilla.org/2013/12/monster-madness-creating-games-on-the-web-with-emscripten/">Monster Madness</a></dt>
+ <dd>Un jeu de tir multijoueur en ligne développé par "Nom Nom Games" et "Trendy entertainment" en utilisant WebGL et asm.js.</dd>
+ <dt><a href="http://www.auraluxgame.com/game/">Auralux</a></dt>
+ <dd>Un jeu de stratégie basé sur WebGL et asm.js : capture tous les soleils pour gagner !</dd>
+ <dt><a href="http://browserquest.mozilla.org/">BrowserQuest</a></dt>
+ <dd>Un MMORPG crée par the Little Workshop et Mozilla.</dd>
+ <dt><a href="https://arcade.ly/games/asteroids/">Shoot The Rocks</a></dt>
+ <dd>Un jeu de tir solo 2D Canvas, dans le style des classiques Asteroids d' Atari, jeux d' arcade depuis 1979.</dd>
+ <dt><a href="https://arcade.ly/games/starcastle/">Star Citadel</a></dt>
+ <dd><span id="result_box" lang="fr"><span>Une nouvelle version de Star Castle, le classique jeu d'arcade 1980 de Cinematronics, construit avec Canvas 2D.</span></span></dd>
+</dl>
+
+<h2 id="Jeux_payants">Jeux payants</h2>
+
+<dl>
+ <dt><a href="http://oortonline.com/">Oort Online</a></dt>
+ <dd>Un MMO d'exploration, de construction et de bataille (actuellement en développement).</dd>
+ <dt><a href="http://www.wizardslizard.com/">A Wizard's Lizard</a></dt>
+ <dd>Un RPG d'exploration ressemblant à Zelda.</dd>
+ <dt><a href="http://qbqbqb.rezoner.net/">QbQbQb </a></dt>
+ <dd>Un jeu de réflexion arcade sur le thème de la science fiction.</dd>
+ <dt><a href="http://elliotquest.com/">Elliot Quest</a></dt>
+ <dd>Jeu d'aventure rétro aux graphiques 8-bit.</dd>
+ <dt><a href="https://data.mo.ee/index2.html">RPG MO</a></dt>
+ <dd><span id="result_box" lang="fr"><span>MMORPG isométrique ayant des similitudes avec RuneScape Classic et Ultima.</span></span></dd>
+</dl>
+</div>
+
+<div class="column-half">
+<h2 id="Démos_diverses">Démos diverses</h2>
+
+<dl>
+ <dt><a href="http://greweb.me/wavegl/">WaveGL</a></dt>
+ <dd>Visualiseur WebGL pour la source de sons.</dd>
+ <dt><a href="http://codepen.io/jackrugile/pen/CdKGx/">Canvas Airport Simulation</a></dt>
+ <dd>Carte animée montrant les avions décollants et atterrissants à l'aéroport avec les itinéraires de vols.</dd>
+ <dt><a href="http://alteredqualia.com/xg/examples/animation_physics_terrain.html">Animation Physics</a></dt>
+ <dd>Rendu 3D d'un terrain et de voitures utilisant <a href="https://github.com/kripken/ammo.js">ammo.js</a> pour les calculs physiques.</dd>
+ <dt><a href="http://david.li/flow/">Volumetric Particle Flow</a></dt>
+ <dd>Simulation physique de liquides s'écoulant.</dd>
+ <dt><a href="http://codepen.io/artzub/pen/gszpJ/">Explosion and chain reaction</a></dt>
+ <dd>Particules explosant et déclenchant d'autres explosions.</dd>
+ <dt><a href="http://codepen.io/AshKyd/pen/sylFw">Canvas generated planet</a></dt>
+ <dd>Une ceinture d'astéroides orbitant autour d'une planète.</dd>
+ <dt><a href="http://codepen.io/zadvorsky/pen/FAmuL">Digital Fireworks</a></dt>
+ <dd>Effets d'explosions de feu d'artifice.</dd>
+ <dt><a href="http://oos.moxiecode.com/js_webgl/autumn/">Autumn</a></dt>
+ <dd>Feuilles automnales qui tombent, illuminées par une source lumineuse. Créé avec <a href="https://github.com/mrdoob/three.js">Three.js</a>.</dd>
+ <dt><a href="http://inear.se/fireshader/">Fire walk with me</a></dt>
+ <dd>Effet de nuage de feu flottant.</dd>
+ <dt><a href="http://codepen.io/jackrugile/pen/AokpF">Rainbow Firestorm</a></dt>
+ <dd><span id="result_box" lang="fr"><span>Des particules de couleur arc-en-ciel, tombant comme de la pluie, rebondissent sur un terrain d'orbes.</span></span></dd>
+ <dt><a href="http://visualiser.fr/babylon/crowd/">Crowd Simulation</a></dt>
+ <dd>Simulation d'une foule de personnes agitées  voulant rejoindre des directions opposées.</dd>
+ <dt><a href="http://codepen.io/noeldelgado/pen/ByxQjL">SVG Masking Experiment</a></dt>
+ <dd>Une machine à rayons X, créée en utilisant un calque SVG.</dd>
+ <dt><a href="https://www.shadertoy.com/view/Ms2SD1">Realistic Water Simulation</a></dt>
+ <dd>De l'eau en mouvement, comme les vagues d'un océan.</dd>
+ <dt><a href="http://www.haxor.xyz/demos/1.0/dungeon/">Dungeon demo</a></dt>
+ <dd>Scène de donjon basée sur Haxor avec un personnage jouable.</dd>
+ <dt><a href="http://massiveassaultnetwork.com/html5/">Massive Assault tech demo</a></dt>
+ <dd>Archipel avec des véhicules militaires futuristes.</dd>
+ <dt><a href="https://callumprentice.github.io/apps/flight_stream/index.html">Flight Stream</a></dt>
+ <dd>Globe en 3D avec des itinéraires d'avions simulés.</dd>
+ <dt><a href="http://pixelscommander.com/polygon/htmlgl/demo/filters.html">WebGL filters</a></dt>
+ <dd>Démo montrant comment WebGL peut être utilisé pour ajouter des effets à des éléments HTML.</dd>
+ <dt><a href="http://codepen.io/AshKyd/pen/zxmgzV">SVG isometic tiles</a></dt>
+ <dd>Génère des tuiles isométriques avec une matrice SVG.</dd>
+ <dt><a href="https://jsfiddle.net/jetienne/rkth90c9/">ThreeJS App Player</a></dt>
+ <dd>Un lecteur dans lequel il est possible de charger et lancer des exemples de Three.js.</dd>
+</dl>
+</div>
+</div>
diff --git a/files/fr/games/index.html b/files/fr/games/index.html
new file mode 100644
index 0000000000..7cd59f447e
--- /dev/null
+++ b/files/fr/games/index.html
@@ -0,0 +1,90 @@
+---
+title: Développement de jeux vidéo
+slug: Jeux
+tags:
+  - Applications
+  - Développement
+  - Jeux
+translation_of: Games
+---
+<div>{{GamesSidebar}}</div>
+
+<div class="summary">
+<p>Les jeux vidéo sont parmi les activités numériques les plus populaires. L'arrivée continue de nouvelles technologies permet de développer encore des jeux de meilleure qualité et plus performants qui peuvent fonctionner dans n'importe quel navigateur respectant les standards du web.</p>
+</div>
+
+<p>{{EmbedGHLiveSample("web-tech-games/index.html", '100%', 820)}}</p>
+
+<div class="column-container">
+<div class="column-half">
+<h2 id="Développement_de_jeux_pour_le_web">Développement de jeux pour le web</h2>
+
+<p><span id="result_box" lang="fr"><span>Bienvenue dans le centre de développement de jeux MDN !</span> <span>Dans cette zone du site, nous fournissons des ressources pour les développeurs web désireux de développer des jeux.</span> <span>Vous trouverez de nombreux tutoriels et articles techniques dans le menu principal à gauche, alors n'hésitez pas à explorer.</span></span></p>
+
+<p><span id="result_box" lang="fr"><span>Nous avons également inclus une section de références afin que vous puissiez facilement trouver des informations sur toutes les API les plus courantes utilisées dans le développement de jeux.</span></span></p>
+
+<div class="note">
+<p><strong style="border: 0px; color: #3b3c40; font-family: 'open sans',arial,sans-serif; font-size: 14px; font-style: normal; font-weight: 700; letter-spacing: normal; margin: 0px; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal;">Note</strong><span style="background-color: #fff5cc; color: #3b3c40; font-family: 'open sans',arial,sans-serif; font-size: 12px; font-style: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal;">: La création de jeux sur le Web s'appuie sur un certain nombre de technologies Web de base telles que HTML, CSS et JavaScript. La </span><a href="https://developer.mozilla.org/fr/Apprendre" style="font-size: 12px; font-style: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; color: rgb(33, 122, 192); text-decoration: none; margin: 0px; padding: 0px; border: 0px; font-family: 'open sans', arial, sans-serif;">Zone "Apprendre"</a><span style="background-color: #fff5cc; color: #3b3c40; font-family: 'open sans',arial,sans-serif; font-size: 12px; font-style: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal;"> est un bon endroit pour commencer avec les bases.</span></p>
+</div>
+</div>
+
+<div class="column-half">
+<h2 id="Portez_des_jeux_natifs_sur_le_Web"><span class="short_text" id="result_box" lang="fr"><span>Portez des jeux natifs sur le Web</span></span></h2>
+
+<p><span id="result_box" lang="fr"><span>Si vous êtes un développeur natif (par exemple écrivant des jeux en C ++), et que vous êtes intéressé par la façon dont vous pouvez porter vos jeux sur le Web, vous devriez en apprendre plus sur notre outil </span></span> <a href="http://kripken.github.io/emscripten-site/index.html">Emscripten</a> <span lang="fr"><span> - c'est un compilateur LLVM vers JavaScript, qui prend</span> <span>le "bytecode LLVM" (par exemple, généré à partir de C / C ++ en utilisant Clang ou un autre langage) et le compile dans </span></span> <a href="https://developer.mozilla.org/en-US/docs/Games/Tools/asm.js">asm.js</a> <span lang="fr"><span>, qui peut être exécuté sur le Web.</span></span></p>
+
+<p>Pour commencer, voir :</p>
+
+<ul>
+ <li><a href="http://kripken.github.io/emscripten-site/docs/introducing_emscripten/about_emscripten.html">About Emscripten</a> pour une introduction incluant des détails de haut niveau.</li>
+ <li><a href="http://kripken.github.io/emscripten-site/docs/getting_started/downloads.html">Download and Install</a> <span class="short_text" id="result_box" lang="fr"><span>pour installer la chaîne d'outils</span></span> .</li>
+ <li><a href="http://kripken.github.io/emscripten-site/docs/getting_started/Tutorial.html">Emscripten Tutorial</a> pour un tutoriel qui vous enseigne comment commencer.</li>
+</ul>
+</div>
+</div>
+
+<div class="column-container">
+<div class="column-half">
+<h2 id="Exemples">Exemples</h2>
+
+<p>Pour une liste d'exemples de jeux, voir notre <a href="https://developer.mozilla.org/en-US/docs/Games/Examples">page exemples</a>. Consultez aussi <a href="http://www.openwebgames.com/">openwebgames.com</a> pour des ressources et des exemples plus utiles !</p>
+</div>
+</div>
+
+<p><a href="http://www.openwebgames.com"><img alt="" src="https://mdn.mozillademos.org/files/12790/owg-logo-dark.svg" style="display: block; margin: 0px auto; width: 400px;"></a></p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<div class="column-container">
+<div class="column-half">
+<dl>
+ <dt><a href="http://buildnewgames.com/">Build New Games </a>(en)</dt>
+ <dd>Un site collaboratif avec de nombreux tutoriels concernant le développement de jeux vidéo sur le Web. N'a pas été très actif récemment, mais détient toujours de belles ressources.</dd>
+ <dt><a href="http://creativejs.com/">Creative JS </a>(en)</dt>
+ <dd>Un ensemble de techniques et d'expérimentations JavaScript, pas nécessairement liées au domaine vidéo-ludique mais qui se révèlent plutôt utiles et impressionnantes. N'a pas été très actif récemment, mais détient toujours de belles ressources.</dd>
+ <dt><a href="http://gameprogrammingpatterns.com/">Game programming patterns </a>(en)</dt>
+ <dd>Un livre en ligne, écrit par Bob Nystrom, qui traite des modèles de programmation dans le contexte du développement de jeux, dans le but d'aider les développeurs de jeux à produire un code plus réussi et plus opérationnel.</dd>
+ <dt><a href="http://gamedevjsweekly.com/">Gamedev.js Weekly </a>(en)</dt>
+ <dd>Bulletin hebdomadaire sur le développement de jeux HTML5, envoyé tous les vendredis. Contient les derniers articles, didacticiels, outils et ressources.</dd>
+ <dt><a href="http://www.html5gamedevs.com/">HTML5 Game Devs Forum </a>(en)</dt>
+ <dd>Forums pour développeurs, créateurs de "framework" et éditeurs. Posez des questions, obtenez des commentaires, aidez les autres.</dd>
+</dl>
+</div>
+
+<div class="column-half">
+<dl>
+ <dt><a href="http://html5gameengine.com/">HTML5 Game Engine </a>(en)</dt>
+ <dd>Liste des architectures de jeux HTML5 les plus populaires ainsi que leurs classement, fonctionnalités et exemples.</dd>
+ <dt><a href="http://www.jsbreakouts.org/">JSBreakouts</a> (en)</dt>
+ <dd>Comparez les clones JavaScript Breakout dans différents systèmes pour vous aider à choisir le bon pour vous.</dd>
+ <dt><a href="http://gamedevelopment.tutsplus.com/">Tuts+ Game Development </a>(en)</dt>
+ <dd>Tutoriels et articles sur le developpement de jeux en général.</dd>
+ <dt><a href="http://html5devstarter.enclavegames.com/">HTML5 Gamedev Starter </a>(en)</dt>
+ <dd><span id="result_box" lang="fr"><span>De quoi démarrer pour les nouveaux développeurs de jeux, une liste organisée de liens vers diverses ressources utiles sur le web.</span></span></dd>
+ <dt><a href="http://js13kgames.com/">js13kGames </a>(en)</dt>
+ <dd>Concours de codage JavaScript pour les développeurs de jeux HTML5 avec une limite de taille de fichier fixée à 13 kilo-octets. Tous les jeux soumis sont disponibles sous forme lisible sur GitHub.</dd>
+ <dt><a href="https://hacks.mozilla.org/category/games/">Mozilla Hacks blog </a>(en)</dt>
+ <dd>Catégorie Jeux sur le blog "Hacks" de Mozilla contenant des articles connexes intéressants.</dd>
+</dl>
+</div>
+</div>
diff --git a/files/fr/games/index/index.html b/files/fr/games/index/index.html
new file mode 100644
index 0000000000..5253f58521
--- /dev/null
+++ b/files/fr/games/index/index.html
@@ -0,0 +1,10 @@
+---
+title: Index
+slug: Jeux/Index
+tags:
+  - Meta
+translation_of: Games/Index
+---
+<div>{{GamesSidebar}}</div><div>{{IncludeSubnav("/fr/docs/Jeux")}}</div>
+
+<p>{{Index("/fr/docs/Jeux")}}</p>
diff --git a/files/fr/games/introduction/index.html b/files/fr/games/introduction/index.html
new file mode 100644
index 0000000000..8a6c2686a5
--- /dev/null
+++ b/files/fr/games/introduction/index.html
@@ -0,0 +1,127 @@
+---
+title: Introduction au développement de jeux vidéo
+slug: Jeux/Introduction
+tags:
+  - Firefox OS
+  - Guide
+  - Jeux
+  - Mobile
+translation_of: Games/Introduction
+---
+<div>{{GamesSidebar}}</div>
+
+<p>  {{IncludeSubnav("/fr/docs/Jeux")}}  </p>
+
+<div>Le Web d'aujourd'hui est désormais une plate-forme viable pour créer des jeux époustouflants et de bonne qualité, mais aussi et surtout pour distribuer ces jeux.</div>
+
+<div> </div>
+
+<div>Imaginez tous les jeux qui peuvent être créés...</div>
+
+<p>Grâce aux technologies web actuelles et aux navigateurs récents, il est tout à fait possible de créer un jeu excellent pour le Web. Et nous ne parlons pas ici de jeux de cartes ou de jeux sociaux multi-joueurs déjà créés il y a longtemps, avec Flash®, mais bien de jeux de tirs en 3D, de RPG etc. Grâce aux améliorations des performances des compilateurs juste-à-temps <a href="/en-US/docs/JavaScript" title="/en-US/docs/JavaScript">JavaScript</a> et aux nouvelles APIs, vous pouvez construire des jeux vidéo qui fonctionnent dans un navigateur (ou sur des plateformes HTML5 comme <a href="/en-US/docs/Mozilla/Firefox_OS" title="/en-US/docs/Mozilla/Firefox_OS">Firefox OS</a>) sans compromettre les performances.</p>
+
+<h2 id="La_plateforme_HTML5_pour_les_jeux">La plateforme HTML5 pour les jeux</h2>
+
+<p>Le Web peut vraiment se concevoir comme une plateforme pour les jeux : "le Web est la plateforme". La liste qui suit présente les technologies au cœur de celle-ci.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Fonctionnalités</th>
+   <th scope="col">Technologie</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><strong>Audio</strong></td>
+   <td><a href="https://developer.mozilla.org/fr/docs/Web/API/Web_Audio_API" title="/en-US/docs/Web_Audio_API">Web Audio API</a></td>
+  </tr>
+  <tr>
+   <td><strong>Graphisme</strong></td>
+   <td><a href="/fr/docs/WebGL" title="/fr/docs/WebGL">WebGL</a> (<a href="http://www.khronos.org/opengles/" title="http://www.khronos.org/opengles/">OpenGL ES</a> 2.0)</td>
+  </tr>
+  <tr>
+   <td><strong>Mécanismes d'interface utilisateur</strong></td>
+   <td><a href="/fr/docs/Web/Guide/DOM/Events/Touch_events" title="/fr/docs/Web/Guide/DOM/Events/Touch_events">Événements tactiles</a>, <a href="/fr/docs/Web/Guide/API/Gamepad" title="/fr/docs/Web/Guide/API/Gamepad">Gamepad API</a>, capteurs, <a href="/fr/docs/WebRTC" title="/fr/docs/WebRTC">WebRTC</a>, <a href="/fr/docs/Web/Guide/DOM/Using_full_screen_mode" title="/fr/docs/Web/Guide/DOM/Using_full_screen_mode">Full Screen API</a>, <a href="/fr/docs/WebAPI/Pointer_Lock" title="/fr/docs/WebAPI/Pointer_Lock">Pointer Lock API</a></td>
+  </tr>
+  <tr>
+   <td><strong>Langage</strong></td>
+   <td><a href="/fr/docs/JavaScript" title="/fr/docs/JavaScript">JavaScript</a> (ou C/C++ utilisé avec <a href="https://github.com/kripken/emscripten/wiki" title="https://github.com/kripken/emscripten/wiki">Emscripten</a> pour être compilé en JavaScript)</td>
+  </tr>
+  <tr>
+   <td><strong>Réseau</strong></td>
+   <td><a href="/fr/docs/WebRTC" title="/fr/docs/WebRTC">WebRTC</a> et/ou les <a href="/fr/docs/WebSockets" title="/fr/docs/WebSockets">WebSockets</a></td>
+  </tr>
+  <tr>
+   <td><strong>Stockage</strong></td>
+   <td><a href="/fr/docs/IndexedDB" title="/fr/docs/IndexedDB">IndexedDB</a> ou le "cloud"</td>
+  </tr>
+  <tr>
+   <td><strong>Web</strong></td>
+   <td><a href="/fr/docs/Web/HTML" title="/fr/docs/Web/HTML">HTML</a>, <a href="/fr/docs/Web/CSS" title="/fr/docs/Web/CSS">CSS</a>, <a href="/fr/docs/SVG" title="/fr/docs/SVG">SVG</a>, <a href="/fr/docs/Social_API" title="/fr/docs/Social_API">Social API</a> (et plus encore...)</td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
+
+<h2 id="L'aspect_commercial">L'aspect commercial</h2>
+
+<div>En tant que développeur de jeux vidéo, que vous soyez seul ou fassiez partie d'un studio plus grand, vous voulez savoir pourquoi le Web serait pertinent pour votre prochain jeu. Nous verrons ici en quoi le Web peut vous aider :</div>
+
+<p> </p>
+
+<ol>
+ <li>
+  <div>La portée du Web est phénoménale : il est partout. Les jeux construits avec HTML5 peuvent fonctionner sur les smartphones, les tablettes, les PCs et les télévisions connectées.</div>
+ </li>
+ <li>La visibilité de votre jeu et le marketing en sont améliorés. En effet, la promotion de votre jeu n'est pas limitée à un "app store" <em>(magasin d'applications)</em> maîtrisé par quelqu'un d'autre. Vous pouvez tout à fait promouvoir et faire la publicité de votre jeu sur le Web lui-même comme sur d'autres médias. Les liens, les partages effectués sur le Web sont autant d'avantages pour atteindre de nouveaux utilisateurs.</li>
+ <li>Vous disposez d'un contrôle à un endroit important : les paiements. Il n'est pas nécessaire pour vous de reverser 30% de vos revenus à  d'autres simplement parce que votre jeu fait partie de leur écosystème. Vous pouvez décider de votre propre politique tarifaire et utiliser le service de paiement que vous voulez.</li>
+ <li>Le contrôle, encore. Vous pouvez mettre à jour votre jeu dès que vous le souhaitez. Vous n'avez pas à attendre l'approbation de quelqu'un d'une autre entreprise décidant si oui ou non tel ou tel correctif sera livré aujourd'hui ou demain.</li>
+ <li>L'analytique. Plutôt que de vous reposer sur des décisions et influences externes quant aux données dont vous avez besoin, vous pouvez collecter les statistiques que vous voulez, ou bien utiliser un outil analytique tiers de votre choix afin de mesurer les ventes et la portée de votre jeu.</li>
+ <li>Vous pouvez gérer la relation clientèle de façon plus directe, sans que les retours des clients soient limités aux mécanismes d'un magasin d'application. Soyez directement au contact de vos clients, sans intermédiaire.</li>
+ <li>Le Web est partout et vos joueurs peuvent donc jouer où bon leur semble : leurs téléphones, tablettes, ordinateurs de bureau ou portables...</li>
+</ol>
+
+<p> </p>
+
+<h2 id="Les_technologies_Web_pour_les_développeurs_de_jeux_vidéo">Les technologies Web pour les développeurs de jeux vidéo</h2>
+
+<p>Pour celles et ceux qui souhaitent plonger dans la technique, voici la liste des APIs et des technologies Web qui vont alimenter votre jeu.</p>
+
+<div class="twocolumns">
+<dl>
+ <dt><a href="https://developer.mozilla.org/fr/docs/Web/Guide/DOM/Using_full_screen_mode" title="/en-US/docs/DOM/Using_fullscreen_mode">Full Screen API</a></dt>
+ <dd>Cette API simple permet à votre jeu de fonctionner en plein écran et d'offrir ainsi une expérience plus immersive.</dd>
+ <dt><a href="https://developer.mozilla.org/fr/docs/Web/Guide/API/Gamepad" title="/en-US/docs/API/Gamepad/Using_Gamepad_API">Gamepad API</a></dt>
+ <dd>Si vous souhaitez que vos joueurs puissent utiliser des manettes ou d'autres contrôleurs pour votre jeu, vous aurez besoin de cette API.</dd>
+ <dt><a href="https://developer.mozilla.org/fr/docs/Web/HTML" title="/en-US/docs/HTML">HTML</a> et <a href="https://developer.mozilla.org/fr/docs/Web/CSS" title="/en-US/docs/CSS">CSS</a></dt>
+ <dd>Combinées ensembles, ces deux technologies vous permettent de construire et de mettre en forme l'interface utilisateur de votre jeu. L'élément HTML {{HTMLElement("canvas")}} permet de gérer des graphismes en deux dimensions.</dd>
+ <dt><a href="https://developer.mozilla.org/fr/docs/Web/HTML/Element/audio" title="/en-US/docs/HTML/Element/audio">HTML audio</a></dt>
+ <dd>L'élément HTML {{HTMLElement("audio")}} vous permet de jouer de la musique et des sons. Si vous souhaitez aller plus loin, l'API <a href="https://developer.mozilla.org/fr/docs/Web/API/Web_Audio_API" title="/en-US/docs/Web_Audio_API">Web Audio</a> vous offre plus de possibilités de traitement !</dd>
+ <dt><a href="https://developer.mozilla.org/fr/docs/Web/API/API_IndexedDB" title="/en-US/docs/IndexedDB">IndexedDB</a></dt>
+ <dd>Une API puissante, permettant de maintenir les données de l'utilsateur stockées sur son ordinateur ou son appareil. Une bonne façon de sauvegarder l'état d'un jeu ou autre information localement de telle sorte qu'elle ne sera pas téléchargée à chaque fois qu'on aura besoin d'elle. Aussi utile pour rendre le jeu utilisable même quand le joueur n'est pas connecté à internet (comme durant un long vol en avion...).</dd>
+ <dt><a href="https://developer.mozilla.org/fr/docs/Web/JavaScript" title="/en-US/docs/JavaScript">JavaScript</a></dt>
+ <dd>JavaScript, est un langage de programmation utilisé sur internet. Il a d'excellentes performances sur les navigateurs modernes et est sans cesse amélioré. Utilisez sa puissance pour coder vos jeux, ou regardez son utilisation dans des technologies comme <a href="https://github.com/kripken/emscripten/wiki" title="https://github.com/kripken/emscripten/wiki">Emscripten</a> ou <a href="http://asmjs.org/spec/latest/" title="http://asmjs.org/spec/latest/">Asm.js</a> pour porter facilement vos jeux existants.</dd>
+ <dt><a href="https://developer.mozilla.org/fr/docs/WebAPI/Pointer_Lock" title="/en-US/docs/WebAPI/Pointer_Lock">Pointer Lock API</a></dt>
+ <dd>L'API Pointer Lock vous permet de bloquer la souris ou tout autre appareil de pointage à l'intérieur de l'interface de votre jeu, de telle sorte qu'au lieu de recevoir une position absolue du pointeur vous recevrez le delta des coordonnées. Ce qui vous donne une mesure plus précise de ce que fait l'utilisateur, mais aussi l'empêche d'envoyer accidentellement ses entrées ailleurs pour ne pas manquer des actions importantes.</dd>
+ <dt><a href="https://developer.mozilla.org/fr/docs/Web/SVG" title="/en-US/docs/SVG">SVG</a> (Scalable Vector Graphics)</dt>
+ <dd><span id="result_box" lang="fr"><span>Vous permet de créer des graphiques vectoriels dont l'échelle est fluide, quelle que soit la taille ou la résolution de l'affichage de l'utilisateur.</span></span></dd>
+ <dt><a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Tableaux_typ%C3%A9s" title="/en-US/docs/JavaScript/Typed_arrays">Typed Arrays</a></dt>
+ <dd><span id="result_box" lang="fr"><span>Les tableaux typés JavaScript vous donnent accès à des données binaires brutes depuis JavaScript ;</span> <span>cela vous permet de manipuler des textures GL, des données de jeu ou tout autre chose, même si ce n'est pas dans un format JavaScript natif.</span></span></dd>
+ <dt><a href="https://developer.mozilla.org/fr/docs/Web/API/Web_Audio_API" title="/en-US/docs/Web_Audio_API">Web Audio API</a></dt>
+ <dd><span id="result_box" lang="fr"><span>Cette API pour contrôler la lecture, la synthèse et la manipulation de l'audio à partir du code JavaScript vous permet de créer des effets sonores impressionnants, de jouer et de manipuler de la musique en temps réel.</span></span></dd>
+ <dt><a href="https://developer.mozilla.org/fr/docs/Web/API/WebGL_API" title="/en-US/docs/WebGL">WebGL</a></dt>
+ <dd>Vous permet de créer à partir de contenu internet des graphismes de hautes performances, avec l'accélération matérielle de graphisme 3D (et 2D). C'est une implémentation qui permet la prise en charge web de <a href="http://www.khronos.org/opengles/" title="http://www.khronos.org/opengles/">OpenGL ES</a> 2.0.</dd>
+ <dt><a href="https://developer.mozilla.org/fr/docs/Web/API/WebRTC_API" title="/en-US/docs/WebRTC">WebRTC</a></dt>
+ <dd>L'API WebRTC (Real-Time Communications) vous donne le pouvoir de contrôler les données audio et vidéo, y compris la téléconférence, et de transmettre des données d'applications aux utilisateurs et entre utilisateurs. Vous voulez que vos joueurs discutent lorsqu'ils explosent des monstres ? Cette API est faite pour vous.</dd>
+ <dt><a href="https://developer.mozilla.org/fr/docs/WebSockets" title="/en-US/docs/WebSockets">WebSockets</a></dt>
+ <dd>L'API WebSocket vous permet de connecter votre application ou site à un serveur pour transmettre des données en temps réel. Parfait pour les jeux d'action multi-joueurs, services de "chat" <em>(discussion)</em> et autres.</dd>
+ <dt><a href="https://developer.mozilla.org/fr/docs/Utilisation_des_web_workers" title="/en-US/docs/DOM/Using_web_workers">Web Workers</a></dt>
+ <dd>Les "Workers" vous donnent la possibilité de créer des routines qui tournent en arrière-plan avec leur propre code javascript, pour prendre avantage des processeurs multi-core modernes.</dd>
+ <dt><a href="https://developer.mozilla.org/fr/docs/Web/API/XMLHttpRequest" title="/en-US/docs/DOM/XMLHttpRequest">XMLHttpRequest</a> and <a href="https://developer.mozilla.org/fr/docs/Web/API/API_fichier_systeme" title="/en-US/docs/DOM/File_API">File API</a></dt>
+ <dd>La combinaison de XMLHttpRequest et de l'API File vous permet d'envoyer et de recevoir toutes les sortes de données que vous voulez (ne vous fiez pas au "XML" dans son nom !) depuis un serveur Web. Il s'agit d'une bonne façon de réaliser diverses choses comme télécharger de nouveaux niveaux du jeu et les éléments de graphismes ou encore transmettre (pas en temps réel) les informations de l'état du jeu vers votre serveur.</dd>
+</dl>
+</div>
+
+<p> </p>
diff --git a/files/fr/games/introduction_to_html5_game_development/index.html b/files/fr/games/introduction_to_html5_game_development/index.html
new file mode 100644
index 0000000000..e18d9517f8
--- /dev/null
+++ b/files/fr/games/introduction_to_html5_game_development/index.html
@@ -0,0 +1,106 @@
+---
+title: Introduction au développement de jeux HTML5 (résumé)
+slug: Jeux/Introduction_to_HTML5_Game_Gevelopment_(summary)
+tags:
+  - Firefox OS
+  - HTML5
+  - Jeux
+  - Mobile
+translation_of: Games/Introduction_to_HTML5_Game_Development_(summary)
+---
+<div>{{GamesSidebar}}</div>
+
+<div>{{IncludeSubnav("/en-US/docs/Games")}}</div>
+
+<div>
+<h2 id="Avantages" style="line-height: 30px;"><span class="tlid-translation translation" lang="fr"><span title="">Avantages</span></span></h2>
+
+<ol>
+ <li><span class="tlid-translation translation" lang="fr"><span title="">Les jeux construits avec HTML5 fonctionnent sur les smartphones, les tablettes, les PC et les téléviseurs intelligents</span></span><span class="seoSummary">.</span></li>
+ <li><span class="tlid-translation translation" lang="fr"><span title="">Annoncez et promouvez votre jeu sur le Web, ainsi que sur d'autres médias</span></span>.</li>
+ <li><span class="tlid-translation translation" lang="fr"><span title="">Paiements.</span> <span title="">Chargez ce que vous voulez et utilisez le service de traitement des paiements de votre choix</span></span>.</li>
+ <li><span class="tlid-translation translation" lang="fr"><span title="">Mettez à jour votre jeu quand vous le souhaitez</span></span><span class="seoSummary">.</span></li>
+ <li><span class="tlid-translation translation" lang="fr"><span title="">Collectez vos propres analyses</span></span> !</li>
+ <li><span class="tlid-translation translation" lang="fr"><span title="">Connectez-vous plus étroitement avec vos clients</span></span>,</li>
+ <li><span class="tlid-translation translation" lang="fr"><span title="">Les joueurs peuvent jouer au jeu n'importe où, n'importe quand</span></span><span class="seoSummary">.</span></li>
+</ol>
+
+<h2 id="Technologies_Web" style="line-height: 30px;"><span class="tlid-translation translation" lang="fr"><span title="">Technologies Web</span></span></h2>
+</div>
+
+<div></div>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col" style="text-align: left;"><strong>Fonction</strong></th>
+   <th scope="col" style="text-align: left;"><span class="tlid-translation translation" lang="fr"><span title="">Technologie</span></span></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><strong>Audio</strong></td>
+   <td><a href="/fr/docs/Web/API/Web_Audio_API">Web Audio API</a></td>
+  </tr>
+  <tr>
+   <td><strong><span class="tlid-translation translation" lang="fr"><span title="">Graphique</span></span></strong></td>
+   <td><a href="/fr/docs/Web/API/WebGL_API">WebGL</a> (<a href="http://www.khronos.org/opengles/" title="http://www.khronos.org/opengles/">OpenGL ES</a> 2.0)</td>
+  </tr>
+  <tr>
+   <td><strong>Input</strong></td>
+   <td><a href="/fr/docs/Web/Guide/DOM/Events/Touch_events">Événements tactiles</a>, <a href="/fr/docs/Web/Guide/API/Gamepad">Utiliser l'API Gamepad</a>, <span class="tlid-translation translation" lang="fr"><span title="">capteurs de l'appareil</span></span> , <a href="/fr/docs/Web/API/WebRTC_API"> L'API WebRTC</a>, <a href="/fr/docs/Web/Guide/DOM/Using_full_screen_mode">Utiliser le mode plein écran</a>, <a href="/fr/docs/WebAPI/Pointer_Lock"> Pointer Lock API</a></td>
+  </tr>
+  <tr>
+   <td><strong>Language</strong></td>
+   <td><a href="/en-US/docs/JavaScript" title="/en-US/docs/JavaScript">JavaScript</a> (ou C/C++  <span class="tlid-translation translation" lang="fr"><span title="">utilisant</span></span> <a href="https://github.com/kripken/emscripten/wiki" title="https://github.com/kripken/emscripten/wiki">Emscripten</a> <span class="tlid-translation translation" lang="fr"><span title="">pour compiler en JavaScript</span></span> )</td>
+  </tr>
+  <tr>
+   <td><strong>Networking</strong></td>
+   <td><a href="/en-US/docs/WebRTC" title="/en-US/docs/WebRTC">WebRTC</a> et/ou <a href="/fr/docs/Web/API/WebSockets_API"> WebSockets</a></td>
+  </tr>
+  <tr>
+   <td><strong>Stockage</strong></td>
+   <td><a href="/fr/docs/Web/API/API_IndexedDB">IndexedDB</a>  <span class="tlid-translation translation" lang="fr"><span title="">ou le </span></span> "cloud"</td>
+  </tr>
+  <tr>
+   <td><strong>Web</strong></td>
+   <td><a href="/fr/docs/Web/HTML">HTML</a>, <a href="/fr/docs/Web/CSS">CSS</a>, <a href="/fr/docs/Web/SVG">SVG</a>, <a href="/en-US/docs/Social_API" title="/en-US/docs/Social_API">Social API</a> ( <span class="tlid-translation translation" lang="fr"><span title="">et beaucoup plus!</span></span> )</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="twocolumns">
+<dl>
+ <dt><a href="/en-US/docs/DOM/Using_fullscreen_mode" title="/en-US/docs/DOM/Using_fullscreen_mode">API plein écran</a></dt>
+ <dd>Gameplay en plein écran.</dd>
+ <dt><a href="/en-US/docs/API/Gamepad/Using_Gamepad_API" title="/en-US/docs/API/Gamepad/Using_Gamepad_API">API Gamepad</a></dt>
+ <dd>Utilisez des manettes ou d'autres contrôleurs de jeu.</dd>
+ <dt><a href="/en-US/docs/HTML" title="/en-US/docs/HTML">HTML</a> et <a href="/en-US/docs/CSS" title="/en-US/docs/CSS">CSS</a></dt>
+ <dd>Créez, stylisez et aménagez l'interface utilisateur de votre jeu.</dd>
+ <dt><a href="/en-US/docs/HTML/Element/audio" title="/en-US/docs/HTML/Element/audio">Audio HTML</a></dt>
+ <dd>Jouez facilement des effets sonores et de la musique simplement.</dd>
+ <dt><a href="/en-US/docs/IndexedDB" title="/en-US/docs/IndexedDB">IndexedDB</a></dt>
+ <dd>Stockez les données utilisateur sur leur propre ordinateur ou appareil.</dd>
+ <dt><a href="/en-US/docs/JavaScript" title="/en-US/docs/JavaScript">JavaScript</a></dt>
+ <dd>Langage de programmation Web rapide pour écrire le code de votre jeu.<br>
+ Pour porter facilement vos jeux existants <a href="https://github.com/kripken/emscripten/wiki" title="https://github.com/kripken/emscripten/wiki">Emscripten</a> ou <a href="http://asmjs.org/spec/latest/" title="http://asmjs.org/spec/latest/">Asm.js</a></dd>
+ <dt><a href="/en-US/docs/WebAPI/Pointer_Lock" title="/en-US/docs/WebAPI/Pointer_Lock">API de verrouillage de pointeur</a></dt>
+ <dd>Verrouillez la souris ou tout autre périphérique de pointage dans l'interface de votre jeu.</dd>
+ <dt><a href="/en-US/docs/SVG" title="/en-US/docs/SVG">SVG</a> (Scalable Vector Graphics)</dt>
+ <dd>Créez des graphiques vectoriels qui évoluent en douceur, quelle que soit la taille ou la résolution de l'écran de l'utilisateur.</dd>
+ <dt><a href="/en-US/docs/JavaScript/Typed_arrays" title="/en-US/docs/JavaScript/Typed_arrays">Tableaux typés</a></dt>
+ <dd>Accédez aux données binaires brutes depuis JavaScript; Manipulez les textures GL, les données de jeu ou tout autre chose.</dd>
+ <dt><a href="/en-US/docs/Web_Audio_API" title="/en-US/docs/Web_Audio_API">API Web Audio</a></dt>
+ <dd>Contrôlez la lecture, la synthèse et la manipulation de l'audio en temps réel.</dd>
+ <dt><a href="/en-US/docs/WebGL" title="/en-US/docs/WebGL">WebGL</a></dt>
+ <dd>Créez des graphiques 3D (et 2D) haute performance à accélération matérielle. <a href="http://www.khronos.org/opengles/" title="http://www.khronos.org/opengles/">OpenGL ES</a> 2.0.</dd>
+ <dt><a href="/en-US/docs/WebRTC" title="/en-US/docs/WebRTC">WebRTC</a></dt>
+ <dd>Communications en temps réel pour contrôler les données audio et vidéo, y compris la téléconférence et la transmission d'autres données d'application entre deux utilisateurs comme le chat.</dd>
+ <dt><a href="/en-US/docs/WebSockets" title="/en-US/docs/WebSockets">WebSockets</a></dt>
+ <dd>Connectez votre application ou votre site à un serveur pour transmettre des données en temps réel. Parfait pour l'action de jeu multijoueur, les services de chat, etc.</dd>
+ <dt><a href="/en-US/docs/DOM/Using_web_workers" title="/en-US/docs/DOM/Using_web_workers">Web Workers</a></dt>
+ <dd>Créez des threads d'arrière-plan exécutant leur propre code JavaScript pour les processeurs <span class="tlid-translation translation" lang="fr"><span title="">multicœurs</span></span>.</dd>
+ <dt><a href="/en-US/docs/DOM/XMLHttpRequest" title="/en-US/docs/DOM/XMLHttpRequest">XMLHttpRequest</a> et <a href="/en-US/docs/DOM/File_API" title="/en-US/docs/DOM/File_API">File API</a></dt>
+ <dd>Envoyez et recevez tout type de données que vous souhaitez à partir d'un serveur Web, comme le téléchargement de nouveaux niveaux de jeu et d'illustrations pour transmettre des informations sur l'état du jeu non en temps réel dans les deux sens.</dd>
+</dl>
+</div>
diff --git a/files/fr/games/publishing_games/game_monetization/index.html b/files/fr/games/publishing_games/game_monetization/index.html
new file mode 100644
index 0000000000..05c6512a27
--- /dev/null
+++ b/files/fr/games/publishing_games/game_monetization/index.html
@@ -0,0 +1,100 @@
+---
+title: Monétisation du jeu
+slug: Jeux/Publier_jeux/Game_monetization
+tags:
+  - Games
+  - HTML5
+  - JavaScript
+  - Jeux
+  - Licence
+  - Monétisation
+  - annonces
+  - iap
+  - image de marque
+translation_of: Games/Publishing_games/Game_monetization
+---
+<div>{{GamesSidebar}}</div>
+
+<p class="summary">Lorsque vous avez passé votre temps à créer un jeu, à le <a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/Publishing_games/Game_distribution">distribuer</a> et à en faire la <a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/Publishing_games/Game_promotion">promotion</a>, vous devriez envisager d'en gagner de l'argent. Si votre travail est une entreprise sérieuse sur la voie de devenir un développeur de jeux indépendant capable de gagner sa vie, lisez la suite et voyez quelles sont vos options. La technologie est suffisamment mature; maintenant, il s'agit simplement de choisir la bonne approche.</p>
+
+<h2 id="Jeux_payants">Jeux payants</h2>
+
+<p>Le premier choix, le plus évident qui vous vient à l'esprit pourrait être de vendre les jeux de la même manière que pour d'énormes titres AAA — avec un prix initial fixe. Même si le marché numérique est essentiel et que vous n'avez pas besoin d'imprimer des couvertures et de placer votre jeu dans un magasin physique dans des boîtes, pour gagner de l'argent décent en vendant vos jeux à un prix fixe, vous devez investir votre temps et votre argent dans le marketing.</p>
+
+<p>Le prix que vous facturez pour votre jeu dépend du marché, de la qualité de votre jeu et de nombreux autres petits facteurs. Un titre arcade iOS peut être vendu pour 0.99 USD, mais un jeu de bureau plus long de style RPG sur Steam peut coûter 20 USD; les deux prix sont corrects. Vous devez suivre le marché et faire vos propres recherches — apprendre rapidement de vos erreurs est important.</p>
+
+<h2 id="Achats_dans_lapplication">Achats dans l'application</h2>
+
+<p>Au lieu de faire payer votre jeu à l'avance, vous pouvre proposer un jeu gratuit avec des achats intégrés (IAPs). Dans ce cas, le jeu peut être acquis sans dépenser un centime — donnez le jeu aux joueurs, mais offrez de la monnaie du jeu, des bonus ou des avantages en argent réel. Des exemples spécifiques peuvent inclure des niveaux bonus, de meilleurs armes ou sorts, ou le remplissage de l'énergie nécessaire pour jouer. Concevoir un bon système IAP est un art en soi.</p>
+
+<p>N'oubliez pas que vous avez besoin de milliers de téléchargements de votre jeu pour rendre les IAP efficaces — seule une petite fraction des joueurs paiera réellement pour les IAP. Comment petit? Cela varie, mais environ une personne sur mille est dans la moyenne. Plus il y a de personnes qui jouent à votre jeu, plus les chances que quelqu'un paie est élevée, donc vos revenus dépendent fortement de vos activités de <a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/Publishing_games/Game_promotion">promotion</a>.</p>
+
+<h3 id="Freemium">Freemium</h3>
+
+<p>Les jeux qui comportent des IAP sont souvent appelés <strong>freemium</strong> ou free-to-play — un jeu freemium peut être acquis et joué gratuitement, mais vous pouvez payer pour des fonctionnalités supplémentaires (premium), des biens virtuels ou d'autres avantages. Le mot lui-même a acquis des connotations négatives après que les grandes entreprises se soient concentrées sur la création de jeux, dont le but principal était d'obtenir autant d'argent que possible des joueurs au lieu de proposer une expérience amusante. Les pires cas étaient lorsque vous pouviez utiliser de l'argent réel pour payer pour obtenir des avantages par rapport aux autres joueurs, ou lorsqu'ils restreignaient l'accès aux étapes suivantes du jeu à moins que les joueurs ne paient. Le terme «pay to win» a été inventé et cette approche n'est pas appréciée par de nombreux joueurs et développeurs. Si vous souhaitez mettre en œuvre des IAP, essayez d'ajouter de la valeur au jeu avec quelque chose que les joueurs apprécieront au lieu de le retirer et de le facturer.</p>
+
+<h3 id="Add-ons_et_DLCs">Add-ons et DLCs</h3>
+
+<p>Les Add-ons et les DLCs sont un bon moyen de fournir une valeur supplémentaire à un jeu déjà sorti, mais n'oubliez pas que vous devrez proposer un contenu décent et divertissant pour attirer les gens à l'acheter. Un tout nouvel ensemble de niveaux avec de nouveaux personnages, de nouvelles armes et une nouvelle histoire est un bon matériau pour le DLC, mais pour avoir suffisamment de ventes, le jeu lui-même doit être populaire, sinon aucun joueur ne voudra dépenser son argent durement gagné.</p>
+
+<h2 id="Advertisements">Advertisements</h2>
+
+<p>Au lieu de vendre activement les jeux, vous pouvez également essayer de vous procurer un revenu passif — afficher des publicités et s'appuyer sur des activités précédentes liées à la <a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/Publishing_games/Game_promotion">promotion</a> de votre jeu peut en bénéficier, mais votre jeu doit crée une dépendance, ce qui n'est pas aussi facile qu'il y paraît. Vous devez encore le planifier, et à un moment donné vous aurez également besoin d'un peu de chance. <span class="tlid-translation translation" lang="fr"><span title="">Si votre jeu devient viral et que les gens commencent à le partager, vous pouvez obtenir beaucoup de téléchargements et d'argent grâce aux publicités.</span></span></p>
+
+<p>De nombreuses entreprises proposent des systèmes de publicité - vous vous inscrivez et leur permettez de diffuser des publicités en échange d'un pourcentage des revenus. On dit que Google AdSense est le plus efficace, mais il n'est pas conçu pour les jeux et c'est une très mauvaise pratique de l'utiliser à cette fin. Au lieu de risquer de fermer votre compte et de bloquer tout l'argent, essayez d'utiliser les portails habituels ciblés par gamedev comme <a href="https://www.leadbolt.com/">LeadBolt</a>. Ils offrent des systèmes faciles à mettre en œuvre pour afficher les publicités dans vos jeux et partager les gains avec vous.</p>
+
+<p>Les publicités vidéo sont de plus en plus populaires, en particulier sous la forme d'un pré-roll - elles sont diffusées au début de votre jeu pendant son chargement. Et pour savoir où placer les publicités dans votre jeu, cela dépend vraiment de vous. Il doit être aussi subtil que possible pour ne pas trop gêner les joueurs, mais suffisamment visible pour les faire cliquer ou du moins en prendre note. L'ajout de publicités entre les sessions de jeu sur les écrans de jeu est une approche populaire.</p>
+
+<h2 id="Licence">Licence</h2>
+
+<p>Il existe une approche qui peut fonctionner comme un modèle de monétisation à elle seule, et qui consiste à vendre des licences pour la distribution de votre jeu. Il y a de plus en plus de portails intéressés à montrer vos jeux sur leurs sites Web. Ils suivent diverses stratégies pour gagner de l'argent via vos jeux, mais vous n'avez pas à vous soucier de tout cela car la vente de la licence est généralement une transaction unique. Vous obtenez de l'argent et ils peuvent faire preuve de créativité en utilisant votre jeu pour gagner de l'argent.</p>
+
+<p>Trouver des éditeurs peut être difficile au début — esssayez de les rechercher sur les <a href="http://www.html5gamedevs.com/">forums HTML5 Gamedevs</a>. Si vous êtes bien connu, ils peuvent vous contacter. La plupart des offres sont conclues par e-mail lorsque vous parlez à une personne dédiée du côté de l'éditeur. Certains sites Web d'éditeurs ont ces informations facilement disponibles, tandis que d'autres sont plus difficiles à trouver. Lorsque vous atteignez un éditeur, essayez d'être gentil et direct - ce sont des gens occupés.</p>
+
+<h3 id="Licences_exclusives">Licences exclusives</h3>
+
+<p><span class="tlid-translation translation" lang="fr"><span title="">La licence exclusive est un type de licence pour un éditeur </span></span> — <span class="tlid-translation translation" lang="fr"><span title="">vous avez créé un jeu et vous en vendez tous les droits à une seule entité ainsi que les droits de le redistribuer</span></span> — <a href="http://www.softgames.de/">Softgames</a> est un exemple d'un tel éditeur. Vous ne pouvez pas le revendre sous quelque forme que ce soit tant que l'éditeur en a les droits - c'est pourquoi les accords exclusifs valent beaucoup d'argent. Combien exactement? Cela dépend de la qualité du jeu, de son genre, de son éditeur et de bien d'autres, mais généralement, ce sera entre 2000 et 5000 USD. Une fois que vous avez vendu une licence exclusive, vous pouvez oublier la promotion de ce jeu particulier car vous ne gagnerez pas plus, alors ne concluez un tel accord que si vous êtes sûr qu'il est suffisamment rentable.</p>
+
+<h3 id="Licences_non_exclusives">Licences non exclusives</h3>
+
+<p>Cette approche est moins stricte - vous pouvez vendre une licence à plusieurs éditeurs. C'est l'approche la plus populaire car avec chaque nouvel éditeur (et ils apparaissent constamment), vous pouvez vendre vos jeux à des conditions non exclusives. N'oubliez pas qu'avec cette licence, l'éditeur ne peut pas la redistribuer davantage - cela s'appelle souvent un accord verrouillé sur le site, car il achète le droit de publier le jeu sur son propre portail. Le coût habituel d'une licence non exclusive est d'environ 500 USD.</p>
+
+<h3 id="Abonnements">Abonnements</h3>
+
+<p>Il existe également une option pour obtenir un revenu mensuel passif via un abonnement. Au lieu d'obtenir un paiement unique, vous pouvez obtenir une petite somme d'argent par jeu, par mois - cela peut représenter environ 20 à 50 USD par mois et par jeu. C'est normalement à vous de décider si vous voulez obtenir tout l'argent en une somme forfaitaire ou l'obtenir par mois. N'oubliez pas qu'il peut être annulé, ce n'est donc pas une solution qui fonctionne indéfiniment.</p>
+
+<h3 id="Revenus_publicitaires">Revenus publicitaires</h3>
+
+<p>Vous pouvez implémenter vous-même des publicités dans votre jeu et essayer de trouver le trafic pour gagner un peu, mais vous pouvez également conclure un accord de partage des revenus avec un éditeur. Ils se chargeront de gérer le trafic et partageront les gains - généralement dans un accord 70/30 ou 50/50, collecté par mois.</p>
+
+<p>N'oubliez pas que de nombreux nouveaux éditeurs de mauvaise qualité voudront obtenir votre jeu pour des revenus publicitaires au lieu de l'octroi de licences, car cela leur coûtera moins cher et vous pourriez vous retrouver avec des revenus d'environ 2 USD par jeu pour l'ensemble de la transaction. Soyez prudent lorsque vous traitez avec de nouveaux éditeurs - il est parfois préférable de réduire le coût de la licence pour un éditeur connu plutôt que de risquer une fraude avec un éditeur inconnu pour plus d'argent.</p>
+
+<p>Les éditeurs prenant vos jeux pour le partage des revenus et / ou l'octroi de licences peuvent nécessiter la mise en œuvre de leurs propres API, ce qui peut demander un travail supplémentaire, alors considérez cela également dans vos tarifs.</p>
+
+<h3 id="Limage_de_marque">L'image de marque</h3>
+
+<p>Vous pouvez vendre les droits d'utilisation de votre jeu à des fins de branding ou le faire vous-même. Dans le premier cas, c'est presque comme une licence non exclusive, mais le client achètera généralement les droits pour le code et implémentera ses propres graphiques. Dans le second cas, c'est comme un accord indépendant, mais vous réutilisez le code et ajoutez des graphiques fournis par le client, parfois en les implémentant comme il vous le demande. Par exemple, si vous avez un jeu dans lequel un joueur tape des aliments, vous pouvez changer la nourriture des produits du client pour leur faire de la publicité. Les prix de ce modèle varient considérablement en fonction de la marque, du client et de la quantité de travail que vous effectuez.</p>
+
+<h2 id="Autres_stratégies_de_monétisation_non_axées_sur_le_jeu">Autres stratégies de monétisation non axées sur le jeu</h2>
+
+<p>Il existe d'autres façons de gagner de l'argent lors de la création de jeux HTML5, et cela n'a même pas besoin d'être lié au jeu.</p>
+
+<h3 id="Vendre_des_ressources">Vendre des ressources</h3>
+
+<p><span class="tlid-translation translation" lang="fr"><span title="">Si vous êtes graphiste, vous pouvez vendre les actifs des jeux que vous avez créés ou quelque chose de nouveau exclusivement à cette fin dans des boutiques en ligne comme</span></span> <a href="http://market.envato.com/">Envato Market</a>. Ce n'est pas beaucoup, mais si vous êtes un designer connu, cela peut être un flux de revenus passif supplémentaire.</p>
+
+<h3 id="Rédaction_darticles_et_de_tutoriels">Rédaction d'articles et de tutoriels</h3>
+
+<p>Il est possible d'écrire des articles sur vos jeux et même d'être payé pour eux. La <a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/Publishing_games/Game_promotion">promotion</a> et la monétisation de jeux en même temps sont gagnant-gagnant, <span class="tlid-translation translation" lang="fr"><span title="">et si vous n'en abusez pas avec trop de publicité, les lecteurs apprécieront de les lire et d'apprendre une chose ou deux.</span> <span title="">Si vous vous concentrez d'abord sur le partage des connaissances et que vous utilisez vos jeux comme des exemples, cela devrait être correct.</span></span> Consultez <a href="http://gamedevelopment.tutsplus.com/">Tuts+ Game Development</a> ou des sites Web similaires pour des opportunités d'écriture.</p>
+
+<h3 id="Marchandise">Marchandise</h3>
+
+<p>Vous pouvez vendre des t-shirts, des <a href="https://www.stickermule.com/user/1070634890/stickers">autocollants</a> ou d'autres gadgets — <span class="tlid-translation translation" lang="fr"><span title="">certains développeurs gagnent plus d'argent avec la marchandise qu'avec les jeux eux-mêmes, mais cela ne fonctionne que sur des jeux très populaires et reconnaissables comme Angry Birds.</span> <span title="">Pourtant, cela pourrait être un autre petit flux de revenus passifs.</span> <span title="">Plus vos revenus sont diversifiés, meilleure est la stabilité de votre entreprise.</span></span></p>
+
+<h3 id="Donations">Donations</h3>
+
+<p><span class="tlid-translation translation" lang="fr"><span title="">Lorsque tout le reste échoue, vous pouvez essayer de mettre un bouton de don sur la page de votre jeu et demander le soutien de la communauté.</span> <span title="">Parfois, cela fonctionne, mais seulement si le joueur vous connaît et estime que cela vous aidera dans votre situation.</span> <span title="">C'est pourquoi il est si important de gérer soigneusement votre communauté.</span> <span title="">Cela a fonctionné avec la compétition</span></span> <a href="http://js13kgames.com/">js13kGames</a> — <span class="tlid-translation translation" lang="fr"><span title="">chaque participant a reçu un t-shirt gratuit, et certains ont même rendu quelques dollars pour l'aider à continuer dans les années à venir.</span></span></p>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p>Il existe de nombreuses façons de gagner de l'argent - tout ce qui s'applique au monde du jeu AAA "normal" peut être plus ou moins appliqué aux jeux HTML5 occasionnels. Cependant, vous pouvez également vous concentrer sur la vente de licences, la création de marque ou le partage des revenus grâce aux publicités. C'est à vous de décider quel chemin vous allez suivre.</p>
diff --git a/files/fr/games/publishing_games/index.html b/files/fr/games/publishing_games/index.html
new file mode 100644
index 0000000000..3f6d0f8a09
--- /dev/null
+++ b/files/fr/games/publishing_games/index.html
@@ -0,0 +1,28 @@
+---
+title: Publier des jeux
+slug: Jeux/Publier_jeux
+tags:
+  - HTML5
+  - JavaScript
+  - Jeux
+  - Monétisation
+  - Promotion
+  - distribution
+  - publication
+translation_of: Games/Publishing_games
+---
+<div>{{GamesSidebar}}</div>
+
+<p class="summary">Les jeux en HTML5 ont un avantage certain face à ceux écrits dans un langage natif en terme de publication et de distribution — vous avez en effet la liberté de distribuer, promouvoir et monétiser votre jeu sur Internet au lieu de voir chaque version de votre jeu emprisonnée au sein d'un store propriétaire. En étant sur le web, vous bénéficiez automatiquement d'un jeu multi plate-formes. Cette série d'articles vous présente les options dont vous disposez afin de publier et de distribuer votre jeu et de gagner quelque chose en attendant de faire de votre jeu un incontournable.</p>
+
+<h2 id="Distribuer_votre_jeu">Distribuer votre jeu</h2>
+
+<p>Vous avez déjà suivi un <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript">tutoriel</a> ou <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser">deux</a> et vous avez créé un jeu en HTML5 ? Génial ! L'article <a href="/en-US/docs/Games/Publishing_games/Game_distribution">Distribuer votre jeu</a> vous indique tout ce que vous devez savoir sur les moyens de partager votre toute dernière création — y compris comment vous pouvez l'héberger en ligne, le proposer sur les boutiques en ligne ouvertes, et le soumettre aux stores propriétaires comme Google Play ou Apple Store.</p>
+
+<h2 id="Promouvoir_votre_jeu">Promouvoir votre jeu</h2>
+
+<p>Développer et finaliser un jeu ne suffit pas. Vous devez informer le monde que vous avez réalisé quelque chose d'intéressant, avec lequel les gens auront plaisir à jouer. Il y a de nombreux moyens de <a href="/en-US/docs/Games/Publishing_games/Game_promotion">Promouvoir votre jeu</a> — beaucoup d'entre-eux sont gratuits — <span id="result_box" lang="fr"><span>et donc, même si vous avez du mal à gagner votre vie en tant que développeur indépendant avec un budget nul, vous disposez malgré tout de nombreux moyens d'informer les gens de votre nouveau super jeu.</span></span> Faire la promotion de votre jeu vous aidera beaucoup notamment si vous souhaitez le monétiser par la suite, il est donc important de le faire correctement.</p>
+
+<h2 id="Monétiser_votre_jeu">Monétiser votre jeu</h2>
+
+<p>Après avoir passé beaucoup de temps à coder, publier et promouvoir votre jeu, vous penserez sans doute à un moyen de rémunérer votre travail. <a href="/fr/docs/Games/Publishing_games/Game_monetization">Monétiser son jeu </a>est essentiel à quiconque considère que le travail qu'il a réalisé pour créer son jeu est fait sérieusement par un développeur de jeux indépendant désormais capable de vivre de ses créations. Découvrez quelles sont vos options. La technologie est suffisamment avancée, la question est de savoir quelle approche sera la meilleure pour vous.</p>
diff --git a/files/fr/games/workflows/2d_breakout_game_phaser/index.html b/files/fr/games/tutorials/2d_breakout_game_phaser/index.html
index 43897c6574..43897c6574 100644
--- a/files/fr/games/workflows/2d_breakout_game_phaser/index.html
+++ b/files/fr/games/tutorials/2d_breakout_game_phaser/index.html
diff --git a/files/fr/games/workflows/2d_breakout_game_pure_javascript/faire_rebondir_la_balle_sur_les_murs/index.html b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.html
index 1f2e90da51..1f2e90da51 100644
--- a/files/fr/games/workflows/2d_breakout_game_pure_javascript/faire_rebondir_la_balle_sur_les_murs/index.html
+++ b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.html
diff --git a/files/fr/games/workflows/2d_breakout_game_pure_javascript/build_the_brick_field/index.html b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.html
index 1d193d6045..1d193d6045 100644
--- a/files/fr/games/workflows/2d_breakout_game_pure_javascript/build_the_brick_field/index.html
+++ b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.html
diff --git a/files/fr/games/workflows/2d_breakout_game_pure_javascript/detection_colisions/index.html b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.html
index 01e210ed5e..01e210ed5e 100644
--- a/files/fr/games/workflows/2d_breakout_game_pure_javascript/detection_colisions/index.html
+++ b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.html
diff --git a/files/fr/games/workflows/2d_breakout_game_pure_javascript/creer_element_canvas_et_afficher/index.html b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.html
index 12603405c0..12603405c0 100644
--- a/files/fr/games/workflows/2d_breakout_game_pure_javascript/creer_element_canvas_et_afficher/index.html
+++ b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.html
diff --git a/files/fr/games/workflows/2d_breakout_game_pure_javascript/finitions/index.html b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.html
index 061aa336fd..061aa336fd 100644
--- a/files/fr/games/workflows/2d_breakout_game_pure_javascript/finitions/index.html
+++ b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.html
diff --git a/files/fr/games/workflows/2d_breakout_game_pure_javascript/game_over/index.html b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/game_over/index.html
index 9b37cce3c6..9b37cce3c6 100644
--- a/files/fr/games/workflows/2d_breakout_game_pure_javascript/game_over/index.html
+++ b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/game_over/index.html
diff --git a/files/fr/games/workflows/2d_breakout_game_pure_javascript/index.html b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/index.html
index 57d3b276ed..57d3b276ed 100644
--- a/files/fr/games/workflows/2d_breakout_game_pure_javascript/index.html
+++ b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/index.html
diff --git a/files/fr/games/workflows/2d_breakout_game_pure_javascript/mouse_controls/index.html b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.html
index 322e7fd229..322e7fd229 100644
--- a/files/fr/games/workflows/2d_breakout_game_pure_javascript/mouse_controls/index.html
+++ b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.html
diff --git a/files/fr/games/workflows/2d_breakout_game_pure_javascript/move_the_ball/index.html b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.html
index 5619a7bbdf..5619a7bbdf 100644
--- a/files/fr/games/workflows/2d_breakout_game_pure_javascript/move_the_ball/index.html
+++ b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.html
diff --git a/files/fr/games/workflows/2d_breakout_game_pure_javascript/paddle_et_contrôle_clavier/index.html b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.html
index 27b1ee4f05..27b1ee4f05 100644
--- a/files/fr/games/workflows/2d_breakout_game_pure_javascript/paddle_et_contrôle_clavier/index.html
+++ b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.html
diff --git a/files/fr/games/workflows/2d_breakout_game_pure_javascript/track_the_score_and_win/index.html b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/track_the_score_and_win/index.html
index 090b0ea4cb..090b0ea4cb 100644
--- a/files/fr/games/workflows/2d_breakout_game_pure_javascript/track_the_score_and_win/index.html
+++ b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/track_the_score_and_win/index.html
diff --git a/files/fr/games/workflows/html5_gamedev_phaser_device_orientation_fr/index.html b/files/fr/games/tutorials/html5_gamedev_phaser_device_orientation/index.html
index 1a3c93c7d1..1a3c93c7d1 100644
--- a/files/fr/games/workflows/html5_gamedev_phaser_device_orientation_fr/index.html
+++ b/files/fr/games/tutorials/html5_gamedev_phaser_device_orientation/index.html
diff --git a/files/fr/games/workflows/index.html b/files/fr/games/tutorials/index.html
index a518d5ea72..a518d5ea72 100644
--- a/files/fr/games/workflows/index.html
+++ b/files/fr/games/tutorials/index.html