Prepare Games section for Markdown conversion (#3006)

* Remove summary / seoSummary * Fix another file with seoSummary / span mess * Remove spans * Remove fonts * Remove notranslate * Fix nested code/pre blocks * fix minor errors (one offs and some others) * Fix notes * Fix images * Fix absolute and/or English links
author: SphinxKnight <SphinxKnight@users.noreply.github.com> 2021-11-11 07:41:53 +0100
committer: GitHub <noreply@github.com> 2021-11-11 07:41:53 +0100
commit: 08e5d65aa816c4a3b6a9680360e8b0daf4079bf2 (patch)
tree: 17620a8fdad6454ab99728fbfe471224c92f1649 /files/fr/games
parent: a8fb2ac407174bff7ea35cd5fff146cb43a49e4e (diff)
download: translated-content-08e5d65aa816c4a3b6a9680360e8b0daf4079bf2.tar.gz
translated-content-08e5d65aa816c4a3b6a9680360e8b0daf4079bf2.tar.bz2
translated-content-08e5d65aa816c4a3b6a9680360e8b0daf4079bf2.zip
32 files changed, 760 insertions, 861 deletions
diff --git a/files/fr/games/anatomy/index.html b/files/fr/games/anatomy/index.html
index a435835eda..4a1bb06c8e 100644
--- a/files/fr/games/anatomy/index.html
+++ b/files/fr/games/anatomy/index.html
@@ -11,9 +11,7 @@ original_slug: Jeux/Anatomie
 ---
 <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>
+<p>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. Les programmeurs de jeux expérimentés et nouveaux dans le développement web pourront aussi en tirer bénéfice.</p>
 
 <h2 id="Présenter_accepter_interpréter_calculer_repéter">Présenter, accepter, interpréter, calculer, repéter</h2>
 
@@ -207,7 +205,7 @@ main(); //Débuter le cycle.</pre>
    <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>.
+ <li>Dessiner à chaque <code>requestAnimationFrame</code> et mettre à jour sur un <code>setInterval</code> ou <code>setTimeout</code> dans un <a href="/fr/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>
diff --git a/files/fr/games/examples/index.html b/files/fr/games/examples/index.html
index c86f6b8f4e..4f81187ec3 100644
--- a/files/fr/games/examples/index.html
+++ b/files/fr/games/examples/index.html
@@ -11,15 +11,13 @@ original_slug: Jeux/Exemples
 ---
 <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>
+<p>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>
+ <dd>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/)</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>
@@ -56,7 +54,7 @@ original_slug: Jeux/Exemples
  <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>
+ <dt><a href="/fr/demos/detail/bananabread" title="/fr/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>
@@ -67,7 +65,7 @@ original_slug: Jeux/Exemples
  <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>
+ <dd>Une nouvelle version de Star Castle, le classique jeu d'arcade 1980 de Cinematronics, construit avec Canvas 2D.</dd>
 </dl>
 
 <h2 id="Jeux_payants">Jeux payants</h2>
@@ -82,11 +80,9 @@ original_slug: Jeux/Exemples
  <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>
+ <dd>MMORPG isométrique ayant des similitudes avec RuneScape Classic et Ultima.</dd>
 </dl>
-</div>
 
-<div class="column-half">
 <h2 id="Démos_diverses">Démos diverses</h2>
 
 <dl>
@@ -109,7 +105,7 @@ original_slug: Jeux/Exemples
  <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>
+ <dd>Des particules de couleur arc-en-ciel, tombant comme de la pluie, rebondissent sur un terrain d'orbes.</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>
@@ -129,5 +125,4 @@ original_slug: Jeux/Exemples
  <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
index d8528f83e7..713c74a6b7 100644
--- a/files/fr/games/index.html
+++ b/files/fr/games/index.html
@@ -10,54 +10,39 @@ original_slug: Jeux
 ---
 <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>Bienvenue dans le centre de développement de jeux MDN ! Dans cette zone du site, nous fournissons des ressources pour les développeurs web désireux de développer des jeux. Vous trouverez de nombreux tutoriels et articles techniques dans le menu principal à gauche, alors n'hésitez pas à explorer.</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>
+<p>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.</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>
+<p><strong>Note :</strong> 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 <a href="/fr/Apprendre">Zone "Apprendre"</a> est un bon endroit pour commencer avec les bases.</p>
 </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>
+<h2 id="Portez_des_jeux_natifs_sur_le_Web">Portez des jeux natifs sur le Web</h2>
+
+<p>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  <a href="http://kripken.github.io/emscripten-site/index.html">Emscripten</a>  - c'est un compilateur LLVM vers JavaScript, qui prend le "bytecode LLVM" (par exemple, généré à partir de C / C ++ en utilisant Clang ou un autre langage) et le compile dans  <a href="/fr/docs/Games/Tools/asm.js">asm.js</a> , qui peut être exécuté sur le Web.</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/downloads.html">D/gameswnload and Install</a> pour installer la chaîne d'outils .</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>
+<p>Pour une liste d'exemples de jeux, voir notre <a href="/fr/docs/Games/Examples">page exemples</a>. Consultez aussi <a href="https://games.mozilla.org/">https://games.mozilla.org/</a> pour des ressources et des exemples plus utiles !</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>
@@ -65,15 +50,10 @@ original_slug: Jeux
  <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>
+ <dt><a href="http://gamedevjsweekly/games.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>
@@ -81,11 +61,9 @@ original_slug: Jeux
  <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>
+ <dd>De quoi démarrer pour les nouveaux développeurs de jeux, une liste organisée de liens vers diverses ressources utiles sur le web.</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>
+</dl>
+\ No newline at end of file
diff --git a/files/fr/games/introduction/index.html b/files/fr/games/introduction/index.html
index cf1d1cf591..9f98c00cd2 100644
--- a/files/fr/games/introduction/index.html
+++ b/files/fr/games/introduction/index.html
@@ -19,7 +19,7 @@ original_slug: Jeux/Introduction
 
 <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>
+<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="/fr/docs/JavaScript" title="/fr/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="/fr/docs/Mozilla/Firefox_OS" title="/fr/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>
 
@@ -35,7 +35,7 @@ original_slug: Jeux/Introduction
  <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>
+   <td><a href="/fr/docs/Web/API/Web_Audio_API" title="/fr/docs/Web_Audio_API">Web Audio API</a></td>
   </tr>
   <tr>
    <td><strong>Graphisme</strong></td>
@@ -92,35 +92,35 @@ original_slug: Jeux/Introduction
 
 <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>
+ <dt><a href="/fr/docs/Web/Guide/DOM/Using_full_screen_mode" title="/fr/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>
+ <dt><a href="/fr/docs/Web/Guide/API/Gamepad" title="/fr/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>
+ <dt><a href="/fr/docs/Web/HTML" title="/fr/docs/HTML">HTML</a> et <a href="/fr/docs/Web/CSS" title="/fr/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>
+ <dt><a href="/fr/docs/Web/HTML/Element/audio" title="/fr/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="/fr/docs/Web/API/Web_Audio_API" title="/fr/docs/Web_Audio_API">Web Audio</a> vous offre plus de possibilités de traitement !</dd>
+ <dt><a href="/fr/docs/Web/API/API_IndexedDB" title="/fr/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>
+ <dt><a href="/fr/docs/Web/JavaScript" title="/fr/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>
+ <dt><a href="/fr/docs/WebAPI/Pointer_Lock" title="/fr/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>
+ <dt><a href="/fr/docs/Web/SVG" title="/fr/docs/SVG">SVG</a> (Scalable Vector Graphics)</dt>
+ <dd>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.</dd>
+ <dt><a href="/fr/docs/Web/JavaScript/Tableaux_typ%C3%A9s" title="/fr/docs/JavaScript/Typed_arrays">Typed Arrays</a></dt>
+ <dd>Les tableaux typés JavaScript vous donnent accès à des données binaires brutes depuis JavaScript ; 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.</dd>
+ <dt><a href="/fr/docs/Web/API/Web_Audio_API" title="/fr/docs/Web_Audio_API">Web Audio API</a></dt>
+ <dd>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.</dd>
+ <dt><a href="/fr/docs/Web/API/WebGL_API" title="/fr/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>
+ <dt><a href="/fr/docs/Web/API/WebRTC_API" title="/fr/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>
+ <dt><a href="/fr/docs/WebSockets" title="/fr/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>
+ <dt><a href="/fr/docs/Utilisation_des_web_workers" title="/fr/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>
+ <dt><a href="/fr/docs/Web/API/XMLHttpRequest" title="/fr/docs/DOM/XMLHttpRequest">XMLHttpRequest</a> and <a href="/fr/docs/Web/API/API_fichier_systeme" title="/fr/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>
diff --git a/files/fr/games/introduction_to_html5_game_development/index.html b/files/fr/games/introduction_to_html5_game_development/index.html
index e0f770ca03..ef15c35b78 100644
--- a/files/fr/games/introduction_to_html5_game_development/index.html
+++ b/files/fr/games/introduction_to_html5_game_development/index.html
@@ -11,31 +11,27 @@ original_slug: Jeux/Introduction_to_HTML5_Game_Gevelopment_(summary)
 ---
 <div>{{GamesSidebar}}</div>
 
-<div>{{IncludeSubnav("/en-US/docs/Games")}}</div>
+<div>{{IncludeSubnav("/fr/docs/Games")}}</div>
 
-<div>
-<h2 id="Avantages" style="line-height: 30px;"><span class="tlid-translation translation" lang="fr"><span title="">Avantages</span></span></h2>
+<h2 id="Avantages">Avantages</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>
+ <li>Les jeux construits avec HTML5 fonctionnent sur les smartphones, les tablettes, les PC et les téléviseurs intelligents.</li>
+ <li>Annoncez et promouvez votre jeu sur le Web, ainsi que sur d'autres médias.</li>
+ <li>Paiements. Chargez ce que vous voulez et utilisez le service de traitement des paiements de votre choix.</li>
+ <li>Mettez à jour votre jeu quand vous le souhaitez.</li>
+ <li>Collectez vos propres analyses !</li>
+ <li>Connectez-vous plus étroitement avec vos clients,</li>
+ <li>Les joueurs peuvent jouer au jeu n'importe où, n'importe quand.</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>
+<h2 id="Technologies_Web">Technologies Web</h2>
 
 <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>
+   <th scope="col"><strong>Fonction</strong></th>
+   <th scope="col">Technologie</th>
   </tr>
  </thead>
  <tbody>
@@ -44,64 +40,62 @@ original_slug: Jeux/Introduction_to_HTML5_Game_Gevelopment_(summary)
    <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><strong>Graphique</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>
+   <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>, capteurs de l'appareil , <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>
+   <td><a href="/fr/docs/JavaScript" title="/fr/docs/JavaScript">JavaScript</a> (ou C/C++  utilisant <a href="https://github.com/kripken/emscripten/wiki" title="https://github.com/kripken/emscripten/wiki">Emscripten</a> pour compiler en JavaScript )</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>
+   <td><a href="/fr/docs/WebRTC" title="/fr/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>
+   <td><a href="/fr/docs/Web/API/API_IndexedDB">IndexedDB</a>  ou le  "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>
+   <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="/fr/docs/Social_API" title="/fr/docs/Social_API">Social API</a> ( et beaucoup plus! )</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>
+ <dt><a href="/fr/docs/DOM/Using_fullscreen_mode" title="/fr/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>
+ <dt><a href="/fr/docs/API/Gamepad/Using_Gamepad_API" title="/fr/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>
+ <dt><a href="/fr/docs/HTML" title="/fr/docs/HTML">HTML</a> et <a href="/fr/docs/CSS" title="/fr/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>
+ <dt><a href="/fr/docs/HTML/Element/audio" title="/fr/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>
+ <dt><a href="/fr/docs/IndexedDB" title="/fr/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>
+ <dt><a href="/fr/docs/JavaScript" title="/fr/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>
+ <dt><a href="/fr/docs/WebAPI/Pointer_Lock" title="/fr/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>
+ <dt><a href="/fr/docs/SVG" title="/fr/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>
+ <dt><a href="/fr/docs/JavaScript/Typed_arrays" title="/fr/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>
+ <dt><a href="/fr/docs/Web_Audio_API" title="/fr/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>
+ <dt><a href="/fr/docs/WebGL" title="/fr/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>
+ <dt><a href="/fr/docs/WebRTC" title="/fr/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>
+ <dt><a href="/fr/docs/WebSockets" title="/fr/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>
+ <dt><a href="/fr/docs/DOM/Using_web_workers" title="/fr/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 multicœurs.</dd>
+ <dt><a href="/fr/docs/DOM/XMLHttpRequest" title="/fr/docs/DOM/XMLHttpRequest">XMLHttpRequest</a> et <a href="/fr/docs/DOM/File_API" title="/fr/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>
+</dl>
+\ No newline at end of file
diff --git a/files/fr/games/publishing_games/game_distribution/index.html b/files/fr/games/publishing_games/game_distribution/index.html
index 5bacf9a9a8..303600a677 100644
--- a/files/fr/games/publishing_games/game_distribution/index.html
+++ b/files/fr/games/publishing_games/game_distribution/index.html
@@ -16,7 +16,7 @@ tags:
 ---
 <div>{{GamesSidebar}}</div>
 
-<p class="summary">Vous avez suivi un <a href="/fr/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript">tutoriel</a> ou <a href="/fr/docs/Games/Tutorials/2D_breakout_game_Phaser">deux</a> et créé un jeu en HTML5 : c'est génial ! Cet article couvre tout ce que vous avez besoin de savoir sur la façon de distribuer votre nouveau jeu dans la nature : que vous l'hébergiez en ligne vous-même, que vous le proposiez sur des plateformes ouvertes, ou encore que vous le mettiez à disposition sur des plateformes privées comme Google Play ou l'App Store iOS d'Apple.</p>
+<p>Vous avez suivi un <a href="/fr/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript">tutoriel</a> ou <a href="/fr/docs/Games/Tutorials/2D_breakout_game_Phaser">deux</a> et créé un jeu en HTML5 : c'est génial ! Cet article couvre tout ce que vous avez besoin de savoir sur la façon de distribuer votre nouveau jeu dans la nature : que vous l'hébergiez en ligne vous-même, que vous le proposiez sur des plateformes ouvertes, ou encore que vous le mettiez à disposition sur des plateformes privées comme Google Play ou l'App Store iOS d'Apple.</p>
 
 <h2 id="benefits_of_HTML5_over_native">Avantages du HTML5 par rapport à du natif</h2>
 
@@ -79,7 +79,7 @@ tags:
 <p>Voyons quelles options sont à notre disposition en matière de marketplaces/magasins d'applications disponibles pour chaque plateforme et système d'exploitation.</p>
 
 <div class="note">
-<p><strong>Note</strong> : Ces plateformes de distribution sont les plus populaires, mais cela ne signifie pas qu'elles sont les seules. Plutôt que d'essayer d'ajouter votre jeu à des milliers d'autres dans l'app store iOS par exemple, vous pouvez également tenter de trouver une niche et faire la promotion de votre jeu directement auprès d'une audience qui sera intéressée par vos jeux. Il est essentiel de faire preuve de créativité ici.</p>
+<p><strong>Note :</strong> Ces plateformes de distribution sont les plus populaires, mais cela ne signifie pas qu'elles sont les seules. Plutôt que d'essayer d'ajouter votre jeu à des milliers d'autres dans l'app store iOS par exemple, vous pouvez également tenter de trouver une niche et faire la promotion de votre jeu directement auprès d'une audience qui sera intéressée par vos jeux. Il est essentiel de faire preuve de créativité ici.</p>
 </div>
 
 <h3 id="web_stores">Boutiques en ligne</h3>
@@ -132,6 +132,6 @@ tags:
  <li><a href="http://manifoldjs.com/">Manifold.js</a> — cet outil de l'équipe Microsoft peut créer des distributions natives de jeux HTML5 depuis iOS, Android et Windows.</li>
 </ul>
 
-<h2 id="summary">Résumé</h2>
+<h2 id="Résumé">Résumé</h2>
 
 <p>La distribution permet d'offrir au monde entier un accès à votre jeu. Il existe de nombreuses possibilités et il n'existe pas de meilleure réponse, tout dépend de vos objectifs. Une fois que vous avez publié votre jeu, il est temps de se concentrer sur sa <a href="/fr/docs/Games/Techniques/Publishing_games/Game_promotion/">promotion</a> : il est temps que les gens sachent que votre jeu existe! Si vous n'en faites pas la promotion, ils ne sauront même pas que votre jeu existe, et pourront encore moins y jouer.</p>
diff --git a/files/fr/games/publishing_games/game_monetization/index.html b/files/fr/games/publishing_games/game_monetization/index.html
index 8d3b507571..4e5930c930 100644
--- a/files/fr/games/publishing_games/game_monetization/index.html
+++ b/files/fr/games/publishing_games/game_monetization/index.html
@@ -16,7 +16,7 @@ original_slug: Jeux/Publier_jeux/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>
+<p>Lorsque vous avez passé votre temps à créer un jeu, à le <a href="/fr/docs/Games/Techniques/Publishing_games/Game_distribution">distribuer</a> et à en faire la <a href="/fr/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>
 
@@ -28,7 +28,7 @@ original_slug: Jeux/Publier_jeux/Game_monetization
 
 <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>
+<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="/fr/docs/Games/Techniques/Publishing_games/Game_promotion">promotion</a>.</p>
 
 <h3 id="Freemium">Freemium</h3>
 
@@ -40,7 +40,7 @@ original_slug: Jeux/Publier_jeux/Game_monetization
 
 <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>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="/fr/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. 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.</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>
 
@@ -54,7 +54,7 @@ original_slug: Jeux/Publier_jeux/Game_monetization
 
 <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>
+<p>La licence exclusive est un type de licence pour un éditeur  — vous avez créé un jeu et vous en vendez tous les droits à une seule entité ainsi que les droits de le redistribuer — <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>
 
@@ -82,19 +82,19 @@ original_slug: Jeux/Publier_jeux/Game_monetization
 
 <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>
+<p>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 <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>
+<p>Il est possible d'écrire des articles sur vos jeux et même d'être payé pour eux. La <a href="/fr/docs/Games/Techniques/Publishing_games/Game_promotion">promotion</a> et la monétisation de jeux en même temps sont gagnant-gagnant, 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. Si vous vous concentrez d'abord sur le partage des connaissances et que vous utilisez vos jeux comme des exemples, cela devrait être correct. 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>
+<p>Vous pouvez vendre des t-shirts, des <a href="https://www.stickermule.com/user/1070634890/stickers">autocollants</a> ou d'autres gadgets — 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. Pourtant, cela pourrait être un autre petit flux de revenus passifs. Plus vos revenus sont diversifiés, meilleure est la stabilité de votre entreprise.</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>
+<p>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é. Parfois, cela fonctionne, mais seulement si le joueur vous connaît et estime que cela vous aidera dans votre situation. C'est pourquoi il est si important de gérer soigneusement votre communauté. Cela a fonctionné avec la compétition <a href="http://js13kgames.com/">js13kGames</a> — 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.</p>
 
 <h2 id="Résumé">Résumé</h2>
 
diff --git a/files/fr/games/publishing_games/game_promotion/index.html b/files/fr/games/publishing_games/game_promotion/index.html
index 63edd59ce2..5c35777d31 100644
--- a/files/fr/games/publishing_games/game_promotion/index.html
+++ b/files/fr/games/publishing_games/game_promotion/index.html
@@ -12,7 +12,7 @@ tags:
 ---
 <div>{{GamesSidebar}}</div>
 
-<p class="summary">Développer un jeu et le mettre en ligne ne suffit pas. Vous devez faire connaître au monde que vous avez un jeu intéressant auquel les gens auront envie de jouer. Il y a bien des façons de promouvoir votre jeu ; la plupart sont gratuites, donc même si vous avez du mal à gagner votre vie en tant que développeur indépendant, vous pouvez malgré tout faire beaucoup de choses pour faire connaître votre super nouveau jeu aux autres, y compris sans budget. Faire la promotion d'un jeu sera également très utile lorsque vous voudrez le <a href="/fr/docs/Games/Publishing_games/Game_monetization">monétiser</a>, il est donc important de le faire correctement.</p>
+<p>Développer un jeu et le mettre en ligne ne suffit pas. Vous devez faire connaître au monde que vous avez un jeu intéressant auquel les gens auront envie de jouer. Il y a bien des façons de promouvoir votre jeu ; la plupart sont gratuites, donc même si vous avez du mal à gagner votre vie en tant que développeur indépendant, vous pouvez malgré tout faire beaucoup de choses pour faire connaître votre super nouveau jeu aux autres, y compris sans budget. Faire la promotion d'un jeu sera également très utile lorsque vous voudrez le <a href="/fr/docs/Games/Publishing_games/Game_monetization">monétiser</a>, il est donc important de le faire correctement.</p>
 
 <h2 id="competitions">Compétitions</h2>
 
@@ -86,7 +86,7 @@ tags:
 
 <p>Vous pouvez aider votre communauté à grandir, et faire votre propre promotion ainsi que celle de vos jeux en même temps. En envoyant des <a href="https://gamedevjsweekly.com/">newsletters hebdomadaires</a> et en organisant des <a href="https://js13kgames.com/">tournois en ligne</a> ou des <a href="https://gamedevjs.com/">événements locaux</a> vous montrerez aux autres que vous êtes passionné⋅e par ce que vous faites et qu'ils peuvent compter sur vous. Dès lors, si vous avez besoin d'un coup de main vous savez qu'ils seront là pour vous.</p>
 
-<h2 id="summary">Résumé</h2>
+<h2 id="Résumé">Résumé</h2>
 
 <p>Toutes les façons de faire la promotion de votre jeu sont bonnes. Vous avez tout un tas d'options qui vous sont offertes, et la plupart d'entre elles sont gratuites : tout ce qui compte c'est votre enthousiasme et le temps dont vous disposez ! Parfois vous devrez passer plus de temps à faire la promotion d'un jeu qu'à le développer. Mais rappelez-vous qu'il ne sert à rien d'avoir le meilleur jeu au monde… si personne ne sait qu'il existe!</p>
 
diff --git a/files/fr/games/publishing_games/index.html b/files/fr/games/publishing_games/index.html
index fb5c562cd8..fc12eab7ad 100644
--- a/files/fr/games/publishing_games/index.html
+++ b/files/fr/games/publishing_games/index.html
@@ -14,15 +14,15 @@ original_slug: Jeux/Publier_jeux
 ---
 <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>
+<p>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>
+<p>Vous avez déjà suivi un <a href="/fr/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript">tutoriel</a> ou <a href="/fr/docs/Games/Workflows/2D_Breakout_game_Phaser">deux</a> et vous avez créé un jeu en HTML5 ? Génial ! L'article <a href="/fr/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>
+<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="/fr/docs/Games/Publishing_games/Game_promotion">Promouvoir votre jeu</a> — beaucoup d'entre-eux sont gratuits — 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. 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>
 
diff --git a/files/fr/games/techniques/2d_collision_detection/index.html b/files/fr/games/techniques/2d_collision_detection/index.html
index d44d9b55f0..d8f6c3687c 100644
--- a/files/fr/games/techniques/2d_collision_detection/index.html
+++ b/files/fr/games/techniques/2d_collision_detection/index.html
@@ -11,11 +11,9 @@ translation_of: Games/Techniques/2D_collision_detection
 ---
 <div>{{GamesSidebar}}</div><p>  {{IncludeSubnav("/fr/docs/Jeux")}}  </p>
 
-<div class="summary">
 <p>Les algorithmes de détection de collisions dans les jeux en 2 dimensions dépendent de la forme des objets à détecter (par exemple : rectangle contre rectangle, cercle contre rectangle, cercle contre cercle…). Habituellement, il est préférable d’utiliser une forme générique appelée masque de collision (« <em>hitbox</em> ») qui couvrira l’entité. Ainsi, les collisions ne seront pas assurées au pixel près mais cela permettra d’avoir de bonnes performances pour un grand nombre d’entités à tester.</p>
 
 <p>Cet article donne un résumé des techniques les plus utilisées pour la détection des collisions dans les jeux en deux dimensions.</p>
-</div>
 
 <h2 id="Boîtes_englobantes_alignées_sur_les_axes">Boîtes englobantes alignées sur les axes</h2>
 
@@ -41,7 +39,7 @@ if (5 &lt; 30 &amp;&amp;
 }</pre>
 
 <div class="note">
-<p><strong>Note</strong> : vous pouvez tester un <a class="external" href="http://jsfiddle.net/knam8/">exemple interactif de cet algorithme</a> sur jsFiddle, pour mieux comprendre le fonctionnement de ce code.</p>
+<p><strong>Note :</strong> vous pouvez tester un <a class="external" href="http://jsfiddle.net/knam8/">exemple interactif de cet algorithme</a> sur jsFiddle, pour mieux comprendre le fonctionnement de ce code.</p>
 </div>
 
 <h2 id="Collision_de_cercles">Collision de cercles</h2>
@@ -60,7 +58,7 @@ if (distance &lt; circle1.radius + circle2.radius) {
 }</pre>
 
 <div class="note">
-<p><strong>Note :</strong> vous pouvez tester un <a class="external" href="http://jsfiddle.net/gQ3hD/2/">exemple interactif de cet algorithme</a> sur jsFiddle, pour mieux comprendre le fonctionnement de ce code.</p>
+<p><strong>Note :</strong> vous pouvez tester un <a class="external" href="http://jsfiddle.net/gQ3hD/2/">exemple interactif de cet algorithme</a> sur jsFiddle, pour mieux comprendre le fonctionnement de ce code.</p>
 </div>
 
 <h2 id="Théorème_des_axes_séparateurs">Théorème des axes séparateurs</h2>
diff --git a/files/fr/games/techniques/3d_on_the_web/basic_theory/index.html b/files/fr/games/techniques/3d_on_the_web/basic_theory/index.html
index c6d3d4bdc9..4243e68e9a 100644
--- a/files/fr/games/techniques/3d_on_the_web/basic_theory/index.html
+++ b/files/fr/games/techniques/3d_on_the_web/basic_theory/index.html
@@ -19,7 +19,7 @@ translation_of: Games/Techniques/3D_on_the_web/Basic_theory
 
 <p>La 3D est principalement basée sur la représentation de formes 3D dans l'espace, avec un système de coordonnées utilisé pour calculer leurs positions.</p>
 
-<p><img alt="Coordinate system" src="https://mdn.mozillademos.org/files/13326/mdn-games-3d-coordinate-system.png" style="height: 338px; width: 600px;"></p>
+<p><img src="mdn-games-3d-coordinate-system.png"></p>
 
 <p>WebGL utilise le système de coordonnées de droite — l'axe x pointe vers la droite, l'axe y vers le haut et l'axe z dans la profondeur, comme shématisé ci-dessus.</p>
 
@@ -36,7 +36,7 @@ translation_of: Games/Techniques/3D_on_the_web/Basic_theory
 
 <p>Vous pouvez faire de la géométrie en utilisant ces informations — voici l'exemple d'un cube :</p>
 
-<p><img alt="Cube" src="https://mdn.mozillademos.org/files/13324/mdn-games-3d-cube.png" style="height: 265px; width: 600px;"></p>
+<p><img alt="Cube" src="mdn-games-3d-cube.png"></p>
 
 <p>Une face de la forme donnée est un plan entre des sommets. Par exemple, un cube a 8 différents sommets (points dans l'espace) et 6 différentes faces, chacune construite à partir de 4 sommets. Une norme définit de quelle manière la face est orientée. De plus, en connectant les points, on crée les arêtes du cube.La géométrie est basée sur les sommets et les faces, où le matériau est une texture, utilisant une couleur ou une image. Si l'on connecte la géométrie avec le matériau, on obtient une maille (mesh)</p>
 
@@ -44,7 +44,7 @@ translation_of: Games/Techniques/3D_on_the_web/Basic_theory
 
 <p>Le rendu des tuyaux est un procédé avec lequel les images sont préparées et affichées sur l'écran. Les graphismes utilisant les rendus de tuyaux prennent des objets 3D construits à partir de primitives décrites à l'aide de sommets, les transforment, calculent les fragments, et les affichent sur un écran 2D en tant que pixels.</p>
 
-<p><img alt="Rendering pipeline" src="https://mdn.mozillademos.org/files/13334/mdn-games-3d-rendering-pipeline.png" style="height: 225px; width: 600px;"></p>
+<p><img alt="Rendering pipeline" src="mdn-games-3d-rendering-pipeline.png"></p>
 
 <p>Terminologie utilisée dans le diagramme ci-dessus :</p>
 
@@ -54,21 +54,21 @@ translation_of: Games/Techniques/3D_on_the_web/Basic_theory
  <li>Un <strong>Pixel </strong>: Un point sur l'écran arrangé sur une grille 2D, qui prend une couleur RVBA.</li>
 </ul>
 
-<p>Le traitement des sommets et des fragments est programmable — vous pouvez <a href="https://developer.mozilla.org/fr/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders">écrire vos propres shaders</a> qui manipulent le rendu.</p>
+<p>Le traitement des sommets et des fragments est programmable — vous pouvez <a href="/fr/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders">écrire vos propres shaders</a> qui manipulent le rendu.</p>
 
 <h2 id="Traitement_de_sommet">Traitement de sommet</h2>
 
 <p>Le traitement de sommet consiste à combiner les informations à propos de chaque sommet dans des primitives et de définir leurs coordonnées dans l'espace 3D pour le spectateur. C'est comme prendre une photo de la scène donnée que vous avez préparée — vous devez placer les objets en premier, configurer la caméra, et prendre la photo.</p>
 
-<p><img alt="Vertex processing" src="https://mdn.mozillademos.org/files/13336/mdn-games-3d-vertex-processing.png" style="height: 338px; width: 600px;"></p>
+<p><img src="mdn-games-3d-vertex-processing.png"></p>
 
 <p>Il y a 4 étapes dans ce traitement : la première implique d'arranger les objets dans le monde, elle est appelée la <strong>transformation du modèle</strong>. Ensuite, il y a la <strong>transformation de la vue</strong>, qui prend soin de positionner et de régler l'orientation de la caméra dans l'espace 3D. La caméra a 3 paramètres — position, direction et orientation — qui doivent être définis pour la scène nouvellement créée.</p>
 
-<p><img alt="Camera" src="https://mdn.mozillademos.org/files/13322/mdn-games-3d-camera.png" style="height: 225px; width: 600px;"></p>
+<p><img alt="Camera" src="mdn-games-3d-camera.png"></p>
 
-<p>La <strong>transformation de la projection</strong> (aussi appelée transformation de la perspective) définit ensuite les réglages de la caméra. Elle définit ce qui peut être vu par la caméra — la configuration inclut le champ de vision, le ratio d'aspect, et éventuellement les plans proches et éloignés. Lisez le <a href="https://developer.mozilla.org/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js#Camera">paragraphe sur la Caméra</a> dans l'article de Three.js pour en savoir plus.</p>
+<p>La <strong>transformation de la projection</strong> (aussi appelée transformation de la perspective) définit ensuite les réglages de la caméra. Elle définit ce qui peut être vu par la caméra — la configuration inclut le champ de vision, le ratio d'aspect, et éventuellement les plans proches et éloignés. Lisez le <a href="/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js#Camera">paragraphe sur la Caméra</a> dans l'article de Three.js pour en savoir plus.</p>
 
-<p><img alt="Camera settings" src="https://mdn.mozillademos.org/files/13320/mdn-games-3d-camera-settings.png" style="height: 338px; width: 600px;"></p>
+<p><img src="mdn-games-3d-camera-settings.png"></p>
 
 <p>La dernière étape est la transformation de la fenêtre, qui implique la production de tout pour la prochaine étape dans le rendu du tuyau.</p>
 
@@ -76,7 +76,7 @@ translation_of: Games/Techniques/3D_on_the_web/Basic_theory
 
 <p>La rastérisation convertit les primitives (des sommets reliés) à un ensemble de fragments.</p>
 
-<p><img alt="Rasterization" src="https://mdn.mozillademos.org/files/13332/mdn-games-3d-rasterization.png" style="height: 338px; width: 600px;"></p>
+<p><img src="mdn-games-3d-rasterization.png"></p>
 
 <p>Ces fragments — qui sont des projections 3D de pixels 2D — sont alignés sur la grille de pixels, donc éventuellement ils peuvent être affichés comme des pixels sur un écran 2D durant la phase de fusion du résultat.</p>
 
@@ -84,13 +84,13 @@ translation_of: Games/Techniques/3D_on_the_web/Basic_theory
 
 <p>Le traitement de fragment se concentre sur les textures et les lumières — il calcule les couleurs finales à partir des paramètres donnés.</p>
 
-<p><img alt="Fragment processing" src="https://mdn.mozillademos.org/files/13328/mdn-games-3d-fragment-processing.png" style="height: 338px; width: 600px;"></p>
+<p><img src="mdn-games-3d-fragment-processing.png"></p>
 
 <h3 id="Textures">Textures</h3>
 
 <p>Les textures sont des images 2D utilisées dans l'espace 3D pour faire que les objets rendent mieux et paraissent plus réalistes. Les textures sont combinées à partir de simples éléments de texture appelés texels, de la même manière que les images sont combinées à partir de pixels. Appliquer des textures sur des objets durant le traitement des fragments, vous permet de l'ajuster en lui donnant une enveloppe ou des filtres si nécessaire.</p>
 
-<p><span id="result_box" lang="fr"><span>L'habillage de texture permet de répéter l'image 2D autour de l'objet 3D.</span> <span>Le filtrage de texture est appliqué lorsque la résolution d'origine ou l'image de texture est différente du fragment affiché </span></span> — <span lang="fr"><span> elle sera réduite ou agrandie en conséquence.</span></span></p>
+<p>L'habillage de texture permet de répéter l'image 2D autour de l'objet 3D. Le filtrage de texture est appliqué lorsque la résolution d'origine ou l'image de texture est différente du fragment affiché  —  elle sera réduite ou agrandie en conséquence.</p>
 
 <h3 id="Lumières">Lumières</h3>
 
@@ -105,7 +105,7 @@ translation_of: Games/Techniques/3D_on_the_web/Basic_theory
 
 <h2 id="Fusion_de_sortie">Fusion de sortie</h2>
 
-<p>Durant l'étape de manipulation du résultat, tous les fragments des primitives de l'espace 3D sont transformés sur une grille de pixels 2D qui est ensuite affichée sur l'écran.<img alt="Output merging" src="https://mdn.mozillademos.org/files/13330/mdn-games-3d-output-merging.png" style="height: 338px; width: 600px;"></p>
+<p>Durant l'étape de manipulation du résultat, tous les fragments des primitives de l'espace 3D sont transformés sur une grille de pixels 2D qui est ensuite affichée sur l'écran.<img src="mdn-games-3d-output-merging.png"></p>
 
 <p>Durant la fusion de sortie, quelques traitements sont aussi appliqués pour ignorer de l'information qui n'est pas utile — par exemple, les paramètres des objets qui sont à l'extérieur de l'écran ou derrière d'autres, et par conséquent non visibles, ne sont pas calculés.</p>
 
@@ -117,10 +117,10 @@ translation_of: Games/Techniques/3D_on_the_web/Basic_theory
 <p>Maintenant vous connaissez les bases de la théorie derrière la manipulation 3D, si vous voulez passer à la pratique et voir quelques démonstrations en action, continuez avec les tutoriels ci-dessous :</p>
 
 <ul>
- <li><a href="https://developer.mozilla.org/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js">Construction d'une démo de base avec Three.js</a></li>
- <li><span class="seosummary"><a href="https://developer.mozilla.org/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js">Construction d'une démo de base avec Babylon.js</a></span></li>
- <li><a href="https://developer.mozilla.org/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas">Construction d'une démo de base avec PlayCanvas</a></li>
- <li><a href="https://developer.mozilla.org/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame">Construction d'une démo de base avec</a><a href="https://developer.mozilla.org/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame"> A-Frame</a></li>
+ <li><a href="/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js">Construction d'une démo de base avec Three.js</a></li>
+ <li><a href="/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js">Construction d'une démo de base avec Babylon.js</a></li>
+ <li><a href="/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas">Construction d'une démo de base avec PlayCanvas</a></li>
+ <li><a href="/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame">Construction d'une démo de base avec</a><a href="/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame"> A-Frame</a></li>
 </ul>
 
 <p>Allez-y et faites quelques expémentations 3D sympas par vous-même !</p>
diff --git a/files/fr/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_playcanvas/index.html b/files/fr/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_playcanvas/index.html
index 45db4b35e0..8a10f15237 100644
--- a/files/fr/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_playcanvas/index.html
+++ b/files/fr/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_playcanvas/index.html
@@ -12,9 +12,9 @@ tags:
   - camera
 translation_of: Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas
 ---
-<div>{{GamesSidebar}}</div><p class="summary"><span class="seoSummary"><strong>PlayCanvas</strong> est un populaire moteur 3D WebGL de jeu, originellement concu par Will Eastcott et Dave Evans. Il est disponible en <a href="https://github.com/playcanvas/engine">open-source sur GitHub</a>, avec un <a href="http://developer.playcanvas.com/en/user-manual/designer/">éditeur</a> en ligne et une bonne <a href="http://developer.playcanvas.com/en/">documentation</a>.</span> L'éditeur en ligne est gratuit pour les projets publics avec jusqu'à deux membres d'équipe, mais il y a aussi des <a href="https://playcanvas.com/plans">plans payants</a><font color="#0b0116"> si vous vous lancez dans un projet commercial privé avec plus de développeurs.</font></p>
+<div>{{GamesSidebar}}</div><p><strong>PlayCanvas</strong> est un populaire moteur 3D WebGL de jeu, originellement concu par Will Eastcott et Dave Evans. Il est disponible en <a href="https://github.com/playcanvas/engine">open-source sur GitHub</a>, avec un <a href="http://developer.playcanvas.com/en/user-manual/designer/">éditeur</a> en ligne et une bonne <a href="http://developer.playcanvas.com/en/">documentation</a>. L'éditeur en ligne est gratuit pour les projets publics avec jusqu'à deux membres d'équipe, mais il y a aussi des <a href="https://playcanvas.com/plans">plans payants</a> si vous vous lancez dans un projet commercial privé avec plus de développeurs.</p>
 
-<p><img alt="PlayCanvas website." src="https://mdn.mozillademos.org/files/12251/playcanvas-cover.png" style="display: block; height: 242px; margin: 0px auto; width: 600px;"></p>
+<p><img alt="Site PlayCanvas" src="playcanvas-cover.png"></p>
 
 <h2 id="Jeux_et_Démos">Jeux et Démos</h2>
 
@@ -26,10 +26,10 @@ translation_of: Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Pla
  <li>Des visualisations comme the <a href="http://playcanv.as/b/FQbBsJTd">Star Lord</a> et <a href="http://playcanv.as/p/RqJJ9oU9">BMW i8</a> mettent également en valeur les possibilités du moteur.</li>
 </ul>
 
-<p><img alt="A list of PlayCanvas demos: Tanx, Swooop, Star Lord, BMW i8." src="https://mdn.mozillademos.org/files/12253/playcanvas-demos.png" style="display: block; height: 400px; margin: 0px auto; width: 600px;"></p>
+<p><img src="playcanvas-demos.png"></p>
 
 <div class="note">
-<p><strong>Note</strong>: Consultez la liste des <a href="https://playcanvas.com/explore">démos</a> pour trouver plus d'exemples.</p>
+<p><strong>Note :</strong> Consultez la liste des <a href="https://playcanvas.com/explore">démos</a> pour trouver plus d'exemples.</p>
 </div>
 
 <h2 id="Moteur_vs_Éditeur">Moteur vs Éditeur</h2>
@@ -38,26 +38,12 @@ translation_of: Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Pla
 
 <h2 id="Moteur_PlayCanvas">Moteur PlayCanvas</h2>
 
-<p>Conçu pour les navigateurs modernes, PlayCanvas est un moteur de jeu 3D complet intégrant le chargement de ressources, un système d'entité et de composants, une manipulation avancée des graphismes, un moteur de collision et de physique (conçu avec <a href="https://github.com/kripken/ammo.js/">ammo.js</a>), la gestion du son et des simplifications pour la gestion des entrées de nombreux dispositifs (y compris les manettes de jeu). C'est une liste assez impressionnante de sonctionnalités — observez-en quelques-unes en action en consultant la rubrique <a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/engine">Conception d'une démo de base avec PlayCanvas</a> pour plus de détails.</p>
-
-<p> </p>
+<p>Conçu pour les navigateurs modernes, PlayCanvas est un moteur de jeu 3D complet intégrant le chargement de ressources, un système d'entité et de composants, une manipulation avancée des graphismes, un moteur de collision et de physique (conçu avec <a href="https://github.com/kripken/ammo.js/">ammo.js</a>), la gestion du son et des simplifications pour la gestion des entrées de nombreux dispositifs (y compris les manettes de jeu). C'est une liste assez impressionnante de sonctionnalités — observez-en quelques-unes en action en consultant la rubrique <a href="/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/engine">Conception d'une démo de base avec PlayCanvas</a> pour plus de détails.</p>
 
 <h2 id="Éditeur_PlayCanvas">Éditeur PlayCanvas </h2>
 
-<p>Au lieu de tout coder à parir de zéro, vous pouvez également utiliser l'éditeur en ligne. Cela peut être un environnement de travail plus agréable si vous n'êtes pas très orienté codage. Voici la <a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/editor">construction d'une démo de base avec l'éditeur de PlayCanvas</a> pour plus de détails.</p>
+<p>Au lieu de tout coder à parir de zéro, vous pouvez également utiliser l'éditeur en ligne. Cela peut être un environnement de travail plus agréable si vous n'êtes pas très orienté codage. Voici la <a href="/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/editor">construction d'une démo de base avec l'éditeur de PlayCanvas</a> pour plus de détails.</p>
 
 <h2 id="Résumé">Résumé</h2>
 
-<p> </p>
-
 <p>Votre approche sera déterminante. Les designers préféreront utiliser l'éditeur en ligne alors que les programmeurs voudront avoir le contrôle total de l'environnement de codage et utiliseront probablement les fichiers source du moteur. Ce qui est intéressant est que vous êtes libre dans le choix des outils vous convenant le mieux.</p>
-
-<p> </p>
-
-<p style="margin: 0px;"> </p>
-
-<p> </p>
-
-<p style="margin: 0px;"> </p>
-
-<p> </p>
diff --git a/files/fr/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.html b/files/fr/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.html
index 0ba029383f..ea4b25a2c8 100644
--- a/files/fr/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.html
+++ b/files/fr/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.html
@@ -5,10 +5,10 @@ translation_of: Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Thr
 ---
 <div>{{GamesSidebar}}</div>
 
-<p class="summary"><span class="tlid-translation translation" lang="fr"><span title="">Une scène 3D  dans un jeu - même la plus simple - contient des éléments standard comme des formes situées dans un système de coordonnées, une caméra pour les voir réellement, des lumières et des matériaux pour amelioré son esthétique, des animations pour la rendre vivante, etc. <strong>Three</strong></span><span title=""><strong>.js</strong>, comme avec toute autre bibliothèque 3D, fournit des fonctions d'assistance intégrées pour vous aider à implémenter plus rapidement les fonctionnalités 3D courantes.</span> <span title="">Dans cet article, nous vous expliquerons les bases de l'utilisation de Three, notamment la configuration d'un environnement de développement, la structuration du code HTML nécessaire, les objets fondamentaux de Three et la manière de créer une démonstration de base.</span></span></p>
+<p>Une scène 3D  dans un jeu - même la plus simple - contient des éléments standard comme des formes situées dans un système de coordonnées, une caméra pour les voir réellement, des lumières et des matériaux pour amelioré son esthétique, des animations pour la rendre vivante, etc. <strong>Three</strong><strong>.js</strong>, comme avec toute autre bibliothèque 3D, fournit des fonctions d'assistance intégrées pour vous aider à implémenter plus rapidement les fonctionnalités 3D courantes. Dans cet article, nous vous expliquerons les bases de l'utilisation de Three, notamment la configuration d'un environnement de développement, la structuration du code HTML nécessaire, les objets fondamentaux de Three et la manière de créer une démonstration de base.</p>
 
 <div class="note">
-<p><strong>Note</strong>:<span class="tlid-translation translation" lang="fr"><span title=""> Nous avons choisi Three car il s'agit de l'une des bibliothèques WebGL les plus populaires, et il est facile de commencer.</span> <span title="">Nous n'essayons pas de dire que c'est mieux que toute autre bibliothèque WebGL disponible, et vous devriez vous sentir libre d'essayer une autre bibliothèque, comme CopperLicht, GLGE ou PlayCanvas</span></span></p>
+<p><strong>Note :</strong> Nous avons choisi Three car il s'agit de l'une des bibliothèques WebGL les plus populaires, et il est facile de commencer. Nous n'essayons pas de dire que c'est mieux que toute autre bibliothèque WebGL disponible, et vous devriez vous sentir libre d'essayer une autre bibliothèque, comme CopperLicht, GLGE ou PlayCanvas</p>
 </div>
 
 <h2 id="Configuration_de_l_environnement_de_Developpement">Configuration de l environnement de Developpement</h2>
@@ -26,7 +26,7 @@ translation_of: Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Thr
 
 <p>Voici la structure que nous allons utiliser</p>
 
-<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
 &lt;html&gt;
 &lt;head&gt;
 	&lt;meta charset="utf-8"&gt;
@@ -61,55 +61,55 @@ translation_of: Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Thr
 
 <p>Grace à cette approche, une solution de secour peut etre  utilisée , si une technologie n'est pas prise en charge par le navigatueur.</p>
 
-<pre class="brush: js notranslate">var renderer = new THREE.WebGLRenderer({antialias:true});
+<pre class="brush: js">var renderer = new THREE.WebGLRenderer({antialias:true});
 renderer.setSize(WIDTH, HEIGHT);
 renderer.setClearColor(0xDDDDDD, 1);
 document.body.appendChild(renderer.domElement);
 </pre>
 
-<p><span class="tlid-translation translation" lang="fr"><span title="">Nous créons un nouveau rendu WebGL, définissons sa taille pour qu'elle corresponde à tout l'espace disponible à l'écran et ajoutons la structure DOM à la page.</span> <span title="">Vous avez peut-être remarqué le paramètre d'antialias dans la première ligne - cela rend les bords des formes plus fluides.</span> <span title="">La méthode setClearColor () définit notre arrière-plan sur une couleur gris clair, au lieu de la couleur noire par défaut.</span><br>
+<p>Nous créons un nouveau rendu WebGL, définissons sa taille pour qu'elle corresponde à tout l'espace disponible à l'écran et ajoutons la structure DOM à la page. Vous avez peut-être remarqué le paramètre d'antialias dans la première ligne - cela rend les bords des formes plus fluides. La méthode setClearColor () définit notre arrière-plan sur une couleur gris clair, au lieu de la couleur noire par défaut.<br>
  <br>
- <span title="">Ajoutez ce code dans notre deuxième balise script du fichier index.html, juste en dessous du commentaire JavaScript.</span></span></p>
+ Ajoutez ce code dans notre deuxième balise script du fichier index.html, juste en dessous du commentaire JavaScript.</p>
 
 <h2 id="Scene">Scene</h2>
 
-<p><span class="tlid-translation translation" lang="fr"><span title="">Une scène est l'endroit où tout se passe.</span> <span title="">Lors de la création de nouveaux objets dans la démo, nous les ajoutons tous à l'intérieur de la scène pour devenir visibles à l'écran.</span> <span title="">Dans <strong>three.js</strong>, la scène est représentée par un objet Scene.</span> <span title="">Créons-le, en ajoutant la ligne suivante sous nos lignes précédentes:</span></span></p>
+<p>Une scène est l'endroit où tout se passe. Lors de la création de nouveaux objets dans la démo, nous les ajoutons tous à l'intérieur de la scène pour devenir visibles à l'écran. Dans <strong>three.js</strong>, la scène est représentée par un objet Scene. Créons-le, en ajoutant la ligne suivante sous nos lignes précédentes:</p>
 
-<pre class="brush: js notranslate">var scene = new THREE.Scene();
+<pre class="brush: js">var scene = new THREE.Scene();
 </pre>
 
 <p>plutard nous utiliserons la methode add() , pour ajouter des objets a cette scene.</p>
 
 <h2 id="Camera">Camera</h2>
 
-<p><span class="tlid-translation translation" lang="fr"><span title="">Nous avons la scène , mais nous devons encore ajouter une caméra pour voir notre travail - imaginez un film sans caméra.</span> <span title="">Les lignes suivantes mettent la caméra en place dans le système de coordonnées 3D et la pointent dans la direction de notre scène, afin que nous puissions enfin voir quelque chose:</span></span></p>
+<p>Nous avons la scène , mais nous devons encore ajouter une caméra pour voir notre travail - imaginez un film sans caméra. Les lignes suivantes mettent la caméra en place dans le système de coordonnées 3D et la pointent dans la direction de notre scène, afin que nous puissions enfin voir quelque chose:</p>
 
-<pre class="brush: js notranslate">var camera = new THREE.PerspectiveCamera(70, WIDTH/HEIGHT);
+<pre class="brush: js">var camera = new THREE.PerspectiveCamera(70, WIDTH/HEIGHT);
 camera.position.z = 50;
 scene.add(camera);
 </pre>
 
-<p><span class="tlid-translation translation" lang="fr"><span title="">Ajoutez les lignes ci-dessus à votre code, en dessous de celles précédemment ajoutées.</span><br>
+<p>Ajoutez les lignes ci-dessus à votre code, en dessous de celles précédemment ajoutées.<br>
  <br>
- <span title="">Il existe d'autres types de camera (Cube, Orthographique), mais la plus simple est Perspective.</span> <span title="">Pour l'initialiser, nous devons définir son champ de vision et son rapport d'aspect: le premier est utilisé pour définir la quantité de vue, et le second est important pour que les objets à l'écran aient les bonnes proportions lors du rendu, et ne semblent pas étirés</span> <span title="">.</span> <span title="">Expliquons les valeurs que nous définissons pour le code ci-dessus:</span></span></p>
+ Il existe d'autres types de camera (Cube, Orthographique), mais la plus simple est Perspective. Pour l'initialiser, nous devons définir son champ de vision et son rapport d'aspect: le premier est utilisé pour définir la quantité de vue, et le second est important pour que les objets à l'écran aient les bonnes proportions lors du rendu, et ne semblent pas étirés . Expliquons les valeurs que nous définissons pour le code ci-dessus:></p>
 
 <ul>
- <li><span class="tlid-translation translation" lang="fr"><span title="">La valeur que nous fixons pour le champ de vision, 70, est quelque chose que nous pouvons expérimenter: plus la valeur est élevée, plus la quantité de scène que la caméra affichera sera grande.</span> <span title="">Imaginez une vue de caméra normale, par opposition à un effet fish-eye, qui permet de voir beaucoup plus.</span> <span title="">La valeur par défaut est 50.</span></span></li>
- <li><span title="">Le rapport hauteur / largeur est défini sur la largeur et la hauteur actuelles de la fenêtre afin qu'il soit ajusté dynamiquement.</span> <span title="">Nous pourrions définir un rapport fixe - par exemple 16 ⁄ 9, qui est le rapport d'aspect d'un téléviseur à écran large.</span> <span title="">La valeur par défaut est 1.</span></li>
- <li><span class="tlid-translation translation" lang="fr"><span title="">La position z, avec une valeur de 50 unités, est la distance entre la caméra et le centre de la scène sur l'axe z.</span> <span title="">Ici, nous reculons la caméra, afin que les objets de la scène puissent être visualisés.</span> <span title="">50 se sent bien.</span> <span title="">Ce n'est ni trop près, ni trop loin, et la taille des objets leur permet de rester sur la scène, dans le champ de vision donné.</span> <span title="">Les valeurs x et y, si elles ne sont pas spécifiées, seront définies par défaut sur 0.</span></span></li>
+ <li>La valeur que nous fixons pour le champ de vision, 70, est quelque chose que nous pouvons expérimenter: plus la valeur est élevée, plus la quantité de scène que la caméra affichera sera grande. Imaginez une vue de caméra normale, par opposition à un effet fish-eye, qui permet de voir beaucoup plus. La valeur par défaut est 50.</li>
+ <li>Le rapport hauteur / largeur est défini sur la largeur et la hauteur actuelles de la fenêtre afin qu'il soit ajusté dynamiquement. Nous pourrions définir un rapport fixe - par exemple 16 ⁄ 9, qui est le rapport d'aspect d'un téléviseur à écran large. La valeur par défaut est 1.</li>
+ <li>La position z, avec une valeur de 50 unités, est la distance entre la caméra et le centre de la scène sur l'axe z. Ici, nous reculons la caméra, afin que les objets de la scène puissent être visualisés. 50 se sent bien. Ce n'est ni trop près, ni trop loin, et la taille des objets leur permet de rester sur la scène, dans le champ de vision donné. Les valeurs x et y, si elles ne sont pas spécifiées, seront définies par défaut sur 0.</li>
 </ul>
 
-<p><span class="tlid-translation translation" lang="fr"><span title="">Vous devez expérimenter ces valeurs et voir comment elles changent ce que vous voyez dans la scène.</span></span> .</p>
+<p>Vous devez expérimenter ces valeurs et voir comment elles changent ce que vous voyez dans la scène. .</p>
 
 <div class="note">
-<p><strong>Note</strong>: <span class="tlid-translation translation" lang="fr"><span title="">Les valeurs de distance (par exemple pour la position z de la caméra) sont sans unité et peuvent être tout ce que vous jugez approprié pour votre scène: millimètres, mètres, pieds ou miles.</span> </span></p>
+<p><strong>Note :</strong> Les valeurs de distance (par exemple pour la position z de la caméra) sont sans unité et peuvent être tout ce que vous jugez approprié pour votre scène: millimètres, mètres, pieds ou miles. </p>
 </div>
 
 <h2 id="Rendu_de_la_scene">Rendu de la scene</h2>
 
-<p><span class="tlid-translation translation" lang="fr"><span title="">Tout est prêt, mais on ne voit toujours rien.</span> <span title="">Bien que nous ayons configuré le moteur de rendu, nous devons toujours effetué le rendu.</span> <span title="">Notre fonction render () fera ce travail, avec un peu d'aide de requestAnimationFrame (), ce qui fait que la scène sera  restituée sur chaque image:</span></span></p>
+<p>Tout est prêt, mais on ne voit toujours rien. Bien que nous ayons configuré le moteur de rendu, nous devons toujours effetué le rendu. Notre fonction render () fera ce travail, avec un peu d'aide de requestAnimationFrame (), ce qui fait que la scène sera  restituée sur chaque image:</p>
 
-<pre class="brush: js notranslate">function render() {
+<pre class="brush: js">function render() {
 	requestAnimationFrame(render);
 	renderer.render(scene, camera);
 }
@@ -124,7 +124,7 @@ render();
 
 <p>Now our scene is properly rendering, we can start adding 3D shapes. To speed up development, Three.js provides a bunch of predefined primitives, which you can use to create shapes instantly in a single line of code. There's cubes, spheres, cylinders, and more complicated shapes available. Detail like drawing required vertices and faces, for a given shape, is handled by the Three framework, so we can focus on higher level coding. Let's start, by defining the geometry for a cube shape, adding the following just above the <code>render()</code> function:</p>
 
-<pre class="brush: js notranslate">var boxGeometry = new THREE.BoxGeometry(10, 10, 10);
+<pre class="brush: js">var boxGeometry = new THREE.BoxGeometry(10, 10, 10);
 </pre>
 
 <p>In this case, we define a simple cube that is 10 x 10 x 10 units. The geometry itself is not enough though, we also need a material that will be used for our shape.</p>
@@ -133,7 +133,7 @@ render();
 
 <p>A material is what covers an object, the colors, or textures on its surface. In our case, we will choose a simple blue color to paint our box. There are a number of predefined materials which can be used: Basic, Phong, Lambert. Let's play with the last two later, but for now, the Basic one should be enough:</p>
 
-<pre class="brush: js notranslate">var basicMaterial = new THREE.MeshBasicMaterial({color: 0x0095DD});
+<pre class="brush: js">var basicMaterial = new THREE.MeshBasicMaterial({color: 0x0095DD});
 </pre>
 
 <p>Add this line below the previously added.</p>
@@ -144,7 +144,7 @@ render();
 
 <p>To apply the material to a geometry, a mesh is used. This takes on a shape, and adds the specified material to every face:</p>
 
-<pre class="brush: js notranslate">var cube = new THREE.Mesh(boxGeometry, basicMaterial);
+<pre class="brush: js">var cube = new THREE.Mesh(boxGeometry, basicMaterial);
 </pre>
 
 <p>Again, add this line below the one you previously added.</p>
@@ -153,17 +153,17 @@ render();
 
 <p>We've now created a cube, using the geometry and material defined earlier. The last thing to do is to place the cube to our scene. Add this line below the previous one:</p>
 
-<pre class="brush: js notranslate">scene.add(cube);
+<pre class="brush: js">scene.add(cube);
 </pre>
 
 <p>If you save, and refresh your Web browser, our object will now look like a square, because it's facing the camera. The good thing about objects, is that we can move them on the scene, however we want. For example, rotating and scaling as we like. Let's apply a little rotation to the cube, so we can see more than one face.  Again, adding our code below the previous:</p>
 
-<pre class="brush: js notranslate">cube.rotation.set(0.4, 0.2, 0);
+<pre class="brush: js">cube.rotation.set(0.4, 0.2, 0);
 </pre>
 
 <p>Congratulations, you've created an object in a 3D environment! This might have proven easier than you first thought? Here's how it should look:</p>
 
-<p><img alt="Blue cube on a gray background rendered with Three.js." src="https://mdn.mozillademos.org/files/11849/cube.png" style="display: block; height: 400px; margin: 0px auto; width: 600px;"></p>
+<p><img src="cube.png"></p>
 
 <p>And here's the code we have created so far:</p>
 
@@ -175,12 +175,12 @@ render();
 
 <p>Now we will add more shapes to the scene, and explore other shapes, materials, lighting, and more. Let's move the cube to the left, to make space for some friends. Adding the following line just below the previous one:</p>
 
-<pre class="brush: js notranslate">cube.position.x = -25;
+<pre class="brush: js">cube.position.x = -25;
 </pre>
 
 <p>Now onto more shapes and materials. What might happen when you add a torus, wrapped in the Phong material? Try adding the following lines, just below the lines defining the cube.</p>
 
-<pre class="brush: js notranslate">var torusGeometry = new THREE.TorusGeometry(7, 1, 6, 12);
+<pre class="brush: js">var torusGeometry = new THREE.TorusGeometry(7, 1, 6, 12);
 var phongMaterial = new THREE.MeshPhongMaterial({color: 0xFF9500});
 var torus = new THREE.Mesh(torusGeometry, phongMaterial);
 scene.add(torus);
@@ -190,7 +190,7 @@ scene.add(torus);
 
 <p>We can choose more fun predefined shapes. Let's play some more. Add the following lines, below those defining the torus:</p>
 
-<pre class="brush: js notranslate">var dodecahedronGeometry = new THREE.DodecahedronGeometry(7);
+<pre class="brush: js">var dodecahedronGeometry = new THREE.DodecahedronGeometry(7);
 var lambertMaterial = new THREE.MeshLambertMaterial({color: 0xEAEFF2});
 var dodecahedron = new THREE.Mesh(dodecahedronGeometry, lambertMaterial);
 dodecahedron.position.x = 25;
@@ -205,14 +205,14 @@ scene.add(dodecahedron);
 
 <p>There are various types of light sources available in Three.js. The most basic is <code>PointLight</code>, which works like a flashlight, shining a spotlight in a defined direction. Add the following lines, below your shape definitions:</p>
 
-<pre class="brush: js notranslate">var light = new THREE.PointLight(0xFFFFFF);
+<pre class="brush: js">var light = new THREE.PointLight(0xFFFFFF);
 light.position.set(-10, 15, 50);
 scene.add(light);
 </pre>
 
 <p>We define a white point of light, set its position a little away from the center of the scene, so it can light up some parts of the shapes, finally adding it to the scene. Now everything works as it should, all three shapes are visible. You should check the documentation for other types of lights, like Ambient, Directional, Hemisphere, or Spot. Experiment placing them on our scene, to see how they affect it.</p>
 
-<p><img alt="Shapes: blue cube, dark yellow torus and dark gray dodecahedron on a gray background rendered with Three.js." src="https://mdn.mozillademos.org/files/11851/shapes.png" style="height: 400px; width: 600px;"></p>
+<p><img src="shapes.png"></p>
 
 <p>This looks a little boring though. In a game, something is usually happening. We might see animations and such. So let's try breathing a little life into these shapes, by animating them!</p>
 
@@ -224,7 +224,7 @@ scene.add(light);
 
 <p>Rotating is straighforward. You add a value to a given direction of rotation on each frame. Add this line of code, right after the <code>requestAnimationFrame()</code> invocation inside the <code>render</code> function:</p>
 
-<pre class="brush: js notranslate">cube.rotation.y += 0.01;
+<pre class="brush: js">cube.rotation.y += 0.01;
 </pre>
 
 <p>This rotates the cube on every frame, by a tiny bit, so the animation looks smooth.</p>
@@ -233,12 +233,12 @@ scene.add(light);
 
 <p>We can also scale an object. Applying a constant value, we would make it grow, or shrink just once. Let's make things more interesting. First, we implement a helper variable, called <code>t,</code> for counting elapsed time. Add it right before the <code>render()</code> function:</p>
 
-<pre class="brush: js notranslate">var t = 0;
+<pre class="brush: js">var t = 0;
 </pre>
 
 <p>Now let's increase the value by a given constant value, on each frame of the animation. Add the following lines, just below the <code>requestAnimationFrame()</code> invocation:</p>
 
-<pre class="brush: js notranslate">t += 0.01;
+<pre class="brush: js">t += 0.01;
 torus.scale.y = Math.abs(Math.sin(t));
 </pre>
 
@@ -250,7 +250,7 @@ torus.scale.y = Math.abs(Math.sin(t));
 
 <p>Aside from rotation, and scaling, we can additionally move objects around the scene. Add the following, again just below our <code>requestAnimationFrame()</code> invocation:</p>
 
-<pre class="brush: js notranslate">dodecahedron.position.y = -7*Math.sin(t*2);
+<pre class="brush: js">dodecahedron.position.y = -7*Math.sin(t*2);
 </pre>
 
 <p>This will move the dodecahedron up and down, by applying the <code>sin()</code> value to the y axis on each frame, and a little adjustment to make it look cooler. Try changing these values, to see how it affects the animations.</p>
@@ -261,6 +261,6 @@ torus.scale.y = Math.abs(Math.sin(t));
 
 <p>{{JSFiddleEmbed("https://jsfiddle.net/rybr720u/","","350")}}</p>
 
-<p>You can also <a href="https://github.com/end3r/MDN-Games-3D/blob/gh-pages/Three.js/shapes.html">see it on GitHub</a> and <a href="https://github.com/end3r/MDN-Games-3D/">fork the repository</a>, if you want to play with it locally. Now you understand the basics of Three.js, you can jump back to the parent page, <a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web">3D on the Web</a>.</p>
+<p>You can also <a href="https://github.com/end3r/MDN-Games-3D/blob/gh-pages/Three.js/shapes.html">see it on GitHub</a> and <a href="https://github.com/end3r/MDN-Games-3D/">fork the repository</a>, if you want to play with it locally. Now you understand the basics of Three.js, you can jump back to the parent page, <a href="/fr/docs/Games/Techniques/3D_on_the_web">3D on the Web</a>.</p>
 
-<p>You could also try learning raw WebGL, to gain a better understanding of what's going on underneath. See our <a href="/en-US/docs/Web/API/WebGL_API">WebGL documentation</a>.</p>
+<p>You could also try learning raw WebGL, to gain a better understanding of what's going on underneath. See our <a href="/fr/docs/Web/API/WebGL_API">WebGL documentation</a>.</p>
diff --git a/files/fr/games/techniques/3d_on_the_web/index.html b/files/fr/games/techniques/3d_on_the_web/index.html
index b4e0aa353d..47d25bbffd 100644
--- a/files/fr/games/techniques/3d_on_the_web/index.html
+++ b/files/fr/games/techniques/3d_on_the_web/index.html
@@ -14,72 +14,72 @@ translation_of: Games/Techniques/3D_on_the_web
 
 <p>  {{IncludeSubnav("/fr/docs/Jeux")}}</p>
 
-<p class="summary"><span id="result_box" lang="fr"><span>Pour des expériences de jeu riches sur le Web, l'arme de choix est WebGL, qui est fourni sur HTML {{htmlelement ("canvas")}}.</span> <span>WebGL est essentiellement un OpenGL ES 2.0 pour le Web - c'est une API JavaScript fournissant des outils pour créer des animations interactives riches et bien sûr aussi des jeux.</span> <span>Vous pouvez générer et rendre des graphiques 3D dynamiques avec du JavaScript accéléré.</span></span></p>
+<p>Pour des expériences de jeu riches sur le Web, l'arme de choix est WebGL, qui est fourni sur HTML {{htmlelement ("canvas")}}. WebGL est essentiellement un OpenGL ES 2.0 pour le Web - c'est une API JavaScript fournissant des outils pour créer des animations interactives riches et bien sûr aussi des jeux. Vous pouvez générer et rendre des graphiques 3D dynamiques avec du JavaScript accéléré.</p>
 
-<h2 id="Documentation_et_support_du_navigateur"><span class="short_text" id="result_box" lang="fr"><span>Documentation et support du navigateur</span></span></h2>
+<h2 id="Documentation_et_support_du_navigateur">Documentation et support du navigateur</h2>
 
-<p>La documentation et les spécifications du projet <a href="https://developer.mozilla.org/fr/docs/Web/API/WebGL_API">WebGL</a> sont gérées par le <a href="https://www.khronos.org/">Groupe Khronos</a>, <span id="result_box" lang="fr"><span>pas le W3C comme pour la plupart des API Web.</span> <span>Le support sur les navigateurs modernes est très bon, même sur mobile, donc vous n'avez pas trop</span></span><span lang="fr"><span> à vous en soucier.</span> <span>Les principaux navigateurs prennent en charge WebGL et tout ce dont vous avez besoin est de vous concentrer sur l'optimisation des performances sur les appareils que vous utilisez.</span></span></p>
+<p>La documentation et les spécifications du projet <a href="/fr/docs/Web/API/WebGL_API">WebGL</a> sont gérées par le <a href="https://www.khronos.org/">Groupe Khronos</a>, pas le W3C comme pour la plupart des API Web. Le support sur les navigateurs modernes est très bon, même sur mobile, donc vous n'avez pas trop à vous en soucier. Les principaux navigateurs prennent en charge WebGL et tout ce dont vous avez besoin est de vous concentrer sur l'optimisation des performances sur les appareils que vous utilisez.</p>
 
-<p><span id="result_box" lang="fr"><span>Il y a un effort continu pour rendre libre WebGL 2.0 (basé sur OpenGL ES 3.0) dans un proche avenir, ce qui apporterait de nombreuses améliorations et aiderait les développeurs à construire des jeux pour le Web moderne en utilisant le matériel puissant actuel.</span></span></p>
+<p>Il y a un effort continu pour rendre libre WebGL 2.0 (basé sur OpenGL ES 3.0) dans un proche avenir, ce qui apporterait de nombreuses améliorations et aiderait les développeurs à construire des jeux pour le Web moderne en utilisant le matériel puissant actuel.</p>
 
 <h2 id="Explication_des_bases_de_la_théorie_3D">Explication des bases de la théorie 3D</h2>
 
-<p><span id="result_box" lang="fr"><span>Les bases de la théorie 3D s'articulent autour des formes représentées dans un espace 3D, avec un système de coordonnées utilisé pour calculer leurs positions.</span> <span>Consultez <a href="https://developer.mozilla.org/fr/docs/Games/Techniques/3D_on_the_web/Basic_theory">notre article de base sur la théorie 3D</a> pour toutes les informations dont vous avez besoin.</span></span></p>
+<p>Les bases de la théorie 3D s'articulent autour des formes représentées dans un espace 3D, avec un système de coordonnées utilisé pour calculer leurs positions. Consultez <a href="/fr/docs/Games/Techniques/3D_on_the_web/Basic_theory">notre article de base sur la théorie 3D</a> pour toutes les informations dont vous avez besoin.</p>
 
 <h2 id="Concepts_avancés">Concepts avancés</h2>
 
-<p><span id="result_box" lang="fr"><span>Vous pouvez faire beaucoup plus avec WebGL.</span> <span>Il y a des concepts avancés dans lesquels vous devriez plonger et en apprendre davantage </span></span> — <span lang="fr"><span> les "shaders", la détection de collision ou le dernier sujet brûlant </span></span> — <span lang="fr"><span>la réalité virtuelle sur le Web.</span></span></p>
+<p>Vous pouvez faire beaucoup plus avec WebGL. Il y a des concepts avancés dans lesquels vous devriez plonger et en apprendre davantage  —  les "shaders", la détection de collision ou le dernier sujet brûlant  — la réalité virtuelle sur le Web.</p>
 
 <h3 id="Shaders">Shaders</h3>
 
-<p><span id="result_box" lang="fr"><span>Il convient de distinguer les shaders, qui sont un cas particulier.</span> <span>Les Shaders utilisent GLSL, un langage d'ombrage OpenGL spécial avec une syntaxe similaire à C, qui est exécuté directement par le pipeline graphique.</span> <span>Ils peuvent être divisés en "Vertex Shaders" et "Fragment Shaders" (ou "Pixel Shaders") </span></span> — <span lang="fr"><span> le premier transforme les positions des formes en véritables coordonnées de dessin 3D, tandis que le second calcule les couleurs de rendu et d'autres attributs.</span> <span>Vous devriez absolument lire l'article <a href="https://developer.mozilla.org/fr/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders">GLSL Shaders</a> pour en apprendre plus à leur sujet.</span></span></p>
+<p>Il convient de distinguer les shaders, qui sont un cas particulier. Les Shaders utilisent GLSL, un langage d'ombrage OpenGL spécial avec une syntaxe similaire à C, qui est exécuté directement par le pipeline graphique. Ils peuvent être divisés en "Vertex Shaders" et "Fragment Shaders" (ou "Pixel Shaders")  —  le premier transforme les positions des formes en véritables coordonnées de dessin 3D, tandis que le second calcule les couleurs de rendu et d'autres attributs. Vous devriez absolument lire l'article <a href="/fr/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders">GLSL Shaders</a> pour en apprendre plus à leur sujet.</p>
 
 <h3 id="Détection_de_collision">Détection de collision</h3>
 
-<p><span id="result_box" lang="fr"><span>Il est difficile d'imaginer un jeu sans la détection de collision </span></span> — <span lang="fr"><span> nous devons toujours mettre au point quand quelque chose frappe quelque chose d'autre.</span> <span>Nous avons des informations disponibles pour votre apprentissage de :</span></span></p>
+<p>Il est difficile d'imaginer un jeu sans la détection de collision  —  nous devons toujours mettre au point quand quelque chose frappe quelque chose d'autre. Nous avons des informations disponibles pour votre apprentissage de :</p>
 
 <ul>
- <li><a href="https://developer.mozilla.org/fr/docs/Games/Techniques/2D_collision_detection">détection de collision 2D</a></li>
- <li><a href="https://developer.mozilla.org/fr/docs/Games/Techniques/3D_collision_detection">détection de collision 3D</a></li>
+ <li><a href="/fr/docs/Games/Techniques/2D_collision_detection">détection de collision 2D</a></li>
+ <li><a href="/fr/docs/Games/Techniques/3D_collision_detection">détection de collision 3D</a></li>
 </ul>
 
 <h3 id="Réalité_virtuelle_sur_le_web">Réalité virtuelle sur le web</h3>
 
-<p><span id="result_box" lang="fr"><span>Le concept de réalité virtuelle n'est pas nouveau, mais il est en train de conquérir le web grâce à des avancées matérielles telles que l'</span></span> <a href="https://www.oculus.com/en-us/rift/">Oculus Rift</a> <span lang="fr"><span> et l'<a href="https://developer.mozilla.org/fr/docs/Web/API/WebVR_API">API WebVR</a> (actuellement expérimental) pour capturer les informations du matériel de réalité virtuelle et les rendre disponibles pour les applications JavaScript.</span> <span>Pour en savoir plus, lisez <a href="https://developer.mozilla.org/fr/docs/Games/Techniques/3D_on_the_web/WebVR">WebVR - Réalité virtuelle pour le Web</a>.</span></span></p>
+<p>Le concept de réalité virtuelle n'est pas nouveau, mais il est en train de conquérir le web grâce à des avancées matérielles telles que l' <a href="https://www.oculus.com/en-us/rift/">Oculus Rift</a>  et l'<a href="/fr/docs/Web/API/WebVR_API">API WebVR</a> (actuellement expérimental) pour capturer les informations du matériel de réalité virtuelle et les rendre disponibles pour les applications JavaScript. Pour en savoir plus, lisez <a href="/fr/docs/Games/Techniques/3D_on_the_web/WebVR">WebVR - Réalité virtuelle pour le Web</a>.</p>
 
-<p><span id="result_box" lang="fr"><span>Il y a aussi la <a href="https://developer.mozilla.org/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame">construction d'une démo de base avec l'article A-Frame</a> qui montre comment il est facile de construire des environnements 3D pour la réalité virtuelle en utilisant le framework </span></span> <a href="http://aframe.io/">A-Frame</a> <span lang="fr"><span>.</span></span></p>
+<p>Il y a aussi la <a href="/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame">construction d'une démo de base avec l'article A-Frame</a> qui montre comment il est facile de construire des environnements 3D pour la réalité virtuelle en utilisant le framework  <a href="http://aframe.io/">A-Frame</a> .</p>
 
-<h2 id="Lessor_des_bibliothèques_et_des_cadres"><span class="short_text" id="result_box" lang="fr"><span>L'essor des bibliothèques et des cadres</span></span></h2>
+<h2 id="Lessor_des_bibliothèques_et_des_cadres">L'essor des bibliothèques et des cadres</h2>
 
-<p><span id="result_box" lang="fr"><span>Le codage de WebGL brut est assez complexe, mais vous aurez envie de le maîtriser à long terme, car vos projets seront plus avancés (consultez notre <a href="https://developer.mozilla.org/fr/docs/Web/API/WebGL_API">documentation WebGL</a> pour commencer). Pour les projets de monde réel, vous utiliserez probablement aussi</span> <span>un </span></span> "framework" <span lang="fr"><span> pour accélérer le développement et vous aider à gérer le projet.</span> <span>L'utilisation d'un "framework" pour les jeux 3D permet également d'optimiser les performances, car les outils que vous utilisez vous permettent de vous concentrer sur la construction du jeu.</span></span></p>
+<p>Le codage de WebGL brut est assez complexe, mais vous aurez envie de le maîtriser à long terme, car vos projets seront plus avancés (consultez notre <a href="/fr/docs/Web/API/WebGL_API">documentation WebGL</a> pour commencer). Pour les projets de monde réel, vous utiliserez probablement aussi un  "framework"  pour accélérer le développement et vous aider à gérer le projet. L'utilisation d'un "framework" pour les jeux 3D permet également d'optimiser les performances, car les outils que vous utilisez vous permettent de vous concentrer sur la construction du jeu.</p>
 
-<p><span id="result_box" lang="fr"><span>La bibliothèque 3D JavaScript la plus populaire est </span></span> <a href="http://threejs.org/">Three.js</a><span lang="fr"><span>, un outil polyvalent qui rend les techniques 3D plus simples à implémenter.</span> <span>Il existe d'autres bibliothèques et cadres de développement de jeux populaires qui valent la peine d'être regardés ;</span> </span> <a href="https://aframe.io">A-Frame</a>, <a href="https://playcanvas.com/">PlayCanvas</a> <span lang="fr"><span> et </span></span> <a href="http://www.babylonjs.com/">Babylon.js</a> <span lang="fr"><span> sont parmi les plus reconnaissables avec une documentation riche, des éditeurs en ligne et des communautés actives.</span></span></p>
+<p>La bibliothèque 3D JavaScript la plus populaire est  <a href="http://threejs.org/">Three.js</a>, un outil polyvalent qui rend les techniques 3D plus simples à implémenter. Il existe d'autres bibliothèques et cadres de développement de jeux populaires qui valent la peine d'être regardés ;  <a href="https://aframe.io">A-Frame</a>, <a href="https://playcanvas.com/">PlayCanvas</a>  et  <a href="http://www.babylonjs.com/">Babylon.js</a>  sont parmi les plus reconnaissables avec une documentation riche, des éditeurs en ligne et des communautés actives.</p>
 
-<h3 id="Construction_dune_démo_de_base_avec_A-Frame"><span class="short_text" id="result_box" lang="fr"><span>Construction d'une démo de base avec A-Frame</span></span></h3>
+<h3 id="Construction_dune_démo_de_base_avec_A-Frame">Construction d'une démo de base avec A-Frame</h3>
 
-<p>A-Frame <span id="result_box" lang="fr"><span>est un "framework" web pour construire des expériences 3D et de la réalité virtuelle.</span> <span>Sous le capot, il s'agit d'un "framework" </span></span> three.js <span lang="fr"><span> avec un modèle déclaratif entité-composant, ce qui signifie que nous pouvons construire des scènes avec seulement du HTML.</span> <span>Voir la page</span></span> <a href="https://developer.mozilla.org/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame">Construction d'une démo de base avec</a><a href="https://developer.mozilla.org/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame"> A-Frame</a> <span id="result_box" lang="fr"><span>pour le processus étape par étape de création de la démo</span></span> .</p>
+<p>A-Frame est un "framework" web pour construire des expériences 3D et de la réalité virtuelle. Sous le capot, il s'agit d'un "framework"  three.js  avec un modèle déclaratif entité-composant, ce qui signifie que nous pouvons construire des scènes avec seulement du HTML. Voir la page <a href="/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame">Construction d'une démo de base avec</a><a href="/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame"> A-Frame</a> pour le processus étape par étape de création de la démo .</p>
 
 <h3 id="Construction_dune_démo_de_base_avec_Babylon.js">Construction d'une démo de base avec Babylon.js</h3>
 
-<p><span class="seosummary">Babylon.js </span> <span id="result_box" lang="fr"><span>est l'un des moteurs de jeux 3D les plus populaires utilisés par les développeurs.</span> <span>Comme avec n'importe quelle autre bibliothèque 3D, il fournit des fonctions intégrées pour vous aider à implémenter les fonctionnalités 3D courantes plus rapidement.</span> <span>Voir la page</span></span> <span class="seosummary"> <a href="https://developer.mozilla.org/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js">Construction d'une démo de base avec Babylon.js</a> sur les bases et l'utilisation de Babylon.js, </span> <span id="result_box" lang="fr"><span>y compris la mise en place d'un environnement de développement, la structuration du code HTML nécessaire et l'écriture du code JavaScript</span></span><span class="seosummary">.</span></p>
+<p>Babylon.js  est l'un des moteurs de jeux 3D les plus populaires utilisés par les développeurs. Comme avec n'importe quelle autre bibliothèque 3D, il fournit des fonctions intégrées pour vous aider à implémenter les fonctionnalités 3D courantes plus rapidement. Voir la page <a href="/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js">Construction d'une démo de base avec Babylon.js</a> sur les bases et l'utilisation de Babylon.js, y compris la mise en place d'un environnement de développement, la structuration du code HTML nécessaire et l'écriture du code JavaScript.</p>
 
 <h3 id="Construction_dune_démo_de_base_avec_PlayCanvas">Construction d'une démo de base avec PlayCanvas</h3>
 
-<p><span id="result_box" lang="fr"><span>PlayCanvas est un moteur de jeu 3D WebGL populaire ouvert sur GitHub, avec un éditeur disponible en ligne et une bonne documentation.</span> <span>Voir la page</span></span> <a href="https://developer.mozilla.org/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas">Construction d'une démo de base avec PlayCanvas</a> pour des détails de haut niveau, <span id="result_box" lang="fr"><span>et d'autres articles montrant comment créer des démos à l'aide de la bibliothèque PlayCanvas et de l'éditeur en ligne.</span></span></p>
+<p>PlayCanvas est un moteur de jeu 3D WebGL populaire ouvert sur GitHub, avec un éditeur disponible en ligne et une bonne documentation. Voir la page <a href="/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas">Construction d'une démo de base avec PlayCanvas</a> pour des détails de haut niveau, et d'autres articles montrant comment créer des démos à l'aide de la bibliothèque PlayCanvas et de l'éditeur en ligne.</p>
 
 <h3 id="Construction_dune_démo_de_base_avec_Three.js">Construction d'une démo de base avec Three.js</h3>
 
-<p>Three.js, <span id="result_box" lang="fr"><span>comme toute autre bibliothèque, vous donne un énorme avantage : au lieu d'écrire des centaines de lignes de code WebGL pour construire quelque chose d'intéressant, vous pouvez utiliser des fonctions intégrées pour le faire beaucoup plus facilement et plus rapidement.</span> <span>Voir la page</span></span> <a href="https://developer.mozilla.org/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js">Construction d'une démo de base avec Three.js</a>  <span id="result_box" lang="fr"><span>pour le processus étape par étape de création de la démo</span></span> .</p>
+<p>Three.js, comme toute autre bibliothèque, vous donne un énorme avantage : au lieu d'écrire des centaines de lignes de code WebGL pour construire quelque chose d'intéressant, vous pouvez utiliser des fonctions intégrées pour le faire beaucoup plus facilement et plus rapidement. Voir la page <a href="/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js">Construction d'une démo de base avec Three.js</a>  pour le processus étape par étape de création de la démo .</p>
 
 <h3 id="Autres_outils">Autres outils</h3>
 
-<p><span id="result_box" lang="fr"><span>Les deux </span></span> <a href="http://unity3d.com/">Unity</a> <span lang="fr"><span> et </span></span> <a href="https://www.unrealengine.com/">Unreal</a> <span lang="fr"><span> peuvent exporter votre jeu vers </span></span> <a href="https://developer.mozilla.org/fr/docs/Web/API/WebGL_API">WebGL</a> <span lang="fr"><span> avec </span></span> <a href="https://developer.mozilla.org/en-US/docs/Games/Tools/asm.js">asm.js</a> <span lang="fr"><span>, de sorte que vous êtes libre d'utiliser leurs outils et techniques pour construire des jeux qui seront exportés vers le web.</span></span></p>
+<p>Les deux  <a href="http://unity3d.com/">Unity</a>  et  <a href="https://www.unrealengine.com/">Unreal</a>  peuvent exporter votre jeu vers  <a href="/fr/docs/Web/API/WebGL_API">WebGL</a>  avec  <a href="/fr/docs/Games/Tools/asm.js">asm.js</a> , de sorte que vous êtes libre d'utiliser leurs outils et techniques pour construire des jeux qui seront exportés vers le web.</p>
 
-<p><img alt="" src="http://end3r.github.io/MDN-Games-3D/A-Frame/img/shapes.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+<p><img alt="" src="shapes.png"></p>
 
 <h2 id="Où_aller_ensuite">Où aller ensuite</h2>
 
-<p><span id="result_box" lang="fr"><span>Avec cet article, nous avons juste effleuré la surface de ce qu'il est possible de faire avec les technologies actuellement disponibles.</span> <span>Vous pouvez créer des jeux 3D immersifs, beaux et rapides à l'aide de WebGL, les bibliothèques et les frameworks s'appuient dessus.</span></span></p>
+<p>Avec cet article, nous avons juste effleuré la surface de ce qu'il est possible de faire avec les technologies actuellement disponibles. Vous pouvez créer des jeux 3D immersifs, beaux et rapides à l'aide de WebGL, les bibliothèques et les frameworks s'appuient dessus.</p>
 
 <h3 id="Code_source">Code source</h3>
 
@@ -88,9 +88,9 @@ translation_of: Games/Techniques/3D_on_the_web
 <h3 id="API">API</h3>
 
 <ul>
- <li><a href="https://developer.mozilla.org/fr/docs/Web/HTML/Canvas">Canvas API</a></li>
- <li><a href="https://developer.mozilla.org/fr/docs/Web/API/WebGL_API">WebGL API</a></li>
- <li><a href="https://developer.mozilla.org/fr/docs/Web/API/WebVR_API">WebVR API</a></li>
+ <li><a href="/fr/docs/Web/HTML/Canvas">Canvas API</a></li>
+ <li><a href="/fr/docs/Web/API/WebGL_API">WebGL API</a></li>
+ <li><a href="/fr/docs/Web/API/WebVR_API">WebVR API</a></li>
 </ul>
 
 <h3 id="Frameworks">Frameworks</h3>
@@ -106,8 +106,8 @@ translation_of: Games/Techniques/3D_on_the_web
 <h3 id="Tutorials">Tutorials</h3>
 
 <ul>
- <li><a href="https://developer.mozilla.org/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js">Construction d'une démo de base avec Three.js</a></li>
- <li><a href="https://developer.mozilla.org/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas">Construction d'une démo de base avec PlayCanvas</a></li>
- <li><span class="seosummary"><a href="https://developer.mozilla.org/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js">Construction d'une démo de base avec Babylon.js</a></span></li>
- <li><a href="https://developer.mozilla.org/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame">Construction d'une démo de base avec</a><a href="https://developer.mozilla.org/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame"> A-Frame</a></li>
+ <li><a href="/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js">Construction d'une démo de base avec Three.js</a></li>
+ <li><a href="/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas">Construction d'une démo de base avec PlayCanvas</a></li>
+ <li><a href="/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js">Construction d'une démo de base avec Babylon.js</a></li>
+ <li><a href="/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame">Construction d'une démo de base avec</a><a href="/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame"> A-Frame</a></li>
 </ul>
diff --git a/files/fr/games/techniques/audio_for_web_games/index.html b/files/fr/games/techniques/audio_for_web_games/index.html
index 74fda3abbe..a3bf43e413 100644
--- a/files/fr/games/techniques/audio_for_web_games/index.html
+++ b/files/fr/games/techniques/audio_for_web_games/index.html
@@ -11,9 +11,7 @@ translation_of: Games/Techniques/Audio_for_Web_Games
 ---
 <div>{{GamesSidebar}}</div><p>  {{IncludeSubnav("/fr/docs/Jeux")}}</p>
 
-<div class="summary">
 <p>L'audio représente une chose essentielle dans n'importe quel jeu vidéo; il apporte de l'information et contribue à l'atmosphère du jeu. La prise en charge de l'audio a évolué de manière rapide mais il reste encore beaucoup de différences de prise en charge entre les navigateurs. Nous avons souvent besoin de décider quelles parties de notre contenu audio est intéressant et laquelle ne l'est pas, et mettre en place une stratégie en conséquence. Cet article fournit un guide détaillé sur l'implémentation de l'audio dans les jeux HTML5, détaillant quels choix technologiques fonctionneront sur le plus grand nombre de navigateurs.</p>
-</div>
 
 <h2 id="Avertissement_sur_l'audio_sur_mobile">Avertissement sur l'audio sur mobile</h2>
 
@@ -21,39 +19,39 @@ translation_of: Games/Techniques/Audio_for_Web_Games
 
 <h3 id="Lecture_automatique">Lecture automatique</h3>
 
-<p>Beaucoup de navigateurs mobiles vont simplement ignorer n'importe quelle requête de lancement automatique de musique faite par votre jeu; à la place, l'utilisateur va être obligé de lancer lui même la lecture via une action quelconque. Cela signifie que vous allez devoir prendre en compte cette diférence lors de l'implementation de votre lecture automatique. Ce problème est généralement <span id="result_box" lang="fr"><span>atténué en chargeant l'audio à l'avance et en l'amorçant sur un événement initié par l'utilisateur.</span></span></p>
+<p>Beaucoup de navigateurs mobiles vont simplement ignorer n'importe quelle requête de lancement automatique de musique faite par votre jeu; à la place, l'utilisateur va être obligé de lancer lui même la lecture via une action quelconque. Cela signifie que vous allez devoir prendre en compte cette diférence lors de l'implementation de votre lecture automatique. Ce problème est généralement atténué en chargeant l'audio à l'avance et en l'amorçant sur un événement initié par l'utilisateur.</p>
 
-<p><span id="result_box" lang="fr"><span>Pour une lecture automatique audio plus passive, par exemple une musique de fond qui commence dès qu'un jeu se charge, une astuce consiste à détecter l'événement * any * initié par l'utilisateur et à démarrer la lecture.</span> <span>Pour d'autres sons plus actifs qui seront utilisés pendant le jeu, nous pouvons envisager de les amorcer dès que l'on appuie sur un bouton de démarrage.</span></span></p>
+<p>Pour une lecture automatique audio plus passive, par exemple une musique de fond qui commence dès qu'un jeu se charge, une astuce consiste à détecter l'événement * any * initié par l'utilisateur et à démarrer la lecture. Pour d'autres sons plus actifs qui seront utilisés pendant le jeu, nous pouvons envisager de les amorcer dès que l'on appuie sur un bouton de démarrage.</p>
 
-<p><span id="result_box" lang="fr"><span>Pour faire primer l'audio de cette façon, nous voulons en jouer une partie ;</span> <span>pour cette raison, il est utile d'inclure un moment de silence à la fin de votre échantillon audio.</span> <span>Ce silence signifiera que nous pouvons maintenant utiliser JavaScript pour lire ce fichier à des points arbitraires.</span></span></p>
+<p>Pour faire primer l'audio de cette façon, nous voulons en jouer une partie ; pour cette raison, il est utile d'inclure un moment de silence à la fin de votre échantillon audio. Ce silence signifiera que nous pouvons maintenant utiliser JavaScript pour lire ce fichier à des points arbitraires.</p>
 
 <div class="note">
-<p><strong>Note </strong>: <span id="result_box" lang="fr"><span>Jouer une partie de votre fichier au volume zéro pourrait également fonctionner si le navigateur vous permet de changer le volume (voir ci-dessous).</span> <span>Notez également que la lecture et la mise en pause immédiate de votre audio ne garantissent pas qu'un petit morceau d'audio ne sera pas lu.</span></span></p>
+<p><strong>Note :</strong> Jouer une partie de votre fichier au volume zéro pourrait également fonctionner si le navigateur vous permet de changer le volume (voir ci-dessous). Notez également que la lecture et la mise en pause immédiate de votre audio ne garantissent pas qu'un petit morceau d'audio ne sera pas lu.</p>
 </div>
 
 <div class="note">
-<p><strong>Note </strong>: <span id="result_box" lang="fr"><span>L'ajout d'une application Web sur votre écran d'accueil mobile peut changer ses capacités.</span> <span>Dans le cas d'une lecture automatique sur iOS, cela semble être le cas actuellement.</span> <span>Si possible, vous devriez essayer votre code sur plusieurs appareils et platesformes pour voir comment cela fonctionne.</span></span></p>
+<p><strong>Note :</strong> L'ajout d'une application Web sur votre écran d'accueil mobile peut changer ses capacités. Dans le cas d'une lecture automatique sur iOS, cela semble être le cas actuellement. Si possible, vous devriez essayer votre code sur plusieurs appareils et platesformes pour voir comment cela fonctionne.</p>
 </div>
 
 <h3 id="Volume">Volume</h3>
 
-<p><span id="result_box" lang="fr"><span>Le contrôle du volume programmé peut être désactivé dans les navigateurs mobiles.</span> <span>La raison souvent donnée est que l'utilisateur doit maîtriser le volume au niveau du système d'exploitation et cela ne doit pas être ignoré.</span></span></p>
+<p>Le contrôle du volume programmé peut être désactivé dans les navigateurs mobiles. La raison souvent donnée est que l'utilisateur doit maîtriser le volume au niveau du système d'exploitation et cela ne doit pas être ignoré.</p>
 
-<h3 id="Mise_en_mémoire_tampon_et_préchargement"><span class="short_text" id="result_box" lang="fr"><span>Mise en mémoire tampon et préchargement</span></span></h3>
+<h3 id="Mise_en_mémoire_tampon_et_préchargement">Mise en mémoire tampon et préchargement</h3>
 
-<p><span id="result_box" lang="fr"><span>Probablement comme une tentative d'atténuation de l'utilisation des données du réseau mobile, nous trouvons souvent que la mise en mémoire tampon est désactivée avant que la lecture n'ait été lancée.</span> <span>La mise en mémoire tampon est le processus par lequel le navigateur télécharge le média à l'avance, ce que nous devons souvent faire pour assurer une lecture fluide.</span></span></p>
+<p>Probablement comme une tentative d'atténuation de l'utilisation des données du réseau mobile, nous trouvons souvent que la mise en mémoire tampon est désactivée avant que la lecture n'ait été lancée. La mise en mémoire tampon est le processus par lequel le navigateur télécharge le média à l'avance, ce que nous devons souvent faire pour assurer une lecture fluide.</p>
 
 <div class="note">
-<p><strong>Note </strong>: <span id="result_box" lang="fr"><span>À bien des égards, le concept de mise en mémoire tampon est obsolète.</span> <span>Tant que les demandes de plage d'octets sont acceptées (ce qui est le comportement par défaut), nous devrions pouvoir sauter à un point spécifique de l'audio sans avoir à télécharger le contenu précédent.</span> <span>Cependant, le préchargement est toujours utile;</span> <span>sans cela, il faudrait toujours avoir une certaine communication client-serveur avant de commencer à jouer.</span></span></p>
+<p><strong>Note :</strong> À bien des égards, le concept de mise en mémoire tampon est obsolète. Tant que les demandes de plage d'octets sont acceptées (ce qui est le comportement par défaut), nous devrions pouvoir sauter à un point spécifique de l'audio sans avoir à télécharger le contenu précédent. Cependant, le préchargement est toujours utile; sans cela, il faudrait toujours avoir une certaine communication client-serveur avant de commencer à jouer.</p>
 </div>
 
-<h3 id="Lecture_audio_simultanée"><span class="short_text" id="result_box" lang="fr"><span>Lecture audio simultanée</span></span></h3>
+<h3 id="Lecture_audio_simultanée">Lecture audio simultanée</h3>
 
-<p><span id="result_box" lang="fr"><span>Une exigence de nombreux jeux est de jouer plus d'un morceau audio en même temps ;</span> <span>par exemple, il peut y avoir de la musique de fond et des effets sonores pour diverses actions se produisant dans le jeu.</span> <span>Bien que la situation évolue rapidement avec l'adoption de l'</span></span> <a href="https://developer.mozilla.org/fr/docs/Web/API/Web_Audio_API">API Web Audio</a> <span lang="fr"><span>, la méthode actuellement la plus largement supportée, utilisant l'élément vanilla {{htmlelement ("audio")}}, produit des résultats inégaux sur les appareils mobiles.</span></span></p>
+<p>Une exigence de nombreux jeux est de jouer plus d'un morceau audio en même temps ; par exemple, il peut y avoir de la musique de fond et des effets sonores pour diverses actions se produisant dans le jeu. Bien que la situation évolue rapidement avec l'adoption de l' <a href="/fr/docs/Web/API/Web_Audio_API">API Web Audio</a> , la méthode actuellement la plus largement supportée, utilisant l'élément vanilla {{htmlelement ("audio")}}, produit des résultats inégaux sur les appareils mobiles.</p>
 
-<h3 id="Test_et_support"><span class="short_text" id="result_box" lang="fr"><span>Test et support</span></span></h3>
+<h3 id="Test_et_support">Test et support</h3>
 
-<p><span id="result_box" lang="fr"><span>Voici un tableau qui montre quelles plateformes mobiles prennent en charge les fonctionnalités mentionnées ci-dessus.</span></span></p>
+<p>Voici un tableau qui montre quelles plateformes mobiles prennent en charge les fonctionnalités mentionnées ci-dessus.</p>
 
 <table class="standard-table">
  <caption>Mobile support for web audio features</caption>
@@ -128,236 +126,236 @@ translation_of: Games/Techniques/Audio_for_Web_Games
 </table>
 
 <div class="note">
-<p><strong>* Note </strong>: <span id="result_box" lang="fr"><span>Safari 7 a des problèmes à jouer si vous essayez de démarrer tous les morceaux audio simultanément.</span> <span>Si vous échelonnez la lecture, vous aurez peut-être un certain succès.</span></span></p>
+<p><strong>Note :</strong> Safari 7 a des problèmes à jouer si vous essayez de démarrer tous les morceaux audio simultanément. Si vous échelonnez la lecture, vous aurez peut-être un certain succès.</p>
 </div>
 
 <div class="note">
-<p><strong>Note </strong>: <span id="result_box" lang="fr"><span>La lecture audio simultanée est testée à l'aide de notre <a href="http://jsfiddle.net/dmkyaq0r/">exemple de test audio simultané</a>, avec lequel nous essayons de lire trois morceaux en même temps en utilisant l'API audio standard.</span></span></p>
+<p><strong>Note :</strong> La lecture audio simultanée est testée à l'aide de notre <a href="http://jsfiddle.net/dmkyaq0r/">exemple de test audio simultané</a>, avec lequel nous essayons de lire trois morceaux en même temps en utilisant l'API audio standard.</p>
 </div>
 
 <div class="note">
-<p><strong>Note </strong>: <span id="result_box" lang="fr"><span>La fonctionnalité de lecture automatique simple est testée avec notre</span></span> <a href="http://jsfiddle.net/vpdspp2b/">exemp;e test lecture automatique</a>.</p>
+<p><strong>Note :</strong> La fonctionnalité de lecture automatique simple est testée avec notre <a href="http://jsfiddle.net/vpdspp2b/">exemp;e test lecture automatique</a>.</p>
 </div>
 
 <div class="note">
-<p><strong>Note </strong>: <span class="short_text" id="result_box" lang="fr"><span>La variabilité du volume est testée avec notre</span></span> <a href="http://jsfiddle.net/7ta12vw4/">exemple test volume</a>.</p>
+<p><strong>Note :</strong> La variabilité du volume est testée avec notre <a href="http://jsfiddle.net/7ta12vw4/">exemple test volume</a>.</p>
 </div>
 
-<h2 id="Solutions_de_contournement_pour_mobile"><span class="short_text" id="result_box" lang="fr"><span>Solutions de contournement pour mobile</span></span></h2>
+<h2 id="Solutions_de_contournement_pour_mobile">Solutions de contournement pour mobile</h2>
 
-<p><span id="result_box" lang="fr"><span>Bien que les navigateurs mobiles puissent présenter les problèmes évoqués ci-dessus, il existe des moyens de les contourner.</span></span></p>
+<p>Bien que les navigateurs mobiles puissent présenter les problèmes évoqués ci-dessus, il existe des moyens de les contourner.</p>
 
 <h3 id="Les_sprites_audio">Les "sprites" audio</h3>
 
-<p><span id="result_box" lang="fr"><span>Les "sprites" audio empruntent leur nom aux <a href="https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Images/Sprites_CSS">"sprites" CSS</a> ; c'est une technique visuelle permettant d'utiliser CSS avec une seule ressource graphique pour la découper en une série d'objets-images.</span> <span>Nous pouvons appliquer le même principe à l'audio, au lieu de disposer d'un petit nombre de petits fichiers audio qui prennent du temps à charger et à lire, nous avons un fichier audio plus grand contenant tous les fragments audio plus petits dont nous avons besoin.</span> <span>Pour lire un son spécifique à partir du fichier, nous utilisons simplement les périodes de début et de fin connues pour chaque "sprite" audio.</span></span></p>
+<p>Les "sprites" audio empruntent leur nom aux <a href="/fr/docs/Web/CSS/CSS_Images/Sprites_CSS">"sprites" CSS</a> ; c'est une technique visuelle permettant d'utiliser CSS avec une seule ressource graphique pour la découper en une série d'objets-images. Nous pouvons appliquer le même principe à l'audio, au lieu de disposer d'un petit nombre de petits fichiers audio qui prennent du temps à charger et à lire, nous avons un fichier audio plus grand contenant tous les fragments audio plus petits dont nous avons besoin. Pour lire un son spécifique à partir du fichier, nous utilisons simplement les périodes de début et de fin connues pour chaque "sprite" audio.</p>
 
-<p><span id="result_box" lang="fr"><span>L'avantage est que nous pouvons amorcer un morceau d'audio et avoir nos "sprites" prêts à partir.</span> <span>Pour ce faire, nous pouvons juste jouer et mettre en pause instantanément la plus grande partie de l'audio.</span> <span>Nous réduisons également le nombre de demandes de serveur et économisons de la bande passante.</span></span></p>
+<p>L'avantage est que nous pouvons amorcer un morceau d'audio et avoir nos "sprites" prêts à partir. Pour ce faire, nous pouvons juste jouer et mettre en pause instantanément la plus grande partie de l'audio. Nous réduisons également le nombre de demandes de serveur et économisons de la bande passante.</p>
 
 <pre class="brush: js">var myAudio = document.createElement("audio");
 myAudio.src = "mysprite.mp3";
 myAudio.play();
 myAudio.pause();</pre>
 
-<p><span id="result_box" lang="fr"><span>Vous aurez besoin d'échantillonner l'heure actuelle pour savoir quand l'arrêter.</span> <span>Si vous espacez vos sons individuels d'au moins 500 ms, l'utilisation de l'événement <code>timeUpdate</code> (qui se déclenche toutes les 250 ms) devrait suffire.</span> <span>Vos fichiers peuvent être légèrement plus longs que ce qu'ils devraient être, mais le silence se compresse bien.</span></span></p>
+<p>Vous aurez besoin d'échantillonner l'heure actuelle pour savoir quand l'arrêter. Si vous espacez vos sons individuels d'au moins 500 ms, l'utilisation de l'événement <code>timeUpdate</code> (qui se déclenche toutes les 250 ms) devrait suffire. Vos fichiers peuvent être légèrement plus longs que ce qu'ils devraient être, mais le silence se compresse bien.</p>
 
-<p><span id="result_box" lang="fr"><span>Voici un exemple d'un lecteur de "sprite" audio - nous allons d'abord configurer l'interface utilisateur en HTML :</span></span></p>
+<p>Voici un exemple d'un lecteur de "sprite" audio - nous allons d'abord configurer l'interface utilisateur en HTML :</p>
 
-<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>audio</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>myAudio<span class="punctuation token">"</span></span> <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>http://jPlayer.org/tmp/countdown.mp3<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>audio</span><span class="punctuation token">&gt;</span></span>
-<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>button</span> <span class="attr-name token">data-start</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>18<span class="punctuation token">"</span></span> <span class="attr-name token">data-stop</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>19<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>0<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>button</span><span class="punctuation token">&gt;</span></span>
-<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>button</span> <span class="attr-name token">data-start</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>16<span class="punctuation token">"</span></span> <span class="attr-name token">data-stop</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>17<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>1<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>button</span><span class="punctuation token">&gt;</span></span>
-<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>button</span> <span class="attr-name token">data-start</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>14<span class="punctuation token">"</span></span> <span class="attr-name token">data-stop</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>15<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>2<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>button</span><span class="punctuation token">&gt;</span></span>
-<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>button</span> <span class="attr-name token">data-start</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>12<span class="punctuation token">"</span></span> <span class="attr-name token">data-stop</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>13<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>3<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>button</span><span class="punctuation token">&gt;</span></span>
-<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>button</span> <span class="attr-name token">data-start</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>10<span class="punctuation token">"</span></span> <span class="attr-name token">data-stop</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>11<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>4<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>button</span><span class="punctuation token">&gt;</span></span>
-<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>button</span> <span class="attr-name token">data-start</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>8<span class="punctuation token">"</span></span>  <span class="attr-name token">data-stop</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>9<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>5<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>button</span><span class="punctuation token">&gt;</span></span>
-<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>button</span> <span class="attr-name token">data-start</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>6<span class="punctuation token">"</span></span>  <span class="attr-name token">data-stop</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>7<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>6<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>button</span><span class="punctuation token">&gt;</span></span>
-<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>button</span> <span class="attr-name token">data-start</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>4<span class="punctuation token">"</span></span>  <span class="attr-name token">data-stop</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>5<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>7<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>button</span><span class="punctuation token">&gt;</span></span>
-<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>button</span> <span class="attr-name token">data-start</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>2<span class="punctuation token">"</span></span>  <span class="attr-name token">data-stop</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>3<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>8<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>button</span><span class="punctuation token">&gt;</span></span>
-<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>button</span> <span class="attr-name token">data-start</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>0<span class="punctuation token">"</span></span>  <span class="attr-name token">data-stop</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>1<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>9<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>button</span><span class="punctuation token">&gt;</span></span></code></pre>
+<pre class="brush: html">lt;audio id="myAudio" src="http://jPlayer.org/tmp/countdown.mp3"&gt;&lt;/audio&gt;
+&lt;button data-start="18" data-stop="19"&gt;0&lt;/button&gt;
+&lt;button data-start="16" data-stop="17"&gt;1&lt;/button&gt;
+&lt;button data-start="14" data-stop="15"&gt;2&lt;/button&gt;
+&lt;button data-start="12" data-stop="13"&gt;3&lt;/button&gt;
+&lt;button data-start="10" data-stop="11"&gt;4&lt;/button&gt;
+&lt;button data-start="8"  data-stop="9"&gt;5&lt;/button&gt;
+&lt;button data-start="6"  data-stop="7"&gt;6&lt;/button&gt;
+&lt;button data-start="4"  data-stop="5"&gt;7&lt;/button&gt;
+&lt;button data-start="2"  data-stop="3"&gt;8&lt;/button&gt;
+&lt;button data-start="0"  data-stop="1"&gt;9&lt;/button&gt;</pre>
 
-<p><span id="result_box" lang="fr"><span>Maintenant, nous avons des boutons avec des heures de début et de fin en quelques secondes.</span> <span>Le fichier MP3 "countdown.mp3" se compose d'un numéro qui est prononcé toutes les 2 secondes, l'idée étant de lire ce numéro lorsque le bouton correspondant est pressé.</span></span></p>
+<p>Maintenant, nous avons des boutons avec des heures de début et de fin en quelques secondes. Le fichier MP3 "countdown.mp3" se compose d'un numéro qui est prononcé toutes les 2 secondes, l'idée étant de lire ce numéro lorsque le bouton correspondant est pressé.</p>
 
-<p><span class="short_text" id="result_box" lang="fr"><span>Ajoutons du JavaScript pour que ça marche:</span></span></p>
+<p>Ajoutons du JavaScript pour que ça marche:</p>
 
-<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> myAudio <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'myAudio'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-<span class="keyword token">var</span> buttons <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementsByTagName</span><span class="punctuation token">(</span><span class="string token">'button'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-<span class="keyword token">var</span> stopTime <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span>
+<pre class="brush: js">var myAudio = document.getElementById('myAudio');
+var buttons = document.getElementsByTagName('button');
+var stopTime = 0;
 
-<span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> i <span class="operator token">&lt;</span> buttons<span class="punctuation token">.</span>length<span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
-  buttons<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'click'</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
-    myAudio<span class="punctuation token">.</span>currentTime <span class="operator token">=</span> <span class="keyword token">this</span><span class="punctuation token">.</span><span class="function token">getAttribute</span><span class="punctuation token">(</span><span class="string token">"data-start"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-    stopTime <span class="operator token">=</span> <span class="keyword token">this</span><span class="punctuation token">.</span><span class="function token">getAttribute</span><span class="punctuation token">(</span><span class="string token">"data-stop"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-    myAudio<span class="punctuation token">.</span><span class="function token">play</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-  <span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-<span class="punctuation token">}</span>
+for (var i = 0; i &lt; buttons.length; i++) {
+  buttons[i].addEventListener('click', function() {
+    myAudio.currentTime = this.getAttribute("data-start");
+    stopTime = this.getAttribute("data-stop");
+    myAudio.play();
+  }, false);
+}
 
-myAudio<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'timeupdate'</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
-  <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">.</span>currentTime <span class="operator token">&gt;</span> stopTime<span class="punctuation token">)</span> <span class="punctuation token">{</span>
-    <span class="keyword token">this</span><span class="punctuation token">.</span><span class="function token">pause</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-  <span class="punctuation token">}</span>
-<span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+myAudio.addEventListener('timeupdate', function() {
+  if (this.currentTime &gt; stopTime) {
+    this.pause();
+  }
+}, false);</pre>
 
 <div class="note">
-<p><strong>Note </strong>: Vous pouvez <a href="http://jsfiddle.net/59vwaame/">essayer notre lecteur de sprite audio</a> sur JSFiddle.</p>
+<p><strong>Note :</strong> Vous pouvez <a href="http://jsfiddle.net/59vwaame/">essayer notre lecteur de sprite audio</a> sur JSFiddle.</p>
 </div>
 
 <div class="note">
-<p><strong>Note </strong>: Sur mobile <span id="result_box" lang="fr"><span>nous pouvons avoir besoin de déclencher ce code à partir d'un événement initié par l'utilisateur, tel qu'un bouton de démarrage pressé, comme décrit ci-dessus.</span></span></p>
+<p><strong>Note :</strong> Sur mobile nous pouvons avoir besoin de déclencher ce code à partir d'un événement initié par l'utilisateur, tel qu'un bouton de démarrage pressé, comme décrit ci-dessus.</p>
 </div>
 
 <div class="note">
-<p><strong>Note </strong>: <span id="result_box" lang="fr"><span>Attention aux débits binaires.</span> <span>L'encodage de votre audio à des débits binaires inférieurs signifie des tailles de fichier plus petites, mais une précision de recherche plus faible.</span></span></p>
+<p><strong>Note :</strong> Attention aux débits binaires. L'encodage de votre audio à des débits binaires inférieurs signifie des tailles de fichier plus petites, mais une précision de recherche plus faible.</p>
 </div>
 
 <h2 id="Musique_de_fond">Musique de fond</h2>
 
-<p><span id="result_box" lang="fr"><span>La musique dans les jeux peut avoir un effet émotionnel puissant.</span> <span>Vous pouvez mélanger et assortir divers échantillons de musique et, en supposant que vous pouvez contrôler le volume de votre élément audio, vous pouvez fondre différentes pièces musicales.</span> <span>En utilisant la méthode </span></span> <code><a href="https://developer.mozilla.org/fr/Apps/Fundamentals/Audio_and_video_delivery/WebAudio_playbackRate_explained">playbackRate()</a></code> <span lang="fr"><span>, vous pouvez même ajuster la vitesse de votre musique sans affecter la hauteur, pour mieux la synchroniser avec l'action.</span></span><br>
+<p>La musique dans les jeux peut avoir un effet émotionnel puissant. Vous pouvez mélanger et assortir divers échantillons de musique et, en supposant que vous pouvez contrôler le volume de votre élément audio, vous pouvez fondre différentes pièces musicales. En utilisant la méthode  <code><a href="/fr/Apps/Fundamentals/Audio_and_video_delivery/WebAudio_playbackRate_explained">playbackRate()</a></code> , vous pouvez même ajuster la vitesse de votre musique sans affecter la hauteur, pour mieux la synchroniser avec l'action.<br>
  <br>
- <span id="result_box" lang="fr"><span>Tout ceci est possible en utilisant l'élément standard {{HTMLElement ("audio")}} associé à l'API </span></span> {{domxref("HTMLMediaElement")}} <span lang="fr"><span>, mais il devient beaucoup plus facile et flexible avec l'<a href="https://developer.mozilla.org/fr/docs/Web/API/Web_Audio_API">API Web Audio</a>.</span></span></p>
+ Tout ceci est possible en utilisant l'élément standard {{HTMLElement ("audio")}} associé à l'API  {{domxref("HTMLMediaElement")}} , mais il devient beaucoup plus facile et flexible avec l'<a href="/fr/docs/Web/API/Web_Audio_API">API Web Audio</a>.</p>
 
 <h2 id="API_Web_Audio_pour_les_jeux">API Web Audio pour les jeux</h2>
 
-<p><span id="result_box" lang="fr"><span>Maintenant qu'il est supporté dans tous les navigateurs modernes à l'exception d'Opera Mini et d'Internet Explorer (<a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/status/webaudioapi/">bien que Microsoft travaille maintenant dessus</a>), une approche acceptable pour de nombreuses situations est d'utiliser l'<a href="https://developer.mozilla.org/fr/docs/Web/API/Web_Audio_API">API Web Audio</a></span></span><span lang="fr"><span> (voir la page </span></span><a href="http://caniuse.com/#search=web%20audio%20api">Puis-je utiliser l'API Web Audio ?</a> <span lang="fr"><span>pour plus d'informations</span> <span>sur la compatibilité du navigateur).</span> <span>L'API Web Audio est une API JavaScript audio avancée, idéale pour l'audio du jeu.</span> <span>Les développeurs peuvent générer de l'audio et manipuler des échantillons audio tout en positionnant le son dans l'espace de jeu 3D.</span></span></p>
+<p>Maintenant qu'il est supporté dans tous les navigateurs modernes à l'exception d'Opera Mini et d'Internet Explorer (<a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/status/webaudioapi/">bien que Microsoft travaille maintenant dessus</a>), une approche acceptable pour de nombreuses situations est d'utiliser l'<a href="/fr/docs/Web/API/Web_Audio_API">API Web Audio</a> (voir la page <a href="http://caniuse.com/#search=web%20audio%20api">Puis-je utiliser l'API Web Audio ?</a> pour plus d'informations sur la compatibilité du navigateur). L'API Web Audio est une API JavaScript audio avancée, idéale pour l'audio du jeu. Les développeurs peuvent générer de l'audio et manipuler des échantillons audio tout en positionnant le son dans l'espace de jeu 3D.</p>
 
-<p><span id="result_box" lang="fr"><span>Une stratégie inter-navigateurs envisageable serait de fournir un son basique à l'aide de l'élément standard {{HTMLElement ("audio")}} et, là où cela est pris en charge, d'améliorer l'expérience en utilisant l'API Web Audio.</span></span></p>
+<p>Une stratégie inter-navigateurs envisageable serait de fournir un son basique à l'aide de l'élément standard {{HTMLElement ("audio")}} et, là où cela est pris en charge, d'améliorer l'expérience en utilisant l'API Web Audio.</p>
 
 <div class="note">
-<p><strong>Note</strong> : <span id="result_box" lang="fr"><span>De manière significative, iOS Safari prend désormais en charge l'API Web Audio, ce qui signifie qu'il est désormais possible d'écrire des jeux Web avec de l'audio de qualité native pour iOS.</span></span></p>
+<p><strong>Note :</strong> De manière significative, iOS Safari prend désormais en charge l'API Web Audio, ce qui signifie qu'il est désormais possible d'écrire des jeux Web avec de l'audio de qualité native pour iOS.</p>
 </div>
 
-<p><span id="result_box" lang="fr"><span>Comme l'API Web Audio permet un timing et un contrôle précis de la lecture audio, nous pouvons l'utiliser pour jouer des échantillons à des moments spécifiques, ce qui est un aspect immersif crucial du jeu.</span> <span>Vous voulez que ces explosions soient<strong> accompagnées</strong> par un boom tonitruant, pas <strong>l'un après les autres</strong>, après tout.</span></span></p>
+<p>Comme l'API Web Audio permet un timing et un contrôle précis de la lecture audio, nous pouvons l'utiliser pour jouer des échantillons à des moments spécifiques, ce qui est un aspect immersif crucial du jeu. Vous voulez que ces explosions soient<strong> accompagnées</strong> par un boom tonitruant, pas <strong>l'un après les autres</strong>, après tout.</p>
 
 <h3 id="Musique_de_fond_avec_l'API_Web_Audio">Musique de fond avec l'API Web Audio</h3>
 
-<p><span id="result_box" lang="fr"><span>Bien que nous puissions utiliser l'élément {{HTMLElement ("audio")}} pour fournir une musique de fond linéaire, qui ne change pas en réaction à l'environnement du jeu, l'API Web Audio est idéale pour implémenter une expérience musicale plus dynamique.</span> <span>Vous pouvez vouloir que la musique change selon que vous essayez de créer du suspense ou d'encourager le joueur d'une manière ou d'une autre.</span> <span>La musique est une partie importante de l'expérience de jeu et, selon le type de jeu, vous voudrez peut-être investir des efforts considérables pour bien faire les choses.</span></span></p>
+<p>Bien que nous puissions utiliser l'élément {{HTMLElement ("audio")}} pour fournir une musique de fond linéaire, qui ne change pas en réaction à l'environnement du jeu, l'API Web Audio est idéale pour implémenter une expérience musicale plus dynamique. Vous pouvez vouloir que la musique change selon que vous essayez de créer du suspense ou d'encourager le joueur d'une manière ou d'une autre. La musique est une partie importante de l'expérience de jeu et, selon le type de jeu, vous voudrez peut-être investir des efforts considérables pour bien faire les choses.</p>
 
-<p><span id="result_box" lang="fr"><span>Une façon de rendre votre musique plus dynamique est de la diviser en boucles ou en pistes de composant.</span> <span>C'est souvent la façon dont les musiciens composent la musique de toute façon, et l'API Web Audio est extrêmement efficace pour garder ces parties synchronisées.</span> <span>Une fois que vous avez les différentes pistes qui composent votre morceau, vous pouvez apporter des pistes ou en retirer de la façon appropriée.</span></span></p>
+<p>Une façon de rendre votre musique plus dynamique est de la diviser en boucles ou en pistes de composant. C'est souvent la façon dont les musiciens composent la musique de toute façon, et l'API Web Audio est extrêmement efficace pour garder ces parties synchronisées. Une fois que vous avez les différentes pistes qui composent votre morceau, vous pouvez apporter des pistes ou en retirer de la façon appropriée.</p>
 
-<p><span id="result_box" lang="fr"><span>Vous pouvez également appliquer des filtres ou des effets à la musique.</span> <span>Votre personnage est-il dans une grotte ?</span> <span>Augmentez l'écho.</span> <span>Peut-être que vous avez des scènes sous-marines, alors appliquez un filtre qui étouffe le son.</span></span></p>
+<p>Vous pouvez également appliquer des filtres ou des effets à la musique. Votre personnage est-il dans une grotte ? Augmentez l'écho. Peut-être que vous avez des scènes sous-marines, alors appliquez un filtre qui étouffe le son.</p>
 
-<p><span id="result_box" lang="fr"><span>Regardons quelques techniques de l'API Web Audio pour ajuster dynamiquement la musique à partir de ses pistes de base.</span></span></p>
+<p>Regardons quelques techniques de l'API Web Audio pour ajuster dynamiquement la musique à partir de ses pistes de base.</p>
 
-<h3 id="Chargement_des_pistes"><span class="short_text" id="result_box" lang="fr"><span>Chargement des pistes</span></span></h3>
+<h3 id="Chargement_des_pistes">Chargement des pistes</h3>
 
-<p><span id="result_box" lang="fr"><span>Avec l'API Web Audio, vous pouvez charger individuellement des pistes et des boucles séparées en utilisant </span></span> <a href="https://developer.mozilla.org/fr/docs/Web/API/XMLHttpRequest"><code>XMLHttpRequest</code></a>, <span lang="fr"><span>ce qui signifie que vous pouvez les charger de manière synchrone ou en parallèle.</span> <span>Le chargement synchrone peut signifier que certaines parties de votre musique sont prêtes plus tôt et vous pouvez commencer à les jouer pendant que d'autres se chargent.</span></span></p>
+<p>Avec l'API Web Audio, vous pouvez charger individuellement des pistes et des boucles séparées en utilisant  <a href="/fr/docs/Web/API/XMLHttpRequest"><code>XMLHttpRequest</code></a>, ce qui signifie que vous pouvez les charger de manière synchrone ou en parallèle. Le chargement synchrone peut signifier que certaines parties de votre musique sont prêtes plus tôt et vous pouvez commencer à les jouer pendant que d'autres se chargent.</p>
 
-<p><span id="result_box" lang="fr"><span>De toute façon, vous pouvez vouloir synchroniser des pistes ou des boucles.</span> <span>L'API Web Audio contient la notion d'horloge interne qui commence à cocher le moment où vous créez un contexte audio.</span> <span>Vous devez prendre en compte le temps entre la création d'un contexte audio et le moment où la première piste audio commence à jouer.</span> <span>L'enregistrement de ce décalage et l'interrogation de l'heure actuelle de la piste de lecture vous donnent suffisamment d'informations pour synchroniser des morceaux audio distincts.</span></span></p>
+<p>De toute façon, vous pouvez vouloir synchroniser des pistes ou des boucles. L'API Web Audio contient la notion d'horloge interne qui commence à cocher le moment où vous créez un contexte audio. Vous devez prendre en compte le temps entre la création d'un contexte audio et le moment où la première piste audio commence à jouer. L'enregistrement de ce décalage et l'interrogation de l'heure actuelle de la piste de lecture vous donnent suffisamment d'informations pour synchroniser des morceaux audio distincts.</p>
 
-<p><span id="result_box" lang="fr"><span>Pour voir cela en action, mettons en place des pistes distinctes :</span></span></p>
+<p>Pour voir cela en action, mettons en place des pistes distinctes :</p>
 
-<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token">ul</span><span class="punctuation token">&gt;</span></span>
-  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>li</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>a</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>track<span class="punctuation token">"</span></span> <span class="attr-name token">href</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>http://jPlayer.org/audio/mp3/gbreggae-leadguitar.mp3<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Lead Guitar<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>a</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>li</span><span class="punctuation token">&gt;</span></span>
-  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>li</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>a</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>track<span class="punctuation token">"</span></span> <span class="attr-name token">href</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>http://jPlayer.org/audio/mp3/gbreggae-drums.mp3<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Drums<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>a</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>li</span><span class="punctuation token">&gt;</span></span>
-  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>li</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>a</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>track<span class="punctuation token">"</span></span> <span class="attr-name token">href</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>http://jPlayer.org/audio/mp3/gbreggae-bassguitar.mp3<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Bass Guitar<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>a</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>li</span><span class="punctuation token">&gt;</span></span>
-  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>li</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>a</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>track<span class="punctuation token">"</span></span> <span class="attr-name token">href</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>http://jPlayer.org/audio/mp3/gbreggae-horns.mp3<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Horns<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>a</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>li</span><span class="punctuation token">&gt;</span></span>
-  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>li</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>a</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>track<span class="punctuation token">"</span></span> <span class="attr-name token">href</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>http://jPlayer.org/audio/mp3/gbreggae-clav.mp3<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Clavi<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>a</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>li</span><span class="punctuation token">&gt;</span></span>
-<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>ul</span><span class="punctuation token">&gt;</span></span></code></pre>
+<pre class="brush: html">ul&gt;
+  &lt;li&gt;&lt;a class="track" href="http://jPlayer.org/audio/mp3/gbreggae-leadguitar.mp3"&gt;Lead Guitar&lt;/a&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;a class="track" href="http://jPlayer.org/audio/mp3/gbreggae-drums.mp3"&gt;Drums&lt;/a&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;a class="track" href="http://jPlayer.org/audio/mp3/gbreggae-bassguitar.mp3"&gt;Bass Guitar&lt;/a&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;a class="track" href="http://jPlayer.org/audio/mp3/gbreggae-horns.mp3"&gt;Horns&lt;/a&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;a class="track" href="http://jPlayer.org/audio/mp3/gbreggae-clav.mp3"&gt;Clavi&lt;/a&gt;&lt;/li&gt;
+&lt;/ul&gt;</pre>
 
-<p><span id="result_box" lang="fr"><span>Toutes ces pistes ont le même tempo et sont conçues pour être synchronisées les unes avec les autres.</span></span></p>
+<p>Toutes ces pistes ont le même tempo et sont conçues pour être synchronisées les unes avec les autres.</p>
 
-<pre class="brush: js line-numbers  language-js"><code class="language-js">window<span class="punctuation token">.</span>AudioContext <span class="operator token">=</span> window<span class="punctuation token">.</span>AudioContext <span class="operator token">||</span> window<span class="punctuation token">.</span>webkitAudioContext<span class="punctuation token">;</span>
+<pre class="brush: js">window.AudioContext = window.AudioContext || window.webkitAudioContext;
 
-<span class="keyword token">var</span> offset <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span>
-<span class="keyword token">var</span> context <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">AudioContext</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+var offset = 0;
+var context = new AudioContext();
 
-<span class="keyword token">function</span> <span class="function token">playTrack</span><span class="punctuation token">(</span>url<span class="punctuation token">)</span> <span class="punctuation token">{</span>
-  <span class="keyword token">var</span> request <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">XMLHttpRequest</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-  request<span class="punctuation token">.</span><span class="function token">open</span><span class="punctuation token">(</span><span class="string token">'GET'</span><span class="punctuation token">,</span> url<span class="punctuation token">,</span> <span class="keyword token">true</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-  request<span class="punctuation token">.</span>responseType <span class="operator token">=</span> <span class="string token">'arraybuffer'</span><span class="punctuation token">;</span>
+function playTrack(url) {
+  var request = new XMLHttpRequest();
+  request.open('GET', url, true);
+  request.responseType = 'arraybuffer';
 
-  <span class="keyword token">var</span> audiobuffer<span class="punctuation token">;</span>
+  var audiobuffer;
 
-  <span class="comment token">// Decode asynchronously</span>
-  request<span class="punctuation token">.</span>onload <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  // Decode asynchronously
+  request.onload = function() {
 
-    <span class="keyword token">if</span> <span class="punctuation token">(</span>request<span class="punctuation token">.</span>status <span class="operator token">==</span> <span class="number token">200</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    if (request.status == 200) {
 
-      context<span class="punctuation token">.</span><span class="function token">decodeAudioData</span><span class="punctuation token">(</span>request<span class="punctuation token">.</span>response<span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span>buffer<span class="punctuation token">)</span> <span class="punctuation token">{</span>
-        <span class="keyword token">var</span> source <span class="operator token">=</span> context<span class="punctuation token">.</span><span class="function token">createBufferSource</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-        source<span class="punctuation token">.</span>buffer <span class="operator token">=</span> buffer<span class="punctuation token">;</span>
-        source<span class="punctuation token">.</span><span class="function token">connect</span><span class="punctuation token">(</span>context<span class="punctuation token">.</span>destination<span class="punctuation token">)</span><span class="punctuation token">;</span>
-        console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'context.currentTime '</span> <span class="operator token">+</span> context<span class="punctuation token">.</span>currentTime<span class="punctuation token">)</span><span class="punctuation token">;</span>
+      context.decodeAudioData(request.response, function(buffer) {
+        var source = context.createBufferSource();
+        source.buffer = buffer;
+        source.connect(context.destination);
+        console.log('context.currentTime ' + context.currentTime);
 
-        <span class="keyword token">if</span> <span class="punctuation token">(</span>offset <span class="operator token">==</span> <span class="number token">0</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
-          source<span class="punctuation token">.</span><span class="function token">start</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-          offset <span class="operator token">=</span> context<span class="punctuation token">.</span>currentTime<span class="punctuation token">;</span>
-        <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span>
-          source<span class="punctuation token">.</span><span class="function token">start</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span>context<span class="punctuation token">.</span>currentTime <span class="operator token">-</span> offset<span class="punctuation token">)</span><span class="punctuation token">;</span>
-        <span class="punctuation token">}</span>
+        if (offset == 0) {
+          source.start();
+          offset = context.currentTime;
+        } else {
+          source.start(0,context.currentTime - offset);
+        }
 
-      <span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span> <span class="punctuation token">{</span>
-        console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'Error decoding audio data:'</span> <span class="operator token">+</span> e<span class="punctuation token">)</span><span class="punctuation token">;</span>
-      <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-    <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span>
-      console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'Audio didn\'t load successfully; error code:'</span> <span class="operator token">+</span> request<span class="punctuation token">.</span>statusText<span class="punctuation token">)</span><span class="punctuation token">;</span>
-    <span class="punctuation token">}</span>
-  <span class="punctuation token">}</span>
-  request<span class="punctuation token">.</span><span class="function token">send</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-<span class="punctuation token">}</span>
+      }, function(e) {
+        console.log('Error decoding audio data:' + e);
+      });
+    } else {
+      console.log('Audio didn\'t load successfully; error code:' + request.statusText);
+    }
+  }
+  request.send();
+}
 
-<span class="keyword token">var</span> tracks <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementsByClassName</span><span class="punctuation token">(</span><span class="string token">'track'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+var tracks = document.getElementsByClassName('track');
 
-<span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">,</span> len <span class="operator token">=</span> tracks<span class="punctuation token">.</span>length<span class="punctuation token">;</span> i <span class="operator token">&lt;</span> len<span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
-  tracks<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'click'</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span><span class="punctuation token">{</span>
+for (var i = 0, len = tracks.length; i &lt; len; i++) {
+  tracks[i].addEventListener('click', function(e){
 
-    <span class="function token">playTrack</span><span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">.</span>href<span class="punctuation token">)</span><span class="punctuation token">;</span>
-    e<span class="punctuation token">.</span><span class="function token">preventDefault</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-  <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-<span class="punctuation token">}</span></code></pre>
+    playTrack(this.href);
+    e.preventDefault();
+  });
+}</pre>
 
 <div class="note">
-<p><strong>Note</strong>: Vous pouvez essayer notre <a href="http://jsfiddle.net/c87z11jj/1/">démo multipiste API Web Audio</a> sur JSFiddle.</p>
+<p><strong>Note :</strong> Vous pouvez essayer notre <a href="http://jsfiddle.net/c87z11jj/1/">démo multipiste API Web Audio</a> sur JSFiddle.</p>
 </div>
 
-<p><span id="result_box" lang="fr"><span>Regardons maintenant le code.</span> <span>Nous créons d'abord un nouveau {{domxref ("AudioContext")}} et créons une fonction <code>(playTrack ())</code> qui charge et commence à jouer une piste.</span></span></p>
+<p>Regardons maintenant le code. Nous créons d'abord un nouveau {{domxref ("AudioContext")}} et créons une fonction <code>(playTrack ())</code> qui charge et commence à jouer une piste.</p>
 
-<p><code>start()</code> <span id="result_box" lang="fr"><span>(anciennement appelé <code>noteOn ())</code> commence à lire un élément audio.</span> <span><code>start ()</code> demande trois paramètres (facultatifs) :</span></span></p>
+<p><code>start()</code> (anciennement appelé <code>noteOn ())</code> commence à lire un élément audio. <code>start ()</code> demande trois paramètres (facultatifs) :</p>
 
 <ol>
- <li>when <em>(quand)</em> : <span class="short_text" id="result_box" lang="fr"><span>le temps absolu pour commencer la lecture</span></span> .</li>
+ <li>when <em>(quand)</em> : le temps absolu pour commencer la lecture .</li>
  <li>where (offset) <em>(où)</em> : la partie de l'audio qui doit commencer à être jouée.</li>
  <li>how long <em>(combien de temps)</em> : la durée pendant laquelle elle doit être jouée.</li>
 </ol>
 
-<p><code>stop()</code> <span id="result_box" lang="fr"><span>prend un paramètre facultatif - </span></span>when<span lang="fr"><span> - qui est le délai avant l'arrêt.</span></span><br>
+<p><code>stop()</code> prend un paramètre facultatif - when - qui est le délai avant l'arrêt.<br>
  <br>
- <span id="result_box" lang="fr"><span>Si le second paramètre de <code>start ()</code></span></span> — <span lang="fr"><span> </span></span> the offset (<span lang="fr"><span><em>le décalage</em>) </span></span> — <span lang="fr"><span> est nul, nous commençons à jouer dès le début l'audio donné ; ce que nous faisons en premier.</span> <span>Nous stockons ensuite le {{domxref ("AudioContext.currentTime")}} </span></span> — <span lang="fr"><span> le décalage de la première lecture de la pièce, soustrayons celle des temps actuels pour calculer l'heure réelle, et utilisons cela pour synchroniser nos pistes.</span></span><br>
+ Si le second paramètre de <code>start ()</code> —   the offset (<em>le décalage</em>)  —  est nul, nous commençons à jouer dès le début l'audio donné ; ce que nous faisons en premier. Nous stockons ensuite le {{domxref ("AudioContext.currentTime")}}  —  le décalage de la première lecture de la pièce, soustrayons celle des temps actuels pour calculer l'heure réelle, et utilisons cela pour synchroniser nos pistes.<br>
  <br>
- <span id="result_box" lang="fr"><span>Dans le contexte de votre monde de jeu, vous pouvez avoir des boucles et des échantillons qui sont joués dans différentes circonstances, et il peut être utile de pouvoir les synchroniser avec d'autres pistes pour une expérience plus transparente.</span></span></p>
+ Dans le contexte de votre monde de jeu, vous pouvez avoir des boucles et des échantillons qui sont joués dans différentes circonstances, et il peut être utile de pouvoir les synchroniser avec d'autres pistes pour une expérience plus transparente.</p>
 
 <div class="note">
-<p><strong>Note </strong>: <span id="result_box" lang="fr"><span>Cet exemple n'attend pas la fin du battement avant d'introduire le morceau suivant;</span> <span>nous pourrions le faire si nous connaissions le BPM (battement par minute) des pistes.</span></span></p>
+<p><strong>Note :</strong> Cet exemple n'attend pas la fin du battement avant d'introduire le morceau suivant; nous pourrions le faire si nous connaissions le BPM (battement par minute) des pistes.</p>
 </div>
 
-<p><span id="result_box" lang="fr"><span>Vous pouvez trouver que l'introduction d'une nouvelle piste sonne plus naturelle si elle entre dans le battement, la mesure ou la phrase, selon l'unité que vous voulez pour votre musique de fond.</span></span></p>
+<p>Vous pouvez trouver que l'introduction d'une nouvelle piste sonne plus naturelle si elle entre dans le battement, la mesure ou la phrase, selon l'unité que vous voulez pour votre musique de fond.</p>
 
-<p><span id="result_box" lang="fr"><span>Pour ce faire, avant de jouer la piste que vous voulez synchroniser, vous devez calculer combien de temps cela va durer jusqu'au début de la prochaine unité musicale.</span></span></p>
+<p>Pour ce faire, avant de jouer la piste que vous voulez synchroniser, vous devez calculer combien de temps cela va durer jusqu'au début de la prochaine unité musicale.</p>
 
-<p><span id="result_box" lang="fr"><span>Voici un peu de code qui donne un tempo (le temps en secondes de votre battement / mesure), calcule combien de temps attendre pour jouer la partie suivante </span></span> — <span lang="fr"><span> vous alimentez la valeur initiale de la fonction <code>start ()</code> avec le premier paramètre qui</span> <span>prend le temps absolu de début de la lecture.</span> <span>Notez que le deuxième paramètre (où commencer à jouer à partir de la nouvelle piste) est relatif :</span></span></p>
+<p>Voici un peu de code qui donne un tempo (le temps en secondes de votre battement / mesure), calcule combien de temps attendre pour jouer la partie suivante  —  vous alimentez la valeur initiale de la fonction <code>start ()</code> avec le premier paramètre qui prend le temps absolu de début de la lecture. Notez que le deuxième paramètre (où commencer à jouer à partir de la nouvelle piste) est relatif :</p>
 
-<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">if</span> <span class="punctuation token">(</span>offset <span class="operator token">==</span> <span class="number token">0</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
-  source<span class="punctuation token">.</span><span class="function token">start</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-  offset <span class="operator token">=</span> context<span class="punctuation token">.</span>currentTime<span class="punctuation token">;</span>
-<span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span>
-  <span class="keyword token">var</span> relativeTime <span class="operator token">=</span> context<span class="punctuation token">.</span>currentTime <span class="operator token">-</span> offset<span class="punctuation token">;</span>
-  <span class="keyword token">var</span> beats <span class="operator token">=</span> relativeTime <span class="operator token">/</span> tempo<span class="punctuation token">;</span>
-  <span class="keyword token">var</span> remainder <span class="operator token">=</span> beats <span class="operator token">-</span> Math<span class="punctuation token">.</span><span class="function token">floor</span><span class="punctuation token">(</span>beats<span class="punctuation token">)</span><span class="punctuation token">;</span>
-  <span class="keyword token">var</span> delay <span class="operator token">=</span> tempo <span class="operator token">-</span> <span class="punctuation token">(</span>remainder<span class="operator token">*</span>tempo<span class="punctuation token">)</span><span class="punctuation token">;</span>
-  source<span class="punctuation token">.</span><span class="function token">start</span><span class="punctuation token">(</span>context<span class="punctuation token">.</span>currentTime<span class="operator token">+</span>delay<span class="punctuation token">,</span> relativeTime<span class="operator token">+</span>delay<span class="punctuation token">)</span><span class="punctuation token">;</span>
-<span class="punctuation token">}</span></code></pre>
+<pre class="brush: js">if (offset == 0) {
+  source.start();
+  offset = context.currentTime;
+} else {
+  var relativeTime = context.currentTime - offset;
+  var beats = relativeTime / tempo;
+  var remainder = beats - Math.floor(beats);
+  var delay = tempo - (remainder*tempo);
+  source.start(context.currentTime+delay, relativeTime+delay);
+}</pre>
 
 <div class="note">
-<p><strong>Note</strong>: Ici, vous pouvez <a href="http://jsfiddle.net/c87z11jj/2/">essayer notre code calculateur d'attente</a> , sur JSFiddle (synchronisé à la mesure).</p>
+<p><strong>Note :</strong> Ici, vous pouvez <a href="http://jsfiddle.net/c87z11jj/2/">essayer notre code calculateur d'attente</a> , sur JSFiddle (synchronisé à la mesure).</p>
 </div>
 
 <div class="note">
-<p><strong>Note</strong>: Si le premier paramètre est 0 ou inférieur au contexte <code>currentTime</code>, la musique commence immédiatement.</p>
+<p><strong>Note :</strong> Si le premier paramètre est 0 ou inférieur au contexte <code>currentTime</code>, la musique commence immédiatement.</p>
 </div>
 
 <h3 id="Audio_positionnel">Audio positionnel</h3>
 
-<p><span id="result_box" lang="fr"><span>L'audio positionnel peut être une technique importante pour faire de l'audio un élément clé d'une expérience de jeu immersive.</span> <span>L'API Web Audio permet non seulement de positionner un certain nombre de sources audio dans un espace tridimensionnel, mais également d'appliquer des filtres qui rendent cet audio plus réaliste.</span></span></p>
+<p>L'audio positionnel peut être une technique importante pour faire de l'audio un élément clé d'une expérience de jeu immersive. L'API Web Audio permet non seulement de positionner un certain nombre de sources audio dans un espace tridimensionnel, mais également d'appliquer des filtres qui rendent cet audio plus réaliste.</p>
 
-<p><span id="result_box" lang="fr"><span>En bref, en utilisant les capacités positionnelles de l'API Web Audio, nous pouvons relier d'autres informations sur le monde du jeu pour le joueur.</span></span></p>
+<p>En bref, en utilisant les capacités positionnelles de l'API Web Audio, nous pouvons relier d'autres informations sur le monde du jeu pour le joueur.</p>
 
 <p>Nous pouvons relier :</p>
 
@@ -367,17 +365,17 @@ myAudio<span class="punctuation token">.</span><span class="function token">addE
  <li>l'environnement (caverneux, sous-marin, etc.)</li>
 </ul>
 
-<p><span id="result_box" lang="fr"><span>Ceci est particulièrement utile dans un environnement tridimensionnel rendu en utilisant</span></span> <a href="https://developer.mozilla.org/fr/docs/Web/API/WebGL_API">WebGL</a>, <span id="result_box" lang="fr"><span>avec lequel l'API Web Audio permet d'associer l'audio aux objets et aux points de vue</span></span> .</p>
+<p>Ceci est particulièrement utile dans un environnement tridimensionnel rendu en utilisant <a href="/fr/docs/Web/API/WebGL_API">WebGL</a>, avec lequel l'API Web Audio permet d'associer l'audio aux objets et aux points de vue .</p>
 
 <div class="note">
-<p><strong>Note</strong> : Voir <a href="https://developer.mozilla.org/fr/docs/Web/API/Web_Audio_API/Web_audio_spatialization_basics">Web Audio API Spatialization Basics</a> <em>(Bases de la spacialisation de l'API Web Audio)</em> pour plus de détails.</p>
+<p><strong>Note :</strong> Voir <a href="/fr/docs/Web/API/Web_Audio_API/Web_audio_spatialization_basics">Web Audio API Spatialization Basics</a> <em>(Bases de la spacialisation de l'API Web Audio)</em> pour plus de détails.</p>
 </div>
 
 <h2 id="See_Also">See Also</h2>
 
 <ul>
- <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Web_Audio_API">Web Audio API sur MDN</a></li>
- <li><a href="https://developer.mozilla.org/fr/docs/Web/HTML/Element/audio"><code>&lt;audio&gt;</code> sur MDN</a></li>
+ <li><a href="/fr/docs/Web/API/Web_Audio_API">Web Audio API sur MDN</a></li>
+ <li><a href="/fr/docs/Web/HTML/Element/audio"><code>&lt;audio&gt;</code> sur MDN</a></li>
  <li><a href="http://www.html5rocks.com/en/tutorials/webaudio/games/">Developing Game Audio with the Web Audio API (HTML5Rocks) (en)</a></li>
  <li><a href="http://www.html5rocks.com/en/tutorials/webaudio/positional_audio/">Mixing Positional Audio and WebGL (HTML5Rocks) (en)</a></li>
  <li><a href="https://hacks.mozilla.org/2013/10/songs-of-diridum-pushing-the-web-audio-api-to-its-limits/">Songs of Diridum: Pushing the Web Audio API to Its Limits (en)</a></li>
diff --git a/files/fr/games/techniques/index.html b/files/fr/games/techniques/index.html
index 0b0471d2e7..12534a0449 100644
--- a/files/fr/games/techniques/index.html
+++ b/files/fr/games/techniques/index.html
@@ -9,25 +9,23 @@ translation_of: Games/Techniques
 ---
 <div>{{GamesSidebar}}</div>
 
-<p>  {{IncludeSubnav("/fr/docs/Jeux")}}</p>
+<p>{{IncludeSubnav("/fr/docs/Jeux")}}</p>
 
-<div class="summary">
 <p>Cette page liste un ensemble de techniques utiles à toute personne qui voudrait développer un jeu vidéo à l'aide des technologies du web.</p>
-</div>
 
 <dl>
- <dt><a href="https://developer.mozilla.org/fr/docs/Games/Techniques/Async_scripts" title="/en-US/docs/Games/Techniques/Async_scripts">Utiliser des scripts asynchrones pour asm.js</a></dt>
+ <dt><a href="/fr/docs/Games/Techniques/Async_scripts" title="/fr/docs/Games/Techniques/Async_scripts">Utiliser des scripts asynchrones pour asm.js</a></dt>
  <dd>Principalement pour la création de jeux de moyenne ou de grande taille, les scripts asynchrones sont une technique essentielle dont il faut tirer avantage, ainsi le JavaScript de votre jeux pourra être compilé hors du thread principal et mis en cache pour la future exécution du jeux, résultant en une amélioration significative des performances pour vos utilisateurs. Cet article vous explique comment.</dd>
- <dt><a href="https://developer.mozilla.org/fr/Apps/Fundamentals/Performance/Optimizing_startup_performance" title="/en-US/docs/Apps/Developing/Optimizing_startup_performance">Optimiser les performances au démarrage</a></dt>
+ <dt><a href="/fr/Apps/Fundamentals/Performance/Optimizing_startup_performance" title="/fr/docs/Apps/Developing/Optimizing_startup_performance">Optimiser les performances au démarrage</a></dt>
  <dd>Comment vous assurez que votre jeu se lancera rapidement, en douceur et sans avoir l’air de bloquer le navigateur ou le périphérique de l’utilisateur.</dd>
- <dt><a href="https://developer.mozilla.org/fr/docs/Games/Techniques/WebRTC_data_channels" title="/en-US/docs/Games/WebRTC_data_channels">Utiliser les canaux de données pair-à-pair WebRTC</a></dt>
+ <dt><a href="/fr/docs/Games/Techniques/WebRTC_data_channels" title="/fr/docs/Games/WebRTC_data_channels">Utiliser les canaux de données pair-à-pair WebRTC</a></dt>
  <dd>En plus de prendre en charge les communications audio et vidéo, WebRTC permet de mettre en place des canaux de données pair-à-pair pour échanger activement des données texte ou binaires entre deux joueurs. Cet article explique ce que cela vous apporte et montre comment utiliser les bibliothèques qui rendent cela facile.</dd>
- <dt><a href="https://developer.mozilla.org/fr/docs/Games/Techniques/Efficient_animation_for_web_games" title="/en-US/docs/Games/Techniques/Efficient_animation_for_web_games">Animations efficaces pour les jeux web</a></dt>
+ <dt><a href="/fr/docs/Games/Techniques/Efficient_animation_for_web_games" title="/fr/docs/Games/Techniques/Efficient_animation_for_web_games">Animations efficaces pour les jeux web</a></dt>
  <dd>Cet article couvre les techniques et les conseils pour créer des animations efficaces pour les jeux web, avec une tendance vers la prise en charge des appareils bas de gamme comme des téléphones mobiles. Nous aborderons les transitions CSS et les animations CSS, et les boucles JavaScript utilisant {{ domxref("window.requestAnimationFrame") }}.</dd>
- <dt><a href="https://developer.mozilla.org/fr/docs/Games/Techniques/Audio_for_Web_Games">Audio pour les jeux web</a></dt>
- <dd><span id="result_box" lang="fr"><span>L'audio est une partie importante de tout jeu - il ajoute des commentaires et de l'atmosphère.</span> <span>L'audio basé sur le Web arrive à maturité rapidement, mais il y a encore beaucoup de différences de navigateurs à négocier.</span> <span>Cet article fournit un guide détaillé sur la mise en œuvre de l'audio pour les jeux Web, en examinant ce qui fonctionne actuellement sur un éventail aussi large que possible de platesformes.</span></span></dd>
- <dt><a href="https://developer.mozilla.org/fr/docs/Games/Techniques/2D_collision_detection" title="/en-US/docs/Games/Techniques/2D_collision_detection">Détection de collisions en 2D</a></dt>
+ <dt><a href="/fr/docs/Games/Techniques/Audio_for_Web_Games">Audio pour les jeux web</a></dt>
+ <dd>L'audio est une partie importante de tout jeu - il ajoute des commentaires et de l'atmosphère. L'audio basé sur le Web arrive à maturité rapidement, mais il y a encore beaucoup de différences de navigateurs à négocier. Cet article fournit un guide détaillé sur la mise en œuvre de l'audio pour les jeux Web, en examinant ce qui fonctionne actuellement sur un éventail aussi large que possible de platesformes.</dd>
+ <dt><a href="/fr/docs/Games/Techniques/2D_collision_detection" title="/fr/docs/Games/Techniques/2D_collision_detection">Détection de collisions en 2D</a></dt>
  <dd>Une introduction aux techniques de détection de collisions pour les jeux en deux dimensions.</dd>
- <dt><a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/Tilemaps">Carrelage </a><a href="https://developer.mozilla.org/fr/docs/Games/Techniques/Tilemaps"> </a></dt>
- <dd><span id="result_box" lang="fr"><span>Les carreaux sont une technique très populaire dans les jeux 2D pour construire le monde du jeu.</span> <span>Ces articles fournissent une</span></span> introduction du carrelage (map 2D) et expliquent comment les implémenter avec l'API Canvas.</dd>
+ <dt><a href="/fr/docs/Games/Techniques/Tilemaps">Carrelage </a><a href="/fr/docs/Games/Techniques/Tilemaps"> </a></dt>
+ <dd>Les carreaux sont une technique très populaire dans les jeux 2D pour construire le monde du jeu. Ces articles fournissent une introduction du carrelage (map 2D) et expliquent comment les implémenter avec l'API Canvas.</dd>
 </dl>
diff --git a/files/fr/games/tools/asm.js/index.html b/files/fr/games/tools/asm.js/index.html
index 087e58b14f..7dd8150bfb 100644
--- a/files/fr/games/tools/asm.js/index.html
+++ b/files/fr/games/tools/asm.js/index.html
@@ -3,11 +3,9 @@ title: asm.js
 slug: Games/Tools/asm.js
 translation_of: Games/Tools/asm.js
 ---
-<div>{{GamesSidebar}}</div><div>{{IncludeSubnav("/en-US/docs/Games")}}</div>
+<div>{{GamesSidebar}}</div><div>{{IncludeSubnav("/fr/docs/Games")}}</div>
 
-<div class="summary">
-<p><span class="seoSummary"><a href="http://asmjs.org/">Asm.js</a> </span>Asm.js est une spécification définissant un sous-ensemble de JavaScript hautement optimisé. Cet article examine exactement ce qui est permis dans le sous-ensemble asm.js, quelles améliorations il confère, où et comment vous pouvez l'utiliser, et d'autres ressources et exemples.</p>
-</div>
+<p><a href="http://asmjs.org/">Asm.js</a> Asm.js est une spécification définissant un sous-ensemble de JavaScript hautement optimisé. Cet article examine exactement ce qui est permis dans le sous-ensemble asm.js, quelles améliorations il confère, où et comment vous pouvez l'utiliser, et d'autres ressources et exemples.</p>
 
 <h2 id="Qu'est_ce_que_asm.js_exactement">Qu'est ce que asm.js, exactement?</h2>
 
diff --git a/files/fr/games/tools/index.html b/files/fr/games/tools/index.html
index dbe41234cd..b40a0a1cc3 100644
--- a/files/fr/games/tools/index.html
+++ b/files/fr/games/tools/index.html
@@ -11,30 +11,28 @@ translation_of: Games/Tools
 ---
 <div>{{GamesSidebar}}</div>
 
-<div>{{IncludeSubnav("/en-US/docs/Games")}}</div>
+<div>{{IncludeSubnav("/fr/docs/Games")}}</div>
 
-<div class="summary">
-<p><span class="seoSummary">Sur cette page, vous trouverez des liens vers nos articles sur les outils de développement de jeux, qui visent à terme à couvrir les frameworks, les compilateurs et les outils de  débogage.</span></p>
-</div>
+<p>Sur cette page, vous trouverez des liens vers nos articles sur les outils de développement de jeux, qui visent à terme à couvrir les frameworks, les compilateurs et les outils de  débogage.</p>
 
 <dl>
- <dt><a href="/en-US/docs/Games/Tools/asm.js">asm.js</a></dt>
+ <dt><a href="/fr/docs/Games/Tools/asm.js">asm.js</a></dt>
  <dd>asm.js est un sous-ensemble très limité du langage JavaScript, qui peut être grandement optimisé et exécuté dans un moteur de compilation à l'avance (AOT) pour des performances beaucoup plus rapides que vos performances JavaScript typiques. C'est, bien sûr, idéal pour les jeux.</dd>
  <dt><a href="https://github.com/kripken/emscripten/wiki" title="https://github.com/kripken/emscripten/wiki">Emscripten</a></dt>
  <dd>
- <p>Un compilateur LLVM vers JavaScript; avec Emscripten, vous pouvez compiler C ++ et d'autres langages qui peuvent compiler en bytecode LLVM en JavaScript haute performance. C'est un excellent outil pour porter des applications sur le Web! Il existe un <a href="https://github.com/kripken/emscripten/wiki/Tutorial">tutoriel uitle Emscripten</a> disponible sur le wiki. Notez que nous <a href="/en-US/docs/Emscripten">visons à couvrir Emscripten dans sa propre section de MDN</a>.</p>
+ <p>Un compilateur LLVM vers JavaScript; avec Emscripten, vous pouvez compiler C ++ et d'autres langages qui peuvent compiler en bytecode LLVM en JavaScript haute performance. C'est un excellent outil pour porter des applications sur le Web! Il existe un <a href="https://github.com/kripken/emscripten/wiki/Tutorial">tutoriel uitle Emscripten</a> disponible sur le wiki. Notez que nous <a href="/fr/docs/Emscripten">visons à couvrir Emscripten dans sa propre section de MDN</a>.</p>
  </dd>
  <dt><a href="https://addons.mozilla.org/en-us/firefox/addon/gecko-profiler/" title="https://addons.mozilla.org/en-us/firefox/addon/gecko-profiler/">Gecko profiler</a></dt>
  <dd>L'extension de profileur Gecko vous permet de profiler votre code pour vous aider à déterminer où se trouvent vos problèmes de performances afin que vous puissiez faire fonctionner votre jeu à une vitesse maximale.</dd>
- <dt><a href="/en-US/docs/Games/Tools/Engines_and_tools">Moteurs de jeu et outils</a></dt>
+ <dt><a href="/fr/docs/Games/Tools/Engines_and_tools">Moteurs de jeu et outils</a></dt>
  <dd>Une liste de moteurs, modèles et technologies utiles aux développeurs de jeux.</dd>
- <dt><a href="/en-US/docs/Mozilla/Projects/Shumway">Shumway</a></dt>
+ <dt><a href="/fr/docs/Mozilla/Projects/Shumway">Shumway</a></dt>
  <dd>Shumway est un moteur de rendu pour Adobe Flash entièrement construit en JavaScript, WebGL, etc., comblant le fossé entre Flash et les standards Web. Cet article explique comment utiliser Shumway et comment apporter des correctifs et des bogues au projet.</dd>
  <dt>Chaîne d'outils pour développer et déboguer des jeux</dt>
- <dd>En quoi cela diffère-t-il du débogage normal des applications Web? Quels outils spécialisés sont disponibles? Une grande partie de cela va être couverte par Will dans les <a href="/en-US/docs/Tools">outils</a>, mais ici, nous devrions fournir une sorte de tutoriel pratique sur la chaîne d'outils pour le débogage de jeux, avec des liens vers les éléments de Will :
+ <dd>En quoi cela diffère-t-il du débogage normal des applications Web? Quels outils spécialisés sont disponibles? Une grande partie de cela va être couverte par Will dans les <a href="/fr/docs/Tools">outils</a>, mais ici, nous devrions fournir une sorte de tutoriel pratique sur la chaîne d'outils pour le débogage de jeux, avec des liens vers les éléments de Will :
  <ul>
   <li>Présentation des outils de base</li>
-  <li><a href="/en-US/docs/Tools/Shader_Editor">Éditeur de Shader</a></li>
+  <li><a href="/fr/docs/Tools/Shader_Editor">Éditeur de Shader</a></li>
   <li>Outils de performance (toujours en production, estimé début 2014)</li>
  </ul>
  </dd>
diff --git a/files/fr/games/tutorials/2d_breakout_game_phaser/index.html b/files/fr/games/tutorials/2d_breakout_game_phaser/index.html
index 904c1b8174..78680ebc8a 100644
--- a/files/fr/games/tutorials/2d_breakout_game_phaser/index.html
+++ b/files/fr/games/tutorials/2d_breakout_game_phaser/index.html
@@ -6,46 +6,44 @@ original_slug: Games/Workflows/2D_breakout_game_Phaser
 ---
 <div>{{GamesSidebar}}</div>
 
-<div>{{IncludeSubnav("/en-US/docs/Games")}}</div>
+<div>{{IncludeSubnav("/fr/docs/Games")}}</div>
 
 <p>{{Next("Games/Workflows/2D_Breakout_game_Phaser/Initialize_the_framework")}}</p>
 
-<p class="summary">Dans ce tutoriel étape par étape, nous créons un simple jeu mobile <strong>MDN Breakout</strong> écrit en JavaScript, en utilisant le framework <a href="http://phaser.io/">Phaser</a>.</p>
-
-
+<p>Dans ce tutoriel étape par étape, nous créons un simple jeu mobile <strong>MDN Breakout</strong> écrit en JavaScript, en utilisant le framework <a href="http://phaser.io/">Phaser</a>.</p>
 
 <p>Chaque étape a des échantillons modifiables, disponibles pour jouer avec, de sorte que vous pouvez voir à quoi devraient ressembler les étapes intermédiaires. Vous apprendrez les bases de l'utilisation du framework Phaser pour implémenter les mécanismes fondamentaux du jeu comme le rendu et le mouvement des images, la détection des collisions, les mécanismes de contrôle, les fonctions d'aide spécifiques aux cadres, les animations et les interpolations, les états gagnants et perdants.</p>
 
 
 
-<p>Pour tirer le meilleur parti de cette série d'articles, vous devez déjà avoir des connaissances de base ou intermédiaires en <a href="/en-US/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript</a>. Après avoir parcouru ce tutoriel, vous devriez être capable de construire vos propres jeux Web simples avec Phaser.</p>
+<p>Pour tirer le meilleur parti de cette série d'articles, vous devez déjà avoir des connaissances de base ou intermédiaires en <a href="/fr/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript</a>. Après avoir parcouru ce tutoriel, vous devriez être capable de construire vos propres jeux Web simples avec Phaser.</p>
 
-<p><img alt="Gameplay screen from the game MDN Breakout created with Phaser where you can use your paddle to bounce the ball and destroy the brick field, with keeping the points and lives." src="https://mdn.mozillademos.org/files/11323/mdn-breakout-phaser.png" style="display: block; height: 320px; margin: 0px auto; width: 480px;"></p>
+<p><img src="mdn-breakout-phaser.png"></p>
 
 <h2 id="Détails_de_la_leçon">Détails de la leçon</h2>
 
 <p>Toutes les leçons - et les différentes versions du jeu <a href="https://end3r.github.io/Gamedev-Phaser-Content-Kit/demos/lesson16.html">MDN Breakout game</a> que nous construisons ensemble - sont <a href="https://end3r.github.io/Gamedev-Phaser-Content-Kit/demos/">disponibles sur GitHub</a> :</p>
 
 <ol>
- <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Initialize_the_framework">Initialiser le cadre</a></li>
- <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Scaling">Mise à l'échelle</a></li>
- <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Load_the_assets_and_print_them_on_screen">Charger les actifs et les imprimer à l'écran</a></li>
- <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Move_the_ball">Déplacer le ballon</a></li>
- <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Physics">Physique</a></li>
- <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Bounce_off_the_walls">Rebondir sur les murs</a></li>
- <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Player_paddle_and_controls">Pagaie et commandes du joueur</a></li>
- <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Game_over">Fin de la partie</a></li>
- <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Build_the_brick_field">Construisez le champ de briques</a></li>
- <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Collision_detection">Détection de collision</a></li>
- <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/The_score">Le score</a></li>
- <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Win_the_game">Gagnez la partie</a></li>
- <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Extra_lives">Extra vies</a></li>
- <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Animations_and_tweens">Animations et préadolescents</a></li>
- <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Buttons">Boutons</a></li>
- <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Randomizing_gameplay">Mode de jeu aléatoire</a></li>
+ <li><a href="/fr/docs/Games/Workflows/2D_Breakout_game_Phaser/Initialize_the_framework">Initialiser le cadre</a></li>
+ <li><a href="/fr/docs/Games/Workflows/2D_Breakout_game_Phaser/Scaling">Mise à l'échelle</a></li>
+ <li><a href="/fr/docs/Games/Workflows/2D_Breakout_game_Phaser/Load_the_assets_and_print_them_on_screen">Charger les actifs et les imprimer à l'écran</a></li>
+ <li><a href="/fr/docs/Games/Workflows/2D_Breakout_game_Phaser/Move_the_ball">Déplacer le ballon</a></li>
+ <li><a href="/fr/docs/Games/Workflows/2D_Breakout_game_Phaser/Physics">Physique</a></li>
+ <li><a href="/fr/docs/Games/Workflows/2D_Breakout_game_Phaser/Bounce_off_the_walls">Rebondir sur les murs</a></li>
+ <li><a href="/fr/docs/Games/Workflows/2D_Breakout_game_Phaser/Player_paddle_and_controls">Pagaie et commandes du joueur</a></li>
+ <li><a href="/fr/docs/Games/Workflows/2D_Breakout_game_Phaser/Game_over">Fin de la partie</a></li>
+ <li><a href="/fr/docs/Games/Workflows/2D_Breakout_game_Phaser/Build_the_brick_field">Construisez le champ de briques</a></li>
+ <li><a href="/fr/docs/Games/Workflows/2D_Breakout_game_Phaser/Collision_detection">Détection de collision</a></li>
+ <li><a href="/fr/docs/Games/Workflows/2D_Breakout_game_Phaser/The_score">Le score</a></li>
+ <li><a href="/fr/docs/Games/Workflows/2D_Breakout_game_Phaser/Win_the_game">Gagnez la partie</a></li>
+ <li><a href="/fr/docs/Games/Workflows/2D_Breakout_game_Phaser/Extra_lives">Extra vies</a></li>
+ <li><a href="/fr/docs/Games/Workflows/2D_Breakout_game_Phaser/Animations_and_tweens">Animations et préadolescents</a></li>
+ <li><a href="/fr/docs/Games/Workflows/2D_Breakout_game_Phaser/Buttons">Boutons</a></li>
+ <li><a href="/fr/docs/Games/Workflows/2D_Breakout_game_Phaser/Randomizing_gameplay">Mode de jeu aléatoire</a></li>
 </ol>
 
-<p>Comme note sur les parcours d'apprentissage — en commençant par le JavaScript pur est le meilleur moyen d'acquérir une solide connaissance du développement de jeux en ligne. Si vous n'êtes pas déjà familier avec le développement de jeux en JavaScript pur, nous vous suggérons de travailler d'abord avec l'homologue de cette série, <a href="/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript">2D breakout game using pure JavaScript</a>.</p>
+<p>Comme note sur les parcours d'apprentissage — en commençant par le JavaScript pur est le meilleur moyen d'acquérir une solide connaissance du développement de jeux en ligne. Si vous n'êtes pas déjà familier avec le développement de jeux en JavaScript pur, nous vous suggérons de travailler d'abord avec l'homologue de cette série, <a href="/fr/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript">2D breakout game using pure JavaScript</a>.</p>
 
 
 
@@ -54,11 +52,11 @@ original_slug: Games/Workflows/2D_breakout_game_Phaser
 
 
 <div class="note">
-<p><strong>Note</strong>: Cette série d'articles peut être utilisée comme matériel pour des ateliers pratiques de développement de jeux. Vous pouvez également utiliser la fonction <a href="https://github.com/end3r/Gamedev-Phaser-Content-Kit">Gamedev Phaser Content Kit</a> basé sur ce tutoriel si vous voulez donner une conférence sur le développement d'un jeu avec Phaser.</p>
+<p><strong>Note :</strong> Cette série d'articles peut être utilisée comme matériel pour des ateliers pratiques de développement de jeux. Vous pouvez également utiliser la fonction <a href="https://github.com/end3r/Gamedev-Phaser-Content-Kit">Gamedev Phaser Content Kit</a> basé sur ce tutoriel si vous voulez donner une conférence sur le développement d'un jeu avec Phaser.</p>
 </div>
 
 <h2 id="Prochaines_étapes">Prochaines étapes</h2>
 
-<p>Ok, commençons ! Aller à la première partie de la série — <a href="/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Initialize_the_framework">Initialize the framework</a>.</p>
+<p>Ok, commençons ! Aller à la première partie de la série — <a href="/fr/docs/Games/Workflows/2D_Breakout_game_Phaser/Initialize_the_framework">Initialize the framework</a>.</p>
 
 <p>{{Next("Games/Workflows/2D_Breakout_game_Phaser/Initialize_the_framework")}}</p>
diff --git a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.html b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.html
index c1ba0b6ffc..ba76f92846 100644
--- a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.html
+++ b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.html
@@ -18,13 +18,11 @@ original_slug: >-
 ---
 <div>{{GamesSidebar}}</div>
 
-<div>{{IncludeSubnav("/en-US/docs/Games")}}</div>
+<div>{{IncludeSubnav("/fr/docs/Games")}}</div>
 
 <p>{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Paddle_et_contr%C3%B4le_clavier")}}</p>
 
-<div class="summary">
-<p>C'est la <strong>3<sup>ème</sup> étape sur</strong> 10 de ce <a href="https://developer.mozilla.org/fr/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript">tutoriel Gamedev Canvas</a>. Vous pouvez retrouver le code source de cette leçon sur <a class="external external-icon" href="https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson01.html" rel="noopener">Gamedev-Canvas-workshop/lesson3.html</a>.</p>
-</div>
+<p>C'est la <strong>3<sup>e</sup> étape sur</strong> 10 de ce <a href="/fr/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript">tutoriel Gamedev Canvas</a>. Vous pouvez retrouver le code source de cette leçon sur <a class="external external-icon" href="https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson01.html" rel="noopener">Gamedev-Canvas-workshop/lesson3.html</a>.</p>
 
 <p>C'est agréable de voir notre balle bouger, mais elle disparaît rapidement de l'écran, ce qui limite le plaisir que nous pouvons avoir avec elle ! Pour y pallier, nous allons mettre en place une détection de collision très simple (qui sera expliquée plus tard en détail) pour faire rebondir la balle sur les quatre bords de la toile.</p>
 
@@ -35,17 +33,17 @@ original_slug: >-
  Pour faciliter les calculs, nous allons définir une variable appelée <code>ballRadius</code> qui contiendra le rayon du cercle dessiné et sera utilisée pour les calculs. Ajoutez cette variable à votre code, quelque part en dessous des déclarations de variables existantes :<br>
   </p>
 
-<pre class="brush: js notranslate">var ballRadius = 10;</pre>
+<pre class="brush: js">var ballRadius = 10;</pre>
 
 <p>Mettez maintenant à jour la ligne qui dessine la balle à l'intérieur de la fonction <code>drawBall()</code> :</p>
 
-<pre class="brush: js notranslate">ctx.arc(x, y, ballRadius, 0, Math.PI*2);</pre>
+<pre class="brush: js">ctx.arc(x, y, ballRadius, 0, Math.PI*2);</pre>
 
 <h3 id="Rebondir_en_haut_et_en_bas">Rebondir en haut et en bas</h3>
 
 <p>Il y a 4 murs en tout mais nous allons d'abord nous pencher sur le mur du haut. Nous devons, à chaque rafraichissement du canvas, regarder si la balle touche le bord du haut. Si c'est le cas, alors nous devons inverser la direction de la balle pour créer un effet de limite de zone de jeu. Il ne faut surtout pas oublier que le point d'origine est en haut à gauche ! Nous pouvons donc écrire :</p>
 
-<pre class="brush: js notranslate">if(y + dy &lt; 0) {
+<pre class="brush: js">if(y + dy &lt; 0) {
     dy = -dy;
 }</pre>
 
@@ -53,7 +51,7 @@ original_slug: >-
  <br>
  Le code ci-dessus traite du rebondissement de la balle sur le bord supérieur, alors traitons maintenant le bord inférieur :</p>
 
-<pre class="brush: js notranslate">if(y + dy &gt; canvas.height) {
+<pre class="brush: js">if(y + dy &gt; canvas.height) {
     dy = -dy;
 }</pre>
 
@@ -61,7 +59,7 @@ original_slug: >-
 
 <p>On peut rassembler les deux conditions en une grâce au "ou" qui s'écrit || en JavaScript :</p>
 
-<pre class="brush: js notranslate">if(y + dy &gt; canvas.height || y + dy &lt; 0) {
+<pre class="brush: js">if(y + dy &gt; canvas.height || y + dy &lt; 0) {
     dy = -dy;
 }</pre>
 
@@ -71,7 +69,7 @@ original_slug: >-
 
 <p>Nous avons couvert les bords supérieur et inférieur, alors pensons à ceux de gauche et de droite. C'est très similaire en fait, il suffit de répéter les instructions pour <code>x</code> au lieu de <code>y</code> :</p>
 
-<pre class="brush: js notranslate">if(x + dx &gt; canvas.width || x + dx &lt; 0) {
+<pre class="brush: js">if(x + dx &gt; canvas.width || x + dx &lt; 0) {
     dx = -dx;
 }
 
@@ -85,11 +83,11 @@ if(y + dy &gt; canvas.height || y + dy &lt; 0) {
 
 <p>Testez votre code à ce stade, et vous serez impressionné — nous avons maintenant une balle qui rebondit sur les quatre bords de la toile ! Mais nous avons un autre problème — lorsque la balle frappe un mur, elle s'y enfonce légèrement avant de changer de direction :</p>
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/10432/ball-in-wall.png" style="display: block; height: 320px; margin: 0px auto; width: 480px;"></p>
+<p><img alt="" src="ball-in-wall.png"></p>
 
 <p>C'est parce que nous calculons le point de collision entre le mur et le centre de la balle, alors que nous devrions le faire pour sa circonférence. La balle devrait rebondir juste après avoir touché le mur, et non pas lorsqu'elle est déjà à mi-chemin dans le mur, alors ajustons un peu nos déclarations pour inclure cela. Mettez à jour le dernier code que vous avez ajouté :</p>
 
-<pre class="brush: js notranslate">if(x + dx &gt; canvas.width-ballRadius || x + dx &lt; ballRadius) {
+<pre class="brush: js">if(x + dx &gt; canvas.width-ballRadius || x + dx &lt; ballRadius) {
     dx = -dx;
 }
 if(y + dy &gt; canvas.height-ballRadius || y + dy &lt; ballRadius) {
@@ -104,10 +102,8 @@ if(y + dy &gt; canvas.height-ballRadius || y + dy &lt; ballRadius) {
 
 <p>{{JSFiddleEmbed("https://jsfiddle.net/end3r/redj37dc/","","395")}}</p>
 
-<div class="note">
 <p><strong>Exercice</strong>: essayez de changer la couleur de la balle à chaque fois que celle-ci tape un mur.</p>
-</div>
 
 <h2 id="Dans_le_prochain_chapitre">Dans le prochain chapitre</h2>
 
-<p>Nous sommes maintenant arrivés au stade où notre balle se déplace et reste sur le plateau de jeu. Dans le quatrième chapitre, nous examinerons la mise en place d'une raquette contrôlable - voir<a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch/Paddle_and_keyboard_controls"> Raquette et contrôle au clavier</a>. {PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Paddle_et_contr%C3%B4le_clavier")}}</p>
+<p>Nous sommes maintenant arrivés au stade où notre balle se déplace et reste sur le plateau de jeu. Dans le quatrième chapitre, nous examinerons la mise en place d'une raquette contrôlable - voir<a href="/fr/docs/Games/Workflows/Breakout_game_from_scratch/Paddle_and_keyboard_controls"> Raquette et contrôle au clavier</a>. {PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Paddle_et_contr%C3%B4le_clavier")}}</p>
diff --git a/files/fr/games/tutorials/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 e6c4d1157b..7814fecefa 100644
--- a/files/fr/games/tutorials/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
@@ -14,21 +14,19 @@ original_slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/Build_the_brick_
 ---
 <div>{{GamesSidebar}}</div>
 
-<div>{{IncludeSubnav("/en-US/docs/Games")}}</div>
+<div>{{IncludeSubnav("/fr/docs/Games")}}</div>
 
 <p>{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Game_over", "Games/Workflows/2D_Breakout_game_pure_JavaScript/detection_colisions")}}</p>
 
-<div class="summary">
-<p>Il s'agit de la <strong>6ème étape</strong> sur 10 du <a href="/en-US/docs/Games/Workflows/Breakout_game_from_scratch">Gamedev Canvas tutorial</a>. Vous pouvez trouver le code source après avoir complété cette leçon à : <a href="https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson06.html">Gamedev-Canvas-workshop/lesson6.html</a>.</p>
-</div>
+<p>Il s'agit de la <strong>6ème étape</strong> sur 10 du <a href="/fr/docs/Games/Workflows/Breakout_game_from_scratch">Gamedev Canvas tutorial</a>. Vous pouvez trouver le code source après avoir complété cette leçon à : <a href="https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson06.html">Gamedev-Canvas-workshop/lesson6.html</a>.</p>
 
-<p>Après avoir modifié la mécanique du Gameplay, nous sommes maintenant en mesure de perdre <span class="seoSummary">—</span> Et ça c'est top car on a enfin l'impression de jouer à un vrai jeu. Cependant, ça devient vite ennuyeux si la balle ne fait que rebondir sur la raquette. Ce dont a vraiment besoin un jeu de casse-brique c'est des briques à détruire avec la balle. Et c'est ce que nous allons faire maintenant.</p>
+<p>Après avoir modifié la mécanique du Gameplay, nous sommes maintenant en mesure de perdre. Et ça c'est top car on a enfin l'impression de jouer à un vrai jeu. Cependant, ça devient vite ennuyeux si la balle ne fait que rebondir sur la raquette. Ce dont a vraiment besoin un jeu de casse-brique c'est des briques à détruire avec la balle. Et c'est ce que nous allons faire maintenant.</p>
 
 <h2 id="Mettre_en_place_les_variables_Brique">Mettre en place les variables "Brique"</h2>
 
 <p>Le principal objectif de cette leçon est d'avoir quelques lignes de code pour afficher les briques, en utilisant une boucle imbriquée qui va parcourir un tableau à deux dimensions. Cependant nous avons besoin de définir quelques variables pour stocker des informations décrivant les briques, telles que leur largeur, leur hauteur, les colonnes et les lignes, etc. Ajoutez les lignes suivantes dans votre code, sous les variables préalablement déclarées.</p>
 
-<pre class="brush: js notranslate">var brickRowCount = 3;
+<pre class="brush: js">var brickRowCount = 3;
 var brickColumnCount = 5;
 var brickWidth = 75;
 var brickHeight = 20;
@@ -41,7 +39,7 @@ var brickOffsetLeft = 30;</pre>
 <p>Nous allons placer nos briques dans un tableau à deux dimensions. Il contiendra les colonnes de briques (c), qui à leur tour contiendront les lignes de briques (r) qui chacune contiendront un objet défini par une position <code>x</code> et <code>y</code> pour afficher chaque brique sur l'écran.<br>
  Ajoutez le code suivant juste en-dessous des variables :</p>
 
-<pre class="brush: js notranslate">var bricks = [];
+<pre class="brush: js">var bricks = [];
 for(var c=0; c&lt;brickColumnCount; c++) {
     bricks[c] = [];
     for(var r=0; r&lt;brickRowCount; r++) {
@@ -55,7 +53,7 @@ for(var c=0; c&lt;brickColumnCount; c++) {
 
 <p>Maintenant créons une fonction pour parcourir toutes les briques dans le tableau et les dessiner sur l'écran. Notre code pourrait ressembler à ça :</p>
 
-<pre class="brush: js notranslate">function drawBricks() {
+<pre class="brush: js">function drawBricks() {
     for(var c=0; c&lt;brickColumnCount; c++) {
         for(var r=0; r&lt;brickRowCount; r++) {
             bricks[c][r].x = 0;
@@ -71,14 +69,14 @@ for(var c=0; c&lt;brickColumnCount; c++) {
 
 <p>Une nouvelle fois, nous parcourons les colonnes et les lignes pour attribuer une position <code>x</code> et <code>y </code>à chaque brique, et nous dessinons les briques — de taille : <code>brickWidth</code> x <code>brickHeight</code>  — sur le canevas, pour chaque itération de la boucle. Le problème est que nous les affichons toutes au même endroit, aux coordonnées <code>(0,0)</code>. Ce dont nous avons besoin d'inclure ce sont quelques calculs qui vont définir la position <code>x</code> et <code>y</code> de chaque brique à chaque passage dans la boucle :</p>
 
-<pre class="brush: js notranslate">var brickX = (c*(brickWidth+brickPadding))+brickOffsetLeft;
+<pre class="brush: js">var brickX = (c*(brickWidth+brickPadding))+brickOffsetLeft;
 var brickY = (r*(brickHeight+brickPadding))+brickOffsetTop;</pre>
 
 <p>Chaque position <code>brickX</code> est déterminée par <code>brickWidth</code> + <code>brickPadding</code>, multiplié par le nombre de colonnes, <code>c</code>, plus <code>brickOffsetLeft</code>; la logique pour <code>brickY</code> est identique excepté qu'on utilise pour les ligne les valeurs <code>r</code>,<code>brickHeight</code> et <code>brickOffsetTop</code>. Maintenant chaque brique peut être dessinée à la bonne place - en lignes et colonnes, avec un espacement entre les briques, avec un espace par rapport à la gauche et au haut du contour du canvas.</p>
 
 <p>La version finale de la fonction <code>drawBricks()</code>, après avoir assigné les valeurs <code>brickX</code> et <code>brickY</code> comme coordonnées, plutot que <code>(0,0)</code> à chaque fois, va ressembler à ceci  — ajouter la fonction ci-dessous après <code>drawPaddle()</code> :</p>
 
-<pre class="brush: js notranslate">function drawBricks() {
+<pre class="brush: js">function drawBricks() {
     for(var c=0; c&lt;brickColumnCount; c++) {
         for(var r=0; r&lt;brickRowCount; r++) {
             var brickX = (c*(brickWidth+brickPadding))+brickOffsetLeft;
@@ -98,7 +96,7 @@ var brickY = (r*(brickHeight+brickPadding))+brickOffsetTop;</pre>
 
 <p>La dernière chose à faire dans cette leçon est d'ajouter un appel à <code>drawBricks()</code> quelque part dans la fonction <code>draw()</code>, préférablement au début, entre le nettoyage du canevas et le dessin de la balle. Ajoutez la ligne suivante juste en dessous de <code>drawBall()</code> :</p>
 
-<pre class="brush: js notranslate">drawBricks();
+<pre class="brush: js">drawBricks();
 </pre>
 
 <h2 id="Comparez_votre_code">Comparez votre code</h2>
@@ -107,13 +105,11 @@ var brickY = (r*(brickHeight+brickPadding))+brickOffsetTop;</pre>
 
 <p>{{JSFiddleEmbed("https://jsfiddle.net/yumetodo/t1zqmzLp/","","395")}}</p>
 
-<div class="note">
 <p>Exercice : essayez de changer le nombre de briques dans une colonne ou dans une ligne ou bien leur position.</p>
-</div>
 
 <h2 id="Prochaines_étapes">Prochaines étapes</h2>
 
 <p>Nous avons donc maintenant des briques !  <br>
- Mais la balle n'a toujours aucune interaction avec elles. Nous allons donc changer ça dans le chapitre sept : <a href="/en-US/docs/">Détection des collisions </a></p>
+ Mais la balle n'a toujours aucune interaction avec elles. Nous allons donc changer ça dans le chapitre sept : <a href="/fr/docs/">Détection des collisions </a></p>
 
 <p>{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Game_over", "Games/Workflows/2D_Breakout_game_pure_JavaScript/detection_colisions")}}</p>
diff --git a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.html b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.html
index 3b6a96ba30..f5f8302b6a 100644
--- a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.html
+++ b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.html
@@ -13,13 +13,11 @@ original_slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/detection_colisi
 ---
 <div>{{GamesSidebar}}</div>
 
-<div>{{IncludeSubnav("/en-US/docs/Games")}}</div>
+<div>{{IncludeSubnav("/fr/docs/Games")}}</div>
 
 <p>{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Build_the_brick_field", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win")}}</p>
 
-<div class="summary">
-<p>Il s'agit de la <strong>7ème étape</strong> sur 10 du <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch">Gamedev Canvas tutorial</a>. Vous pouvez trouver le code source tel qu'il devrait être après avoir complété cette leçon à : <a href="https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson07.html">Gamedev-Canvas-workshop/lesson7.html</a>.</p>
-</div>
+<p>Il s'agit de la <strong>7ème étape</strong> sur 10 du <a href="/fr/docs/Games/Workflows/Breakout_game_from_scratch">Gamedev Canvas tutorial</a>. Vous pouvez trouver le code source tel qu'il devrait être après avoir complété cette leçon à : <a href="https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson07.html">Gamedev-Canvas-workshop/lesson7.html</a>.</p>
 
 <p>Les briques apparaissent à l'écran, mais le jeu n'est toujours pas intéressant car la balle les traverse. Nous devons ajouter une détection des collisions afin qu’elle puisse rebondir sur les briques et les casser.</p>
 
@@ -30,7 +28,7 @@ original_slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/detection_colisi
 <p><br>
  Pour commencer, nous voulons créer une fonction de détection de collision qui va parcourir toutes les briques et comparer la position de chaque brique avec les coordonnées de la balle lorsque chaque image est dessinée. Pour une meilleure lisibilité du code, nous allons définir la variable <code>b</code> pour stocker l’objet brique dans la boucle de la détection de collision:</p>
 
-<pre class="brush: js notranslate">function collisionDetection() {
+<pre class="brush: js">function collisionDetection() {
     for(var c=0; c&lt;brickColumnCount; c++) {
         for(var r=0; r&lt;brickRowCount; r++) {
             var b = bricks[c][r];
@@ -50,7 +48,7 @@ original_slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/detection_colisi
 
 <p>Écrivons cela sous forme de code:</p>
 
-<pre class="brush: js notranslate">function collisionDetection() {
+<pre class="brush: js">function collisionDetection() {
     for(var c=0; c&lt;brickColumnCount; c++) {
         for(var r=0; r&lt;brickRowCount; r++) {
             var b = bricks[c][r];
@@ -67,7 +65,7 @@ original_slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/detection_colisi
 
 <p>Le code ci-dessus fonctionnera comme vous le souhaitez et la balle changera de direction. Le problème est que les briques restent là où elles sont. Nous devons trouver un moyen de nous débarrasser de celles que nous avons déjà touchées avec la balle. Nous pouvons le faire en ajoutant un paramètre supplémentaire pour indiquer si nous voulons ou non afficher chaque brique à l’écran. Dans la partie du code où nous initialisons les briques, ajoutons une propriété <code>status</code> à chaque brique. Mettez à jour la partie suivante du code comme indiqué par la ligne en évidence:</p>
 
-<pre class="brush: js; highlight:[5] notranslate">var bricks = [];
+<pre class="brush: js; highlight:[5]">var bricks = [];
 for(var c=0; c&lt;brickColumnCount; c++) {
     bricks[c] = [];
     for(var r=0; r&lt;brickRowCount; r++) {
@@ -77,7 +75,7 @@ for(var c=0; c&lt;brickColumnCount; c++) {
 
 <p>Nous vérifierons ensuite la valeur de la propriété <code>status</code> de chaque brique dans la fonction <code>drawBricks</code><code>()</code> avant de la dessiner. Si <code>status</code> vaut <code>1</code>, dessinez-la, mais s'il vaut <code>0</code>, la balle a été touchée et nous ne voulons pas la voir sur l'écran. Mettez à jour votre fonction <code>drawBricks</code><code>()</code> comme suit:</p>
 
-<pre class="brush: js; highlight:[4,5,6,7,8,9,10,11,12,13,14] notranslate">function drawBricks() {
+<pre class="brush: js; highlight:[4,5,6,7,8,9,10,11,12,13,14]">function drawBricks() {
     for(var c=0; c&lt;brickColumnCount; c++) {
         for(var r=0; r&lt;brickRowCount; r++) {
             <strong>if(bricks[c][r].status == 1) {</strong>
@@ -99,7 +97,7 @@ for(var c=0; c&lt;brickColumnCount; c++) {
 
 <p>Nous devons maintenant impliquer la propriété de <code>status</code> de brique dans la fonction <code>collisionDetection()</code>: si la brique est active (son statut est <code>1</code>), nous vérifierons si une collision a lieu ; Si une collision se produit, nous allons définir l'état de la brique donnée sur <code>0</code> afin qu'elle ne soit pas affichée à l'écran. Mettez à jour votre fonction <code>collisionDetection()</code> comme indiqué ci-dessous:</p>
 
-<pre class="brush: js; highlight:[5,6,7,8,9,10] notranslate">function collisionDetection() {
+<pre class="brush: js; highlight:[5,6,7,8,9,10]">function collisionDetection() {
     for(var c=0; c&lt;brickColumnCount; c++) {
         for(var r=0; r&lt;brickRowCount; r++) {
             var b = bricks[c][r];
@@ -117,7 +115,7 @@ for(var c=0; c&lt;brickColumnCount; c++) {
 
 <p>La dernière chose à faire est d’ajouter un appel à la fonction <code>collisionDetection ()</code> à notre fonction <code>draw()</code> principale. Ajoutez la ligne suivante à la fonction <code>draw ()</code>, juste en dessous de l'appel <code>drawPaddle()</code>:</p>
 
-<pre class="brush: js notranslate">collisionDetection();
+<pre class="brush: js">collisionDetection();
 </pre>
 
 <h2 id="Comparez_votre_code">Comparez votre code</h2>
@@ -126,12 +124,10 @@ for(var c=0; c&lt;brickColumnCount; c++) {
 
 <p>{{JSFiddleEmbed("https://jsfiddle.net/yumetodo/mkwtxgc3/242/","","395")}}</p>
 
-<div class="note">
 <p>Exercice: changez la couleur de la balle lorsqu'elle frappe une brique.</p>
-</div>
 
 <h2 id="Prochaine_étape">Prochaine étape</h2>
 
-<p>Nous ne sommes plus très loin de la fin ;  poursuivons ! Dans le huitième chapitre, nous verrons comment<a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch/Track_the_score_and_win"> Track the score and win</a>.</p>
+<p>Nous ne sommes plus très loin de la fin ;  poursuivons ! Dans le huitième chapitre, nous verrons comment<a href="/fr/docs/Games/Workflows/Breakout_game_from_scratch/Track_the_score_and_win"> Track the score and win</a>.</p>
 
 <p>{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Build_the_brick_field", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win")}}</p>
diff --git a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.html b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.html
index 952b45f3d8..ff39e2bf9d 100644
--- a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.html
+++ b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.html
@@ -21,17 +21,15 @@ original_slug: >-
 
 <p>{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball")}}</p>
 
-<div class="summary">
-<p>C'est la <strong>1<sup>ère</sup> étape sur</strong> 10 de ce <a href="https://developer.mozilla.org/fr/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript">tutoriel Gamedev Canvas</a>. Vous pouvez retrouver le code source de cette leçon sur <a href="https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson01.html">Gamedev-Canvas-workshop/lesson1.html</a>.</p>
-</div>
+<p>C'est la <strong>1<sup>re</sup> étape sur</strong> 10 de ce <a href="/fr/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript">tutoriel Gamedev Canvas</a>. Vous pouvez retrouver le code source de cette leçon sur <a href="https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson01.html">Gamedev-Canvas-workshop/lesson1.html</a>.</p>
 
-<p><span class="seoSummary">Avant d'écrire les fonctionnalités de notre jeu, nous devons créer une structure où le jeu sera rendu. C'est possible en utilisant HTML et l'élément {{htmlelement("canvas")}}.</span></p>
+<p>Avant d'écrire les fonctionnalités de notre jeu, nous devons créer une structure où le jeu sera rendu. C'est possible en utilisant HTML et l'élément {{htmlelement("canvas")}}.</p>
 
 <h2 id="La_page_HTML_du_jeu">La page HTML du jeu</h2>
 
 <p>La structure de la page HTML est vraiment simple, car tout le jeu sera contenu dans l'élément {{htmlelement("canvas")}}. Avec votre éditeur de texte préféré, créez un nouveau fichier HTML, sauvegardez-le sous le nom <code>index.html</code>, et ajoutez-y le code suivant :</p>
 
-<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
 &lt;html&gt;
 &lt;head&gt;
     &lt;meta charset="utf-8" /&gt;
@@ -58,30 +56,30 @@ original_slug: >-
 
 <p>Pour utiliser l'élément {{htmlelement("canvas")}}, pour le rendu graphique de notre jeu, nous devons d'abord en donner la référence à JavaScript. Ajoutez le code après la balise ouvrante <code>&lt;script&gt;</code>.</p>
 
-<pre class="brush: js notranslate">var canvas = document.getElementById("myCanvas");
+<pre class="brush: js">var canvas = document.getElementById("myCanvas");
 var ctx = canvas.getContext("2d");</pre>
 
-<p>Ici nous avons enregistré la référence à l'élément {{htmlelement("canvas")}} dans une variable nommée <code>canvas</code>. <span id="result_box" lang="fr"><span>Ensuite, nous créons la variable ctx pour stocker le contexte de rendu 2D </span></span> — <span lang="fr"><span>l'outil réel que nous pouvons utiliser pour peindre sur Canvas.</span></span></p>
+<p>Ici nous avons enregistré la référence à l'élément {{htmlelement("canvas")}} dans une variable nommée <code>canvas</code>. Ensuite, nous créons la variable ctx pour stocker le contexte de rendu 2D  — l'outil réel que nous pouvons utiliser pour peindre sur Canvas.</p>
 
-<p><span id="result_box" lang="fr"><span>Voyons un exemple de code qui imprime un carré rouge sur le canevas.</span> <span>Ajoutez ceci en dessous de vos lignes précédentes de JavaScript, puis chargez votre <code>index.html</code> dans un navigateur pour l'essayer.</span></span></p>
+<p>Voyons un exemple de code qui imprime un carré rouge sur le canevas. Ajoutez ceci en dessous de vos lignes précédentes de JavaScript, puis chargez votre <code>index.html</code> dans un navigateur pour l'essayer.</p>
 
-<pre class="brush: js notranslate">ctx.beginPath();
+<pre class="brush: js">ctx.beginPath();
 ctx.rect(20, 40, 50, 50);
 ctx.fillStyle = "#FF0000";
 ctx.fill();
 ctx.closePath();</pre>
 
-<p>Toutes les instructions sont entre les méthodes  {{domxref("CanvasRenderingContext2D.beginPath()","beginPath()")}} et {{domxref("CanvasRenderingContext2D.closePath()","closePath()")}} . Nous définissons un rectangle en utilisant {{domxref("CanvasRenderingContext2D.rect()","rect()")}} : <span id="result_box" lang="fr"><span>les deux premières valeurs spécifient les coordonnées du coin supérieur gauche du rectangle tandis que les deux suivantes spécifient la largeur et la hauteur du rectangle. </span></span> <span id="result_box" lang="fr"><span>Dans notre cas, le rectangle est peint à 20 pixels du côté gauche de l'écran et à 40 pixels du haut, et a une largeur de 50 pixels et une hauteur de 50 pixels, ce qui en fait un carré parfait.</span></span> La propriété {{domxref("CanvasRenderingContext2D.fillStyle","fillStyle")}} stocke une couleur qui sera utilisée par la méthode {{domxref("CanvasRenderingContext2D.fill()","fill()")}} pour peindre le carré en rouge.</p>
+<p>Toutes les instructions sont entre les méthodes  {{domxref("CanvasRenderingContext2D.beginPath()","beginPath()")}} et {{domxref("CanvasRenderingContext2D.closePath()","closePath()")}} . Nous définissons un rectangle en utilisant {{domxref("CanvasRenderingContext2D.rect()","rect()")}} : les deux premières valeurs spécifient les coordonnées du coin supérieur gauche du rectangle tandis que les deux suivantes spécifient la largeur et la hauteur du rectangle.  Dans notre cas, le rectangle est peint à 20 pixels du côté gauche de l'écran et à 40 pixels du haut, et a une largeur de 50 pixels et une hauteur de 50 pixels, ce qui en fait un carré parfait. La propriété {{domxref("CanvasRenderingContext2D.fillStyle","fillStyle")}} stocke une couleur qui sera utilisée par la méthode {{domxref("CanvasRenderingContext2D.fill()","fill()")}} pour peindre le carré en rouge.</p>
 
-<p><span id="result_box" lang="fr"><span>Nous ne sommes pas limités aux rectangles, voici un code pour imprimer un cercle vert.</span> <span>Essayez d'ajouter ceci au bas de votre JavaScript, puis sauvegardez et rafraîchissez :</span></span></p>
+<p>Nous ne sommes pas limités aux rectangles, voici un code pour imprimer un cercle vert. Essayez d'ajouter ceci au bas de votre JavaScript, puis sauvegardez et rafraîchissez :</p>
 
-<pre class="brush: js notranslate">ctx.beginPath();
+<pre class="brush: js">ctx.beginPath();
 ctx.arc(240, 160, 20, 0, Math.PI*2, false);
 ctx.fillStyle = "green";
 ctx.fill();
 ctx.closePath();</pre>
 
-<p><span id="result_box" lang="fr"><span>Comme nous pouvons le voir, nous utilisons à nouveau les méthodes </span></span> {{domxref("CanvasRenderingContext2D.beginPath()","beginPath()")}} <span lang="fr"><span> et </span></span> {{domxref("CanvasRenderingContext2D.closePath()","closePath()")}} <span lang="fr"> <span>.</span> <span>Entre elles, la partie la plus importante du code ci-dessus est la méthode</span></span> {{domxref("CanvasRenderingContext2D.arc()","arc()")}} <span lang="fr"><span>.</span> <span>Elle comporte six paramètres :</span></span></p>
+<p>Comme nous pouvons le voir, nous utilisons à nouveau les méthodes  {{domxref("CanvasRenderingContext2D.beginPath()","beginPath()")}}  et  {{domxref("CanvasRenderingContext2D.closePath()","closePath()")}}  . Entre elles, la partie la plus importante du code ci-dessus est la méthode {{domxref("CanvasRenderingContext2D.arc()","arc()")}} . Elle comporte six paramètres :</p>
 
 <ul>
  <li>les coordonnées <code>x</code> et<code>y</code> du centre de l'arc</li>
@@ -90,17 +88,17 @@ ctx.closePath();</pre>
  <li>direction du dessin (<code>false</code><em>(faux)</em> pour le sens des aiguilles d'une montre, la valeur par défaut, ou <code>true</code> (vrai) pour le sens inverse). Ce dernier paramètre est facultatif.</li>
 </ul>
 
-<p>La propriété {{domxref("CanvasRenderingContext2D.fillStyle","fillStyle")}} semble différente par rapport à l'exemple précédent. C'est parce que, <span id="result_box" lang="fr"><span>tout comme avec CSS, la couleur peut être spécifiée sous la forme d'une valeur hexadécimale, d'un mot-clé, de la fonction <code>rgba ()</code> <em>(RVBA)</em> ou de toute autre méthode disponible pour les couleurs.</span></span></p>
+<p>La propriété {{domxref("CanvasRenderingContext2D.fillStyle","fillStyle")}} semble différente par rapport à l'exemple précédent. C'est parce que, tout comme avec CSS, la couleur peut être spécifiée sous la forme d'une valeur hexadécimale, d'un mot-clé, de la fonction <code>rgba ()</code> <em>(RVBA)</em> ou de toute autre méthode disponible pour les couleurs.</p>
 
-<p><span id="result_box" lang="fr"><span>Au lieu d'utiliser</span></span> {{domxref("CanvasRenderingContext2D.fillStyle","fillStyle")}} <span lang="fr"><span> et de remplir les formes avec des couleurs, nous pouvons utiliser</span></span> {{domxref("CanvasRenderingContext2D.stroke()","stroke()")}} <span lang="fr"><span> pour ne colorer que le contour exterieur.</span> <span>Essayez d'ajouter ce code à votre JavaScript aussi :</span></span></p>
+<p>Au lieu d'utiliser {{domxref("CanvasRenderingContext2D.fillStyle","fillStyle")}}  et de remplir les formes avec des couleurs, nous pouvons utiliser {{domxref("CanvasRenderingContext2D.stroke()","stroke()")}}  pour ne colorer que le contour exterieur. Essayez d'ajouter ce code à votre JavaScript aussi :</p>
 
-<pre class="brush: js notranslate">ctx.beginPath();
+<pre class="brush: js">ctx.beginPath();
 ctx.rect(160, 10, 100, 40);
 ctx.strokeStyle = "rgba(0, 0, 255, 0.5)";
 ctx.stroke();
 ctx.closePath();</pre>
 
-<p><span id="result_box" lang="fr"><span>Le code ci-dessus affiche un rectangle vide avec des traits bleus.</span> <span>Grâce au canal alpha de la fonction rgba (), la couleur bleue est semi transparente.</span></span></p>
+<p>Le code ci-dessus affiche un rectangle vide avec des traits bleus. Grâce au canal alpha de la fonction rgba (), la couleur bleue est semi transparente.</p>
 
 <h2 id="Comparez_votre_code">Comparez votre code</h2>
 
@@ -108,12 +106,10 @@ ctx.closePath();</pre>
 
 <p>{{JSFiddleEmbed("https://jsfiddle.net/end3r/x62h15e2/","","370")}}</p>
 
-<div class="note">
 <p><strong>Exercice </strong>: essayez de changer la taille et la couleur des formes géométriques.</p>
-</div>
 
 <h2 id="Prochaines_étapes">Prochaines étapes</h2>
 
-<p><span id="result_box" lang="fr"><span>Maintenant, nous avons mis en place le code HTML de base et avons appris un peu sur Canvas, passons au deuxième chapitre et étudions comment</span></span> <a href="https://developer.mozilla.org/fr/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Move_the_ball">Déplacer une balle sur notre jeu</a>.</p>
+<p>Maintenant, nous avons mis en place le code HTML de base et avons appris un peu sur Canvas, passons au deuxième chapitre et étudions comment <a href="/fr/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Move_the_ball">Déplacer une balle sur notre jeu</a>.</p>
 
 <p>{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball")}}</p>
diff --git a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.html b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.html
index e7e9d5dfb3..db9da728f2 100644
--- a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.html
+++ b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.html
@@ -14,25 +14,23 @@ original_slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/finitions
 ---
 <div>{{GamesSidebar}}</div>
 
-<div>{{IncludeSubnav("/en-US/docs/Games")}}</div>
+<div>{{IncludeSubnav("/fr/docs/Games")}}</div>
 
 <p>{{Previous("Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls")}}</p>
 
-<div class="summary">
-<p>C'est la dernière étape de ce <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch">tutoriel Gamedev Canvas</a>. Vous pouvez trouver le code source tel qu'il devrait être après avoir terminé cette leçon à l'adresse <a href="https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson10.html">Gamedev-Canvas-workshop/lesson10.html</a>.</p>
-</div>
+<p>C'est la dernière étape de ce <a href="/fr/docs/Games/Workflows/Breakout_game_from_scratch">tutoriel Gamedev Canvas</a>. Vous pouvez trouver le code source tel qu'il devrait être après avoir terminé cette leçon à l'adresse <a href="https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson10.html">Gamedev-Canvas-workshop/lesson10.html</a>.</p>
 
-<p><span class="seoSummary">Il y a toujours des améliorations possibles pour tous les jeux que nous créons. Par exemple, nous pouvons offrir plus d'une vie au joueur. Il peut faire une ou deux erreurs et être encore capable de terminer le jeu. Nous pourrions également améliorer le rendu visuel du jeu.</span></p>
+<p>Il y a toujours des améliorations possibles pour tous les jeux que nous créons. Par exemple, nous pouvons offrir plus d'une vie au joueur. Il peut faire une ou deux erreurs et être encore capable de terminer le jeu. Nous pourrions également améliorer le rendu visuel du jeu.</p>
 
 <h2 id="Donner_des_vies_au_joueur">Donner des vies au joueur</h2>
 
 <p>Mettre en œuvre des vies est assez simple. Ajoutons d'abord une variable pour stocker le nombre de vies à l'endroit où nous avons déclaré nos autres variables :</p>
 
-<pre class="brush: js notranslate">var lives = 3;</pre>
+<pre class="brush: js">var lives = 3;</pre>
 
 <p>L'affichage du compteur de vie est similaire à celui du compteur de points — ajoutez la fonction suivante à votre code, sous la fonction <code>drawScore()</code> :</p>
 
-<pre class="brush: js notranslate">function drawLives() {
+<pre class="brush: js">function drawLives() {
     ctx.font = "16px Arial";
     ctx.fillStyle = "#0095DD";
     ctx.fillText("Lives: "+lives, canvas.width-65, 20);
@@ -40,7 +38,7 @@ original_slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/finitions
 
 <p>Au lieu de mettre immédiatement fin au jeu, nous allons réduire le nombre de vies jusqu'à ce qu'il n'y en ait plus. Nous pouvons également réinitialiser les positions du ballon et de la raquette lorsque le joueur commence sa prochaine vie. Ainsi, dans la fonction <code>draw()</code>, remplacez les trois lignes suivantes :</p>
 
-<pre class="brush: js notranslate">alert("GAME OVER");
+<pre class="brush: js">alert("GAME OVER");
 document.location.reload();
 clearInterval(interval); // Needed for Chrome to end game</pre>
 
@@ -48,7 +46,7 @@ clearInterval(interval); // Needed for Chrome to end game</pre>
 
 <p>Nous pouvons ainsi y ajouter une logique un peu plus complexe, comme indiqué ci-dessous :</p>
 
-<pre class="brush: js notranslate">lives--;
+<pre class="brush: js">lives--;
 if(!lives) {
     alert("GAME OVER");
     document.location.reload();
@@ -68,27 +66,27 @@ else {
 
 <p>Maintenant, vous devez ajouter un appel à <code>drawLives()</code> dans la fonction <code>draw()</code> et l'ajouter sous l'appel <code>drawScore()</code>.</p>
 
-<pre class="brush: js notranslate">drawLives();
+<pre class="brush: js">drawLives();
 </pre>
 
 <h2 id="Améliorer_le_rendu_avec_requestAnimationFrame">Améliorer le rendu avec requestAnimationFrame()</h2>
 
 <p>Maintenant, travaillons sur quelque chose qui n'est pas lié à la mécanique du jeu, mais à la façon dont il est rendu. {{domxref("window.requestAnimationFrame", "requestAnimationFrame")}} aide le navigateur à rendre le jeu mieux que la cadence fixe que nous avons actuellement mise en place en utilisant {{domxref("windowTimers.setInterval()", "setInterval()")}}. Remplacez la ligne suivante :</p>
 
-<pre class="brush: js notranslate">var interval = setInterval(draw, 10);</pre>
+<pre class="brush: js">var interval = setInterval(draw, 10);</pre>
 
 <p>avec simplement :</p>
 
-<pre class="brush: js notranslate">draw();</pre>
+<pre class="brush: js">draw();</pre>
 
 <p>et supprimez chaque occurence de :</p>
 
-<pre class="brush: js notranslate">clearInterval(interval); // Needed for Chrome to end game
+<pre class="brush: js">clearInterval(interval); // Needed for Chrome to end game
 </pre>
 
 <p>Ensuite, tout en bas de la fonction <code>draw()</code> (juste avant l'accolade de fermeture), ajoutez la ligne suivante, ce qui fait que la fonction <code>draw()</code> s'appelle encore et encore :</p>
 
-<pre class="brush: js notranslate">requestAnimationFrame(draw);</pre>
+<pre class="brush: js">requestAnimationFrame(draw);</pre>
 
 <p>La fonction <code>draw()</code> est maintenant exécutée indéfiniment dans une boucle <code>requestAnimationFrame()</code>, mais au lieu de la cadence fixe de 10 millisecondes, nous redonnons le contrôle de la cadence au navigateur. Il synchronisera la cadence en conséquence et ne n'acutalisera l'affichage que lorsque cela sera nécessaire. Cela permet d'obtenir une boucle d'animation plus efficace et plus fluide que l'ancienne méthode <code>setInterval()</code>.</p>
 
@@ -98,14 +96,12 @@ else {
 
 <p>{{JSFiddleEmbed("https://jsfiddle.net/raymondjplante/dfh2tpu1/","","395")}}</p>
 
-<div class="note">
-<p><strong>Exercise</strong>: changer le nombre de vies et l'angle de rebond de la balle sur la raquette.</p>
-</div>
+<p><strong>Exercice</strong>: changer le nombre de vies et l'angle de rebond de la balle sur la raquette.</p>
 
 <h2 id="Game_over_-_pour_linstant_!">Game over - pour l'instant !</h2>
 
-<p>Vous avez terminé toutes les leçons - félicitations ! À ce stade, vous devriez maintenant connaître les bases de la manipulation des Canevas et la logique des jeux simples en 2D. C'est maintenant le bon moment pour apprendre quelques frameworks et continuer le développement du jeu. Vous pouvez découvrir le pendant de cette série, le <a href="https://developer.mozilla.org/fr/docs/Games/Workflows/2D_breakout_game_Phaser">casse-brique 2D utilisant Phaser</a> ou le <a href="https://developer.mozilla.org/fr/docs/Games/Workflows/HTML5_Gamedev_Phaser_Device_Orientation_FR">tutoriel Cyber Orb</a> construit avec Phaser. Vous pouvez également consulter la section <a href="https://developer.mozilla.org/fr/docs/Jeux">Jeux sur MDN</a> pour vous inspirer et approfondir vos connaissances.</p>
+<p>Vous avez terminé toutes les leçons - félicitations ! À ce stade, vous devriez maintenant connaître les bases de la manipulation des Canevas et la logique des jeux simples en 2D. C'est maintenant le bon moment pour apprendre quelques frameworks et continuer le développement du jeu. Vous pouvez découvrir le pendant de cette série, le <a href="/fr/docs/Games/Workflows/2D_breakout_game_Phaser">casse-brique 2D utilisant Phaser</a> ou le <a href="/fr/docs/Games/Workflows/HTML5_Gamedev_Phaser_Device_Orientation_FR">tutoriel Cyber Orb</a> construit avec Phaser. Vous pouvez également consulter la section <a href="/fr/docs/Jeux">Jeux sur MDN</a> pour vous inspirer et approfondir vos connaissances.</p>
 
-<p>Vous pouvez également revenir à la <a href="https://developer.mozilla.org/fr/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript">page d'accueil</a> de cette série de tutoriels. Amusez-vous bien à coder !</p>
+<p>Vous pouvez également revenir à la <a href="/fr/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript">page d'accueil</a> de cette série de tutoriels. Amusez-vous bien à coder !</p>
 
 <p>{{Previous("Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls")}}</p>
diff --git a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/game_over/index.html b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/game_over/index.html
index c9beb838e6..44cf0953f4 100644
--- a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/game_over/index.html
+++ b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/game_over/index.html
@@ -14,21 +14,19 @@ original_slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/Game_over
 ---
 <div>{{GamesSidebar}}</div>
 
-<div>{{IncludeSubnav("/en-US/docs/Games")}}</div>
+<div>{{IncludeSubnav("/fr/docs/Games")}}</div>
 
 <p>{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Paddle_et_contr%C3%B4le_clavier", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Build_the_brick_field")}}</p>
 
-<div class="summary">
-<p>Voici la <strong>5ème étape</strong> sur 10 du <a href="/en-US/docs/Games/Workflows/Breakout_game_from_scratch">Gamedev Canvas tutorial</a>. Vous pouvez trouver le code source comme il devrait être après avoir terminé cette leçon sur <a href="https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson05.html">Gamedev-Canvas-workshop/lesson5.html</a>.</p>
-</div>
+<p>Voici la <strong>5ème étape</strong> sur 10 du <a href="/fr/docs/Games/Workflows/Breakout_game_from_scratch">Gamedev Canvas tutorial</a>. Vous pouvez trouver le code source comme il devrait être après avoir terminé cette leçon sur <a href="https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson05.html">Gamedev-Canvas-workshop/lesson5.html</a>.</p>
 
-<p><span class="seoSummary">C'est sympa de regarder la balle rebondir contre les murs et de pouvoir bouger la raquette, mais à part ça, le jeu ne fait rien, il n'y a pas de progression ni de but final. Il serait bien, du point de vue du gameplay, de pouvoir perdre. La façon de perdre dans le casse briques est simple. Si vous loupez la balle avec le paddle et la laissez atteindre le bas de l'écran, la partie est terminée.</span></p>
+<p>C'est sympa de regarder la balle rebondir contre les murs et de pouvoir bouger la raquette, mais à part ça, le jeu ne fait rien, il n'y a pas de progression ni de but final. Il serait bien, du point de vue du gameplay, de pouvoir perdre. La façon de perdre dans le casse briques est simple. Si vous loupez la balle avec le paddle et la laissez atteindre le bas de l'écran, la partie est terminée.</p>
 
 <h2 id="Intégrer_une_fin_de_partie">Intégrer une fin de partie</h2>
 
 <p>Essayons d'intégrer une fin de partie dans le jeu . Voyons une partie du code de la troisième leçon, où nous faisions rebondir la balle contre les murs :</p>
 
-<pre class="brush: js notranslate">if(x + dx &gt; canvas.width-ballRadius || x + dx &lt; ballRadius) {
+<pre class="brush: js">if(x + dx &gt; canvas.width-ballRadius || x + dx &lt; ballRadius) {
     dx = -dx;
 }
 
@@ -42,19 +40,19 @@ if(y + dy &gt; canvas.height-ballRadius || y + dy &lt; ballRadius) {
 
 <p>Tout d'abord remplacer l'appel initial à <code>setInterval()</code></p>
 
-<pre class="notranslate">setInterval(draw, 10);
+<pre class="brush: js">setInterval(draw, 10);
 </pre>
 
 <p>par </p>
 
-<pre class="notranslate">var interval = setInterval(draw, 10);
+<pre class="brush: js">var interval = setInterval(draw, 10);
 </pre>
 
 
 
 <p>Puis remplacez la seconde instruction <code>if</code> par le code suivant:</p>
 
-<pre class="brush: js notranslate">if(y + dy &lt; ballRadius) {
+<pre class="brush: js">if(y + dy &lt; ballRadius) {
     dy = -dy;
 } else if(y + dy &gt; canvas.height-ballRadius) {
     alert("GAME OVER");
@@ -66,7 +64,7 @@ if(y + dy &gt; canvas.height-ballRadius || y + dy &lt; ballRadius) {
 
 <p>La dernière chose à faire dans cette leçon est de créer une sorte de détection de collision entre la raquette et la balle, de sorte qu'elle puisse rebondir et revenir dans la zone de jeu. La chose la plus facile à faire est de vérifier si le centre de la balle se  trouve entre les bords droit et gauche du paddle. Mettez à jour le dernier bout de code que vous venez de modifier, comme-ci dessous :</p>
 
-<pre class="brush: js notranslate">if(y + dy &lt; ballRadius) {
+<pre class="brush: js">if(y + dy &lt; ballRadius) {
     dy = -dy;
 } else if(y + dy &gt; canvas.height-ballRadius) {
     if(x &gt; paddleX &amp;&amp; x &lt; paddleX + paddleWidth) {
@@ -87,9 +85,7 @@ if(y + dy &gt; canvas.height-ballRadius || y + dy &lt; ballRadius) {
 
 <p>{{JSFiddleEmbed("https://jsfiddle.net/end3r/z4zy79fo/","","395")}}</p>
 
-<div class="note">
 <p><strong>Exercice: Faites en sorte que la balle accélère quand elle touche la raquette.</strong></p>
-</div>
 
 <h2 id="Prochaine_étape">Prochaine étape</h2>
 
diff --git a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/index.html b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/index.html
index fb0bca3bbe..cc9fed3143 100644
--- a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/index.html
+++ b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/index.html
@@ -17,39 +17,39 @@ original_slug: Games/Workflows/2D_Breakout_game_pure_JavaScript
 
 <p>{{Next("Games/Workflows/2D_Breakout_game_pure_JavaScript/creer_element_canvas_et_afficher")}}</p>
 
-<p class="summary">Dans ce tutoriel, nous allons créer pas à pas un jeu de casse-briques MDN, créé entièrement avec JavaScript et sans framework, et rendu avec la balise HTML5 {{htmlelement("canvas")}}.</p>
+<p>Dans ce tutoriel, nous allons créer pas à pas un jeu de casse-briques MDN, créé entièrement avec JavaScript et sans framework, et rendu avec la balise HTML5 {{htmlelement("canvas")}}.</p>
 
 <p>Chaque étape est modifiable en direct, et disponible en test pour que vous puissiez voir ce à quoi les étapes intermédiaires devraient ressembler. Vous apprendrez les bases d'utilisations de l'élément {{htmlelement("canvas")}} pour implémenter des mécaniques de base du jeu vidéo, comme charger et déplacer des images, les détections de collisions, les mécanismes de contrôle, et les conditions de victoire/défaite.</p>
 
-<p>Pour comprendre la plupart des articles de ce tutoriel, vous devez déjà avoir un niveau basique ou intermédiaire en <a href="/en-US/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript</a>. À la fin de ce tutoriel, vous serez capable de créer vos propres jeux Web.</p>
+<p>Pour comprendre la plupart des articles de ce tutoriel, vous devez déjà avoir un niveau basique ou intermédiaire en <a href="/fr/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript</a>. À la fin de ce tutoriel, vous serez capable de créer vos propres jeux Web.</p>
 
-<p><img alt="Gameplay screen from the game MDN Breakout where you can use your paddle to bounce the ball and destroy the brick field, with keeping the score and lives." src="https://mdn.mozillademos.org/files/10383/mdn-breakout-gameplay.png" style="display: block; height: 320px; margin: 0px auto; width: 480px;"></p>
+<p><img src="mdn-breakout-gameplay.png"></p>
 
 <h2 id="Détail_de_la_leçon">Détail de la leçon</h2>
 
 <p>Toutes les leçons — et les différentes versions de ce <a href="http://breakout.enclavegames.com/lesson10.html">jeu de casse-brique MDN</a> que nous allons créer ensemble — sont <a href="https://github.com/end3r/Canvas-gamedev-workshop">disponibles sur GitHub</a> :</p>
 
 <ol>
- <li><a href="https://developer.mozilla.org/fr/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/creer_element_canvas_et_afficher">Créer l'élément canvas et dessiner dessus</a></li>
- <li><a href="https://developer.mozilla.org/fr/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Move_the_ball">Déplacer la balle</a></li>
- <li><a href="https://developer.mozilla.org/fr/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls">Rebondir sur les murs</a></li>
- <li><a href="https://developer.mozilla.org/fr/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls">Contrôles clavier</a></li>
- <li><a href="https://developer.mozilla.org/fr/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Game_over">Jeu terminé</a></li>
- <li><a href="https://developer.mozilla.org/fr/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Build_the_brick_field">Construire le mur de briques</a></li>
- <li><a href="https://developer.mozilla.org/fr/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Collision_detection">Détection des collisions</a></li>
- <li><a href="https://developer.mozilla.org/fr/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win">Afficher le score et gagner</a></li>
- <li><a href="https://developer.mozilla.org/fr/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Mouse_controls">Contrôles souris</a></li>
- <li><a href="https://developer.mozilla.org/fr/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Finishing_up">Finir</a></li>
+ <li><a href="/fr/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/creer_element_canvas_et_afficher">Créer l'élément canvas et dessiner dessus</a></li>
+ <li><a href="/fr/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Move_the_ball">Déplacer la balle</a></li>
+ <li><a href="/fr/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls">Rebondir sur les murs</a></li>
+ <li><a href="/fr/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls">Contrôles clavier</a></li>
+ <li><a href="/fr/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Game_over">Jeu terminé</a></li>
+ <li><a href="/fr/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Build_the_brick_field">Construire le mur de briques</a></li>
+ <li><a href="/fr/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Collision_detection">Détection des collisions</a></li>
+ <li><a href="/fr/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win">Afficher le score et gagner</a></li>
+ <li><a href="/fr/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Mouse_controls">Contrôles souris</a></li>
+ <li><a href="/fr/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Finishing_up">Finir</a></li>
 </ol>
 
 <p>Commencer avec du Javascript pur et dur est le meilleur moyen d'acquérir des connaissances de développement de jeu web. Après ceci, vous pourrez prendre n'importe quel "framework" et l'utiliser pour vos projets. Les "frameworks" sont des outils créés avec le langage Javascript ; donc, même si vous voulez travailler avec ces derniers, c'est toujours bon d'apprendre le langage lui-même pour savoir ce qu'il se passe exactement. Les "frameworks" améliorent la vitesse de développement et aident à traiter les parties les moins intéressantes du jeu, mais si quelque chose ne fonctionne pas comme prévu, vous pouvez toujours essayer de déboguer ou juste écrire vos propre solutions en Javascript. </p>
 
 <div class="note">
-<p><strong>Note </strong>: Si vous êtes intéressé par l'apprentissage du développement un jeu web 2D avec un "framework", consultez la série <a href="https://developer.mozilla.org/fr/docs/Games/Tutorials/2D_breakout_game_Phaser">Jeu de casse-tête 2D avec Phaser</a>.</p>
+<p><strong>Note :</strong> Si vous êtes intéressé par l'apprentissage du développement un jeu web 2D avec un "framework", consultez la série <a href="/fr/docs/Games/Tutorials/2D_breakout_game_Phaser">Jeu de casse-tête 2D avec Phaser</a>.</p>
 </div>
 
 <div class="note">
-<p><strong>Note </strong>: <span id="result_box" lang="fr"><span>Cette série d'articles peut être utilisée comme matériel pour des ateliers pratiques de développement de jeux.</span> <span>Vous pouvez également utiliser le</span></span> <a href="https://github.com/end3r/Gamedev-Canvas-Content-Kit">Gamedev Canvas Content Kit</a> basé sur ce tutoriel si vous voulez faire une présentation <span id="result_box" lang="fr"><span>sur le développement de jeux en général</span></span> .</p>
+<p><strong>Note :</strong> Cette série d'articles peut être utilisée comme matériel pour des ateliers pratiques de développement de jeux. Vous pouvez également utiliser le <a href="https://github.com/end3r/Gamedev-Canvas-Content-Kit">Gamedev Canvas Content Kit</a> basé sur ce tutoriel si vous voulez faire une présentation sur le développement de jeux en général .</p>
 </div>
 
 <h2 id="Prochaines_étapes">Prochaines étapes</h2>
diff --git a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.html b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.html
index 08d2ab62b6..9220f1a557 100644
--- a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.html
+++ b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.html
@@ -14,27 +14,25 @@ original_slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls
 ---
 <div>{{GamesSidebar}}</div>
 
-<div>{{IncludeSubnav("/en-US/docs/Games")}}</div>
+<div>{{IncludeSubnav("/fr/docs/Games")}}</div>
 
 <p>{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win", "Games/Workflows/2D_Breakout_game_pure_JavaScript/finitions")}}</p>
 
-<div class="summary">
-<p>C'est la <strong><sup>9ème</sup> étape sur</strong> 10 de ce <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch">tutoriel Gamedev Canvas</a>. Vous pouvez trouver le code source tel qu'il devrait être après avoir terminé cette leçon à l'adresse <a href="https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson09.html">Gamedev-Canvas-workshop/lesson9.html</a>.</p>
-</div>
+<p>C'est la <strong>9<sup>e</sup> étape sur</strong> 10 de ce <a href="/fr/docs/Games/Workflows/Breakout_game_from_scratch">tutoriel Gamedev Canvas</a>. Vous pouvez trouver le code source tel qu'il devrait être après avoir terminé cette leçon à l'adresse <a href="https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson09.html">Gamedev-Canvas-workshop/lesson9.html</a>.</p>
 
-<p><span class="seoSummary">Le jeu lui-même est en fait terminé, alors travaillons à le peaufiner. Nous avons déjà ajouté des commandes au clavier, mais nous pourrions facilement ajouter des commandes à la souris.</span></p>
+<p>Le jeu lui-même est en fait terminé, alors travaillons à le peaufiner. Nous avons déjà ajouté des commandes au clavier, mais nous pourrions facilement ajouter des commandes à la souris.</p>
 
 <h2 id="Détecter_les_mouvements_de_la_souris">Détecter les mouvements de la souris</h2>
 
 <p>Il est encore plus facile de détecter les mouvements de la souris que les pressions sur les touches : il suffit d'écouter l'évènement {{event("mousemove")}}. Ajouter la ligne suivante au même endroit que les autres écouteurs d'événement, juste en dessous de <code>l'évènement keyup</code> :</p>
 
-<pre class="brush: js notranslate">document.addEventListener("mousemove", mouseMoveHandler, false);</pre>
+<pre class="brush: js">document.addEventListener("mousemove", mouseMoveHandler, false);</pre>
 
 <h2 id="Lier_le_mouvement_de_la_raquette_au_mouvement_de_la_souris">Lier le mouvement de la raquette au mouvement de la souris</h2>
 
 <p>Nous pouvons mettre à jour la position de la raquette en fonction des coordonnées du pointeur — c'est exactement ce que fera la fonction de manipulation suivante. Ajoutez la fonction ci-dessous à votre code, sous la dernière ligne que vous avez ajoutée :</p>
 
-<pre class="brush: js notranslate">function mouseMoveHandler(e) {
+<pre class="brush: js">function mouseMoveHandler(e) {
     var relativeX = e.clientX - canvas.offsetLeft;
     if(relativeX &gt; 0 &amp;&amp; relativeX &lt; canvas.width) {
         paddleX = relativeX - paddleWidth/2;
@@ -51,12 +49,10 @@ original_slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls
 
 <p>{{JSFiddleEmbed("https://jsfiddle.net/raymondjplante/vt7y5hcp/","","395")}}</p>
 
-<div class="summary">
 <p>Exercice : ajustez les limites du mouvement de la raquette, de sorte que la raquette entière soit visible sur les deux bords du canevas au lieu de seulement la moitié.</p>
-</div>
 
 <h2 id="Prochaine_étape">Prochaine étape</h2>
 
-<p>Maintenant que nous avons un jeu complet, nous allons terminer notre série de leçons avec quelques petites retouches supplémentaires — <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch/Finishing_up">Finitions</a>.</p>
+<p>Maintenant que nous avons un jeu complet, nous allons terminer notre série de leçons avec quelques petites retouches supplémentaires — <a href="/fr/docs/Games/Workflows/Breakout_game_from_scratch/Finishing_up">Finitions</a>.</p>
 
 <p>{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win", "Games/Workflows/2D_Breakout_game_pure_JavaScript/finitions")}}</p>
diff --git a/files/fr/games/tutorials/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 3603260996..31b96ea7d8 100644
--- a/files/fr/games/tutorials/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
@@ -18,11 +18,9 @@ original_slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball
 
 <p>{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/creer_element_canvas_et_afficher", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Faire_rebondir_la_balle_sur_les_murs")}}</p>
 
-<div class="summary">
 <p>Voici la deuxième étape de ce <a href="/fr/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript">tutoriel</a>. Vous pouvez retrouver le code source de cette leçon sur <a href="https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson02.html">Gamedev-Canvas-workshop/lesson2.html</a>.</p>
-</div>
 
-<p><span class="seoSummary">Nous avons vu dans l'article précédent comment dessiner une balle, maintenant déplaçons là. Techniquement, nous afficherons la balle sur l'écran, puis nous l'effacerons et ensuite nous la repeindrons dans une position légèrement différente et ceci à chaque image afin de donner l'impression d'un mouvement (tout comme le fonctionnement du mouvement dans les films).</span></p>
+<p>Nous avons vu dans l'article précédent comment dessiner une balle, maintenant déplaçons là. Techniquement, nous afficherons la balle sur l'écran, puis nous l'effacerons et ensuite nous la repeindrons dans une position légèrement différente et ceci à chaque image afin de donner l'impression d'un mouvement (tout comme le fonctionnement du mouvement dans les films).</p>
 
 <h2 id="Définir_une_boucle_de_dessin">Définir une boucle de dessin</h2>
 
@@ -30,14 +28,14 @@ original_slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball
 
 <p>Supprimez tout le JavaScript que vous avez actuellement dans votre HTML à l'exception des deux premières lignes puis ajoutez ce qui suit en dessous de ces lignes. La fonction <code>draw()</code> sera exécutée toutes les 10 millisecondes (environ) grâce à <code>setInterval</code> :</p>
 
-<pre class="brush: js notranslate">function draw() {
+<pre class="brush: js">function draw() {
   // le code pour dessiner
 }
 setInterval(draw, 10);</pre>
 
 <p>Grâce à la nature infinie de <code>setInterval</code>, la fonction <code>draw()</code> sera appelée toutes les 10 millisecondes, sans arrêt jusqu'à ce que nous y mettions un terme. Maintenant, dessinons la balle — ajoutons le code ci-dessous à notre fonction <code>draw()</code> :</p>
 
-<pre class="brush: js notranslate">ctx.beginPath();
+<pre class="brush: js">ctx.beginPath();
 ctx.arc(50, 50, 10, 0, Math.PI*2);
 ctx.fillStyle = "#0095DD";
 ctx.fill();
@@ -52,13 +50,13 @@ ctx.closePath();
 
 <p>Ajoutez d'abord les deux lignes suivantes au-dessus de votre fonction <code>draw()</code> pour définir <code>x</code> et <code>y</code> :</p>
 
-<pre class="brush: js notranslate">var x = canvas.width/2;
+<pre class="brush: js">var x = canvas.width/2;
 var y = canvas.height-30;
 </pre>
 
 <p>Ensuite, mettez à jour la fonction <code>draw()</code> afin d'utiliser les variables x et y dans la méthode {{domxref("CanvasRenderingContext2D.arc()","arc()")}} , comme indiqué dans la ligne mise en évidence ci-dessous :</p>
 
-<pre class="brush: js; highlight:[3] notranslate">function draw() {
+<pre class="brush: js; highlight:[3]">function draw() {
   ctx.beginPath();
 <strong>  ctx.arc(x, y, 10, 0, Math.PI*2);</strong>
   ctx.fillStyle = "#0095DD";
@@ -69,13 +67,13 @@ var y = canvas.height-30;
 
 <p>Nous voici à la partie importante : nous voulons ajouter une valeur à <code>x</code> et <code>y</code> après que chaque image ait été dessinée afin de faire croire que la balle bouge. On définit ces valeurs comme <code>dx</code> et <code>dy</code> avec comme valeurs respectives 2 et -2. Ajoutez le code après la déclaration des variables <code>x</code> et <code>y</code> :</p>
 
-<pre class="brush: js notranslate">var dx = 2;
+<pre class="brush: js">var dx = 2;
 var dy = -2;
 </pre>
 
 <p>La dernière chose à faire est de mettre à jour <code>x</code> et <code>y</code> avec nos variables <code>dx</code> et  <code>dy</code> sur chaque image, de sorte que la balle sera peinte dans la nouvelle position à chaque nouvelle image. Ajoutez les deux nouvelles lignes, indiquées ci-dessous, à votre fonction <code>draw()</code> :</p>
 
-<pre class="brush: js notranslate">function draw() {
+<pre class="brush: js">function draw() {
   ctx.beginPath();
   ctx.arc(x, y, 10, 0, Math.PI*2);
   ctx.fillStyle = "#0095DD";
@@ -87,7 +85,7 @@ var dy = -2;
 
 <p>Enregistrez à nouveau votre code et essayez-le dans votre navigateur. Vous devriez avoir le résultat suivant : ça fonctionne mais on a une trainée laissée par la balle derrière elle :</p>
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/10430/ball-trail.png" style="display: block; height: 320px; margin: 0px auto; width: 480px;"></p>
+<p><img alt="" src="ball-trail.png"></p>
 
 <h2 id="Effacer_le_canevas_avant_chaque_image_frame">Effacer le canevas avant chaque image (<em>frame</em>)</h2>
 
@@ -95,7 +93,7 @@ var dy = -2;
 
 <p>Ajoutez la nouvelle ligne en surbrillance ci-dessous à la fonction <code>draw()</code> :</p>
 
-<pre class="brush: js; highlight:[2] notranslate">function draw() {
+<pre class="brush: js; highlight:[2]">function draw() {
 <strong>  ctx.clearRect(0, 0, canvas.width, canvas.height);</strong>
   ctx.beginPath();
   ctx.arc(x, y, 10, 0, Math.PI*2);
@@ -115,7 +113,7 @@ var dy = -2;
 
 <p>Remplacez la fonction <code>draw()</code> existante par les deux fonctions suivantes :</p>
 
-<pre class="brush: js notranslate">function drawBall() {
+<pre class="brush: js">function drawBall() {
   ctx.beginPath();
   ctx.arc(x, y, 10, 0, Math.PI*2);
   ctx.fillStyle = "#0095DD";
@@ -136,9 +134,7 @@ function draw() {
 
 <p>{{JSFiddleEmbed("https://jsfiddle.net/end3r/3x5foxb1/","","395")}}</p>
 
-<div class="summary">
 <p>Exercice : Essayez de changer la vitesse de la balle en mouvement ou la direction dans laquelle elle se déplace.</p>
-</div>
 
 <h2 id="Prochaines_étapes">Prochaines étapes</h2>
 
diff --git a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.html b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.html
index 7663c6cf0c..27c2478019 100644
--- a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.html
+++ b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.html
@@ -16,27 +16,25 @@ original_slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/Paddle_et_contr�
 ---
 <div>{{GamesSidebar}}</div>
 
-<div>{{IncludeSubnav("/en-US/docs/Games")}}</div>
+<div>{{IncludeSubnav("/fr/docs/Games")}}</div>
 
 <p>{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Faire_rebondir_la_balle_sur_les_murs", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Game_over")}}</p>
 
-<div class="summary">
-<p>C'est la <strong>4<sup>ème</sup> étape sur</strong> 10 de ce <a href="https://developer.mozilla.org/fr/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript">tutoriel Gamedev Canvas</a>. Vous pouvez retrouver le code source de cette leçon sur <a class="external external-icon" href="https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson04.html" rel="noopener">Gamedev-Canvas-workshop/lesson4.html</a>.</p>
-</div>
+<p>C'est la <strong>4<sup>e</sup> étape sur</strong> 10 de ce <a href="/fr/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript">tutoriel Gamedev Canvas</a>. Vous pouvez retrouver le code source de cette leçon sur <a class="external external-icon" href="https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson04.html" rel="noopener">Gamedev-Canvas-workshop/lesson4.html</a>.</p>
 
-<p><span class="seoSummary">La balle rebondit librement partout et vous pourriez la regarder indéfiniment... Mais il n'y a pas d'interaction avec le joueur. Ce n'est pas un jeu si vous ne pouvez pas le contrôler ! Nous allons donc ajouter une interaction avec le joueur : une raquette contrôlable.</span></p>
+<p>La balle rebondit librement partout et vous pourriez la regarder indéfiniment... Mais il n'y a pas d'interaction avec le joueur. Ce n'est pas un jeu si vous ne pouvez pas le contrôler ! Nous allons donc ajouter une interaction avec le joueur : une raquette contrôlable.</p>
 
 <h2 id="Créer_une_raquette_pour_frapper_la_balle">Créer une raquette pour frapper la balle</h2>
 
 <p>Il nous faut donc une raquette pour frapper la balle. Définissons quelques variables pour cela. Ajoutez les variables suivantes en haut de votre code, près de vos autres variables :</p>
 
-<pre class="brush: js notranslate">var paddleHeight = 10;
+<pre class="brush: js">var paddleHeight = 10;
 var paddleWidth = 75;
 var paddleX = (canvas.width-paddleWidth)/2;</pre>
 
 <p>Ici, nous définissons la hauteur et la largeur de la raquette et son point de départ sur l'axe des x pour l'utiliser dans les calculs plus loin dans le code. Créons une fonction qui dessinera la raquette sur l'écran. Ajoutez ce qui suit juste en dessous de votre fonction <code>drawBall()</code> :</p>
 
-<pre class="brush: js notranslate">function drawPaddle() {
+<pre class="brush: js">function drawPaddle() {
     ctx.beginPath();
     ctx.rect(paddleX, canvas.height-paddleHeight, paddleWidth, paddleHeight);
     ctx.fillStyle = "#0095DD";
@@ -58,17 +56,17 @@ var paddleX = (canvas.width-paddleWidth)/2;</pre>
 
 <p>L'état des touches peut être mémorisé dans des variables booléennes comme dans l'exemple ci-dessous. Ajoutez ces lignes près de vos variables :</p>
 
-<pre class="brush: js notranslate">var rightPressed = false;
+<pre class="brush: js">var rightPressed = false;
 var leftPressed = false;</pre>
 
 <p>La valeur par défaut pour les deux est fausse car au début, car les touches ne sont pas enfoncés. Pour être informé des appuis sur les touches, nous allons mettre en place deux écouteurs d'événements. Ajoutez les lignes suivantes juste au-dessus de la ligne setInterval() au bas de votre JavaScript :</p>
 
-<pre class="brush: js notranslate">document.addEventListener("keydown", keyDownHandler, false);
+<pre class="brush: js">document.addEventListener("keydown", keyDownHandler, false);
 document.addEventListener("keyup", keyUpHandler, false);</pre>
 
 <p>Lorsque l'événement <code>keydown</code> est déclenché par l'appui d'une des touches de votre clavier (lorsqu'elles sont enfoncées), la fonction <code>keyDownHandler()</code> est exécutée. Le même principe est vrai pour le deuxième écouteur : les événements <code>keyup</code> activent la fonction <code>keyUpHandler()</code> (lorsque les touches cessent d'être enfoncées). Ajoutez ces lignes à votre code, sous les lignes <code>addEventListener()</code> :</p>
 
-<pre class="brush: js notranslate">function keyDownHandler(e) {
+<pre class="brush: js">function keyDownHandler(e) {
     if(e.key == "Right" || e.key == "ArrowRight") {
         rightPressed = true;
     }
@@ -94,7 +92,7 @@ function keyUpHandler(e) {
 
 <p>Nous avons maintenant mis en place les variables pour stocker les informations sur les touches pressées, les écouteurs d'événements et les fonctions associées. Ensuite, nous allons entrer dans le code pour utiliser tout ce que nous venons de configurer et pour déplacer la palette à l'écran. Dans la fonction <code>draw()</code>, nous vérifierons si les touches gauche ou droite sont pressées lors du rendu de chaque image. Notre code pourrait ressembler à ceci :</p>
 
-<pre class="brush: js notranslate">if(rightPressed) {
+<pre class="brush: js">if(rightPressed) {
     paddleX += 7;
 }
 else if(leftPressed) {
@@ -103,7 +101,7 @@ else if(leftPressed) {
 
 <p>Si la touche gauche est enfoncée, la raquette se déplacera de sept pixels vers la gauche, et si la droite est enfoncé, la raquette se déplacera de sept pixels vers la droite. Cela fonctionne actuellement, mais la raquette disparaît du bord du canevas si nous maintenons l'une ou l'autre des touches trop longtemps enfoncée. Nous pourrions améliorer cela et déplacer la raquette uniquement dans les limites du canevas en changeant le code comme ceci :</p>
 
-<pre class="brush: js notranslate">if(rightPressed) {
+<pre class="brush: js">if(rightPressed) {
     paddleX += 7;
     if (paddleX + paddleWidth &gt; canvas.width){
         paddleX = canvas.width - paddleWidth;
@@ -122,7 +120,7 @@ else if(leftPressed) {
  <br>
  Il ne reste plus qu'à appeler la fonction <code>drawPaddle()</code> depuis la fonction <code>draw()</code>, pour l'afficher réellement à l'écran. Ajoutez la ligne suivante à l'intérieur de votre fonction <code>draw()</code>, juste en dessous de la ligne qui appelle <code>drawBall()</code> :</p>
 
-<pre class="brush: js notranslate">drawPaddle();
+<pre class="brush: js">drawPaddle();
 </pre>
 
 <h2 id="Comparez_votre_code">Comparez votre code</h2>
@@ -131,12 +129,10 @@ else if(leftPressed) {
 
 <p>{{JSFiddleEmbed("https://jsfiddle.net/end3r/tgn3zscj/","","395")}}</p>
 
-<div class="note">
 <p><strong>Exercice: </strong>faites aller la raquette plus vite ou plus lentement, ou changez sa taille.</p>
-</div>
 
 <h2 id="Dans_le_prochain_chapitre">Dans le prochain chapitre</h2>
 
-<p>Maintenant, nous avons quelque chose qui ressemble à un jeu. Le seul problème, c'est que vous pouvez continuer à frapper la balle avec la raquette indéfiniment. Tout cela va changer dans le cinquième chapitre, <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch/Game_over">Game over</a>, lorsque nous commencerons à ajouter un état de fin de partie pour notre jeu.</p>
+<p>Maintenant, nous avons quelque chose qui ressemble à un jeu. Le seul problème, c'est que vous pouvez continuer à frapper la balle avec la raquette indéfiniment. Tout cela va changer dans le cinquième chapitre, <a href="/fr/docs/Games/Workflows/Breakout_game_from_scratch/Game_over">Game over</a>, lorsque nous commencerons à ajouter un état de fin de partie pour notre jeu.</p>
 
 <p>{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Faire_rebondir_la_balle_sur_les_murs", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Game_over")}}</p>
diff --git a/files/fr/games/tutorials/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 7a7026bae2..55ed6a8aa3 100644
--- a/files/fr/games/tutorials/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
@@ -6,13 +6,11 @@ original_slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_
 ---
 <div>{{GamesSidebar}}</div>
 
-<div>{{IncludeSubnav("/en-US/docs/Games")}}</div>
+<div>{{IncludeSubnav("/fr/docs/Games")}}</div>
 
 <p>{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/detection_colisions", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls")}}</p>
 
-<div class="summary">
-<p>Ceci est la <strong>8<sup>ème</sup></strong> étape de ce <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch">tutoriel Gamedev Canvas</a>. Vous pouvez trouver le code source tel qu'il devrait être après avoir terminé cette leçon à : <a href="https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson08.html">Gamedev-Canvas-workshop/lesson8.html</a>.</p>
-</div>
+<p>Ceci est la <strong>8<sup>e</sup></strong> étape de ce <a href="/fr/docs/Games/Workflows/Breakout_game_from_scratch">tutoriel Gamedev Canvas</a>. Vous pouvez trouver le code source tel qu'il devrait être après avoir terminé cette leçon à : <a href="https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson08.html">Gamedev-Canvas-workshop/lesson8.html</a>.</p>
 
 <p>Détruire les briques est vraiment cool, mais pour être encore meilleur le jeu pourrait attribuer des points pour chaque brique touchée et compter le score total.</p>
 
@@ -20,11 +18,11 @@ original_slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_
 
 <p>Si vous pouvez voir votre score durant le jeu, vous pourrez impressioner vos amis. Vous avez besoin d'une variable pour stocker le score. Ajoutez ce qui suit dans votre JavaScript après le reste de vos variables : </p>
 
-<pre class="brush: js notranslate">var score = 0;</pre>
+<pre class="brush: js">var score = 0;</pre>
 
 <p>Vous avez aussi besoin d'une fonction <code>drawScore()</code>, pour créer et mettre à jour l'affichage du score. Ajoutez ce qui suit après la fonction de détection de collision <code>collisionDetection()</code>:</p>
 
-<pre class="brush: js notranslate">function drawScore() {
+<pre class="brush: js">function drawScore() {
     ctx.font = "16px Arial";
     ctx.fillStyle = "#0095DD";
     ctx.fillText("Score: "+score, 8, 20);
@@ -34,7 +32,7 @@ original_slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_
 
 <p>Pour attribuer le score à chaque collision avec une brique, ajoutez une ligne à la fonction <code>collisionDetection()</code> afin d'incrémenter la valeur de la variable score à chaque détection d'une collision. Ajoutez à votre code la ligne mise en évidence ci-dessous :</p>
 
-<pre class="brush: js; highlight:[9] notranslate">function collisionDetection() {
+<pre class="brush: js; highlight:[9]">function collisionDetection() {
     for(var c=0; c&lt;brickColumnCount; c++) {
         for(var r=0; r&lt;brickRowCount; r++) {
             var b = bricks[c][r];
@@ -51,13 +49,13 @@ original_slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_
 
 <p>Appelez la fonction <code>drawScore()</code> dans la fonction <code>draw()</code> pour garder le score à jour à chaque nouvelle frame — ajoutez la ligne suivante dans la fonction <code>draw()</code>, en dessous de l'appel à <code>drawPaddle()</code> :</p>
 
-<pre class="brush: js notranslate">drawScore();</pre>
+<pre class="brush: js">drawScore();</pre>
 
 <h2 id="Ajoutez_un_message_de_victoire_lorsque_toutes_les_briques_ont_été_détruites">Ajoutez un message de victoire lorsque toutes les briques ont été détruites</h2>
 
 <p>Le comptage des points fonctionne bien, mais vous ne les compterez pas indéfiniment. Alors qu'en est-il du score lorsque toutes les briques ont été détruites ? Après tout c'est l'objectif principal du jeu. Vous devez donc afficher un message de victoire si toutes les briques ont été détruites. Ajoutez la section mise en évidence dans votre fonction <code>collisionDetection()</code>:</p>
 
-<pre class="brush: js; highlight:[10,11,12,13] notranslate">function collisionDetection() {
+<pre class="brush: js; highlight:[10,11,12,13]">function collisionDetection() {
     for(var c=0; c&lt;brickColumnCount; c++) {
         for(var r=0; r&lt;brickRowCount; r++) {
             var b = bricks[c][r];
@@ -85,12 +83,10 @@ original_slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_
 
 <p>{{JSFiddleEmbed("https://jsfiddle.net/raymondjplante/b3z2Lpu9/","","395")}}</p>
 
-<div class="note">
 <p><strong>Exercice</strong>: Ajoutez plus de points par brique touchée et indiquez le nombre de points gagnés dans la boîte d'alerte de fin de partie.</p>
-</div>
 
 <h2 id="Prochaine_étape">Prochaine étape</h2>
 
-<p>Le jeu est plutôt réussi à ce stade. Dans la prochaine leçon, vous le rendrez plus attraynt en ajoutant le <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch/Mouse_controls">contrôle à la souris</a>.</p>
+<p>Le jeu est plutôt réussi à ce stade. Dans la prochaine leçon, vous le rendrez plus attraynt en ajoutant le <a href="/fr/docs/Games/Workflows/Breakout_game_from_scratch/Mouse_controls">contrôle à la souris</a>.</p>
 
 <p>{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/detection_colisions", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls")}}</p>
diff --git a/files/fr/games/tutorials/html5_gamedev_phaser_device_orientation/index.html b/files/fr/games/tutorials/html5_gamedev_phaser_device_orientation/index.html
index ddf183756f..50ed7d56f1 100644
--- a/files/fr/games/tutorials/html5_gamedev_phaser_device_orientation/index.html
+++ b/files/fr/games/tutorials/html5_gamedev_phaser_device_orientation/index.html
@@ -6,13 +6,13 @@ original_slug: Games/Workflows/HTML5_Gamedev_Phaser_Device_Orientation_FR
 ---
 <div>{{GamesSidebar}}</div><p>{{IncludeSubnav("/fr/docs/Jeux")}}  </p>
 
-<p class="summary">Dans ce tutoriel, <span id="result_box" lang="fr"><span>nous allons passer par le processus de construction d'un jeu mobile HTML5 qui utilise les API </span></span> <a href="https://developer.mozilla.org/fr/Apps/Fundamentals/gather_and_modify_data/responding_to_device_orientation_changes">Device Orientation</a>  et <a href="https://developer.mozilla.org/fr/docs/Web/API/Vibration_API">Vibration</a>   <span id="result_box" lang="fr"><span>pour améliorer le "gameplay" et est construit avec le </span></span>"framework" <a class="external external-icon" href="http://phaser.io/">Phaser </a>. <span id="result_box" lang="fr"><span>La connaissance JavaScript de base est recommandée pour tirer le meilleur parti de ce tutoriel.</span></span></p>
+<p>Dans ce tutoriel, nous allons passer par le processus de construction d'un jeu mobile HTML5 qui utilise les API  <a href="/fr/Apps/Fundamentals/gather_and_modify_data/responding_to_device_orientation_changes">Device Orientation</a>  et <a href="/fr/docs/Web/API/Vibration_API">Vibration</a>   pour améliorer le "gameplay" et est construit avec le "framework" <a class="external external-icon" href="http://phaser.io/">Phaser </a>. La connaissance JavaScript de base est recommandée pour tirer le meilleur parti de ce tutoriel.</p>
 
 <h2 id="Exemple_de_jeu">Exemple de jeu</h2>
 
-<p>A la fin de ce tutoriel, vous aurez une démo entièrement fonctionnelle du jeu : <a href="http://orb.enclavegames.com/">Cyber Orb</a>. <span id="result_box" lang="fr"><span class="hps">Il</span> <span class="hps">ressemblera à quelque chose</span> <span class="hps">comme cela :</span></span></p>
+<p>A la fin de ce tutoriel, vous aurez une démo entièrement fonctionnelle du jeu : <a href="http://orb.enclavegames.com/">Cyber Orb</a>. Il ressemblera à quelque chose comme cela :</p>
 
-<p><img alt="A 2D game board featuring a small yellow ball. There is a large black hole for the ball to escape down, and a number of barriers blocking the ball from escaping." src="https://mdn.mozillademos.org/files/10297/cyber-orb.png" style="display: block; height: 450px; margin: 0px auto; width: 300px;"></p>
+<p><img src="cyber-orb.png"></p>
 
 <h2 id="Le_framework_Phaser">Le framework Phaser</h2>
 
@@ -22,7 +22,7 @@ original_slug: Games/Workflows/HTML5_Gamedev_Phaser_Device_Orientation_FR
 
 <p>Vous pouvez voir <a href="https://github.com/EnclaveGames/Cyber-Orb">le code d'exemple du projet</a> sur GitHub. La structure n'est pas compliquée : le point de départ est le fichier <code>index.html</code> où nous initialisons le framework, mettons en place le {{htmlelement("canvas")}} et jouons au jeu.</p>
 
-<p><img alt="Screenshot of the GitHub repository with the Cyber Orb game code, listing the folders and the files in the main structure." src="https://mdn.mozillademos.org/files/10357/cyber-orb-github.png" style="height: 423px; width: 620px;"></p>
+<p><img src="cyber-orb-github.png"></p>
 
 <p>Vous pouvez l'ouvir avec votre navigateur préféré pour essayer le jeu. Il y a aussi trois dossiers :</p>
 
@@ -34,126 +34,126 @@ original_slug: Games/Workflows/HTML5_Gamedev_Phaser_Device_Orientation_FR
 
 <h2 id="Mettre_en_place_le_canevas">Mettre en place le canevas</h2>
 
-<p><span id="result_box" lang="fr"><span>Nous voulons un rendu de notre jeu sur un canevas, mais nous ne le ferons pas manuellement - cela sera pris en charge par le framework.</span></span> <span id="result_box" lang="fr"><span>Disons-le : notre point de départ est le fichier<code> index.html</code> avec le contenu suivant.</span> <span>Vous pouvez créer vous-même si vous voulez suivre :</span></span></p>
-
-<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="doctype token">&lt;!DOCTYPE html&gt;</span>
-<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>html</span><span class="punctuation token">&gt;</span></span>
-<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>head</span><span class="punctuation token">&gt;</span></span>
-    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>meta</span> <span class="attr-name token">charset</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>utf-8<span class="punctuation token">"</span></span> <span class="punctuation token">/&gt;</span></span>
-    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>title</span><span class="punctuation token">&gt;</span></span>Cyber Orb demo<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>title</span><span class="punctuation token">&gt;</span></span>
-    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>style</span><span class="punctuation token">&gt;</span></span><span class="language-css style token"> <span class="selector token">body </span><span class="punctuation token">{</span> <span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">0</span><span class="punctuation token">;</span> <span class="property token">background</span><span class="punctuation token">:</span> <span class="hexcode token">#333</span><span class="punctuation token">;</span> <span class="punctuation token">}</span> </span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>style</span><span class="punctuation token">&gt;</span></span>
-    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span> <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>src/phaser-arcade-physics.2.2.2.min.js<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span>
-    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span> <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>src/Boot.js<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span>
-    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span> <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>src/Preloader.js<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span>
-    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span> <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>src/MainMenu.js<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span>
-    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span> <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>src/Howto.js<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span>
-    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span> <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>src/Game.js<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span>
-<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>head</span><span class="punctuation token">&gt;</span></span>
-<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>body</span><span class="punctuation token">&gt;</span></span>
-<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span><span class="punctuation token">&gt;</span></span><span class="language-javascript script token">
-<span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
-    <span class="keyword token">var</span> game <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Phaser<span class="punctuation token">.</span>Game</span><span class="punctuation token">(</span><span class="number token">320</span><span class="punctuation token">,</span> <span class="number token">480</span><span class="punctuation token">,</span> Phaser<span class="punctuation token">.</span>CANVAS<span class="punctuation token">,</span> <span class="string token">'game'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-    game<span class="punctuation token">.</span>state<span class="punctuation token">.</span><span class="function token">add</span><span class="punctuation token">(</span><span class="string token">'Boot'</span><span class="punctuation token">,</span> Ball<span class="punctuation token">.</span>Boot<span class="punctuation token">)</span><span class="punctuation token">;</span>
-    game<span class="punctuation token">.</span>state<span class="punctuation token">.</span><span class="function token">add</span><span class="punctuation token">(</span><span class="string token">'Preloader'</span><span class="punctuation token">,</span> Ball<span class="punctuation token">.</span>Preloader<span class="punctuation token">)</span><span class="punctuation token">;</span>
-    game<span class="punctuation token">.</span>state<span class="punctuation token">.</span><span class="function token">add</span><span class="punctuation token">(</span><span class="string token">'MainMenu'</span><span class="punctuation token">,</span> Ball<span class="punctuation token">.</span>MainMenu<span class="punctuation token">)</span><span class="punctuation token">;</span>
-    game<span class="punctuation token">.</span>state<span class="punctuation token">.</span><span class="function token">add</span><span class="punctuation token">(</span><span class="string token">'Howto'</span><span class="punctuation token">,</span> Ball<span class="punctuation token">.</span>Howto<span class="punctuation token">)</span><span class="punctuation token">;</span>
-    game<span class="punctuation token">.</span>state<span class="punctuation token">.</span><span class="function token">add</span><span class="punctuation token">(</span><span class="string token">'Game'</span><span class="punctuation token">,</span> Ball<span class="punctuation token">.</span>Game<span class="punctuation token">)</span><span class="punctuation token">;</span>
-    game<span class="punctuation token">.</span>state<span class="punctuation token">.</span><span class="function token">start</span><span class="punctuation token">(</span><span class="string token">'Boot'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-</span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span>
-<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>body</span><span class="punctuation token">&gt;</span></span>
-<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>html</span><span class="punctuation token">&gt;</span></span></code></pre>
+<p>Nous voulons un rendu de notre jeu sur un canevas, mais nous ne le ferons pas manuellement - cela sera pris en charge par le framework. Disons-le : notre point de départ est le fichier<code> index.html</code> avec le contenu suivant. Vous pouvez créer vous-même si vous voulez suivre :</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+    &lt;meta charset="utf-8" /&gt;
+    &lt;title&gt;Cyber Orb demo&lt;/title&gt;
+    &lt;style&gt; body { margin: 0; background: #333; } &lt;/style&gt;
+    &lt;script src="src/phaser-arcade-physics.2.2.2.min.js"&gt;&lt;/script&gt;
+    &lt;script src="src/Boot.js"&gt;&lt;/script&gt;
+    &lt;script src="src/Preloader.js"&gt;&lt;/script&gt;
+    &lt;script src="src/MainMenu.js"&gt;&lt;/script&gt;
+    &lt;script src="src/Howto.js"&gt;&lt;/script&gt;
+    &lt;script src="src/Game.js"&gt;&lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+&lt;script&gt;
+(function() {
+    var game = new Phaser.Game(320, 480, Phaser.CANVAS, 'game');
+    game.state.add('Boot', Ball.Boot);
+    game.state.add('Preloader', Ball.Preloader);
+    game.state.add('MainMenu', Ball.MainMenu);
+    game.state.add('Howto', Ball.Howto);
+    game.state.add('Game', Ball.Game);
+    game.state.start('Boot');
+})();
+&lt;/script&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
 
 <p>Ça ressemble à une simple page de site HTML avec des éléments basiques dans la balise <code>&lt;head&gt;</code> <em>(en-tête)</em> : police de caractères, titre, CSS et inclusion des fichiers Javascript. Le <code>&lt;body&gt;</code> <em>(corps)</em> contient l'initialisation du framework et la définition des états du jeu.</p>
 
-<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> game <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Phaser<span class="punctuation token">.</span>Game</span><span class="punctuation token">(</span><span class="number token">320</span><span class="punctuation token">,</span> <span class="number token">480</span><span class="punctuation token">,</span> Phaser<span class="punctuation token">.</span>CANVAS<span class="punctuation token">,</span> <span class="string token">'game'</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+<pre class="brush: js">var game = new Phaser.Game(320, 480, Phaser.CANVAS, 'game');</pre>
 
-<p><span id="result_box" lang="fr"><span>La ligne ci-dessus va initialiser l'instance de Phaser - les arguments sont la largeur et la hauteur </span></span><span lang="fr"><span>du canevas, la méthode de rendu (nous utilisons <code>CANVAS</code>, mais il y a aussi les options <code>WEBGL</code> et <code>AUTO</code> disponibles) et l'ID optionnel du conteneur DOM</span> dans lequel <span>nous voulons placer le canevas. Si rien n'est spécifié dans ce dernier argument, ou si l'élément n'est pas trouvé, le <code>canvas</code> sera ajouté à la balise <code>&lt;body&gt;</code>.</span> <span>Sans le framework, pour ajouter l'élément <code>canvas</code> à la page, il faudrait écrire quelque chose comme ça dans la balise <code>&lt;body&gt;</code>:</span></span></p>
+<p>La ligne ci-dessus va initialiser l'instance de Phaser - les arguments sont la largeur et la hauteur du canevas, la méthode de rendu (nous utilisons <code>CANVAS</code>, mais il y a aussi les options <code>WEBGL</code> et <code>AUTO</code> disponibles) et l'ID optionnel du conteneur DOM dans lequel nous voulons placer le canevas. Si rien n'est spécifié dans ce dernier argument, ou si l'élément n'est pas trouvé, le <code>canvas</code> sera ajouté à la balise <code>&lt;body&gt;</code>. Sans le framework, pour ajouter l'élément <code>canvas</code> à la page, il faudrait écrire quelque chose comme ça dans la balise <code>&lt;body&gt;</code>:</p>
 
-<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>canvas</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">'</span>game<span class="punctuation token">'</span></span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">'</span>320<span class="punctuation token">'</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">'</span>480<span class="punctuation token">'</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>canvas</span><span class="punctuation token">&gt;</span></span></code></pre>
+<pre class="brush: html">&lt;canvas id='game' width='320' height='480'&gt;&lt;/canvas&gt;</pre>
 
-<p><span id="result_box" lang="fr"><span>La chose importante à retenir est que le framework met en place des méthodes utiles pour accélérer beaucoup de choses comme la manipulation d'images ou la gestion des éléments, ce qui serait beaucoup plus difficile à faire manuellement.</span></span></p>
+<p>La chose importante à retenir est que le framework met en place des méthodes utiles pour accélérer beaucoup de choses comme la manipulation d'images ou la gestion des éléments, ce qui serait beaucoup plus difficile à faire manuellement.</p>
 
 <div class="note">
-<p><strong>Note </strong>: Vous pouvez lire l'article <a href="http://gamedevelopment.tutsplus.com/tutorials/getting-started-with-phaser-building-monster-wants-candy--cms-21723">Building Monster Wants Candy</a> <span id="result_box" lang="fr"><span>pour une introduction approfondie aux fonctions et méthodes de base de Phaser.</span></span></p>
+<p><strong>Note :</strong> Vous pouvez lire l'article <a href="http://gamedevelopment.tutsplus.com/tutorials/getting-started-with-phaser-building-monster-wants-candy--cms-21723">Building Monster Wants Candy</a> pour une introduction approfondie aux fonctions et méthodes de base de Phaser.</p>
 </div>
 
-<p><span id="result_box" lang="fr"><span>Retour aux états du jeu : la ligne ci-dessous ajoute un nouvel état appelé Boot au jeu :</span></span></p>
+<p>Retour aux états du jeu : la ligne ci-dessous ajoute un nouvel état appelé Boot au jeu :</p>
 
-<pre class="brush: html line-numbers  language-html"><code class="language-html">game.state.add('Boot', Ball.Boot);</code></pre>
+<pre class="brush: html">game.state.add('Boot', Ball.Boot);</pre>
 
-<p><span id="result_box" lang="fr"><span>La première valeur est le nom de l'état et la seconde est l'objet que nous voulons lui assigner.</span> <span>La méthode </span></span> <code>start</code> <span lang="fr"><span> démarre l'état donné et le rend actif.</span> <span>Voyons ce que les états sont en réalité.</span></span> </p>
+<p>La première valeur est le nom de l'état et la seconde est l'objet que nous voulons lui assigner. La méthode  <code>start</code>  démarre l'état donné et le rend actif. Voyons ce que les états sont en réalité. </p>
 
 <h2 id="Gestion_des_états_du_jeu">Gestion des états du jeu</h2>
 
-<p>Les états du jeu dans Phaser sont différentes phases du jeu. Dans notre cas, ils sont chargés depuis des fichiers Javascript pour mieux les maintenir par la suite. Dans ce jeu nous avons les états : <code>Boot <em>(démarrage)</em></code>, <code>Preloader <em>(préchargement)</em></code>, <code>MainMenu <em>(menu principal), </em></code> <code>Howto</code> <em>(comment jouer)</em> et <code>Game <em>(jeu)</em></code>. <code>Boot</code> s'occupe d'initialiser quelques paramètres, <code>Preloader</code> charge tous les graphismes et les sons, <code>MainMenu</code> est le menu avec le bouton start, <code>Howto</code> affiche les instructions "comment jouer" et <code>Game</code>, est l'état qui permet de  jouer. <span class="short_text" id="result_box" lang="fr"><span>Passons rapidement au contenu de ces états.</span></span></p>
+<p>Les états du jeu dans Phaser sont différentes phases du jeu. Dans notre cas, ils sont chargés depuis des fichiers Javascript pour mieux les maintenir par la suite. Dans ce jeu nous avons les états : <code>Boot <em>(démarrage)</em></code>, <code>Preloader <em>(préchargement)</em></code>, <code>MainMenu <em>(menu principal), </em></code> <code>Howto</code> <em>(comment jouer)</em> et <code>Game <em>(jeu)</em></code>. <code>Boot</code> s'occupe d'initialiser quelques paramètres, <code>Preloader</code> charge tous les graphismes et les sons, <code>MainMenu</code> est le menu avec le bouton start, <code>Howto</code> affiche les instructions "comment jouer" et <code>Game</code>, est l'état qui permet de  jouer. Passons rapidement au contenu de ces états.</p>
 
 <h3 id="Boot.js_(démarrage)">Boot.js <em>(démarrage)</em></h3>
 
 <p>L'état <code>Boot</code> est le premier du jeu.</p>
 
-<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> Ball <span class="operator token">=</span> <span class="punctuation token">{</span>
-    _WIDTH<span class="punctuation token">:</span> <span class="number token">320</span><span class="punctuation token">,</span>
-    _HEIGHT<span class="punctuation token">:</span> <span class="number token">480</span>
-<span class="punctuation token">}</span><span class="punctuation token">;</span>
-Ball<span class="punctuation token">.</span>Boot <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>game<span class="punctuation token">)</span> <span class="punctuation token">{</span><span class="punctuation token">}</span><span class="punctuation token">;</span>
-Ball<span class="punctuation token">.</span>Boot<span class="punctuation token">.</span>prototype <span class="operator token">=</span> <span class="punctuation token">{</span>
-    preload<span class="punctuation token">:</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
-        <span class="keyword token">this</span><span class="punctuation token">.</span>load<span class="punctuation token">.</span><span class="function token">image</span><span class="punctuation token">(</span><span class="string token">'preloaderBg'</span><span class="punctuation token">,</span> <span class="string token">'img/loading-bg.png'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-        <span class="keyword token">this</span><span class="punctuation token">.</span>load<span class="punctuation token">.</span><span class="function token">image</span><span class="punctuation token">(</span><span class="string token">'preloaderBar'</span><span class="punctuation token">,</span> <span class="string token">'img/loading-bar.png'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-    <span class="punctuation token">}</span><span class="punctuation token">,</span>
-    create<span class="punctuation token">:</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
-        <span class="keyword token">this</span><span class="punctuation token">.</span>game<span class="punctuation token">.</span>scale<span class="punctuation token">.</span>scaleMode <span class="operator token">=</span> Phaser<span class="punctuation token">.</span>ScaleManager<span class="punctuation token">.</span>SHOW_ALL<span class="punctuation token">;</span>
-        <span class="keyword token">this</span><span class="punctuation token">.</span>game<span class="punctuation token">.</span>scale<span class="punctuation token">.</span>pageAlignHorizontally <span class="operator token">=</span> <span class="keyword token">true</span><span class="punctuation token">;</span>
-        <span class="keyword token">this</span><span class="punctuation token">.</span>game<span class="punctuation token">.</span>scale<span class="punctuation token">.</span>pageAlignVertically <span class="operator token">=</span> <span class="keyword token">true</span><span class="punctuation token">;</span>
-        <span class="keyword token">this</span><span class="punctuation token">.</span>game<span class="punctuation token">.</span>state<span class="punctuation token">.</span><span class="function token">start</span><span class="punctuation token">(</span><span class="string token">'Preloader'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-    <span class="punctuation token">}</span>
-<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre>
-
-<p><span id="result_box" lang="fr"><span>Le principal objet "<code>Ball</code>"  est défini et nous ajoutons deux variables appelées <code>_WIDTH</code> et <code>_HEIGHT</code> qui sont la largeur et la hauteur du caneva du jeu </span></span> — <span lang="fr"><span> elles nous aideront à positionner les éléments à l'écran.</span> <span>Nous chargeons d'abord deux images qui seront utilisées plus tard dans l'état <code>Preload</code> <em>(préchargement)</em> pour montrer la progression du chargement de tous les autres éléments.</span> <span>La fonction <code>create</code> contient une configuration de base : nous configurons la mise à l'échelle et l'alignement du canevas et passons à l'état</span></span> <code>Preload</code> <span lang="fr"><span> lorsque tout est prêt.</span></span></p>
+<pre class="brush: js">var Ball = {
+    _WIDTH: 320,
+    _HEIGHT: 480
+};
+Ball.Boot = function(game) {};
+Ball.Boot.prototype = {
+    preload: function() {
+        this.load.image('preloaderBg', 'img/loading-bg.png');
+        this.load.image('preloaderBar', 'img/loading-bar.png');
+    },
+    create: function() {
+        this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
+        this.game.scale.pageAlignHorizontally = true;
+        this.game.scale.pageAlignVertically = true;
+        this.game.state.start('Preloader');
+    }
+};</pre>
+
+<p>Le principal objet "<code>Ball</code>"  est défini et nous ajoutons deux variables appelées <code>_WIDTH</code> et <code>_HEIGHT</code> qui sont la largeur et la hauteur du caneva du jeu  —  elles nous aideront à positionner les éléments à l'écran. Nous chargeons d'abord deux images qui seront utilisées plus tard dans l'état <code>Preload</code> <em>(préchargement)</em> pour montrer la progression du chargement de tous les autres éléments. La fonction <code>create</code> contient une configuration de base : nous configurons la mise à l'échelle et l'alignement du canevas et passons à l'état <code>Preload</code>  lorsque tout est prêt.</p>
 
 <h3 id="Preloader.js_(préchargement)">Preloader.js <em>(préchargement)</em></h3>
 
-<p>L'état <code>Preloader</code> <span class="short_text" id="result_box" lang="fr"><span>prend soin de charger tous les éléments</span></span> :</p>
+<p>L'état <code>Preloader</code> prend soin de charger tous les éléments :</p>
 
-<pre class="brush: js line-numbers  language-js"><code class="language-js">Ball<span class="punctuation token">.</span>Preloader <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>game<span class="punctuation token">)</span> <span class="punctuation token">{</span><span class="punctuation token">}</span><span class="punctuation token">;</span>
-Ball<span class="punctuation token">.</span>Preloader<span class="punctuation token">.</span>prototype <span class="operator token">=</span> <span class="punctuation token">{</span>
-    preload<span class="punctuation token">:</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
-        <span class="keyword token">this</span><span class="punctuation token">.</span>preloadBg <span class="operator token">=</span> <span class="keyword token">this</span><span class="punctuation token">.</span>add<span class="punctuation token">.</span><span class="function token">sprite</span><span class="punctuation token">(</span><span class="punctuation token">(</span>Ball<span class="punctuation token">.</span>_WIDTH<span class="number token">-297</span><span class="punctuation token">)</span><span class="operator token">*</span><span class="number token">0.5</span><span class="punctuation token">,</span> <span class="punctuation token">(</span>Ball<span class="punctuation token">.</span>_HEIGHT<span class="number token">-145</span><span class="punctuation token">)</span><span class="operator token">*</span><span class="number token">0.5</span><span class="punctuation token">,</span> <span class="string token">'preloaderBg'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-        <span class="keyword token">this</span><span class="punctuation token">.</span>preloadBar <span class="operator token">=</span> <span class="keyword token">this</span><span class="punctuation token">.</span>add<span class="punctuation token">.</span><span class="function token">sprite</span><span class="punctuation token">(</span><span class="punctuation token">(</span>Ball<span class="punctuation token">.</span>_WIDTH<span class="number token">-158</span><span class="punctuation token">)</span><span class="operator token">*</span><span class="number token">0.5</span><span class="punctuation token">,</span> <span class="punctuation token">(</span>Ball<span class="punctuation token">.</span>_HEIGHT<span class="number token">-50</span><span class="punctuation token">)</span><span class="operator token">*</span><span class="number token">0.5</span><span class="punctuation token">,</span> <span class="string token">'preloaderBar'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-        <span class="keyword token">this</span><span class="punctuation token">.</span>load<span class="punctuation token">.</span><span class="function token">setPreloadSprite</span><span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">.</span>preloadBar<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<pre class="brush: js">Ball.Preloader = function(game) {};
+Ball.Preloader.prototype = {
+    preload: function() {
+        this.preloadBg = this.add.sprite((Ball._WIDTH-297)*0.5, (Ball._HEIGHT-145)*0.5, 'preloaderBg');
+        this.preloadBar = this.add.sprite((Ball._WIDTH-158)*0.5, (Ball._HEIGHT-50)*0.5, 'preloaderBar');
+        this.load.setPreloadSprite(this.preloadBar);
 
-        <span class="keyword token">this</span><span class="punctuation token">.</span>load<span class="punctuation token">.</span><span class="function token">image</span><span class="punctuation token">(</span><span class="string token">'ball'</span><span class="punctuation token">,</span> <span class="string token">'img/ball.png'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-        <span class="comment token">// ...</span>
-        <span class="keyword token">this</span><span class="punctuation token">.</span>load<span class="punctuation token">.</span><span class="function token">spritesheet</span><span class="punctuation token">(</span><span class="string token">'button-start'</span><span class="punctuation token">,</span> <span class="string token">'img/button-start.png'</span><span class="punctuation token">,</span> <span class="number token">146</span><span class="punctuation token">,</span> <span class="number token">51</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-        <span class="comment token">// ...</span>
-        <span class="keyword token">this</span><span class="punctuation token">.</span>load<span class="punctuation token">.</span><span class="function token">audio</span><span class="punctuation token">(</span><span class="string token">'audio-bounce'</span><span class="punctuation token">,</span> <span class="punctuation token">[</span><span class="string token">'audio/bounce.ogg'</span><span class="punctuation token">,</span> <span class="string token">'audio/bounce.mp3'</span><span class="punctuation token">,</span> <span class="string token">'audio/bounce.m4a'</span><span class="punctuation token">]</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-    <span class="punctuation token">}</span><span class="punctuation token">,</span>
-    create<span class="punctuation token">:</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
-        <span class="keyword token">this</span><span class="punctuation token">.</span>game<span class="punctuation token">.</span>state<span class="punctuation token">.</span><span class="function token">start</span><span class="punctuation token">(</span><span class="string token">'MainMenu'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-    <span class="punctuation token">}</span>
-<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre>
+        this.load.image('ball', 'img/ball.png');
+        // ...
+        this.load.spritesheet('button-start', 'img/button-start.png', 146, 51);
+        // ...
+        this.load.audio('audio-bounce', ['audio/bounce.ogg', 'audio/bounce.mp3', 'audio/bounce.m4a']);
+    },
+    create: function() {
+        this.game.state.start('MainMenu');
+    }
+};</pre>
 
-<p><span id="result_box" lang="fr"><span>Il y a des images uniques, des feuilles de "sprites" et des fichiers audio chargés par le "framework".</span> <span>Dans cet état, la <code>preloadBar</code> <em>(barre du préchargement)</em> affiche la progression à l'écran.</span> <span>Cette progression des éléments chargés est visualisée par le framework avec l'utilisation d'une image.</span> <span>Avec chaque élément chargé, vous pouvez voir plus de l'image <code>preloadBar</code>: de 0% à 100%, mis à jour sur chaque image.</span> <span>Une fois que tous les éléments sont chargés, l'état MainMenu est lancé.</span></span></p>
+<p>Il y a des images uniques, des feuilles de "sprites" et des fichiers audio chargés par le "framework". Dans cet état, la <code>preloadBar</code> <em>(barre du préchargement)</em> affiche la progression à l'écran. Cette progression des éléments chargés est visualisée par le framework avec l'utilisation d'une image. Avec chaque élément chargé, vous pouvez voir plus de l'image <code>preloadBar</code>: de 0% à 100%, mis à jour sur chaque image. Une fois que tous les éléments sont chargés, l'état MainMenu est lancé.</p>
 
 <h3 id="MainMenu.js_(menu_principal)">MainMenu.js <em>(menu principal)</em></h3>
 
 <p>L'état <code>MainMenu</code> montre le menu principal du jeu, sur lequel vous pouvez lancer le jeu en cliquant sur le bouton.</p>
 
-<pre class="brush: js line-numbers  language-js"><code class="language-js">Ball<span class="punctuation token">.</span>MainMenu <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>game<span class="punctuation token">)</span> <span class="punctuation token">{</span><span class="punctuation token">}</span><span class="punctuation token">;</span>
-Ball<span class="punctuation token">.</span>MainMenu<span class="punctuation token">.</span>prototype <span class="operator token">=</span> <span class="punctuation token">{</span>
-    create<span class="punctuation token">:</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
-        <span class="keyword token">this</span><span class="punctuation token">.</span>add<span class="punctuation token">.</span><span class="function token">sprite</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> <span class="string token">'screen-mainmenu'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-        <span class="keyword token">this</span><span class="punctuation token">.</span>gameTitle <span class="operator token">=</span> <span class="keyword token">this</span><span class="punctuation token">.</span>add<span class="punctuation token">.</span><span class="function token">sprite</span><span class="punctuation token">(</span>Ball<span class="punctuation token">.</span>_WIDTH<span class="operator token">*</span><span class="number token">0.5</span><span class="punctuation token">,</span> <span class="number token">40</span><span class="punctuation token">,</span> <span class="string token">'title'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-        <span class="keyword token">this</span><span class="punctuation token">.</span>gameTitle<span class="punctuation token">.</span>anchor<span class="punctuation token">.</span><span class="keyword token">set</span><span class="punctuation token">(</span><span class="number token">0.5</span><span class="punctuation token">,</span><span class="number token">0</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-        <span class="keyword token">this</span><span class="punctuation token">.</span>startButton <span class="operator token">=</span> <span class="keyword token">this</span><span class="punctuation token">.</span>add<span class="punctuation token">.</span><span class="function token">button</span><span class="punctuation token">(</span>Ball<span class="punctuation token">.</span>_WIDTH<span class="operator token">*</span><span class="number token">0.5</span><span class="punctuation token">,</span> <span class="number token">200</span><span class="punctuation token">,</span> <span class="string token">'button-start'</span><span class="punctuation token">,</span> <span class="keyword token">this</span><span class="punctuation token">.</span>startGame<span class="punctuation token">,</span> <span class="keyword token">this</span><span class="punctuation token">,</span> <span class="number token">2</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">1</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-        <span class="keyword token">this</span><span class="punctuation token">.</span>startButton<span class="punctuation token">.</span>anchor<span class="punctuation token">.</span><span class="keyword token">set</span><span class="punctuation token">(</span><span class="number token">0.5</span><span class="punctuation token">,</span><span class="number token">0</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-        <span class="keyword token">this</span><span class="punctuation token">.</span>startButton<span class="punctuation token">.</span>input<span class="punctuation token">.</span>useHandCursor <span class="operator token">=</span> <span class="keyword token">true</span><span class="punctuation token">;</span>
-    <span class="punctuation token">}</span><span class="punctuation token">,</span>
-    startGame<span class="punctuation token">:</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
-        <span class="keyword token">this</span><span class="punctuation token">.</span>game<span class="punctuation token">.</span>state<span class="punctuation token">.</span><span class="function token">start</span><span class="punctuation token">(</span><span class="string token">'Howto'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-    <span class="punctuation token">}</span>
-<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre>
+<pre class="brush: js">Ball.MainMenu = function(game) {};
+Ball.MainMenu.prototype = {
+    create: function() {
+        this.add.sprite(0, 0, 'screen-mainmenu');
+        this.gameTitle = this.add.sprite(Ball._WIDTH*0.5, 40, 'title');
+        this.gameTitle.anchor.set(0.5,0);
+        this.startButton = this.add.button(Ball._WIDTH*0.5, 200, 'button-start', this.startGame, this, 2, 0, 1);
+        this.startButton.anchor.set(0.5,0);
+        this.startButton.input.useHandCursor = true;
+    },
+    startGame: function() {
+        this.game.state.start('Howto');
+    }
+};</pre>
 
 <p>Pour créer un nouveau bouton, il y a la méthode <code>add.button</code> avec la liste suivante d'arguments facultatifs :</p>
 
@@ -163,59 +163,59 @@ Ball<span class="punctuation token">.</span>MainMenu<span class="punctuation tok
  <li>nom de l'élément image utilisé par le bouton.</li>
  <li>fonction qui doit être exécutée quand quelqu'un clique sur le bouton.</li>
  <li>le contexte d'exécution.</li>
- <li>cadre <span id="result_box" lang="fr"><span> de l'objet image utilisé comme état du bouton "hover" <em>(flottant)</em></span></span> .</li>
- <li>cadre<span id="result_box" lang="fr"><span> de l'objet image utilisé comme état du bouton</span></span> "normal" ou "out" <em>(en dehors)</em>.</li>
- <li>cadre<span id="result_box" lang="fr"><span> de l'objet image utilisé comme état du bouton</span></span> "click" ou "down" (<em>en bas</em>).</li>
+ <li>cadre  de l'objet image utilisé comme état du bouton "hover" <em>(flottant)</em> .</li>
+ <li>cadre de l'objet image utilisé comme état du bouton "normal" ou "out" <em>(en dehors)</em>.</li>
+ <li>cadre de l'objet image utilisé comme état du bouton "click" ou "down" (<em>en bas</em>).</li>
 </ul>
 
-<p><span id="result_box" lang="fr"><span><code>Anchor.set</code> configure le point d'ancrage du bouton sur lequel tous les calculs de la position sont appliqués.</span> <span>Dans notre cas, il est ancré à mi-chemin du bord gauche et au début du bord supérieur, de sorte qu'il peut être facilement centré horizontalement sur l'écran sans avoir besoin de connaître sa largeur.</span></span></p>
+<p><code>Anchor.set</code> configure le point d'ancrage du bouton sur lequel tous les calculs de la position sont appliqués. Dans notre cas, il est ancré à mi-chemin du bord gauche et au début du bord supérieur, de sorte qu'il peut être facilement centré horizontalement sur l'écran sans avoir besoin de connaître sa largeur.</p>
 
-<p><span id="result_box" lang="fr"><span>Lorsque le bouton de démarrage est enfoncé, au lieu de sauter directement dans l'action, le jeu affichera l'écran avec les informations sur la façon de jouer.</span></span></p>
+<p>Lorsque le bouton de démarrage est enfoncé, au lieu de sauter directement dans l'action, le jeu affichera l'écran avec les informations sur la façon de jouer.</p>
 
 <h3 id="Howto.js_(comment_jouer)">Howto.js <em>(comment jouer)</em></h3>
 
-<pre class="brush: js line-numbers  language-js"><code class="language-js">Ball<span class="punctuation token">.</span>Howto <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>game<span class="punctuation token">)</span> <span class="punctuation token">{</span>
-<span class="punctuation token">}</span><span class="punctuation token">;</span>
-Ball<span class="punctuation token">.</span>Howto<span class="punctuation token">.</span>prototype <span class="operator token">=</span> <span class="punctuation token">{</span>
-    create<span class="punctuation token">:</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
-        <span class="keyword token">this</span><span class="punctuation token">.</span>buttonContinue <span class="operator token">=</span> <span class="keyword token">this</span><span class="punctuation token">.</span>add<span class="punctuation token">.</span><span class="function token">button</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> <span class="string token">'screen-howtoplay'</span><span class="punctuation token">,</span> <span class="keyword token">this</span><span class="punctuation token">.</span>startGame<span class="punctuation token">,</span> <span class="keyword token">this</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-    <span class="punctuation token">}</span><span class="punctuation token">,</span>
-    startGame<span class="punctuation token">:</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
-        <span class="keyword token">this</span><span class="punctuation token">.</span>game<span class="punctuation token">.</span>state<span class="punctuation token">.</span><span class="function token">start</span><span class="punctuation token">(</span><span class="string token">'Game'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-    <span class="punctuation token">}</span>
-<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre>
+<pre class="brush: js">Ball.Howto = function(game) {
+};
+Ball.Howto.prototype = {
+    create: function() {
+        this.buttonContinue = this.add.button(0, 0, 'screen-howtoplay', this.startGame, this);
+    },
+    startGame: function() {
+        this.game.state.start('Game');
+    }
+};</pre>
 
-<p><span id="result_box" lang="fr"><span>L'état <code>Howto</code> affiche les instructions du jeu à l'écran avant de commencer le jeu.</span> <span>Après avoir cliqué sur l'écran, le jeu réel est lancé.</span></span></p>
+<p>L'état <code>Howto</code> affiche les instructions du jeu à l'écran avant de commencer le jeu. Après avoir cliqué sur l'écran, le jeu réel est lancé.</p>
 
 <h3 id="Game.js_(jeu)">Game.js (jeu)</h3>
 
-<p><span id="result_box" lang="fr"><span>L'état <code>game</code> à partir du fichier <code>Game.js</code> est le lieu où toute la magie opère.</span> <span>Toute l'initialisation est dans la fonction <code>create ()</code> (lancée une fois au début du jeu).</span> <span>Après cela, certaines fonctionnalités nécessiteront d'autres codes à contrôler </span></span> — <span lang="fr"><span> nous écrirons nos propres fonctions pour gérer des tâches plus complexes.</span> <span>En particulier, notez  la fonction <code>update ()</code> exécutée à chaque frame, qui met à jour des choses telles que la position de la balle.</span></span></p>
-
-<pre class="brush: js line-numbers  language-js"><code class="language-js">Ball<span class="punctuation token">.</span>Game <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>game<span class="punctuation token">)</span> <span class="punctuation token">{</span><span class="punctuation token">}</span><span class="punctuation token">;</span>
-Ball<span class="punctuation token">.</span>Game<span class="punctuation token">.</span>prototype <span class="operator token">=</span> <span class="punctuation token">{</span>
-    create<span class="punctuation token">:</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span><span class="punctuation token">}</span><span class="punctuation token">,</span>
-    initLevels<span class="punctuation token">:</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span><span class="punctuation token">}</span><span class="punctuation token">,</span>
-    showLevel<span class="punctuation token">:</span> <span class="keyword token">function</span><span class="punctuation token">(</span>level<span class="punctuation token">)</span> <span class="punctuation token">{</span><span class="punctuation token">}</span><span class="punctuation token">,</span>
-    updateCounter<span class="punctuation token">:</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span><span class="punctuation token">}</span><span class="punctuation token">,</span>
-    managePause<span class="punctuation token">:</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span><span class="punctuation token">}</span><span class="punctuation token">,</span>
-    manageAudio<span class="punctuation token">:</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span><span class="punctuation token">}</span><span class="punctuation token">,</span>
-    update<span class="punctuation token">:</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span><span class="punctuation token">}</span><span class="punctuation token">,</span>
-    wallCollision<span class="punctuation token">:</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span><span class="punctuation token">}</span><span class="punctuation token">,</span>
-    handleOrientation<span class="punctuation token">:</span> <span class="keyword token">function</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span> <span class="punctuation token">{</span><span class="punctuation token">}</span><span class="punctuation token">,</span>
-    finishLevel<span class="punctuation token">:</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span><span class="punctuation token">}</span>
-<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre>
+<p>L'état <code>game</code> à partir du fichier <code>Game.js</code> est le lieu où toute la magie opère. Toute l'initialisation est dans la fonction <code>create ()</code> (lancée une fois au début du jeu). Après cela, certaines fonctionnalités nécessiteront d'autres codes à contrôler  —  nous écrirons nos propres fonctions pour gérer des tâches plus complexes. En particulier, notez  la fonction <code>update ()</code> exécutée à chaque frame, qui met à jour des choses telles que la position de la balle.</p>
+
+<pre class="brush: js">Ball.Game = function(game) {};
+Ball.Game.prototype = {
+    create: function() {},
+    initLevels: function() {},
+    showLevel: function(level) {},
+    updateCounter: function() {},
+    managePause: function() {},
+    manageAudio: function() {},
+    update: function() {},
+    wallCollision: function() {},
+    handleOrientation: function(e) {},
+    finishLevel: function() {}
+};</pre>
 
 <p>Les fonctions <code>create</code> et <code>update</code> sont spécifiques au framework, tandis que d'autres seront nos créations :</p>
 
 <ul>
  <li><code>initLevels</code> initialise les données de niveau.</li>
  <li><code>showLevel</code> affiche à l'écran les données du niveau.</li>
- <li><code>updateCounter</code> <span id="result_box" lang="fr"><span>met à jour le temps passé à jouer chaque niveau et enregistre le temps total passé à jouer sur le jeu.</span></span> </li>
+ <li><code>updateCounter</code> met à jour le temps passé à jouer chaque niveau et enregistre le temps total passé à jouer sur le jeu. </li>
  <li><code>managePause</code> met en pause et reprend le jeu.</li>
  <li><code>manageAudio</code> allume et éteint le son.</li>
  <li><code>wallCollision</code> est exécuté quand la balle frappe les murs ou d'autres objets.</li>
- <li><code>handleOrientation</code> <span id="result_box" lang="fr"><span>est la fonction liée à l'événement responsable de l'API d'orientation des périphériques, fournissant les contrôles de mouvement lorsque le jeu est en cours d'exécution sur un périphérique mobile avec le matériel approprié.</span></span></li>
- <li><code>finishLevel</code> <span id="result_box" lang="fr"><span>charge un nouveau niveau lorsque le niveau actuel est terminé ou termine le jeu si le niveau final est terminé.</span></span></li>
+ <li><code>handleOrientation</code> est la fonction liée à l'événement responsable de l'API d'orientation des périphériques, fournissant les contrôles de mouvement lorsque le jeu est en cours d'exécution sur un périphérique mobile avec le matériel approprié.</li>
+ <li><code>finishLevel</code> charge un nouveau niveau lorsque le niveau actuel est terminé ou termine le jeu si le niveau final est terminé.</li>
 </ul>
 
 <h3 id="Ajout_de_la_balle_et_de_ses_mécanismes_de_mouvement">Ajout de la balle et de ses mécanismes de mouvement</h3>
@@ -228,30 +228,30 @@ ball.body.bounce.setTo(0.3, 0.3);
 ball.body.setCircle(10, 11, 11);
 ball.body.linearDamping = 1;</pre>
 
-<p>On ajoute un "sprite" à une place donnée sur l'écran en utilisant l'image <code>'ball'</code>. On ajoute aussi le point de repère de tous les calculs physiques ( '<code>anchor</code>' ) au milieu de la balle,  <span id="result_box" lang="fr"><span>permettant au moteur physique d'arcade (qui gère toute la physique du mouvement de la balle)</span></span> <span id="result_box" lang="fr"><span>et en définissant la taille du corps pour la détection de collision</span></span> . <span id="result_box" lang="fr"><span>La propriété </span></span> <code>bounce</code><span lang="fr"><span> est utilisée pour définir le rebondissement de la balle quand elle frappe les obstacles.</span></span></p>
+<p>On ajoute un "sprite" à une place donnée sur l'écran en utilisant l'image <code>'ball'</code>. On ajoute aussi le point de repère de tous les calculs physiques ( '<code>anchor</code>' ) au milieu de la balle,  permettant au moteur physique d'arcade (qui gère toute la physique du mouvement de la balle) et en définissant la taille du corps pour la détection de collision . La propriété  <code>bounce</code> est utilisée pour définir le rebondissement de la balle quand elle frappe les obstacles.</p>
 
 <h3 id="Contrôle_de_la_balle">Contrôle de la balle</h3>
 
 <p>C'est déjà sympa d'avoir une balle prête à être lancée dans la zone de jeu, mais c'est aussi important de pouvoir le faire. Maintenant on va ajouter la possibilité de contrôler la balle avec le clavier sur les ordinateurs, et ensuite on ajoutera l'implémentation de l'API  Device Orientation ( <em>gyroscope</em>). Maintenant, concentrons-nous sur le clavier en ajoutant la ligne suivante pour la fonction <code>create()</code> :</p>
 
-<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">this</span><span class="punctuation token">.</span>keys <span class="operator token">=</span> <span class="keyword token">this</span><span class="punctuation token">.</span>game<span class="punctuation token">.</span>input<span class="punctuation token">.</span>keyboard<span class="punctuation token">.</span><span class="function token">createCursorKeys</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+<pre class="brush: js">this.keys = this.game.input.keyboard.createCursorKeys();</pre>
 
-<p>Comme vous pouvez le voir, Phaser a une fonction spéciale  <code>createCursorKeys()</code> <span id="result_box" lang="fr"><span>qui nous donnera un objet avec des gestionnaires d'événements pour les quatre touches fléchées : haut, bas, gauche et droite.</span></span> </p>
+<p>Comme vous pouvez le voir, Phaser a une fonction spéciale  <code>createCursorKeys()</code> qui nous donnera un objet avec des gestionnaires d'événements pour les quatre touches fléchées : haut, bas, gauche et droite. </p>
 
-<p><span id="result_box" lang="fr"><span>Ensuite, nous allons ajouter le code suivant dans la fonction <code>update ()</code>, il sera lancé à chaque "frame".</span></span> L'objet <code>this.keys</code> sera vérifié aux pressions de touche du joueur, la balle réagira donc en conséquence :</p>
+<p>Ensuite, nous allons ajouter le code suivant dans la fonction <code>update ()</code>, il sera lancé à chaque "frame". L'objet <code>this.keys</code> sera vérifié aux pressions de touche du joueur, la balle réagira donc en conséquence :</p>
 
-<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">if</span><span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">.</span>keys<span class="punctuation token">.</span>left<span class="punctuation token">.</span>isDown<span class="punctuation token">)</span> <span class="punctuation token">{</span>
-    <span class="keyword token">this</span><span class="punctuation token">.</span>ball<span class="punctuation token">.</span>body<span class="punctuation token">.</span>velocity<span class="punctuation token">.</span>x <span class="operator token">-</span><span class="operator token">=</span> <span class="keyword token">this</span><span class="punctuation token">.</span>movementForce<span class="punctuation token">;</span>
-<span class="punctuation token">}</span>
-<span class="keyword token">else</span> <span class="keyword token">if</span><span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">.</span>keys<span class="punctuation token">.</span>right<span class="punctuation token">.</span>isDown<span class="punctuation token">)</span> <span class="punctuation token">{</span>
-    <span class="keyword token">this</span><span class="punctuation token">.</span>ball<span class="punctuation token">.</span>body<span class="punctuation token">.</span>velocity<span class="punctuation token">.</span>x <span class="operator token">+</span><span class="operator token">=</span> <span class="keyword token">this</span><span class="punctuation token">.</span>movementForce<span class="punctuation token">;</span>
-<span class="punctuation token">}</span>
-<span class="keyword token">if</span><span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">.</span>keys<span class="punctuation token">.</span>up<span class="punctuation token">.</span>isDown<span class="punctuation token">)</span> <span class="punctuation token">{</span>
-    <span class="keyword token">this</span><span class="punctuation token">.</span>ball<span class="punctuation token">.</span>body<span class="punctuation token">.</span>velocity<span class="punctuation token">.</span>y <span class="operator token">-</span><span class="operator token">=</span> <span class="keyword token">this</span><span class="punctuation token">.</span>movementForce<span class="punctuation token">;</span>
-<span class="punctuation token">}</span>
-<span class="keyword token">else</span> <span class="keyword token">if</span><span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">.</span>keys<span class="punctuation token">.</span>down<span class="punctuation token">.</span>isDown<span class="punctuation token">)</span> <span class="punctuation token">{</span>
-    <span class="keyword token">this</span><span class="punctuation token">.</span>ball<span class="punctuation token">.</span>body<span class="punctuation token">.</span>velocity<span class="punctuation token">.</span>y <span class="operator token">+</span><span class="operator token">=</span> <span class="keyword token">this</span><span class="punctuation token">.</span>movementForce<span class="punctuation token">;</span>
-<span class="punctuation token">}</span></code></pre>
+<pre class="brush: js">if(this.keys.left.isDown) {
+    this.ball.body.velocity.x -= this.movementForce;
+}
+else if(this.keys.right.isDown) {
+    this.ball.body.velocity.x += this.movementForce;
+}
+if(this.keys.up.isDown) {
+    this.ball.body.velocity.y -= this.movementForce;
+}
+else if(this.keys.down.isDown) {
+    this.ball.body.velocity.y += this.movementForce;
+}</pre>
 
 <p>De cette manière on peut vérifier quelle touche est pressée à un moment donné et appliquer une force définie à la balle, ce qui a pour effet d'augmenter sa vélocité dans la bonne direction.</p>
 
@@ -259,186 +259,186 @@ ball.body.linearDamping = 1;</pre>
 
 <p>La particularité du jeu est qu'il utilise l'API gyroscopique sur les mobiles. Grâce à elle, vous pouvez jouer au jeu en inclinant l'appareil dans la direction où vous voulez que la balle aille. Voilà le code de la fonction  <code>create()</code> qui l'implémente :</p>
 
-<pre class="brush: js line-numbers  language-js"><code class="language-js">window<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"deviceorientation"</span><span class="punctuation token">,</span> <span class="keyword token">this</span><span class="punctuation token">.</span>handleOrientation<span class="punctuation token">,</span> <span class="keyword token">true</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+<pre class="brush: js">window.addEventListener("deviceorientation", this.handleOrientation, true);</pre>
 
 <p>L'ajout d'un évènement "listener" à l'évenement <code>"deviceorientation"</code> et la modification de la fonction <code>handleOrientation</code>ressembleront à ceci :</p>
 
-<pre class="brush: js line-numbers  language-js"><code class="language-js">handleOrientation<span class="punctuation token">:</span> <span class="keyword token">function</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span> <span class="punctuation token">{</span>
-    <span class="keyword token">var</span> x <span class="operator token">=</span> e<span class="punctuation token">.</span>gamma<span class="punctuation token">;</span>
-    <span class="keyword token">var</span> y <span class="operator token">=</span> e<span class="punctuation token">.</span>beta<span class="punctuation token">;</span>
-    Ball<span class="punctuation token">.</span>_player<span class="punctuation token">.</span>body<span class="punctuation token">.</span>velocity<span class="punctuation token">.</span>x <span class="operator token">+</span><span class="operator token">=</span> x<span class="punctuation token">;</span>
-    Ball<span class="punctuation token">.</span>_player<span class="punctuation token">.</span>body<span class="punctuation token">.</span>velocity<span class="punctuation token">.</span>y <span class="operator token">+</span><span class="operator token">=</span> y<span class="punctuation token">;</span>
-<span class="punctuation token">}</span></code></pre>
+<pre class="brush: js">handleOrientation: function(e) {
+    var x = e.gamma;
+    var y = e.beta;
+    Ball._player.body.velocity.x += x;
+    Ball._player.body.velocity.y += y;
+}</pre>
 
 <p>Plus l'appareil est incliné, plus la force appliquée à la balle et sa vélocité sont importantes.</p>
 
-<p><img alt="An explanation of the X, Y and Z axes of a Flame mobile device with the Cyber Orb game demo on the screen." src="https://mdn.mozillademos.org/files/10369/cyber-orb-flame-orientation.png" style="height: 480px; width: 620px;"></p>
+<p><img src="cyber-orb-flame-orientation.png"></p>
 
 <div class="note">
-<p><strong>Note</strong>: <span id="result_box" lang="fr"><span>Pour en savoir plus sur l'implémentation de l'orientation du périphérique et sur le code brut, lisez</span></span> <a href="https://developer.mozilla.org/en-US/Apps/Build/gather_and_modify_data/responding_to_device_orientation_changes">Gardez-le au niveau : en réponse aux changements d'orientation du périphérique</a>. </p>
+<p><strong>Note :</strong> Pour en savoir plus sur l'implémentation de l'orientation du périphérique et sur le code brut, lisez <a href="/fr/Apps/Build/gather_and_modify_data/responding_to_device_orientation_changes">Gardez-le au niveau : en réponse aux changements d'orientation du périphérique</a>. </p>
 </div>
 
 <h3 id="Ajout_du_trou">Ajout du trou</h3>
 
 <p>L'objectif principal du jeu est de déplacer la balle du point de départ vers le point d'arrivée, qui est dans notre cas, un trou dans le sol. L'implémentation ressemble beaucoup à celle de la création de la balle et est ajoutée dans la fonction <code>create()</code> de l'état <code>Game</code> :</p>
 
-<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">this</span><span class="punctuation token">.</span>hole <span class="operator token">=</span> <span class="keyword token">this</span><span class="punctuation token">.</span>add<span class="punctuation token">.</span><span class="function token">sprite</span><span class="punctuation token">(</span>Ball<span class="punctuation token">.</span>_WIDTH<span class="operator token">*</span><span class="number token">0.5</span><span class="punctuation token">,</span> <span class="number token">90</span><span class="punctuation token">,</span> <span class="string token">'hole'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-<span class="keyword token">this</span><span class="punctuation token">.</span>physics<span class="punctuation token">.</span><span class="function token">enable</span><span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">.</span>hole<span class="punctuation token">,</span> Phaser<span class="punctuation token">.</span>Physics<span class="punctuation token">.</span>ARCADE<span class="punctuation token">)</span><span class="punctuation token">;</span>
-<span class="keyword token">this</span><span class="punctuation token">.</span>hole<span class="punctuation token">.</span>anchor<span class="punctuation token">.</span><span class="keyword token">set</span><span class="punctuation token">(</span><span class="number token">0.5</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-<span class="keyword token">this</span><span class="punctuation token">.</span>hole<span class="punctuation token">.</span>body<span class="punctuation token">.</span><span class="function token">setSize</span><span class="punctuation token">(</span><span class="number token">2</span><span class="punctuation token">,</span> <span class="number token">2</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+<pre class="brush: js">this.hole = this.add.sprite(Ball._WIDTH*0.5, 90, 'hole');
+this.physics.enable(this.hole, Phaser.Physics.ARCADE);
+this.hole.anchor.set(0.5);
+this.hole.body.setSize(2, 2);</pre>
 
 <p>La seule différence est que '<code>hole.body</code>' est mis à <code>immovable</code><em>(fixe)</em>, il ne bougera donc pas quand la balle le touchera et la collision sera alors calculée ( ce point sera approfondit plus loin dans cet article ).</p>
 
 <h3 id="Création_du_mur_du_labyrinthe">Création du mur du labyrinthe</h3>
 
-<p><span id="result_box" lang="fr"><span>Pour rendre le jeu plus difficile et plus intéressant, nous allons ajouter des obstacles entre la balle et la sortie.</span> <span>Nous pourrions utiliser un éditeur de niveau, mais pour ce tutoriel, créons quelque chose par nous-mêmes.</span></span></p>
-
-<p><span id="result_box" lang="fr"><span>Pour conserver les informations du bloc, nous utiliserons un tableau de données de niveau : pour chaque bloc, nous stockons les positions absolues supérieure et gauche en pixels (<code>x</code> et <code>y</code>) et le type du bloc - horizontal ou vertical (<code>t</code> avec le '<code>w</code></span> <span>'valeur signifiant largeur et' <code>h</code> 'signifiant hauteur).</span> <span>Ensuite, pour charger le niveau, nous allons analyser les données et afficher les blocs spécifiques à ce niveau.</span> <span>Dans la fonction <code>initLevels</code>, nous avons :</span></span></p>
-
-<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">this</span><span class="punctuation token">.</span>levelData <span class="operator token">=</span> <span class="punctuation token">[</span>
-    <span class="punctuation token">[</span>
-        <span class="punctuation token">{</span> x<span class="punctuation token">:</span> <span class="number token">96</span><span class="punctuation token">,</span> y<span class="punctuation token">:</span> <span class="number token">224</span><span class="punctuation token">,</span> t<span class="punctuation token">:</span> <span class="string token">'w'</span> <span class="punctuation token">}</span>
-    <span class="punctuation token">]</span><span class="punctuation token">,</span>
-    <span class="punctuation token">[</span>
-        <span class="punctuation token">{</span> x<span class="punctuation token">:</span> <span class="number token">72</span><span class="punctuation token">,</span> y<span class="punctuation token">:</span> <span class="number token">320</span><span class="punctuation token">,</span> t<span class="punctuation token">:</span> <span class="string token">'w'</span> <span class="punctuation token">}</span><span class="punctuation token">,</span>
-        <span class="punctuation token">{</span> x<span class="punctuation token">:</span> <span class="number token">200</span><span class="punctuation token">,</span> y<span class="punctuation token">:</span> <span class="number token">320</span><span class="punctuation token">,</span> t<span class="punctuation token">:</span> <span class="string token">'h'</span> <span class="punctuation token">}</span><span class="punctuation token">,</span>
-        <span class="punctuation token">{</span> x<span class="punctuation token">:</span> <span class="number token">72</span><span class="punctuation token">,</span> y<span class="punctuation token">:</span> <span class="number token">150</span><span class="punctuation token">,</span> t<span class="punctuation token">:</span> <span class="string token">'w'</span> <span class="punctuation token">}</span>
-    <span class="punctuation token">]</span><span class="punctuation token">,</span>
-    <span class="comment token">// ...</span>
-<span class="punctuation token">]</span><span class="punctuation token">;</span></code></pre>
-
-<p><span id="result_box" lang="fr"><span>Chaque élément de tableau contient une collection de blocs avec une position <code>x</code> et <code>y</code> et une valeur <code>t</code> pour chacun.</span> <span>Après <code>levelData</code>, mais toujours dans la fonction <code>initLevels</code>, nous ajoutons les blocs dans un tableau de la boucle <code>for</code> en utilisant certaines des méthodes spécifiques au framework :</span></span></p>
-
-<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">for</span><span class="punctuation token">(</span><span class="keyword token">var</span> i<span class="operator token">=</span><span class="number token">0</span><span class="punctuation token">;</span> i<span class="operator token">&lt;</span><span class="keyword token">this</span><span class="punctuation token">.</span>maxLevels<span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
-    <span class="keyword token">var</span> newLevel <span class="operator token">=</span> <span class="keyword token">this</span><span class="punctuation token">.</span>add<span class="punctuation token">.</span><span class="function token">group</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-    newLevel<span class="punctuation token">.</span>enableBody <span class="operator token">=</span> <span class="keyword token">true</span><span class="punctuation token">;</span>
-    newLevel<span class="punctuation token">.</span>physicsBodyType <span class="operator token">=</span> Phaser<span class="punctuation token">.</span>Physics<span class="punctuation token">.</span>ARCADE<span class="punctuation token">;</span>
-    <span class="keyword token">for</span><span class="punctuation token">(</span><span class="keyword token">var</span> e<span class="operator token">=</span><span class="number token">0</span><span class="punctuation token">;</span> e<span class="operator token">&lt;</span><span class="keyword token">this</span><span class="punctuation token">.</span>levelData<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">.</span>length<span class="punctuation token">;</span> e<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
-        <span class="keyword token">var</span> item <span class="operator token">=</span> <span class="keyword token">this</span><span class="punctuation token">.</span>levelData<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">[</span>e<span class="punctuation token">]</span><span class="punctuation token">;</span>
-        newLevel<span class="punctuation token">.</span><span class="function token">create</span><span class="punctuation token">(</span>item<span class="punctuation token">.</span>x<span class="punctuation token">,</span> item<span class="punctuation token">.</span>y<span class="punctuation token">,</span> <span class="string token">'element-'</span><span class="operator token">+</span>item<span class="punctuation token">.</span>t<span class="punctuation token">)</span><span class="punctuation token">;</span>
-    <span class="punctuation token">}</span>
-    newLevel<span class="punctuation token">.</span><span class="function token">setAll</span><span class="punctuation token">(</span><span class="string token">'body.immovable'</span><span class="punctuation token">,</span> <span class="keyword token">true</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-    newLevel<span class="punctuation token">.</span>visible <span class="operator token">=</span> <span class="keyword token">false</span><span class="punctuation token">;</span>
-    <span class="keyword token">this</span><span class="punctuation token">.</span>levels<span class="punctuation token">.</span><span class="function token">push</span><span class="punctuation token">(</span>newLevel<span class="punctuation token">)</span><span class="punctuation token">;</span>
-<span class="punctuation token">}</span></code></pre>
-
-<p><span id="result_box" lang="fr"><span>Tout d'abord, <code>add.group ()</code> est utilisé pour créer un nouveau groupe d'éléments.</span> <span>Ensuite, le type de corps <code>ARCADE</code> est défini pour ce groupe pour activer les calculs physiques.</span> <span>La méthode <code>newLevel.create</code> crée de nouveaux éléments dans le groupe avec les positions de départ haut et gauche et sa propre image.</span> <span>Si vous ne souhaitez pas parcourir à nouveau la liste des éléments pour ajouter explicitement une propriété à chacun d'eux, vous pouvez utiliser <code>setAll</code> sur un groupe pour l'appliquer à tous les éléments de ce groupe.</span><br>
+<p>Pour rendre le jeu plus difficile et plus intéressant, nous allons ajouter des obstacles entre la balle et la sortie. Nous pourrions utiliser un éditeur de niveau, mais pour ce tutoriel, créons quelque chose par nous-mêmes.</p>
+
+<p>Pour conserver les informations du bloc, nous utiliserons un tableau de données de niveau : pour chaque bloc, nous stockons les positions absolues supérieure et gauche en pixels (<code>x</code> et <code>y</code>) et le type du bloc - horizontal ou vertical (<code>t</code> avec le '<code>w</code> 'valeur signifiant largeur et' <code>h</code> 'signifiant hauteur). Ensuite, pour charger le niveau, nous allons analyser les données et afficher les blocs spécifiques à ce niveau. Dans la fonction <code>initLevels</code>, nous avons :</p>
+
+<pre class="brush: js">this.levelData = [
+    [
+        { x: 96, y: 224, t: 'w' }
+    ],
+    [
+        { x: 72, y: 320, t: 'w' },
+        { x: 200, y: 320, t: 'h' },
+        { x: 72, y: 150, t: 'w' }
+    ],
+    // ...
+];</pre>
+
+<p>Chaque élément de tableau contient une collection de blocs avec une position <code>x</code> et <code>y</code> et une valeur <code>t</code> pour chacun. Après <code>levelData</code>, mais toujours dans la fonction <code>initLevels</code>, nous ajoutons les blocs dans un tableau de la boucle <code>for</code> en utilisant certaines des méthodes spécifiques au framework :</p>
+
+<pre class="brush: js">for(var i=0; i&lt;this.maxLevels; i++) {
+    var newLevel = this.add.group();
+    newLevel.enableBody = true;
+    newLevel.physicsBodyType = Phaser.Physics.ARCADE;
+    for(var e=0; e&lt;this.levelData[i].length; e++) {
+        var item = this.levelData[i][e];
+        newLevel.create(item.x, item.y, 'element-'+item.t);
+    }
+    newLevel.setAll('body.immovable', true);
+    newLevel.visible = false;
+    this.levels.push(newLevel);
+}</pre>
+
+<p>Tout d'abord, <code>add.group ()</code> est utilisé pour créer un nouveau groupe d'éléments. Ensuite, le type de corps <code>ARCADE</code> est défini pour ce groupe pour activer les calculs physiques. La méthode <code>newLevel.create</code> crée de nouveaux éléments dans le groupe avec les positions de départ haut et gauche et sa propre image. Si vous ne souhaitez pas parcourir à nouveau la liste des éléments pour ajouter explicitement une propriété à chacun d'eux, vous pouvez utiliser <code>setAll</code> sur un groupe pour l'appliquer à tous les éléments de ce groupe.<br>
  <br>
- <span>Les objets sont stockés dans le tableau <code>this.levels</code>, qui est ,par défaut, invisible.</span> <span>Pour charger des niveaux spécifiques, nous nous assurons que les niveaux précédents sont cachés et affichent le niveau actuel :</span></span></p>
+ Les objets sont stockés dans le tableau <code>this.levels</code>, qui est ,par défaut, invisible. Pour charger des niveaux spécifiques, nous nous assurons que les niveaux précédents sont cachés et affichent le niveau actuel :</p>
 
-<pre class="brush: js line-numbers  language-js"><code class="language-js">showLevel<span class="punctuation token">:</span> <span class="keyword token">function</span><span class="punctuation token">(</span>level<span class="punctuation token">)</span> <span class="punctuation token">{</span>
-    <span class="keyword token">var</span> lvl <span class="operator token">=</span> level <span class="operator token">|</span> <span class="keyword token">this</span><span class="punctuation token">.</span>level<span class="punctuation token">;</span>
-    <span class="keyword token">if</span><span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">.</span>levels<span class="punctuation token">[</span>lvl<span class="number token">-2</span><span class="punctuation token">]</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
-        <span class="keyword token">this</span><span class="punctuation token">.</span>levels<span class="punctuation token">[</span>lvl<span class="number token">-2</span><span class="punctuation token">]</span><span class="punctuation token">.</span>visible <span class="operator token">=</span> <span class="keyword token">false</span><span class="punctuation token">;</span>
-    <span class="punctuation token">}</span>
-    <span class="keyword token">this</span><span class="punctuation token">.</span>levels<span class="punctuation token">[</span>lvl<span class="number token">-1</span><span class="punctuation token">]</span><span class="punctuation token">.</span>visible <span class="operator token">=</span> <span class="keyword token">true</span><span class="punctuation token">;</span>
-<span class="punctuation token">}</span></code></pre>
+<pre class="brush: js">showLevel: function(level) {
+    var lvl = level | this.level;
+    if(this.levels[lvl-2]) {
+        this.levels[lvl-2].visible = false;
+    }
+    this.levels[lvl-1].visible = true;
+}</pre>
 
-<p><span id="result_box" lang="fr"><span>Grâce à cela, le jeu donne au joueur un défi : il doit maintenant rouler la balle à travers l'aire de jeu et la guider dans le labyrinthe construit à partir des blocs.</span> <span>C'est juste un exemple de chargement des niveaux, et il n'y a que 5, juste pour présenter l'idée, mais vous pouvez travailler à l'étendre par vous-même.</span></span></p>
+<p>Grâce à cela, le jeu donne au joueur un défi : il doit maintenant rouler la balle à travers l'aire de jeu et la guider dans le labyrinthe construit à partir des blocs. C'est juste un exemple de chargement des niveaux, et il n'y a que 5, juste pour présenter l'idée, mais vous pouvez travailler à l'étendre par vous-même.</p>
 
 <h3 id="Détection_de_collision">Détection de collision</h3>
 
-<p><span id="result_box" lang="fr"><span>À ce stade, nous avons la balle qui est contrôlée par le joueur, le trou à atteindre et les obstacles qui bloquent la route.</span> <span>Il y a un problème cependant : notre jeu n'a pas encore de détection de collision, donc il ne se passe rien quand la balle frappe les blocs, elle passe juste à travers.</span> <span>Réparons-le !</span> <span>Les bonnes nouvelles sont que le cadre se chargera de calculer la détection de collision, il suffit de spécifier les objets en collision dans la fonction <code>update ()</code> :</span></span></p>
+<p>À ce stade, nous avons la balle qui est contrôlée par le joueur, le trou à atteindre et les obstacles qui bloquent la route. Il y a un problème cependant : notre jeu n'a pas encore de détection de collision, donc il ne se passe rien quand la balle frappe les blocs, elle passe juste à travers. Réparons-le ! Les bonnes nouvelles sont que le cadre se chargera de calculer la détection de collision, il suffit de spécifier les objets en collision dans la fonction <code>update ()</code> :</p>
 
-<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">this</span><span class="punctuation token">.</span>physics<span class="punctuation token">.</span>arcade<span class="punctuation token">.</span><span class="function token">collide</span><span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">.</span>ball<span class="punctuation token">,</span> <span class="keyword token">this</span><span class="punctuation token">.</span>borderGroup<span class="punctuation token">,</span> <span class="keyword token">this</span><span class="punctuation token">.</span>wallCollision<span class="punctuation token">,</span> <span class="keyword token">null</span><span class="punctuation token">,</span> <span class="keyword token">this</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-<span class="keyword token">this</span><span class="punctuation token">.</span>physics<span class="punctuation token">.</span>arcade<span class="punctuation token">.</span><span class="function token">collide</span><span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">.</span>ball<span class="punctuation token">,</span> <span class="keyword token">this</span><span class="punctuation token">.</span>levels<span class="punctuation token">[</span><span class="keyword token">this</span><span class="punctuation token">.</span>level<span class="number token">-1</span><span class="punctuation token">]</span><span class="punctuation token">,</span> <span class="keyword token">this</span><span class="punctuation token">.</span>wallCollision<span class="punctuation token">,</span> <span class="keyword token">null</span><span class="punctuation token">,</span> <span class="keyword token">this</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+<pre class="brush: js">this.physics.arcade.collide(this.ball, this.borderGroup, this.wallCollision, null, this);
+this.physics.arcade.collide(this.ball, this.levels[this.level-1], this.wallCollision, null, this);</pre>
 
-<p><span id="result_box" lang="fr"><span>Cela dira à la structure d'exécuter la fonction <code>wallCollision</code> lorsque la balle frappe l'un des murs.</span> <span>Nous pouvons utiliser la fonction <code>wallCollision</code> pour ajouter toutes les fonctionnalités que nous voulons comme jouer le son du rebondissement et implémenter l'API Vibration.</span></span></p>
+<p>Cela dira à la structure d'exécuter la fonction <code>wallCollision</code> lorsque la balle frappe l'un des murs. Nous pouvons utiliser la fonction <code>wallCollision</code> pour ajouter toutes les fonctionnalités que nous voulons comme jouer le son du rebondissement et implémenter l'API Vibration.</p>
 
 <h4 id="Ajout_de_son">Ajout de son</h4>
 
-<p><span id="result_box" lang="fr"><span>Parmi les éléments préchargés, il y avait une piste audio (dans différents formats pour la compatibilité avec les navigateurs), que nous pouvons utiliser maintenant.</span> <span>Il doit d'abord être défini dans la fonction <code>create ()</code> :</span></span></p>
+<p>Parmi les éléments préchargés, il y avait une piste audio (dans différents formats pour la compatibilité avec les navigateurs), que nous pouvons utiliser maintenant. Il doit d'abord être défini dans la fonction <code>create ()</code> :</p>
 
-<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">this</span><span class="punctuation token">.</span>bounceSound <span class="operator token">=</span> <span class="keyword token">this</span><span class="punctuation token">.</span>game<span class="punctuation token">.</span>add<span class="punctuation token">.</span><span class="function token">audio</span><span class="punctuation token">(</span><span class="string token">'audio-bounce'</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+<pre class="brush: js">this.bounceSound = this.game.add.audio('audio-bounce');</pre>
 
-<p><span id="result_box" lang="fr"><span>Si l'état de l'audio est <code>true</code> <em>(vrai)</em> (les sons du jeu sont activés), nous pouvons le jouer dans la fonction <code>wallCollision</code>:</span></span></p>
+<p>Si l'état de l'audio est <code>true</code> <em>(vrai)</em> (les sons du jeu sont activés), nous pouvons le jouer dans la fonction <code>wallCollision</code>:</p>
 
-<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">if</span><span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">.</span>audioStatus<span class="punctuation token">)</span> <span class="punctuation token">{</span>
-    <span class="keyword token">this</span><span class="punctuation token">.</span>bounceSound<span class="punctuation token">.</span><span class="function token">play</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-<span class="punctuation token">}</span></code></pre>
+<pre class="brush: js">if(this.audioStatus) {
+    this.bounceSound.play();
+}</pre>
 
-<p><span id="result_box" lang="fr"><span>C'est tout - charger et jouer les sons est facile avec Phaser.</span></span></p>
+<p>C'est tout - charger et jouer les sons est facile avec Phaser.</p>
 
 <h4 id="Implementing_the_Vibration_API">Implementing the Vibration API</h4>
 
-<p><span id="result_box" lang="fr"><span>Lorsque la détection de collision fonctionne comme prévu, ajoutons quelques effets spéciaux avec l'aide de l'API Vibration.</span></span></p>
+<p>Lorsque la détection de collision fonctionne comme prévu, ajoutons quelques effets spéciaux avec l'aide de l'API Vibration.</p>
 
-<p><img alt="A visualization of the vibrations of a Flame mobile device with the Cyber Orb game demo on the screen." src="https://mdn.mozillademos.org/files/10371/cyber-orb-flame-vibration.png" style="height: 480px; width: 620px;"></p>
+<p><img src="cyber-orb-flame-vibration.png"></p>
 
-<p><span id="result_box" lang="fr"><span>La meilleure façon de l'utiliser dans notre cas est de faire vibrer le téléphone chaque fois que la balle frappe les murs, à l'intérieur de la fonction <code>wallCollision</code> :</span></span></p>
+<p>La meilleure façon de l'utiliser dans notre cas est de faire vibrer le téléphone chaque fois que la balle frappe les murs, à l'intérieur de la fonction <code>wallCollision</code> :</p>
 
-<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">if</span><span class="punctuation token">(</span><span class="string token">"vibrate"</span> <span class="keyword token">in</span> window<span class="punctuation token">.</span>navigator<span class="punctuation token">)</span> <span class="punctuation token">{</span>
-    window<span class="punctuation token">.</span>navigator<span class="punctuation token">.</span><span class="function token">vibrate</span><span class="punctuation token">(</span><span class="number token">100</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-<span class="punctuation token">}</span></code></pre>
+<pre class="brush: js">if("vibrate" in window.navigator) {
+    window.navigator.vibrate(100);
+}</pre>
 
-<p><span id="result_box" lang="fr"><span>Si la méthode <code>vibrate</code> est prise en charge par le navigateur et disponible dans l'objet <code>window.navigator</code>, faites vibrer le téléphone pendant 100 millisecondes.</span> <span>C'est tout !</span></span></p>
+<p>Si la méthode <code>vibrate</code> est prise en charge par le navigateur et disponible dans l'objet <code>window.navigator</code>, faites vibrer le téléphone pendant 100 millisecondes. C'est tout !</p>
 
-<h3 id="Ajout_du_temps_écoulé"><span class="short_text" id="result_box" lang="fr"><span>Ajout du temps écoulé</span></span></h3>
+<h3 id="Ajout_du_temps_écoulé">Ajout du temps écoulé</h3>
 
-<p><span id="result_box" lang="fr"><span>Pour améliorer la rejouabilité et donner aux joueurs l'option de rivaliser les uns avec les autres, nous pouvons introduire le temps écoulé.</span> <span>Grâce à cela, le joueur peut jouer les niveaux encore et encore en essayant d'améliorer son score.</span> <span>Pour implémenter cela dans le jeu, nous devons créer une variable pour stocker le nombre réel de secondes écoulées depuis le début du jeu et le montrer au joueur dans le jeu.</span> <span>Définissons d'abord la variable :</span></span></p>
+<p>Pour améliorer la rejouabilité et donner aux joueurs l'option de rivaliser les uns avec les autres, nous pouvons introduire le temps écoulé. Grâce à cela, le joueur peut jouer les niveaux encore et encore en essayant d'améliorer son score. Pour implémenter cela dans le jeu, nous devons créer une variable pour stocker le nombre réel de secondes écoulées depuis le début du jeu et le montrer au joueur dans le jeu. Définissons d'abord la variable :</p>
 
-<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">this</span><span class="punctuation token">.</span>timer <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> <span class="comment token">// time elapsed in the current level</span>
-<span class="keyword token">this</span><span class="punctuation token">.</span>totalTimer <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> <span class="comment token">// time elapsed in the whole game</span></code></pre>
+<pre class="brush: js">this.timer = 0; // time elapsed in the current level
+this.totalTimer = 0; // time elapsed in the whole game</pre>
 
-<p><span id="result_box" lang="fr"><span>Ensuite, juste après, nous pouvons initialiser les objets texte nécessaires à l'affichage de cette information pour l'utilisateur:</span></span></p>
+<p>Ensuite, juste après, nous pouvons initialiser les objets texte nécessaires à l'affichage de cette information pour l'utilisateur:</p>
 
-<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">this</span><span class="punctuation token">.</span>timerText <span class="operator token">=</span> <span class="keyword token">this</span><span class="punctuation token">.</span>game<span class="punctuation token">.</span>add<span class="punctuation token">.</span><span class="function token">text</span><span class="punctuation token">(</span><span class="number token">15</span><span class="punctuation token">,</span> <span class="number token">15</span><span class="punctuation token">,</span> <span class="string token">"Time: "</span><span class="operator token">+</span><span class="keyword token">this</span><span class="punctuation token">.</span>timer<span class="punctuation token">,</span> <span class="keyword token">this</span><span class="punctuation token">.</span>fontBig<span class="punctuation token">)</span><span class="punctuation token">;</span>
-<span class="keyword token">this</span><span class="punctuation token">.</span>totalTimeText <span class="operator token">=</span> <span class="keyword token">this</span><span class="punctuation token">.</span>game<span class="punctuation token">.</span>add<span class="punctuation token">.</span><span class="function token">text</span><span class="punctuation token">(</span><span class="number token">120</span><span class="punctuation token">,</span> <span class="number token">30</span><span class="punctuation token">,</span> <span class="string token">"Total time: "</span><span class="operator token">+</span><span class="keyword token">this</span><span class="punctuation token">.</span>totalTimer<span class="punctuation token">,</span> <span class="keyword token">this</span><span class="punctuation token">.</span>fontSmall<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+<pre class="brush: js">this.timerText = this.game.add.text(15, 15, "Time: "+this.timer, this.fontBig);
+this.totalTimeText = this.game.add.text(120, 30, "Total time: "+this.totalTimer, this.fontSmall);</pre>
 
-<p><span id="result_box" lang="fr"><span>Nous définissons les positions supérieure et gauche du texte, le contenu qui sera affiché et le style appliqué au texte.</span> <span>Nous l'avons imprimé à l'écran, mais il serait bon de mettre à jour les valeurs toutes les secondes :</span></span></p>
+<p>Nous définissons les positions supérieure et gauche du texte, le contenu qui sera affiché et le style appliqué au texte. Nous l'avons imprimé à l'écran, mais il serait bon de mettre à jour les valeurs toutes les secondes :</p>
 
-<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">this</span><span class="punctuation token">.</span>time<span class="punctuation token">.</span>events<span class="punctuation token">.</span><span class="function token">loop</span><span class="punctuation token">(</span>Phaser<span class="punctuation token">.</span>Timer<span class="punctuation token">.</span>SECOND<span class="punctuation token">,</span> <span class="keyword token">this</span><span class="punctuation token">.</span>updateCounter<span class="punctuation token">,</span> <span class="keyword token">this</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+<pre class="brush: js">this.time.events.loop(Phaser.Timer.SECOND, this.updateCounter, this);</pre>
 
-<p><span id="result_box" lang="fr"><span>Cette boucle, également dans la fonction </span></span> <code>create</code> <span lang="fr"><span>, exécutera la fonction <code>updateCounter</code> à chaque seconde du début du jeu afin que nous puissions appliquer les modifications en conséquence.</span> <span>Voici à quoi ressemble la fonction <code>updateCounter</code> complète :</span></span></p>
+<p>Cette boucle, également dans la fonction  <code>create</code> , exécutera la fonction <code>updateCounter</code> à chaque seconde du début du jeu afin que nous puissions appliquer les modifications en conséquence. Voici à quoi ressemble la fonction <code>updateCounter</code> complète :</p>
 
-<pre class="brush: js line-numbers  language-js"><code class="language-js">updateCounter<span class="punctuation token">:</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
-    <span class="keyword token">this</span><span class="punctuation token">.</span>timer<span class="operator token">++</span><span class="punctuation token">;</span>
-    <span class="keyword token">this</span><span class="punctuation token">.</span>timerText<span class="punctuation token">.</span><span class="function token">setText</span><span class="punctuation token">(</span><span class="string token">"Time: "</span><span class="operator token">+</span><span class="keyword token">this</span><span class="punctuation token">.</span>timer<span class="punctuation token">)</span><span class="punctuation token">;</span>
-    <span class="keyword token">this</span><span class="punctuation token">.</span>totalTimeText<span class="punctuation token">.</span><span class="function token">setText</span><span class="punctuation token">(</span><span class="string token">"Total time: "</span><span class="operator token">+</span><span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">.</span>totalTimer<span class="operator token">+</span><span class="keyword token">this</span><span class="punctuation token">.</span>timer<span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-<span class="punctuation token">}</span><span class="punctuation token">,</span></code></pre>
+<pre class="brush: js">updateCounter: function() {
+    this.timer++;
+    this.timerText.setText("Time: "+this.timer);
+    this.totalTimeText.setText("Total time: "+(this.totalTimer+this.timer));
+},</pre>
 
-<p><span id="result_box" lang="fr"><span>Comme vous pouvez le voir, nous incrémentons la variable <code>this.timer</code> et mettons à jour le contenu des objets texte avec les valeurs actuelles à chaque itération, de sorte que le joueur voit le temps écoulé.</span></span></p>
+<p>Comme vous pouvez le voir, nous incrémentons la variable <code>this.timer</code> et mettons à jour le contenu des objets texte avec les valeurs actuelles à chaque itération, de sorte que le joueur voit le temps écoulé.</p>
 
 <h3 id="Finition_du_niveau_et_du_jeu">Finition du niveau et du jeu</h3>
 
-<p><span id="result_box" lang="fr"><span>La balle tourne sur l'écran, le minutage fonctionne et nous avons le trou créé que nous devons atteindre.</span> <span>Maintenant, mettons en place la possibilité de finir le niveau !</span> <span>La ligne suivante de la fonction <code>update ()</code> ajoute un écouteur qui se déclenche lorsque la balle arrive au trou.</span></span></p>
-
-<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">this</span><span class="punctuation token">.</span>physics<span class="punctuation token">.</span>arcade<span class="punctuation token">.</span><span class="function token">overlap</span><span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">.</span>ball<span class="punctuation token">,</span> <span class="keyword token">this</span><span class="punctuation token">.</span>hole<span class="punctuation token">,</span> <span class="keyword token">this</span><span class="punctuation token">.</span>finishLevel<span class="punctuation token">,</span> <span class="keyword token">null</span><span class="punctuation token">,</span> <span class="keyword token">this</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
-
-<p><span id="result_box" lang="fr"><span>Cela fonctionne de la même manière que la méthode <code>collide</code> expliquée précédemment.</span> <span>Lorsque la balle chevauche le trou (au lieu de collision), la fonction <code>finishLevel</code> est exécutée :</span></span></p>
-
-<pre class="brush: js line-numbers  language-js"><code class="language-js">finishLevel<span class="punctuation token">:</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
-    <span class="keyword token">if</span><span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">.</span>level <span class="operator token">&gt;=</span> <span class="keyword token">this</span><span class="punctuation token">.</span>maxLevels<span class="punctuation token">)</span> <span class="punctuation token">{</span>
-        <span class="keyword token">this</span><span class="punctuation token">.</span>totalTimer <span class="operator token">+</span><span class="operator token">=</span> <span class="keyword token">this</span><span class="punctuation token">.</span>timer<span class="punctuation token">;</span>
-        <span class="function token">alert</span><span class="punctuation token">(</span><span class="string token">'Congratulations, game completed!\nTotal time of play: '</span><span class="operator token">+</span><span class="keyword token">this</span><span class="punctuation token">.</span>totalTimer<span class="operator token">+</span><span class="string token">' seconds!'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-        <span class="keyword token">this</span><span class="punctuation token">.</span>game<span class="punctuation token">.</span>state<span class="punctuation token">.</span><span class="function token">start</span><span class="punctuation token">(</span><span class="string token">'MainMenu'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-    <span class="punctuation token">}</span>
-    <span class="keyword token">else</span> <span class="punctuation token">{</span>
-        <span class="function token">alert</span><span class="punctuation token">(</span><span class="string token">'Congratulations, level '</span><span class="operator token">+</span><span class="keyword token">this</span><span class="punctuation token">.</span>level<span class="operator token">+</span><span class="string token">' completed!'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-        <span class="keyword token">this</span><span class="punctuation token">.</span>totalTimer <span class="operator token">+</span><span class="operator token">=</span> <span class="keyword token">this</span><span class="punctuation token">.</span>timer<span class="punctuation token">;</span>
-        <span class="keyword token">this</span><span class="punctuation token">.</span>timer <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span>
-        <span class="keyword token">this</span><span class="punctuation token">.</span>level<span class="operator token">++</span><span class="punctuation token">;</span>
-        <span class="keyword token">this</span><span class="punctuation token">.</span>timerText<span class="punctuation token">.</span><span class="function token">setText</span><span class="punctuation token">(</span><span class="string token">"Time: "</span><span class="operator token">+</span><span class="keyword token">this</span><span class="punctuation token">.</span>timer<span class="punctuation token">)</span><span class="punctuation token">;</span>
-        <span class="keyword token">this</span><span class="punctuation token">.</span>totalTimeText<span class="punctuation token">.</span><span class="function token">setText</span><span class="punctuation token">(</span><span class="string token">"Total time: "</span><span class="operator token">+</span><span class="keyword token">this</span><span class="punctuation token">.</span>totalTimer<span class="punctuation token">)</span><span class="punctuation token">;</span>
-        <span class="keyword token">this</span><span class="punctuation token">.</span>levelText<span class="punctuation token">.</span><span class="function token">setText</span><span class="punctuation token">(</span><span class="string token">"Level: "</span><span class="operator token">+</span><span class="keyword token">this</span><span class="punctuation token">.</span>level<span class="operator token">+</span><span class="string token">" / "</span><span class="operator token">+</span><span class="keyword token">this</span><span class="punctuation token">.</span>maxLevels<span class="punctuation token">)</span><span class="punctuation token">;</span>
-        <span class="keyword token">this</span><span class="punctuation token">.</span>ball<span class="punctuation token">.</span>body<span class="punctuation token">.</span>x <span class="operator token">=</span> <span class="keyword token">this</span><span class="punctuation token">.</span>ballStartPos<span class="punctuation token">.</span>x<span class="punctuation token">;</span>
-        <span class="keyword token">this</span><span class="punctuation token">.</span>ball<span class="punctuation token">.</span>body<span class="punctuation token">.</span>y <span class="operator token">=</span> <span class="keyword token">this</span><span class="punctuation token">.</span>ballStartPos<span class="punctuation token">.</span>y<span class="punctuation token">;</span>
-        <span class="keyword token">this</span><span class="punctuation token">.</span>ball<span class="punctuation token">.</span>body<span class="punctuation token">.</span>velocity<span class="punctuation token">.</span>x <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span>
-        <span class="keyword token">this</span><span class="punctuation token">.</span>ball<span class="punctuation token">.</span>body<span class="punctuation token">.</span>velocity<span class="punctuation token">.</span>y <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span>
-        <span class="keyword token">this</span><span class="punctuation token">.</span><span class="function token">showLevel</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-    <span class="punctuation token">}</span>
-<span class="punctuation token">}</span><span class="punctuation token">,</span></code></pre>
-
-<p><span id="result_box" lang="fr"><span>Si le niveau actuel est égal au nombre maximum de niveaux (dans ce cas, 5), le jeu est terminé - vous recevrez un message de félicitations avec le nombre de secondes écoulées pendant toute la partie et un clique sur un bouton</span> <span>vous ramène au menu principal.</span></span></p>
-
-<p><span id="result_box" lang="fr"><span>Si le niveau actuel est inférieur à 5, toutes les variables nécessaires sont réinitialisées et le niveau suivant est chargé.</span></span></p>
+<p>La balle tourne sur l'écran, le minutage fonctionne et nous avons le trou créé que nous devons atteindre. Maintenant, mettons en place la possibilité de finir le niveau ! La ligne suivante de la fonction <code>update ()</code> ajoute un écouteur qui se déclenche lorsque la balle arrive au trou.</p>
+
+<pre class="brush: js">this.physics.arcade.overlap(this.ball, this.hole, this.finishLevel, null, this);</pre>
+
+<p>Cela fonctionne de la même manière que la méthode <code>collide</code> expliquée précédemment. Lorsque la balle chevauche le trou (au lieu de collision), la fonction <code>finishLevel</code> est exécutée :</p>
+
+<pre class="brush: js">finishLevel: function() {
+    if(this.level &gt;= this.maxLevels) {
+        this.totalTimer += this.timer;
+        alert('Congratulations, game completed!\nTotal time of play: '+this.totalTimer+' seconds!');
+        this.game.state.start('MainMenu');
+    }
+    else {
+        alert('Congratulations, level '+this.level+' completed!');
+        this.totalTimer += this.timer;
+        this.timer = 0;
+        this.level++;
+        this.timerText.setText("Time: "+this.timer);
+        this.totalTimeText.setText("Total time: "+this.totalTimer);
+        this.levelText.setText("Level: "+this.level+" / "+this.maxLevels);
+        this.ball.body.x = this.ballStartPos.x;
+        this.ball.body.y = this.ballStartPos.y;
+        this.ball.body.velocity.x = 0;
+        this.ball.body.velocity.y = 0;
+        this.showLevel();
+    }
+},</pre>
+
+<p>Si le niveau actuel est égal au nombre maximum de niveaux (dans ce cas, 5), le jeu est terminé - vous recevrez un message de félicitations avec le nombre de secondes écoulées pendant toute la partie et un clique sur un bouton vous ramène au menu principal.</p>
+
+<p>Si le niveau actuel est inférieur à 5, toutes les variables nécessaires sont réinitialisées et le niveau suivant est chargé.</p>
 
 <h2 id="Idées_pour_de_nouvelles_fonctionnalités">Idées pour de nouvelles fonctionnalités</h2>
 
-<p><span id="result_box" lang="fr"><span>Ceci est simplement une démonstration de travail d'un jeu qui pourrait avoir beaucoup de fonctionnalités supplémentaires.</span> <span>Nous pouvons par exemple ajouter des "power-ups" à collecter en cours de route qui feront rouler notre balle plus rapidement, arrêter le chronomètre pendant quelques secondes ou donner à la balle des pouvoirs spéciaux pour traverser les obstacles.</span> <span>Il y a aussi de la place pour les pièges qui ralentiront la balle ou rendront le but plus difficile à atteindre.</span> <span>Vous pouvez créer plus de niveaux de difficulté croissante.</span> <span>Vous pouvez même mettre en œuvre des trophées, des classements et des médailles pour différentes actions du jeu.</span> <span>Il y a des possibilités infinies - elles ne dépendent que de votre imagination.</span></span></p>
+<p>Ceci est simplement une démonstration de travail d'un jeu qui pourrait avoir beaucoup de fonctionnalités supplémentaires. Nous pouvons par exemple ajouter des "power-ups" à collecter en cours de route qui feront rouler notre balle plus rapidement, arrêter le chronomètre pendant quelques secondes ou donner à la balle des pouvoirs spéciaux pour traverser les obstacles. Il y a aussi de la place pour les pièges qui ralentiront la balle ou rendront le but plus difficile à atteindre. Vous pouvez créer plus de niveaux de difficulté croissante. Vous pouvez même mettre en œuvre des trophées, des classements et des médailles pour différentes actions du jeu. Il y a des possibilités infinies - elles ne dépendent que de votre imagination.</p>
 
 <h2 id="Résumé">Résumé</h2>
 
-<p><span id="result_box" lang="fr"><span>J'espère que ce tutoriel vous aidera à plonger dans le développement de jeux en 2D et vous inspirera pour créer des jeux géniaux par vous-même.</span> <span>Vous pouvez jouer au jeu de démonstration</span></span> <a href="http://orb.enclavegames.com/">Cyber Orb</a> et <span class="short_text" id="result_box" lang="fr"><span>consulter son</span></span> <a href="https://github.com/EnclaveGames/Cyber-Orb">code source sur GitHub</a>.</p>
+<p>J'espère que ce tutoriel vous aidera à plonger dans le développement de jeux en 2D et vous inspirera pour créer des jeux géniaux par vous-même. Vous pouvez jouer au jeu de démonstration <a href="http://orb.enclavegames.com/">Cyber Orb</a> et consulter son <a href="https://github.com/EnclaveGames/Cyber-Orb">code source sur GitHub</a>.</p>
 
-<p><span id="result_box" lang="fr"><span>HTML5 nous donne des outils bruts, les frameworks construits au-dessus deviennent plus rapides et meilleurs, alors c'est un bon moment pour le développement de jeux web.</span> <span>Dans ce tutoriel, nous avons utilisé Phaser, mais il existe un certain nombre d'</span></span> <a href="http://html5devstarter.enclavegames.com/#frameworks">autres frameworks</a> <span class="short_text" id="result_box" lang="fr"><span>qui méritent d'être considérés aussi, comme</span></span> <a href="http://impactjs.com/">ImpactJS</a>, <a href="https://www.scirra.com/construct2">Construct 2</a> ou <a href="http://playcanvas.com/">PlayCanvas</a> — <span id="result_box" lang="fr"><span>cela dépend de vos préférences, de vos compétences en codage (ou de leur absence), de l'échelle du projet, des exigences et d'autres aspects.</span> <span>Vous devriez les regarder tous et décider lequel convient le mieux à vos besoins.</span></span></p>
+<p>HTML5 nous donne des outils bruts, les frameworks construits au-dessus deviennent plus rapides et meilleurs, alors c'est un bon moment pour le développement de jeux web. Dans ce tutoriel, nous avons utilisé Phaser, mais il existe un certain nombre d' <a href="http://html5devstarter.enclavegames.com/#frameworks">autres frameworks</a> qui méritent d'être considérés aussi, comme <a href="http://impactjs.com/">ImpactJS</a>, <a href="https://www.scirra.com/construct2">Construct 2</a> ou <a href="http://playcanvas.com/">PlayCanvas</a> — cela dépend de vos préférences, de vos compétences en codage (ou de leur absence), de l'échelle du projet, des exigences et d'autres aspects. Vous devriez les regarder tous et décider lequel convient le mieux à vos besoins.</p>
diff --git a/files/fr/games/tutorials/index.html b/files/fr/games/tutorials/index.html
index 690b800a40..cb07031e7a 100644
--- a/files/fr/games/tutorials/index.html
+++ b/files/fr/games/tutorials/index.html
@@ -16,14 +16,14 @@ original_slug: Games/Workflows
 <p>Cette page contient plusieurs séries de tutoriels qui mettent en évidence différentes démarches pour créer efficacement différents types de jeux Web.</p>
 
 <dl>
- <dt><a href="https://developer.mozilla.org/fr/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript">Jeu 2D avec du pur JavaScript</a></dt>
- <dd><span id="result_box" lang="fr"><span>Dans ce tutoriel étape par étape, vous implémenterez un jeu en utilisant du pur JavaScript.</span> <span>En cours de route, vous apprendrez les bases de l'utilisation de l'élément {{htmlelement ("canvas")}} pour implémenter les mécanismes fondamentaux du jeu tels que le rendu et les images en mouvement, la détection de collision, les mécanismes de contrôle et les états gagnants et perdants.</span></span></dd>
- <dt><a href="https://developer.mozilla.org/fr/docs/Games/Tutorials/2D_breakout_game_Phaser">Jeu 2D avec Phaser</a></dt>
- <dd><span id="result_box" lang="fr"><span>Dans ce tutoriel étape par étape, vous implémenterez un jeu en utilisant le framework de jeu HTML5 </span></span> <a class="external external-icon" href="http://phaser.io/">Phaser</a> <span lang="fr"><span>.</span> <span>Cette idée ici est d'enseigner quelques-uns des fondamentaux (et des avantages) de travailler avec des cadres (<em>frameworks</em>), avec les mécanismes de jeu.</span></span></dd>
- <dt><a href="https://developer.mozilla.org/fr/docs/Games/Workflows/HTML5_Gamedev_Phaser_Device_Orientation_FR">Jeu 2D avec API Device orientation</a></dt>
- <dd><span id="result_box" lang="fr"><span>Ce tutoriel montre comment créer un jeu de labyrinthe en 2D en utilisant HTML5, en intégrant des principes fondamentaux tels que la détection de collision et le placement de "sprites" sur un {{htmlelement ("canvas")}}.</span> <span>Il s'agit d'un jeu mobile qui utilise les API <a href="https://developer.mozilla.org/fr/Apps/Fundamentals/gather_and_modify_data/responding_to_device_orientation_changes">Device Orientation</a> et <a href="https://developer.mozilla.org/fr/docs/Web/API/Vibration_API">Vibration,</a> pour améliorer le gameplay, et est construit en utilisant le framework </span></span> <a href="http://phaser.io/">Phaser</a> <span lang="fr"><span>.</span></span></dd>
+ <dt><a href="/fr/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript">Jeu 2D avec du pur JavaScript</a></dt>
+ <dd>Dans ce tutoriel étape par étape, vous implémenterez un jeu en utilisant du pur JavaScript. En cours de route, vous apprendrez les bases de l'utilisation de l'élément {{htmlelement ("canvas")}} pour implémenter les mécanismes fondamentaux du jeu tels que le rendu et les images en mouvement, la détection de collision, les mécanismes de contrôle et les états gagnants et perdants.</dd>
+ <dt><a href="/fr/docs/Games/Tutorials/2D_breakout_game_Phaser">Jeu 2D avec Phaser</a></dt>
+ <dd>Dans ce tutoriel étape par étape, vous implémenterez un jeu en utilisant le framework de jeu HTML5  <a class="external external-icon" href="http://phaser.io/">Phaser</a> . Cette idée ici est d'enseigner quelques-uns des fondamentaux (et des avantages) de travailler avec des cadres (<em>frameworks</em>), avec les mécanismes de jeu.</dd>
+ <dt><a href="/fr/docs/Games/Workflows/HTML5_Gamedev_Phaser_Device_Orientation_FR">Jeu 2D avec API Device orientation</a></dt>
+ <dd>Ce tutoriel montre comment créer un jeu de labyrinthe en 2D en utilisant HTML5, en intégrant des principes fondamentaux tels que la détection de collision et le placement de "sprites" sur un {{htmlelement ("canvas")}}. Il s'agit d'un jeu mobile qui utilise les API <a href="/fr/Apps/Fundamentals/gather_and_modify_data/responding_to_device_orientation_changes">Device Orientation</a> et <a href="/fr/docs/Web/API/Vibration_API">Vibration,</a> pour améliorer le gameplay, et est construit en utilisant le framework  <a href="http://phaser.io/">Phaser</a> .</dd>
  <dt><a href="https://mozdevs.github.io/html5-games-workshop/en/guides/platformer/start-here/">Jeu de plateforme 2D avec Phaser</a></dt>
- <dd><span id="result_box" lang="fr"><span>Cette série de tutoriels montre comment créer un jeu de plateforme simple à l'aide de </span></span> <a href="http://phaser.io/">Phaser</a> <span lang="fr"><span>, couvrant les fondamentaux tels que les "sprites", les collisions, la physique, les objets de collection et plus encore.</span></span></dd>
+ <dd>Cette série de tutoriels montre comment créer un jeu de plateforme simple à l'aide de  <a href="http://phaser.io/">Phaser</a> , couvrant les fondamentaux tels que les "sprites", les collisions, la physique, les objets de collection et plus encore.</dd>
 </dl>
 
 <p> </p>
author	SphinxKnight <SphinxKnight@users.noreply.github.com>	2021-11-11 07:41:53 +0100
committer	GitHub <noreply@github.com>	2021-11-11 07:41:53 +0100
commit	08e5d65aa816c4a3b6a9680360e8b0daf4079bf2 (patch)
tree	17620a8fdad6454ab99728fbfe471224c92f1649 /files/fr/games
parent	a8fb2ac407174bff7ea35cd5fff146cb43a49e4e (diff)
download	translated-content-08e5d65aa816c4a3b6a9680360e8b0daf4079bf2.tar.gz translated-content-08e5d65aa816c4a3b6a9680360e8b0daf4079bf2.tar.bz2 translated-content-08e5d65aa816c4a3b6a9680360e8b0daf4079bf2.zip