Fix #4269 - Removes empty/special characters (#4270)

* Remove ufeff

* Remove u2064

* Remove u2062

* Replace u202f followed by : with  :

* Replace u202f next to « or » with   and « or »

* Replace u202f followed by ; with  ;

* Replace u202f followed by ! with  

* Replace u202f followed by ? with  ?

* Replace remaining u202f with classical space

* Replace u200b surrounded by space  with classical space

* Replace u200b surrounded by space  with classical space - again (repeated)

* Remove remaining u200b

* Remove u200a

* Replace u2009 with  

* Remove u00ad

* Replace u00a0 followed by : ! or ? with   and punctuation

* Replace u00a0 surrounded « or » with   and punctuation

* Replace u00a0 followed by whitespaces

* Replace u00a0 preceded by whitespaces

* Replace u00a0 followed by a newline with a newline

* Replace u00a0 followed by a newline with a newline - Take2

* Replace u00a0 followed by a ;   and punctuation

* Remove u00a0 followed by ,

* Remove u00a0 in indentation spaces with \n([ ]*)([\u00a0])([ ]*)

* Manual replacement of ([\u00a0])([ ]+)

* Replace remaining ([\u00a0]+) by a space

* cleaning empty elements

* remove ufe0f

* Remove u00a0 and u202f after merging against updated main

* remove double whitespace using (\w)(  )(\w)

23 files changed, 195 insertions, 195 deletions

diff --git a/files/fr/games/anatomy/index.md b/files/fr/games/anatomy/index.md
index 1e7d38a462..ec03f5ae89 100644
--- a/files/fr/games/anatomy/index.md
+++ b/files/fr/games/anatomy/index.md
@@ -13,27 +13,27 @@ original_slug: Jeux/Anatomie
 
 {{IncludeSubnav("/fr/docs/Jeux")}}
 
-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.
+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.
 
 ## Présenter, accepter, interpréter, calculer, repéter
 
-Le but de chaque jeu vidéo est de **présenter** à (aux) utilisateur(s) une situation, **accepter** leur entrée, **interpréter** ces signaux en actions, et **calculer** une nouvelle situation résultant de ces actes. Les jeux bouclent continuellement à travers ces niveaux, jusqu'à ce qu'une condition finale arrive (comme gagner, perdre, ou quitter le jeu). Sans surprise, ce modèle correspond à la manière dont un moteur de jeu est programmé.
+Le but de chaque jeu vidéo est de **présenter** à (aux) utilisateur(s) une situation, **accepter** leur entrée, **interpréter** ces signaux en actions, et **calculer** une nouvelle situation résultant de ces actes. Les jeux bouclent continuellement à travers ces niveaux, jusqu'à ce qu'une condition finale arrive (comme gagner, perdre, ou quitter le jeu). Sans surprise, ce modèle correspond à la manière dont un moteur de jeu est programmé.
 
 Ces spécificités dépendent du jeu.
 
-Certains jeu maintiennent ce cycle par les entrées du joueur. Imaginez que vous développez un jeu du type *"trouvez les différences entre ces deux images"*. Ces jeux **présentent** deux images à l'utilisateur; ils **accèptent** leur clics (ou touchés); ils **interprètent** l'entrée comme un succès, une erreur, une pause, une interaction de menu, etc.; finalement, ils **calculent** une scène mise à jour resultant de l'entrée de donnée. La boucle du jeu évolue par l'entrée de l'utilisateur et s'arrête jusqu'à ce qu'il en soumette une nouvelle. C'est plus une approche au coup par coup qui ne demande pas une mise à jour continuelle de chaque image, mais juste quand le joueur réagit.
+Certains jeu maintiennent ce cycle par les entrées du joueur. Imaginez que vous développez un jeu du type *"trouvez les différences entre ces deux images"*. Ces jeux **présentent** deux images à l'utilisateur; ils **accèptent** leur clics (ou touchés); ils **interprètent** l'entrée comme un succès, une erreur, une pause, une interaction de menu, etc.; finalement, ils **calculent** une scène mise à jour resultant de l'entrée de donnée. La boucle du jeu évolue par l'entrée de l'utilisateur et s'arrête jusqu'à ce qu'il en soumette une nouvelle. C'est plus une approche au coup par coup qui ne demande pas une mise à jour continuelle de chaque image, mais juste quand le joueur réagit.
 
-D'autres jeux demandent un contrôle précis à chaque fraction de seconde. Les principes sont les mêmes avec une légère différence: chaque animation fait progresser le cycle et tout changement d'entrée d'un utilisateur est capturé dès que possible. Ce modèle au coup par image  est implementé dans ce que l'on appelle la **boucle principale**. Si vos boucles de jeu sont basées sur le temps alors ce sera là-dessus que seront basées vos simulations.
+D'autres jeux demandent un contrôle précis à chaque fraction de seconde. Les principes sont les mêmes avec une légère différence: chaque animation fait progresser le cycle et tout changement d'entrée d'un utilisateur est capturé dès que possible. Ce modèle au coup par image est implementé dans ce que l'on appelle la **boucle principale**. Si vos boucles de jeu sont basées sur le temps alors ce sera là-dessus que seront basées vos simulations.
 
-Mais parfois ce n'est pas un contrôle dans le temps. Votre boucle de jeu peut être similaire à l'exemple *cherchez les différences* et se baser directement sur les entrées. Cela peut être nécessaire d'avoir à la fois les entrées et un temps simulé. Cela peut aussi être basé sur une boucle qui utilise d'autre chose.
+Mais parfois ce n'est pas un contrôle dans le temps. Votre boucle de jeu peut être similaire à l'exemple *cherchez les différences* et se baser directement sur les entrées. Cela peut être nécessaire d'avoir à la fois les entrées et un temps simulé. Cela peut aussi être basé sur une boucle qui utilise d'autre chose.
 
-Le JavaScript moderne — comme décrit dans les prochaines sections — heureusement, facilite le développement d'une boucle efficace éxécutée une fois par seconde. Bien sûr, votre jeu sera optimisé au long de sa conception. Si quelque chose doit s'apparenter à un évènement peu fréquent alors il sera préférable de briser la boucle principale (mais pas tout le temps).
+Le JavaScript moderne — comme décrit dans les prochaines sections — heureusement, facilite le développement d'une boucle efficace éxécutée une fois par seconde. Bien sûr, votre jeu sera optimisé au long de sa conception. Si quelque chose doit s'apparenter à un évènement peu fréquent alors il sera préférable de briser la boucle principale (mais pas tout le temps).
 
-## Construire une boucle principale en JavaScript
+## Construire une boucle principale en JavaScript
 
-JavaScript travaille beaucoup mieux avec des évènements et des fonctions de rappel. Les navigateur modernes s'efforcent d'appeler des méthodes au moment où elles sont nécessaires et mises en pause (ou font leur travail) le reste du temps. Il est de bonne pratique d'attacher votre code au moment le plus approprié. Pensez à quel moment votre fonction à besoin d'être appelée sur un interval de temps strict, à chaque image, ou seulement après que quelque chose se soit passé. Être plus spécifique avec le navigateur quand votre fonction à besoin d'être appelée permet au navigateur d'être optimisé une fois votre boucle appelée. De plus, cela peut rendre votre tâche plus aisée.
+JavaScript travaille beaucoup mieux avec des évènements et des fonctions de rappel. Les navigateur modernes s'efforcent d'appeler des méthodes au moment où elles sont nécessaires et mises en pause (ou font leur travail) le reste du temps. Il est de bonne pratique d'attacher votre code au moment le plus approprié. Pensez à quel moment votre fonction à besoin d'être appelée sur un interval de temps strict, à chaque image, ou seulement après que quelque chose se soit passé. Être plus spécifique avec le navigateur quand votre fonction à besoin d'être appelée permet au navigateur d'être optimisé une fois votre boucle appelée. De plus, cela peut rendre votre tâche plus aisée.
 
-Certain programmes ont besoin d'être lancés image-par-image alors pourquoi y attacher quelque chose d'autre que le taux de rafraîchissement du navigateur ? Dans le web, `{{ domxref("window.requestAnimationFrame()") }}` sera la fondation de bien des boucles principales. Une fonction de rappel doit lui être passée quand elle est appelée. Cette fonction de rappel sera éxécutée à un moment précis avant le prochain rafraîchissement. Voici un exemple d'une simple boucle principale:
+Certain programmes ont besoin d'être lancés image-par-image alors pourquoi y attacher quelque chose d'autre que le taux de rafraîchissement du navigateur ? Dans le web, `{{ domxref("window.requestAnimationFrame()") }}` sera la fondation de bien des boucles principales. Une fonction de rappel doit lui être passée quand elle est appelée. Cette fonction de rappel sera éxécutée à un moment précis avant le prochain rafraîchissement. Voici un exemple d'une simple boucle principale:
 
     window.main = function () {
       window.requestAnimationFrame( main );
@@ -43,19 +43,19 @@ Certain programmes ont besoin d'être lancés image-par-image alors pourquoi
 
     main(); //Débuter le cycle.
 
-**Note**: Dans chaque méthodes `main()` présentées ici, nous planifions un nouveau `requestAnimationFrame` avant de lancer le contenu de notre boucle. Ce n'est pas par accident et c'est considéré comme une meilleure pratique. Appeler le prochain `requestAnimationFrame` plus tôt assure que le navigateur la recevra à temps pour le planifier convenablement même si vous image courrante rate la fenêtre de synchronisation principale (VSync).
+**Note**: Dans chaque méthodes `main()` présentées ici, nous planifions un nouveau `requestAnimationFrame` avant de lancer le contenu de notre boucle. Ce n'est pas par accident et c'est considéré comme une meilleure pratique. Appeler le prochain `requestAnimationFrame` plus tôt assure que le navigateur la recevra à temps pour le planifier convenablement même si vous image courrante rate la fenêtre de synchronisation principale (VSync).
 
-La portion de code ci-dessus comporte deux déclarations. La première créée une fonction comme variable globale appelée `main()`. Cette fonction effectue un travail et indique aussi au navigateur de s'appeler elle-même au prochain `window.requestAnimationFrame()`. La seconde déclaration appelle la fonction `main()`, definie dans la première déclaration. Parceque `main()` est appelé une fois dans la seconde déclaration et chaque appel de celle-ci la place dans la queue des choses à faire à chaque image, `main()` est synchronisée à votre taux de rafraîchissement.
+La portion de code ci-dessus comporte deux déclarations. La première créée une fonction comme variable globale appelée `main()`. Cette fonction effectue un travail et indique aussi au navigateur de s'appeler elle-même au prochain `window.requestAnimationFrame()`. La seconde déclaration appelle la fonction `main()`, definie dans la première déclaration. Parceque `main()` est appelé une fois dans la seconde déclaration et chaque appel de celle-ci la place dans la queue des choses à faire à chaque image, `main()` est synchronisée à votre taux de rafraîchissement.
 
 Bien sûr, cette boucle n'est pas parfaite. Avant que nous discutions de manières de la modifier, parlons de ce qu'elle fait de bien.
 
-Temporiser la boucle principale avec le rafraîchissement du navigateur permet à votre boucle d'être éxécutée aussi fréquemment que le navigateur à besoin de rafraîchir l'écran. Cela vous permet de contrôler chaque image de votre animation. C'est aussi beaucoup plus simple car `main()` est la seule fonction qui est bouclée. Dans un jeu de tir à la première personne (ou un jeu équivalent) on présente une nouvelle scène à chaque image. Vous ne pouvez donc pas obtenir quelque chose de plus fluide que cela.
+Temporiser la boucle principale avec le rafraîchissement du navigateur permet à votre boucle d'être éxécutée aussi fréquemment que le navigateur à besoin de rafraîchir l'écran. Cela vous permet de contrôler chaque image de votre animation. C'est aussi beaucoup plus simple car `main()` est la seule fonction qui est bouclée. Dans un jeu de tir à la première personne (ou un jeu équivalent) on présente une nouvelle scène à chaque image. Vous ne pouvez donc pas obtenir quelque chose de plus fluide que cela.
 
-Pourtant n'imaginez pas que les animations requièrent un contrôle image-par-image. De simples animations peuvent être éxécutées, même avec une accélération matérielle, avec des animations CSS et d'autres outils inclus dans le navigateur. Bon nombre vont vous faciliter la vie.
+Pourtant n'imaginez pas que les animations requièrent un contrôle image-par-image. De simples animations peuvent être éxécutées, même avec une accélération matérielle, avec des animations CSS et d'autres outils inclus dans le navigateur. Bon nombre vont vous faciliter la vie.
 
-## Construire une *meilleure* boucle principale en Javascript
+## Construire une *meilleure* boucle principale en Javascript
 
-Il y a deux problèmes évidents avec notre boucle principale précédente: `main()` pollue l'objet `{{ domxref("window") }}` (où sont stockées toutes les variables globales) et l'exemple donné ne nous permet pas de *stopper* la boucle à moins que l'onglet du navigateur ne soit fermé ou rafraîchit. Pour le premier problème, si vous désirez que la boucle principale tourne simplement sans y accéder directement, vous pouvez en crééer une fonction à accès immédiat -(FAI ou "Immediately-Invoked Function Expression - IIFE").
+Il y a deux problèmes évidents avec notre boucle principale précédente: `main()` pollue l'objet `{{ domxref("window") }}` (où sont stockées toutes les variables globales) et l'exemple donné ne nous permet pas de *stopper* la boucle à moins que l'onglet du navigateur ne soit fermé ou rafraîchit. Pour le premier problème, si vous désirez que la boucle principale tourne simplement sans y accéder directement, vous pouvez en crééer une fonction à accès immédiat -(FAI ou "Immediately-Invoked Function Expression - IIFE").
 
     /*
     * Débuter avec le point virgue au cas où le code qui réside au-dessus de cet exemple
@@ -74,11 +74,11 @@ Il y a deux problèmes évidents avec notre boucle principale précédente: `mai
       main(); // Débute le cycle
     })();
 
-Quand le navigateur passe à travers la FAI, cela va définir votre boucle principale et immédiatement la mettre en file d'attente pour la prochaine image. Cela ne sera attaché à aucun objet et `main` (ou `main()` pour les méthodes) sera un nom valide inutilisé dans le reste de l'application, libre d'être défini comme quelque chose d'autre.
+Quand le navigateur passe à travers la FAI, cela va définir votre boucle principale et immédiatement la mettre en file d'attente pour la prochaine image. Cela ne sera attaché à aucun objet et `main` (ou `main()` pour les méthodes) sera un nom valide inutilisé dans le reste de l'application, libre d'être défini comme quelque chose d'autre.
 
-Note: En pratique, il est plus courant de prévenir le prochain requestAnimationFrame() avec une déclaration "if", plutôt que d'appeler cancelAnimationFrame().
+Note: En pratique, il est plus courant de prévenir le prochain requestAnimationFrame() avec une déclaration "if", plutôt que d'appeler cancelAnimationFrame().
 
-Pour le second problème, arrêter la boucle principale, vous aurez besoin d'annuler l'appel à `main()` avec `{{ domxref("window.cancelAnimationFrame()") }}`. Vous aurez besoin de passer la valeur donneé par `cancelAnimationFrame()` en référence à `requestAnimationFrame()` quand elle a été appelée en dernier. Assumons que vos fonctions de jeu et les variables sont bâties dans un espace de nom appelé `MyGame`. Avec notre dernier exemple étendu, la boucle principale aura maintenant l'air de ceci:
+Pour le second problème, arrêter la boucle principale, vous aurez besoin d'annuler l'appel à `main()` avec `{{ domxref("window.cancelAnimationFrame()") }}`. Vous aurez besoin de passer la valeur donneé par `cancelAnimationFrame()` en référence à `requestAnimationFrame()` quand elle a été appelée en dernier. Assumons que vos fonctions de jeu et les variables sont bâties dans un espace de nom appelé `MyGame`. Avec notre dernier exemple étendu, la boucle principale aura maintenant l'air de ceci:
 
     /*
     * Débuter avec le point virgue au cas où le code qui réside au-dessus de cet exemple
@@ -99,34 +99,34 @@ Pour le second problème, arrêter la boucle principale, vous aurez besoin d'ann
       main(); // Début du cycle
     })();
 
-Nous avons maintenant une variable déclarée dans l'espace de nom `MyGame`, que nous appelons `stopMain`, qui contient la valeur de l'appel de notre boucle principale `requestAnimationFrame()` la plus récente. À tout moment, nous pouvons stopper la boucle principale en disant au navigateur d'annuler la requête qui correspond à notre valeur.
+Nous avons maintenant une variable déclarée dans l'espace de nom `MyGame`, que nous appelons `stopMain`, qui contient la valeur de l'appel de notre boucle principale `requestAnimationFrame()` la plus récente. À tout moment, nous pouvons stopper la boucle principale en disant au navigateur d'annuler la requête qui correspond à notre valeur.
 
     window.cancelAnimationFrame( MyGame.stopMain );
 
-La clé pour programmer une boucle principale, en JavaScript, est d'attacher n'importe quel évènement qui doit diriger votre action et porter attention aux systèmes interconnectés. Vous pourriez avoir différents composants dirigés par différents évènements. Cela paraît comme d'une complexité inutile mais cela peut être une bonne optimisation (pas nécessairement, bien sûr). Le problème c'est que vous ne programmez pas une boucle principale typique. En Javascript, vous utilisez la boucle principale du navigateur et vous essayez de le faire avec efficacité.
+La clé pour programmer une boucle principale, en JavaScript, est d'attacher n'importe quel évènement qui doit diriger votre action et porter attention aux systèmes interconnectés. Vous pourriez avoir différents composants dirigés par différents évènements. Cela paraît comme d'une complexité inutile mais cela peut être une bonne optimisation (pas nécessairement, bien sûr). Le problème c'est que vous ne programmez pas une boucle principale typique. En Javascript, vous utilisez la boucle principale du navigateur et vous essayez de le faire avec efficacité.
 
-## Construire une boucle principale *encore plus optimisée* en JavaScript
+## Construire une boucle principale *encore plus optimisée* en JavaScript
 
-En fin de compte, en JavaScript, le navigateur roule sa propre boucle principale et votre code existe dans certaines de ses étapes. La section ci-dessus décrit des boucles principales qui essaient de ne pas lâcher le contrôle du navigateur. Ces méthodes principales s'attachent à `window.requestAnimationFrame()`, qui demandent au navigateur le contrôle sur la prochaine image qui arrive. C'est au navigateur de décider de la gestion de sa boucle principale. Les spécifications du [W3C en matière de requestAnimationFrame](http://www.w3.org/TR/animation-timing/) ne définissent pas exactement quand les navigateur doivent éxécuter les rappels de requestAnimationFrame. Cela pourrait être bénéfique car cela laisse aux concepteurs de navigateurs la liberté d'expérimenter les solutions qu'ils pensent être les meilleures au travers du temps.
+En fin de compte, en JavaScript, le navigateur roule sa propre boucle principale et votre code existe dans certaines de ses étapes. La section ci-dessus décrit des boucles principales qui essaient de ne pas lâcher le contrôle du navigateur. Ces méthodes principales s'attachent à `window.requestAnimationFrame()`, qui demandent au navigateur le contrôle sur la prochaine image qui arrive. C'est au navigateur de décider de la gestion de sa boucle principale. Les spécifications du [W3C en matière de requestAnimationFrame](http://www.w3.org/TR/animation-timing/) ne définissent pas exactement quand les navigateur doivent éxécuter les rappels de requestAnimationFrame. Cela pourrait être bénéfique car cela laisse aux concepteurs de navigateurs la liberté d'expérimenter les solutions qu'ils pensent être les meilleures au travers du temps.
 
-Les versions modernes de Firefox et Google Chrome (et probablement d'autres)*tentent* de connecter les rappels de `requestAnimationFrame` à leur fil principal au tout début de chaque image. De ce fait, le déroulement principal *essaye* d'être le plus possible comme ci-dessous:
+Les versions modernes de Firefox et Google Chrome (et probablement d'autres)*tentent* de connecter les rappels de `requestAnimationFrame` à leur fil principal au tout début de chaque image. De ce fait, le déroulement principal *essaye* d'être le plus possible comme ci-dessous:
 
 1.  Débuter une nouvelle image (pendant que la précédente est prise en charge par l'affichage).
-2.  Passer à travers la liste de retours `requestAnimationFrame` et les appeler.
+2.  Passer à travers la liste de retours `requestAnimationFrame` et les appeler.
 3.  Passer le ramasse-miettes et autres tâches par-images quand les retours ci-dessous cessent de controler le fil principal.
-4.  Se mettre en veille (à moins qu'un évènement interrompe la sieste du navigateur) jusqu'à ce que le moniteur ne soit prêt pour votre image ([VSync](http://www.techopedia.com/definition/92/vertical-sync-vsync)) et répète.
+4.  Se mettre en veille (à moins qu'un évènement interrompe la sieste du navigateur) jusqu'à ce que le moniteur ne soit prêt pour votre image ([VSync](http://www.techopedia.com/definition/92/vertical-sync-vsync)) et répète.
 
-Vous pouvez considérer que développer une application en temps réél est comme avoir un temps donné pour faire le travail. Toutes les étapes ci-dessus doivent prendre effet toutes les 16.5 millisecondes pour fonctionner avec un affichage de 60Hz. Les navigateurs invoquent leur code aussitôt que possible pour donner un maximum de temps aux calculs. Votre fil principal va souvent débuter par les tâches qui ne sont même pas dans le fil principal (tel que la rasterisation ou les ombrages en WebGL). Les longs calculs peuvent être fait par un Web Worker ou une accélération matérielle en même temps que le navigateur utilise son propre fil principal pour passer le ramasse-miette, ces autres tâches, ou gérer les évènements asynchrones.
+Vous pouvez considérer que développer une application en temps réél est comme avoir un temps donné pour faire le travail. Toutes les étapes ci-dessus doivent prendre effet toutes les 16.5 millisecondes pour fonctionner avec un affichage de 60Hz. Les navigateurs invoquent leur code aussitôt que possible pour donner un maximum de temps aux calculs. Votre fil principal va souvent débuter par les tâches qui ne sont même pas dans le fil principal (tel que la rasterisation ou les ombrages en WebGL). Les longs calculs peuvent être fait par un Web Worker ou une accélération matérielle en même temps que le navigateur utilise son propre fil principal pour passer le ramasse-miette, ces autres tâches, ou gérer les évènements asynchrones.
 
-Bien que nous ne discutons pas du gain de temps, plusieurs navigateur ont un outil appelé *Temps Haute Résolution*. L'objet {{ domxref("Date") }} n'est plus la méthode reconnue pour temporiser les évènements car elle est très imprécise et peut être modifiée par l'horloge système. Le Temps Haute Résolution, d'un autre côté, compte le nombre de millisecondes depuis `navigationStart` (quand le document précédent est déchargé). Cette valeur est retournée en un nombre décimal précis au millième de seconde. Il est connu comme étant `{{ domxref("DOMHighResTimeStamp") }}` mais, à toutes fins utiles, considérez le comme un nombre décimal à virgule flottante.
+Bien que nous ne discutons pas du gain de temps, plusieurs navigateur ont un outil appelé *Temps Haute Résolution*. L'objet {{ domxref("Date") }} n'est plus la méthode reconnue pour temporiser les évènements car elle est très imprécise et peut être modifiée par l'horloge système. Le Temps Haute Résolution, d'un autre côté, compte le nombre de millisecondes depuis `navigationStart` (quand le document précédent est déchargé). Cette valeur est retournée en un nombre décimal précis au millième de seconde. Il est connu comme étant `{{ domxref("DOMHighResTimeStamp") }}` mais, à toutes fins utiles, considérez le comme un nombre décimal à virgule flottante.
 
-**Note**: Les systèmes (matériels ou logiciels) qui ne sont pas capables d'avoir une précision à la microseconde sont autorisés à fournir une précision à la milliseconde au minimum. Sinon, ils devraient fournir une précision de 0.001ms s'ils en sont capables.
+**Note**: Les systèmes (matériels ou logiciels) qui ne sont pas capables d'avoir une précision à la microseconde sont autorisés à fournir une précision à la milliseconde au minimum. Sinon, ils devraient fournir une précision de 0.001ms s'ils en sont capables.
 
-Seule, cette valeur n'est pas très utile, considérant qu'il est relatif à un évènement peu intéressant, mais ils peut quand même être soustrait d'une autre prise de temps pour déterminer plus précisément combien de temps s'est déroulé entre ces deux poins. Pour obtenir une de ces prises de temps, vous pouvez appeler la fonction `window.performance.now()` et stocker le résultat dans une variable.
+Seule, cette valeur n'est pas très utile, considérant qu'il est relatif à un évènement peu intéressant, mais ils peut quand même être soustrait d'une autre prise de temps pour déterminer plus précisément combien de temps s'est déroulé entre ces deux poins. Pour obtenir une de ces prises de temps, vous pouvez appeler la fonction `window.performance.now()` et stocker le résultat dans une variable.
 
     var tNow = window.performance.now();
 
-Retournons sur le sujet de la boucle principale. Il vous arrivera souvent de vouloir savoir quand votre boucle principale a été invoquée. Parce que cela est commun, la fonction `window.requestAnimationFrame()` fourni toujours un `DOMHighResTimeStamp` avec un argument de retour quand elles sont éxécutées. Cela mène à une amélioration de notre boucle précédente.
+Retournons sur le sujet de la boucle principale. Il vous arrivera souvent de vouloir savoir quand votre boucle principale a été invoquée. Parce que cela est commun, la fonction `window.requestAnimationFrame()` fourni toujours un `DOMHighResTimeStamp` avec un argument de retour quand elles sont éxécutées. Cela mène à une amélioration de notre boucle précédente.
 
     /*
     * Débuter avec le point virgue au cas où le code qui réside au-dessus de cet exemple
@@ -148,11 +148,11 @@ Retournons sur le sujet de la boucle principale. Il vous arrivera souvent de vou
       main(); // Débute le cycle
     })();
 
-Plusieurs autres optimisations sont possibles et cela dépend vraiment de ce que votre jeu tente d'accomplir. Le genre de votre jeu va visiblement faire la différence mais il peut être aussi subtil que cela. Vous pourriez dessiner un pixel à la fois sur un canvas ou vous pourriez étager des éléments du DOM (incluant de multiples canvas de WebGL avec des arrières-plans transparents si vous le désirez) en une hierarchie complexe. Chacunes de ces solutions mènera à des contraintes et opportunités différentes.
+Plusieurs autres optimisations sont possibles et cela dépend vraiment de ce que votre jeu tente d'accomplir. Le genre de votre jeu va visiblement faire la différence mais il peut être aussi subtil que cela. Vous pourriez dessiner un pixel à la fois sur un canvas ou vous pourriez étager des éléments du DOM (incluant de multiples canvas de WebGL avec des arrières-plans transparents si vous le désirez) en une hierarchie complexe. Chacunes de ces solutions mènera à des contraintes et opportunités différentes.
 
 ## Il est temps de la... décision
 
-Vous aurez besoin de faire un choix difficile concernant votre boucle principale: comment simuler l'évolution du temps. Si vous désirez un contrôle par image alors vous aurez besoin de déterminer combien sera-t-il nécessaire à votre jeu d'être remis à jour et dessiné. Vous pourriez même vouloir une mise à jour et dessiner à différents taux (de rafraîchissement). Vous aurez aussi besoin de considérer combien comment votre jeu échouera gracieusement si le système de l'utilisateur ne peut soutenir la charge de travail. Commençons par considérer que vous serez capables de gérer les entrées de l'utilisateur et de mettre à jour l'état du jeu à chaque fois que vous dessinez. Nous ramifierons après.
+Vous aurez besoin de faire un choix difficile concernant votre boucle principale: comment simuler l'évolution du temps. Si vous désirez un contrôle par image alors vous aurez besoin de déterminer combien sera-t-il nécessaire à votre jeu d'être remis à jour et dessiné. Vous pourriez même vouloir une mise à jour et dessiner à différents taux (de rafraîchissement). Vous aurez aussi besoin de considérer combien comment votre jeu échouera gracieusement si le système de l'utilisateur ne peut soutenir la charge de travail. Commençons par considérer que vous serez capables de gérer les entrées de l'utilisateur et de mettre à jour l'état du jeu à chaque fois que vous dessinez. Nous ramifierons après.
 
 **Note :** Changer la manière dont votre boucle principale gère le temps est un cauchemar de débuggage, partout. Pensez à vos besoins, précautionneusement, avant de travailler sur votre boucle principale.
 
@@ -180,42 +180,42 @@ Si votre jeu peut atteindre le maximum du taux de rafraîchissement sur n'import
       main(); // Start the cycle
     })();
 
-Si le maximum du taux de rafraîchissement ne peut être atteind, les paramètres de qualités pourraient être mis à jour pour rester sous notre gain en temps. L'exemple le plus célèbre de ce concept est le jeu de id Software, RAGE. Ce jeu a retiré à l'utilisateur le contrôle afin de conserver son temps de calcul à environ 16ms (ou environ 60ips). Si le calcul prenait trop de temps alors la résolution serait diminuée, les textures et autres éléments échoueraient au chargement et à l'affichage, et ainsi de suite. Ce cas (non-web) a créé plusieurs hypothèses et faits:
+Si le maximum du taux de rafraîchissement ne peut être atteind, les paramètres de qualités pourraient être mis à jour pour rester sous notre gain en temps. L'exemple le plus célèbre de ce concept est le jeu de id Software, RAGE. Ce jeu a retiré à l'utilisateur le contrôle afin de conserver son temps de calcul à environ 16ms (ou environ 60ips). Si le calcul prenait trop de temps alors la résolution serait diminuée, les textures et autres éléments échoueraient au chargement et à l'affichage, et ainsi de suite. Ce cas (non-web) a créé plusieurs hypothèses et faits:
 
 - Chaque image d'animation compte pour une entrée utilisateur.
 - Aucune image n'a besoin d'être extrapolée (devinée) car chaque élément à sa propre mise à jour.
-- Les systèmes simulés peuvent en gros considérer que chaque mise à jour complète est d'environ 16ms.
-- Permettant à l'utilisateur le contrôle à travers des paramètres serait un cauchemar.
+- Les systèmes simulés peuvent en gros considérer que chaque mise à jour complète est d'environ 16ms.
+- Permettant à l'utilisateur le contrôle à travers des paramètres serait un cauchemar.
 - Des moniteur différents apportent des taux de rafraîchissement différents: 30 FPS, 75 FPS, 100 FPS, 120 FPS, 144 FPS, etc.
-- Des systèmes qui ne sont pas capables de fonctionner avec 60 FPS vont perdre en qualité pour permettre au jeu de rouler à une vitesse optimale (éventuellement, il échouera complètement si cela devient trop bas).
+- Des systèmes qui ne sont pas capables de fonctionner avec 60 FPS vont perdre en qualité pour permettre au jeu de rouler à une vitesse optimale (éventuellement, il échouera complètement si cela devient trop bas).
 
-### Autres manières de gérer les besoins du taux de rafraîchissement variable
+### Autres manières de gérer les besoins du taux de rafraîchissement variable
 
-D'autres méthodes d'approcher le problème existent.
+D'autres méthodes d'approcher le problème existent.
 
-Une technique commune est de mettre à jour la simulation à une fréquence constante et dessiner autant (ou au moins) que le taux actuel le permet. Cette méthode de mise à jour peut continuer à boucler sans se soucier de ce que l'utilisateur voit. Cette méthode peut voir la dernière mise à jour, et quand elle est arrivée. Quand le dessin sait quand il est représenté, et le temps simulé pour la dernière mise à jour, il peut prédire une image plausible à dessiner. Cela n'a pas d'importance si c'est plus fréquent que la mise à jour officielle (ou même moins fréquente). La méthode de mise à jour établis des points de contrôle, autant que le système le permet, la méthode de rendu va dessiner autour de ces intants de temps. Il y a plusieurs manières de séparer la méthode de mise à jour dans les standards du web:
+Une technique commune est de mettre à jour la simulation à une fréquence constante et dessiner autant (ou au moins) que le taux actuel le permet. Cette méthode de mise à jour peut continuer à boucler sans se soucier de ce que l'utilisateur voit. Cette méthode peut voir la dernière mise à jour, et quand elle est arrivée. Quand le dessin sait quand il est représenté, et le temps simulé pour la dernière mise à jour, il peut prédire une image plausible à dessiner. Cela n'a pas d'importance si c'est plus fréquent que la mise à jour officielle (ou même moins fréquente). La méthode de mise à jour établis des points de contrôle, autant que le système le permet, la méthode de rendu va dessiner autour de ces intants de temps. Il y a plusieurs manières de séparer la méthode de mise à jour dans les standards du web:
 
-- Dessiner à chaque `requestAnimationFrame` et mettre à jour {{ domxref("window.setInterval") }} ou {{ domxref("window.setTimeout") }}.
+- Dessiner à chaque `requestAnimationFrame` et mettre à jour {{ domxref("window.setInterval") }} ou {{ domxref("window.setTimeout") }}.
 
-  - 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).
+  - 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).
 
-- Dessiner à chaque `requestAnimationFrame` et mettre à jour sur un `setInterval` ou `setTimeout` dans un [Web Worker](/fr/docs/Web/Guide/Performance/Using_web_workers).
+- Dessiner à chaque `requestAnimationFrame` et mettre à jour sur un `setInterval` ou `setTimeout` dans un [Web Worker](/fr/docs/Web/Guide/Performance/Using_web_workers).
 
-  - 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.
+  - 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.
 
-- Dessiner à chaque `requestAnimationFrame` et l'utiliser pour solliciter un Web Worker qui contient la méthode de mise à jour avec la quantité de temps à calculer, s'il y a lieu.
+- Dessiner à chaque `requestAnimationFrame` et l'utiliser pour solliciter un Web Worker qui contient la méthode de mise à jour avec la quantité de temps à calculer, s'il y a lieu.
 
-  - Cela se met en veille jusqu'à ce que `requestAnimationFrame` est appelée et ne pollue pas le fil principal, et de plus vous ne vous reposez pas sur d'anciennes méthodes. À nouveau, c'est un peu plus complexe que les deux premières options, et *débuter* chaque mise à jour sera bloqué tant que le navigateur ne décide de lancer les retours rAF.
+  - Cela se met en veille jusqu'à ce que `requestAnimationFrame` est appelée et ne pollue pas le fil principal, et de plus vous ne vous reposez pas sur d'anciennes méthodes. À nouveau, c'est un peu plus complexe que les deux premières options, et *débuter* chaque mise à jour sera bloqué tant que le navigateur ne décide de lancer les retours rAF.
 
 Chacune de ces méthodes ont un compromis similaire:
 
-- Les utilisateurs peuvent éviter le rendu d'images ou interpoler celles en sus dépendant de leurs performances.
-- Vous pouvez compter sur tous les utilisateurs mettant à jours les variables non-cosmetiques à la même fréquence constante, moins quelques hoquets.
+- Les utilisateurs peuvent éviter le rendu d'images ou interpoler celles en sus dépendant de leurs performances.
+- Vous pouvez compter sur tous les utilisateurs mettant à jours les variables non-cosmetiques à la même fréquence constante, moins quelques hoquets.
 - Beaucoup plus compliquée à programmer que la boucle de base que nous avons vu précédemment.
-- Les entrées utilisateurs sont complètement ignorées jusqu'à la prochaine mise à jour (même si l'utilisateur à un système rapide).
+- Les entrées utilisateurs sont complètement ignorées jusqu'à la prochaine mise à jour (même si l'utilisateur à un système rapide).
 - L'interpolation obligatoire à un défaut de performance obligatoire.
 
-Une méthode séparée de mise à jour et de dessin pourrait avoir l'air de l'exemple suivant. Pour les besoins de la démonstration, l'exemple est basé sur le troisième point, sans l'utilisation des Web Workers par soucis de lecture (et, soyons honnête, pour faciliter l'écriture).
+Une méthode séparée de mise à jour et de dessin pourrait avoir l'air de l'exemple suivant. Pour les besoins de la démonstration, l'exemple est basé sur le troisième point, sans l'utilisation des Web Workers par soucis de lecture (et, soyons honnête, pour faciliter l'écriture).
 
 _Note: Cet exemple spécifiquement, aurait besoin d'une relecture._
 
@@ -236,12 +236,12 @@ _Note: Cet exemple spécifiquement, aurait besoin d'une relecture._
     * numTicks est combien de mises à jour auraient dû avoir lieu entre 2 rendus d'images.
     *
     * render() se voit passé tFrame car il est considéré que la méthode de rendu va calculer
-               combien de temps se sera écoulé depuis la mise à jour la plus récente pour
-               extrapolation (purement cosmétique pour des systèmes rapides). La scène est dessinée.
+               combien de temps se sera écoulé depuis la mise à jour la plus récente pour
+               extrapolation (purement cosmétique pour des systèmes rapides). La scène est dessinée.
     *
     * update() calcule l'état du jeu comme point donné dans le temps. Ça devrait toujours être
-               incrémenté par tickLength. C'est l'autorité de l'état du jeu. On lui passe le
-               DOMHighResTimeStamp pour le temps que cela représente (qui, à nouveau, est toujours
+               incrémenté par tickLength. C'est l'autorité de l'état du jeu. On lui passe le
+               DOMHighResTimeStamp pour le temps que cela représente (qui, à nouveau, est toujours
                la dernière mise à jour + MyGame.tickLength qu'une pause ne soit ajoutée, etc.)
     *
     * setInitialState() réalise n'importe quel tâche mise de côté avant que la boucle principale ne doive tourner.
@@ -283,21 +283,21 @@ _Note: Cet exemple spécifiquement, aurait besoin d'une relecture._
       main(performance.now()); // Débute le cycle
     })();
 
-Une autre alternative est de simplement faire certaines choses moins souvent. Si une portion de votre boucle de mise à jour est difficile à calculer et intense (en temps), vous devrier considérer réduire sa fréquence et, idéalement, la diviser en portions à travers une période plus allongée. Un exemple implicite de cela est rencontré dans "The Artillery Blog for Artillery Games", où ils [ajustent leur taux de création de miettes](http://blog.artillery.com/2012/10/browser-garbage-collection-and-framerate.html) pour optimiser leur ramasse-miettes. Apparemment, le nettoyage des ressources n'est pas sensible au temps (spécialement si le nettoyage est plus dérangeant que le la miette elle-même).
+Une autre alternative est de simplement faire certaines choses moins souvent. Si une portion de votre boucle de mise à jour est difficile à calculer et intense (en temps), vous devrier considérer réduire sa fréquence et, idéalement, la diviser en portions à travers une période plus allongée. Un exemple implicite de cela est rencontré dans "The Artillery Blog for Artillery Games", où ils [ajustent leur taux de création de miettes](http://blog.artillery.com/2012/10/browser-garbage-collection-and-framerate.html) pour optimiser leur ramasse-miettes. Apparemment, le nettoyage des ressources n'est pas sensible au temps (spécialement si le nettoyage est plus dérangeant que le la miette elle-même).
 
 Cela peut aussi s'appliquer à vos propres tâches. Elles sont de bonnes candidates pour en générer quand les ressources disponibles deviennent un problème.
 
 ## Sommaire
 
-J'aimerai être clair que rien de ce qu'il y a ci-dessus, ou rien de cela, ne puisse être ce qu'il y a de mieux pour votre jeu. La décision correcte dépend entièrement des compromis que vous êtes prêts (ou pas) à faire. La préocupation est principalement de permuter vers une autre option. Heureusement, je n'en ai pas l'expérience mais j'ai entendu dire que c'est un jeu de cache-cache exténuant.
+J'aimerai être clair que rien de ce qu'il y a ci-dessus, ou rien de cela, ne puisse être ce qu'il y a de mieux pour votre jeu. La décision correcte dépend entièrement des compromis que vous êtes prêts (ou pas) à faire. La préocupation est principalement de permuter vers une autre option. Heureusement, je n'en ai pas l'expérience mais j'ai entendu dire que c'est un jeu de cache-cache exténuant.
 
-Une chose importante à retenir pour les plateformes gérées, telles que le web, est que votre boucle pourrait arrêter son éxécution pour une période de temps significative. Cela pourrait arriver quand l'utilisateur déselectionne votre onglet et que le navigateur tombe en veille (ou ralenti) son interval de retour `requestAnimationFrame`. Vous avez plusieurs façons de gérer cela et cela peut dépendre de votre jeu, s'il est pour un seul joueur ou multijoueurs. Certains des choix sont:
+Une chose importante à retenir pour les plateformes gérées, telles que le web, est que votre boucle pourrait arrêter son éxécution pour une période de temps significative. Cela pourrait arriver quand l'utilisateur déselectionne votre onglet et que le navigateur tombe en veille (ou ralenti) son interval de retour `requestAnimationFrame`. Vous avez plusieurs façons de gérer cela et cela peut dépendre de votre jeu, s'il est pour un seul joueur ou multijoueurs. Certains des choix sont:
 
-- Considérer le écart comme "une pause" et ne pas prendre en compte le temps.
+- Considérer le écart comme "une pause" et ne pas prendre en compte le temps.
 
   - Vous pouvez probablement voir comment cela peut être problématique pour la plupart des jeux multijoueurs.
 
-- Vous pouvez stimuler l'écart pour faire du rattrapage.
+- Vous pouvez stimuler l'écart pour faire du rattrapage.
 
   - Cela peut être un problème pour de longues pauses et/ou des mises à jour complexes.
 
@@ -305,4 +305,4 @@ Une chose importante à retenir pour les plateformes gérées, telles que le web
 
   - Ceci n'est pas efficace si votre pair ou le serveur sont périmés eux-aussi, ou s'ils n'existent pas car le jeu en mode un seul joueur n'existe pas et n'a pas de serveur.
 
-Une fois que votre boucle principale a été développée et que vous avez pris vos décisions sur un lot d'hypothèses et de compromis qui conviendront à votre jeu, cela devient juste une question d'utilisation de vos décisions pour calculer n'importe quelle physique applicable, intelligence artificielle, sons, synchronisation réseau, et quoique votre jeu ai besoin.
+Une fois que votre boucle principale a été développée et que vous avez pris vos décisions sur un lot d'hypothèses et de compromis qui conviendront à votre jeu, cela devient juste une question d'utilisation de vos décisions pour calculer n'importe quelle physique applicable, intelligence artificielle, sons, synchronisation réseau, et quoique votre jeu ai besoin.
diff --git a/files/fr/games/examples/index.md b/files/fr/games/examples/index.md
index a25682538b..05d90cf1da 100644
--- a/files/fr/games/examples/index.md
+++ b/files/fr/games/examples/index.md
@@ -9,9 +9,9 @@ tags:
 translation_of: Games/Examples
 original_slug: Jeux/Exemples
 ---
-{{GamesSidebar}}  {{IncludeSubnav("/fr/docs/Jeux")}}
+{{GamesSidebar}}  {{IncludeSubnav("/fr/docs/Jeux")}}
 
-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.
+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.
 
 ## Démos/Jeux gratuits
 
@@ -20,11 +20,11 @@ Cette page liste un grand nombre de démos de technologies web impressionnantes
 - [Beloola](http://www.beloola.com)
   - : 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 (_Paramètres / Passer en mode VR_)
 - [Tanx](http://playcanv.as/p/aP0oxhUr)
-  - : Un jeu de combat de tanks multijoueurs, créé avec [PlayCanvas](https://playcanvas.com/).
+  - : Un jeu de combat de tanks multijoueurs, créé avec [PlayCanvas](https://playcanvas.com/).
 - [Hyper Vanguard Force](https://robertsspaceindustries.com/comm-link/transmission/14704-Hyper-Vanguard-Force)
   - : Un "space shooter" _(tireur de l'espace)_ à défilement vertical.
 - [Swooop](http://playcanv.as/p/JtL2iqIH)
-  - : Un jeu d'aviation : contrôle ton avion et récupère les joyaux. Aussi créé avec [PlayCanvas](https://playcanvas.com/).
+  - : Un jeu d'aviation : contrôle ton avion et récupère les joyaux. Aussi créé avec [PlayCanvas](https://playcanvas.com/).
 - [Save the Day](https://ga.me/games/save-the-day)
   - : Volez à bord de votre hélicoptère de sauvetage vers la zone sinistrée et sauvez les victimes coincées (ga.me).
 - [Polycraft](https://ga.me/games/polycraft)
@@ -32,9 +32,9 @@ Cette page liste un grand nombre de démos de technologies web impressionnantes
 - [HexGL](http://hexgl.bkcore.com/)
   - : Un jeu de course futuriste rythmé.
 - [Dead Trigger 2](http://beta.unity3d.com/jonas/DT2/)
-  - : Un jeu d'action avec des zombies, créé avec [Unity3D](http://unity3d.com/).
+  - : Un jeu d'action avec des zombies, créé avec [Unity3D](http://unity3d.com/).
 - [Angry Bots](http://beta.unity3d.com/jonas/AngryBots/)
-  - : Une démo de jeu de tir futuriste à la 3ème personne, créé avec [Unity3D](http://unity3d.com/).
+  - : Une démo de jeu de tir futuriste à la 3ème personne, créé avec [Unity3D](http://unity3d.com/).
 - [Nutmeg](http://sandbox.photonstorm.com/html5/nutmeg/)
   - : Jeu de plateforme action rétro.
 - [Back to Candyland](http://www.zibbo.com/game/match-3-games-top/back-to-candyland-episode-1)
@@ -62,7 +62,7 @@ Cette page liste un grand nombre de démos de technologies web impressionnantes
 - [BrowserQuest](http://browserquest.mozilla.org/)
   - : Un MMORPG crée par the Little Workshop et Mozilla.
 - [Shoot The Rocks](https://arcade.ly/games/asteroids/)
-  - : Un jeu de tir solo 2D Canvas, dans le style des classiques Asteroids d' Atari, jeux d' arcade depuis 1979.
+  - : Un jeu de tir solo 2D Canvas, dans le style des classiques Asteroids d' Atari, jeux d' arcade depuis 1979.
 - [Star Citadel](https://arcade.ly/games/starcastle/)
   - : Une nouvelle version de Star Castle, le classique jeu d'arcade 1980 de Cinematronics, construit avec Canvas 2D.
 
@@ -102,9 +102,9 @@ Cette page liste un grand nombre de démos de technologies web impressionnantes
 - [Rainbow Firestorm](http://codepen.io/jackrugile/pen/AokpF)
   - : Des particules de couleur arc-en-ciel, tombant comme de la pluie, rebondissent sur un terrain d'orbes.
 - [Crowd Simulation](http://visualiser.fr/babylon/crowd/)
-  - : Simulation d'une foule de personnes agitées  voulant rejoindre des directions opposées.
+  - : Simulation d'une foule de personnes agitées voulant rejoindre des directions opposées.
 - [SVG Masking Experiment](http://codepen.io/noeldelgado/pen/ByxQjL)
-  - : Une machine à rayons X, créée en utilisant un calque SVG.
+  - : Une machine à rayons X, créée en utilisant un calque SVG.
 - [Realistic Water Simulation](https://www.shadertoy.com/view/Ms2SD1)
   - : De l'eau en mouvement, comme les vagues d'un océan.
 - [Dungeon demo](http://www.haxor.xyz/demos/1.0/dungeon/)
@@ -114,7 +114,7 @@ Cette page liste un grand nombre de démos de technologies web impressionnantes
 - [Flight Stream](https://callumprentice.github.io/apps/flight_stream/index.html)
   - : Globe en 3D avec des itinéraires d'avions simulés.
 - [WebGL filters](http://pixelscommander.com/polygon/htmlgl/demo/filters.html)
-  - : Démo montrant comment WebGL peut être utilisé pour ajouter des effets à des éléments HTML.
+  - : Démo montrant comment WebGL peut être utilisé pour ajouter des effets à des éléments HTML.
 - [SVG isometic tiles](http://codepen.io/AshKyd/pen/zxmgzV)
   - : Génère des tuiles isométriques avec une matrice SVG.
 - [ThreeJS App Player](https://jsfiddle.net/jetienne/rkth90c9/)
diff --git a/files/fr/games/introduction/index.md b/files/fr/games/introduction/index.md
index ab1da728d2..34ec1c9de6 100644
--- a/files/fr/games/introduction/index.md
+++ b/files/fr/games/introduction/index.md
@@ -13,7 +13,7 @@ original_slug: Jeux/Introduction
 
 {{IncludeSubnav("/fr/docs/Jeux")}}
 
-Le Web d'aujourd'hui est désormais une plate-forme viable pour créer des jeux époustouflants et de bonne qualité, mais aussi et surtout pour distribuer ces jeux. Imaginez tous les jeux qui peuvent être créés...
+Le Web d'aujourd'hui est désormais une plate-forme viable pour créer des jeux époustouflants et de bonne qualité, mais aussi et surtout pour distribuer ces jeux. Imaginez tous les jeux qui peuvent être créés...
 
 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 [JavaScript](/fr/docs/JavaScript "/fr/docs/JavaScript") et aux nouvelles APIs, vous pouvez construire des jeux vidéo qui fonctionnent dans un navigateur (ou sur des plateformes HTML5 comme [Firefox OS](/fr/docs/Mozilla/Firefox_OS "/fr/docs/Mozilla/Firefox_OS")) sans compromettre les performances.
 
@@ -41,7 +41,7 @@ En tant que développeur de jeux vidéo, que vous soyez seul ou fassiez partie d
 
 1.  La portée du Web est phénoménale : il est partout. Les jeux construits avec HTML5 peuvent fonctionner sur les smartphones, les tablettes, les PCs et les télévisions connectées.
 2.  La visibilité de votre jeu et le marketing en sont améliorés. En effet, la promotion de votre jeu n'est pas limitée à un "app store" _(magasin d'applications)_ maîtrisé par quelqu'un d'autre. Vous pouvez tout à fait promouvoir et faire la publicité de votre jeu sur le Web lui-même comme sur d'autres médias. Les liens, les partages effectués sur le Web sont autant d'avantages pour atteindre de nouveaux utilisateurs.
-3.  Vous disposez d'un contrôle à un endroit important : les paiements. Il n'est pas nécessaire pour vous de reverser 30% de vos revenus à  d'autres simplement parce que votre jeu fait partie de leur écosystème. Vous pouvez décider de votre propre politique tarifaire et utiliser le service de paiement que vous voulez.
+3.  Vous disposez d'un contrôle à un endroit important : les paiements. Il n'est pas nécessaire pour vous de reverser 30% de vos revenus à d'autres simplement parce que votre jeu fait partie de leur écosystème. Vous pouvez décider de votre propre politique tarifaire et utiliser le service de paiement que vous voulez.
 4.  Le contrôle, encore. Vous pouvez mettre à jour votre jeu dès que vous le souhaitez. Vous n'avez pas à attendre l'approbation de quelqu'un d'une autre entreprise décidant si oui ou non tel ou tel correctif sera livré aujourd'hui ou demain.
 5.  L'analytique. Plutôt que de vous reposer sur des décisions et influences externes quant aux données dont vous avez besoin, vous pouvez collecter les statistiques que vous voulez, ou bien utiliser un outil analytique tiers de votre choix afin de mesurer les ventes et la portée de votre jeu.
 6.  Vous pouvez gérer la relation clientèle de façon plus directe, sans que les retours des clients soient limités aux mécanismes d'un magasin d'application. Soyez directement au contact de vos clients, sans intermédiaire.
diff --git a/files/fr/games/introduction_to_html5_game_development/index.md b/files/fr/games/introduction_to_html5_game_development/index.md
index 4c42097aa4..5b9c3b69e6 100644
--- a/files/fr/games/introduction_to_html5_game_development/index.md
+++ b/files/fr/games/introduction_to_html5_game_development/index.md
@@ -26,11 +26,11 @@ original_slug: Jeux/Introduction_to_HTML5_Game_Gevelopment_(summary)
 | **Fonction**   | Technologie                                                                                                                                                                                                                                                                                                                        |
 | -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Audio**      | [Web Audio API](/fr/docs/Web/API/Web_Audio_API)                                                                                                                                                                                                                                                                                    |
-| **Graphique**  | [WebGL](/fr/docs/Web/API/WebGL_API) ([OpenGL ES](http://www.khronos.org/opengles/ "http://www.khronos.org/opengles/") 2.0)                                                                                                                                                                                                         |
+| **Graphique**  | [WebGL](/fr/docs/Web/API/WebGL_API) ([OpenGL ES](http://www.khronos.org/opengles/ "http://www.khronos.org/opengles/") 2.0)                                                                                                                                                                                                         |
 | **Input**      | [Événements tactiles](/fr/docs/Web/Guide/DOM/Events/Touch_events), [Utiliser l'API Gamepad](/fr/docs/Web/Guide/API/Gamepad), capteurs de l'appareil , [L'API WebRTC](/fr/docs/Web/API/WebRTC_API), [Utiliser le mode plein écran](/fr/docs/Web/Guide/DOM/Using_full_screen_mode), [Pointer Lock API](/fr/docs/WebAPI/Pointer_Lock) |
-| **Language**   | [JavaScript](/fr/docs/JavaScript "/fr/docs/JavaScript") (ou C/C++  utilisant [Emscripten](https://github.com/kripken/emscripten/wiki "https://github.com/kripken/emscripten/wiki") pour compiler en JavaScript )                                                                                                                   |
+| **Language**   | [JavaScript](/fr/docs/JavaScript "/fr/docs/JavaScript") (ou C/C++  utilisant [Emscripten](https://github.com/kripken/emscripten/wiki "https://github.com/kripken/emscripten/wiki") pour compiler en JavaScript )                                                                                                                   |
 | **Networking** | [WebRTC](/fr/docs/WebRTC "/fr/docs/WebRTC") et/ou [WebSockets](/fr/docs/Web/API/WebSockets_API)                                                                                                                                                                                                                                    |
-| **Stockage**   | [IndexedDB](/fr/docs/Web/API/API_IndexedDB)  ou le "cloud"                                                                                                                                                                                                                                                                         |
+| **Stockage**   | [IndexedDB](/fr/docs/Web/API/API_IndexedDB)  ou le "cloud"                                                                                                                                                                                                                                                                         |
 | **Web**        | [HTML](/fr/docs/Web/HTML), [CSS](/fr/docs/Web/CSS), [SVG](/fr/docs/Web/SVG), [Social API](/fr/docs/Social_API "/fr/docs/Social_API") ( et beaucoup plus! )                                                                                                                                                                         |
 
 - [API plein écran](/fr/docs/DOM/Using_fullscreen_mode "/fr/docs/DOM/Using_fullscreen_mode")
diff --git a/files/fr/games/techniques/2d_collision_detection/index.md b/files/fr/games/techniques/2d_collision_detection/index.md
index 2cdee32e6a..38f2b5d916 100644
--- a/files/fr/games/techniques/2d_collision_detection/index.md
+++ b/files/fr/games/techniques/2d_collision_detection/index.md
@@ -13,7 +13,7 @@ translation_of: Games/Techniques/2D_collision_detection
 
 {{IncludeSubnav("/fr/docs/Jeux")}}
 
-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 (« *hitbox* ») 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.
+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 (« *hitbox* Â») 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.
 
 Cet article donne un résumé des techniques les plus utilisées pour la détection des collisions dans les jeux en deux dimensions.
 
@@ -26,9 +26,9 @@ var rect1 = {x: 5, y: 5, width: 50, height: 50}
 var rect2 = {x: 20, y: 10, width: 10, height: 10}
 
 if (rect1.x < rect2.x + rect2.width &&
-   rect1.x + rect1.width > rect2.x &&
-   rect1.y < rect2.y + rect2.height &&
-   rect1.height + rect1.y > rect2.y) {
+   rect1.x + rect1.width > rect2.x &&
+   rect1.y < rect2.y + rect2.height &&
+   rect1.height + rect1.y > rect2.y) {
     // collision détectée !
 }
 
@@ -67,25 +67,25 @@ if (distance < circle1.radius + circle2.radius) {
 
 Cet algorithme permet de détecter une collision entre deux polygones _convexes_. Cet algorithme est plus compliqué à implémenter que les deux précédents mais il est bien plus puissant. La complexité d’un tel algorithme induit de prendre en considération l’optimisation des performances (voir section suivante).
 
-L’implémentation de cet algorithme est hors de propos sur cette page, nous vous conseillons les articles suivants :
+L’implémentation de cet algorithme est hors de propos sur cette page, nous vous conseillons les articles suivants&nbsp;:
 
-1.  [Separating Axis Theorem (SAT) explanation](http://www.sevenson.com.au/actionscript/sat/) ;
-2.  [(Anglais) Collision detection and response (en)](http://www.metanetsoftware.com/technique/tutorialA.html) ;
-3.  [Collision detection Using the Separating Axis Theorem (en)](http://gamedevelopment.tutsplus.com/tutorials/collision-detection-using-the-separating-axis-theorem--gamedev-169) ;
-4.  [SAT (Separating Axis Theorem) (en)](http://www.codezealot.org/archives/55) ;
+1.  [Separating Axis Theorem (SAT) explanation](http://www.sevenson.com.au/actionscript/sat/)&nbsp;;
+2.  [(Anglais) Collision detection and response (en)](http://www.metanetsoftware.com/technique/tutorialA.html)&nbsp;;
+3.  [Collision detection Using the Separating Axis Theorem (en)](http://gamedevelopment.tutsplus.com/tutorials/collision-detection-using-the-separating-axis-theorem--gamedev-169)&nbsp;;
+4.  [SAT (Separating Axis Theorem) (en)](http://www.codezealot.org/archives/55)&nbsp;;
 5.  [Separation of Axis Theorem (SAT) for Collision Detection (en)](http://rocketmandevelopment.com/blog/separation-of-axis-theorem-for-collision-detection/).
 
 ## Performances
 
-Alors que la plupart de ces algorithmes de détection de collision sont très simples à calculer, cela peut être une perte de ressources de tester _chaque entité_ avec les autres entités. Habituellement les jeux découpent les collisions en deux phases : large (« *broad* ») et étroite (« *narrow* »).
+Alors que la plupart de ces algorithmes de détection de collision sont très simples à calculer, cela peut être une perte de ressources de tester _chaque entité_ avec les autres entités. Habituellement les jeux découpent les collisions en deux phases&nbsp;: large («&nbsp;*broad*&nbsp;») et étroite («&nbsp;*narrow*&nbsp;»).
 
 ### Phase large
 
-La phase large sert à récupérer une liste d’entités qui _pourraient_ entrer en collision. Cela peut être facilement implémenté avec une structure de données spaciale qui vous donnera une meilleure idée d’où est situé chaque entité et de ce qui existe autour d’elle. Par exemple :
+La phase large sert à récupérer une liste d’entités qui _pourraient_ entrer en collision. Cela peut être facilement implémenté avec une structure de données spaciale qui vous donnera une meilleure idée d’où est situé chaque entité et de ce qui existe autour d’elle. Par exemple&nbsp;:
 
-- Les _Quad Trees_ (exemple : [JavaScript QuadTree Implementation (en)](http://blogs.adobe.com/digitalmedia/2011/03/javascript-quadtree-implementation/)) ;
-- Les _R-Trees_ (voir [R-Tree sur Wikipedia.org (en)](http://en.wikipedia.org/wiki/R-tree)) ;
-- Une « *hashmap* ».
+- Les _Quad Trees_ (exemple&nbsp;: [JavaScript QuadTree Implementation (en)](http://blogs.adobe.com/digitalmedia/2011/03/javascript-quadtree-implementation/))&nbsp;;
+- Les _R-Trees_ (voir [R-Tree sur Wikipedia.org (en)](http://en.wikipedia.org/wiki/R-tree))&nbsp;;
+- Une «&nbsp;*hashmap*&nbsp;».
 
 ### Phase étroite
 
diff --git a/files/fr/games/techniques/3d_on_the_web/basic_theory/index.md b/files/fr/games/techniques/3d_on_the_web/basic_theory/index.md
index e4074f5f75..609a2a98b6 100644
--- a/files/fr/games/techniques/3d_on_the_web/basic_theory/index.md
+++ b/files/fr/games/techniques/3d_on_the_web/basic_theory/index.md
@@ -23,22 +23,22 @@ La 3D est principalement basée sur la représentation de formes 3D dans l'espac
 
 ![](mdn-games-3d-coordinate-system.png)
 
-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.
+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.
 
 ## Objets
 
-Differents types d'objets sont construits en utilisant les sommets. Un Sommet (Vertex) est un point dans l'espace ayant sa propre position 3D dans le système de coordonnées et souvent quelques informations supplémentaires qui le définissent. Chaque sommet est décrit par ces attributs :
+Differents types d'objets sont construits en utilisant les sommets. Un Sommet (Vertex) est un point dans l'espace ayant sa propre position 3D dans le système de coordonnées et souvent quelques informations supplémentaires qui le définissent. Chaque sommet est décrit par ces attributs :
 
-- **Position** : L'identifie dans un espace 3D (`x`, `y`, `z`).
-- **Color** (Couleur) : Prend une valeur RVBA (R, V et B pour le Rouge, Vert et Bleu, A (alpha) pour l'opacité — toutes les valeurs comprises entre 0.0 et 1.0)
-- **Normal :**  Une manière de décrire la direction à laquelle fait face le sommet.
+- **Position** : L'identifie dans un espace 3D (`x`, `y`, `z`).
+- **Color** (Couleur) : Prend une valeur RVBA (R, V et B pour le Rouge, Vert et Bleu, A (alpha) pour l'opacité — toutes les valeurs comprises entre 0.0 et 1.0)
+- **Normal :**  Une manière de décrire la direction à laquelle fait face le sommet.
 - **Texture** : Une image 2D que le sommet peut utiliser pour décorer la surface dont il fait partie à la place d'une simple couleur.
 
-Vous pouvez faire de la géométrie en utilisant ces informations — voici l'exemple d'un cube :
+Vous pouvez faire de la géométrie en utilisant ces informations — voici l'exemple d'un cube :
 
 ![Cube](mdn-games-3d-cube.png)
 
-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)
+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)
 
 ## Rendu des tuyaux (_pipeline_)
 
@@ -48,11 +48,11 @@ Le rendu des tuyaux est un procédé avec lequel les images sont préparées et
 
 Terminologie utilisée dans le diagramme ci-dessus :
 
-- Une **Primitive** : Une source pour le tuyau — construite à partir de sommets et peut être un triangle, un point ou une ligne.
-- Un **Fragment** : Une projection 3D d'un pixel, qui a les mêmes attributs qu'un pixel.
-- Un **Pixel** : Un point sur l'écran arrangé sur une grille 2D, qui prend une couleur RVBA.
+- Une **Primitive** : Une source pour le tuyau — construite à partir de sommets et peut être un triangle, un point ou une ligne.
+- Un **Fragment** : Une projection 3D d'un pixel, qui a les mêmes attributs qu'un pixel.
+- Un **Pixel** : Un point sur l'écran arrangé sur une grille 2D, qui prend une couleur RVBA.
 
-Le traitement des sommets et des fragments est programmable — vous pouvez [écrire vos propres shaders](/fr/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders) qui manipulent le rendu.
+Le traitement des sommets et des fragments est programmable — vous pouvez [écrire vos propres shaders](/fr/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders) qui manipulent le rendu.
 
 ## Traitement de sommet
 
@@ -60,11 +60,11 @@ Le traitement de sommet consiste à combiner les informations à propos de chaqu
 
 ![](mdn-games-3d-vertex-processing.png)
 
-Il y a 4 étapes dans ce traitement : la première implique d'arranger les objets dans le monde, elle est appelée la **transformation du modèle**. Ensuite, il y a la **transformation de la vue**, 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.
+Il y a 4 étapes dans ce traitement : la première implique d'arranger les objets dans le monde, elle est appelée la **transformation du modèle**. Ensuite, il y a la **transformation de la vue**, 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.
 
 ![Camera](mdn-games-3d-camera.png)
 
-La **transformation de la projection** (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 [paragraphe sur la Caméra](/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js#Camera) dans l'article de Three.js pour en savoir plus.
+La **transformation de la projection** (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 [paragraphe sur la Caméra](/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js#Camera) dans l'article de Three.js pour en savoir plus.
 
 ![](mdn-games-3d-camera-settings.png)
 
@@ -76,7 +76,7 @@ La rastérisation convertit les primitives (des sommets reliés) à un ensemble
 
 ![](mdn-games-3d-rasterization.png)
 
-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.
+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.
 
 ## Traitement de fragment
 
@@ -86,13 +86,13 @@ Le traitement de fragment se concentre sur les textures et les lumières — il
 
 ### Textures
 
-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.
+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.
 
 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.
 
 ### Lumières
 
-Les couleurs que nous voyons sur l'écran sont le résultat d'une source de lumière intéragissant avec la couleur à la surface des matériaux des objets. La lumière peut être absorbée ou réfléchie. Le **modèle de lumière Phong** standard implémenté dans WebGL a 4 types de base de lumière :
+Les couleurs que nous voyons sur l'écran sont le résultat d'une source de lumière intéragissant avec la couleur à la surface des matériaux des objets. La lumière peut être absorbée ou réfléchie. Le **modèle de lumière Phong** standard implémenté dans WebGL a 4 types de base de lumière :
 
 - **Diffuse** _(diffusion)_ : Une lumière directionnelle distante, comme le Soleil.
 - **Specular** _(Particulier)_ : Un point de lumière, comme un bulle de lumière dans une pièce ou un flash.
diff --git a/files/fr/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_playcanvas/index.md b/files/fr/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_playcanvas/index.md
index 588289c009..3143678cee 100644
--- a/files/fr/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_playcanvas/index.md
+++ b/files/fr/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_playcanvas/index.md
@@ -23,7 +23,7 @@ translation_of: Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Pla
 PlayCanvas a publié quelques démos populaires présentant ses fonctionnalités.
 
 - [Tanx](http://playcanv.as/p/aP0oxhUr) est un jeu de char multijoueur dans lequel vous pouvez conduire votre char, en tirant sur d'autres joueurs au fur et à mesure.
-- [Swooop](http://playcanv.as/p/JtL2iqIH)  est un jeu de vol où vous pilotez votre avion autour d'une île magique tout en collectant des bijoux et du carburant.
+- [Swooop](http://playcanv.as/p/JtL2iqIH)  est un jeu de vol où vous pilotez votre avion autour d'une île magique tout en collectant des bijoux et du carburant.
 - Des visualisations comme the [Star Lord](http://playcanv.as/b/FQbBsJTd) et [BMW i8](http://playcanv.as/p/RqJJ9oU9) mettent également en valeur les possibilités du moteur.
 
 ![](playcanvas-demos.png)
@@ -38,7 +38,7 @@ Le moteur peut lui même être utilisé comme une bibliotheque standard en inclu
 
 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 [ammo.js](https://github.com/kripken/ammo.js/)), 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 [Conception d'une démo de base avec PlayCanvas](/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/engine) pour plus de détails.
 
-## Éditeur PlayCanvas 
+## Éditeur PlayCanvas
 
 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 [construction d'une démo de base avec l'éditeur de PlayCanvas](/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/editor) pour plus de détails.
 
diff --git a/files/fr/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.md b/files/fr/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.md
index 9cca38137f..44d4b8acce 100644
--- a/files/fr/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.md
+++ b/files/fr/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.md
@@ -5,7 +5,7 @@ translation_of: Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Thr
 ---
 {{GamesSidebar}}
 
-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. **Three.js**, 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.
+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. **Three.js**, 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.
 
 > **Note :** 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
 
@@ -54,9 +54,9 @@ avant de poursuivre copier se code dans un fichier nommé index.html.
 
 ## Renderer ou Moteur de rendue
 
-un Moteur de rendue est un outil qui affiche les scénes directement dans votre navigateur.Il existe plusieur moteur different :WebGL est la valeur par défaut, vous pouvez utilisercanvas,SVG,CSS et DOM . ils différent dans la façons dont il gere le  rendu. Malgres leurs differences , l experience utilisateur sera la meme.
+un Moteur de rendue est un outil qui affiche les scénes directement dans votre navigateur.Il existe plusieur moteur different :WebGL est la valeur par défaut, vous pouvez utilisercanvas,SVG,CSS et DOM . ils différent dans la façons dont il gere le rendu. Malgres leurs differences , l experience utilisateur sera la meme.
 
-Grace à cette approche, une solution de secour peut etre  utilisée , si une technologie n'est pas prise en charge par le navigatueur.
+Grace à cette approche, une solution de secour peut etre utilisée , si une technologie n'est pas prise en charge par le navigatueur.
 
 ```js
 var renderer = new THREE.WebGLRenderer({antialias:true});
@@ -103,7 +103,7 @@ Vous devez expérimenter ces valeurs et voir comment elles changent ce que vous
 
 ## Rendu de la scene
 
-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:
+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:
 
 ```js
 function render() {
@@ -157,7 +157,7 @@ We've now created a cube, using the geometry and material defined earlier. The l
 scene.add(cube);
 ```
 
-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:
+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:
 
 ```js
 cube.rotation.set(0.4, 0.2, 0);
@@ -181,7 +181,7 @@ Now we will add more shapes to the scene, and explore other shapes, materials, l
 cube.position.x = -25;
 ```
 
-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.
+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.
 
 ```js
 var torusGeometry = new THREE.TorusGeometry(7, 1, 6, 12);
@@ -224,7 +224,7 @@ This looks a little boring though. In a game, something is usually happening. We
 
 ## Animation
 
-We already used rotation, to adjust the position of the cube. We can also scale the shapes, or change their positions. To show animation, we need to make changes to these values inside the render loop, so they update on each frame.
+We already used rotation, to adjust the position of the cube. We can also scale the shapes, or change their positions. To show animation, we need to make changes to these values inside the render loop, so they update on each frame.
 
 ### Rotation
 
@@ -251,7 +251,7 @@ t += 0.01;
 torus.scale.y = Math.abs(Math.sin(t));
 ```
 
-We use `Math.sin`, ending up with quite an interesting result. This scales the torus, repeating the process, as `sin` is a periodic function. We're wrapping the scale value in `Math.abs`, to pass the absolute values, greater or equal to 0. As sin is between -1 and 1,  negative values might render out torus in unexpected way. In this case it looks black half the time.
+We use `Math.sin`, ending up with quite an interesting result. This scales the torus, repeating the process, as `sin` is a periodic function. We're wrapping the scale value in `Math.abs`, to pass the absolute values, greater or equal to 0. As sin is between -1 and 1,  negative values might render out torus in unexpected way. In this case it looks black half the time.
 
 Now, onto movement.
 
diff --git a/files/fr/games/techniques/3d_on_the_web/index.md b/files/fr/games/techniques/3d_on_the_web/index.md
index 7d294a7a53..bb153d79cb 100644
--- a/files/fr/games/techniques/3d_on_the_web/index.md
+++ b/files/fr/games/techniques/3d_on_the_web/index.md
@@ -51,11 +51,11 @@ Il y a aussi la [construction d'une démo de base avec l'article A-Frame](/fr/do
 
 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 [documentation WebGL](/fr/docs/Web/API/WebGL_API) 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.
 
-La bibliothèque 3D JavaScript la plus populaire est [Three.js](http://threejs.org/), 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-Frame](https://aframe.io), [PlayCanvas](https://playcanvas.com/) et [Babylon.js](http://www.babylonjs.com/) sont parmi les plus reconnaissables avec une documentation riche, des éditeurs en ligne et des communautés actives.
+La bibliothèque 3D JavaScript la plus populaire est [Three.js](http://threejs.org/), 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-Frame](https://aframe.io), [PlayCanvas](https://playcanvas.com/) et [Babylon.js](http://www.babylonjs.com/) sont parmi les plus reconnaissables avec une documentation riche, des éditeurs en ligne et des communautés actives.
 
 ### Construction d'une démo de base avec A-Frame
 
-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 [Construction d'une démo de base avec A-Frame](/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame) pour le processus étape par étape de création de la démo .
+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 [Construction d'une démo de base avec A-Frame](/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame) pour le processus étape par étape de création de la démo .
 
 ### Construction d'une démo de base avec Babylon.js
 
@@ -67,7 +67,7 @@ PlayCanvas est un moteur de jeu 3D WebGL populaire ouvert sur GitHub, avec un é
 
 ### Construction d'une démo de base avec Three.js
 
-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 [Construction d'une démo de base avec Three.js](/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js)  pour le processus étape par étape de création de la démo .
+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 [Construction d'une démo de base avec Three.js](/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js)  pour le processus étape par étape de création de la démo .
 
 ### Autres outils
 
diff --git a/files/fr/games/techniques/audio_for_web_games/index.md b/files/fr/games/techniques/audio_for_web_games/index.md
index 8049e4ae04..9a5323ab2c 100644
--- a/files/fr/games/techniques/audio_for_web_games/index.md
+++ b/files/fr/games/techniques/audio_for_web_games/index.md
@@ -300,7 +300,7 @@ Regardons maintenant le code. Nous créons d'abord un nouveau {{domxref ("AudioC
 
 `start()` (anciennement appelé `noteOn ())` commence à lire un élément audio. `start ()` demande trois paramètres (facultatifs) :
 
-1.  when _(quand)_ : le temps absolu pour commencer la lecture .
+1.  when _(quand)_ : le temps absolu pour commencer la lecture .
 2.  where (offset) _(où)_ : la partie de l'audio qui doit commencer à être jouée.
 3.  how long _(combien de temps)_ : la durée pendant laquelle elle doit être jouée.
 
@@ -316,7 +316,7 @@ Vous pouvez trouver que l'introduction d'une nouvelle piste sonne plus naturelle
 
 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.
 
-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 `start ()` 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 :
+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 `start ()` 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 :
 
 ```js
 if (offset == 0) {
@@ -347,7 +347,7 @@ Nous pouvons relier :
 - la direction des objets (mouvement de position et génération de l'effet Doppler)
 - l'environnement (caverneux, sous-marin, etc.)
 
-Ceci est particulièrement utile dans un environnement tridimensionnel rendu en utilisant [WebGL](/fr/docs/Web/API/WebGL_API), avec lequel l'API Web Audio permet d'associer l'audio aux objets et aux points de vue .
+Ceci est particulièrement utile dans un environnement tridimensionnel rendu en utilisant [WebGL](/fr/docs/Web/API/WebGL_API), avec lequel l'API Web Audio permet d'associer l'audio aux objets et aux points de vue .
 
 > **Note :** Voir [Web Audio API Spatialization Basics](/fr/docs/Web/API/Web_Audio_API/Web_audio_spatialization_basics) _(Bases de la spacialisation de l'API Web Audio)_ pour plus de détails.
 
diff --git a/files/fr/games/tools/asm.js/index.md b/files/fr/games/tools/asm.js/index.md
index 5378455b1b..1d51a626ed 100644
--- a/files/fr/games/tools/asm.js/index.md
+++ b/files/fr/games/tools/asm.js/index.md
@@ -11,11 +11,11 @@ translation_of: Games/Tools/asm.js
 
 
 
-C'est un sous-ensemble très petit et strict de JavaScript qui ne permet que des choses comme \`while\`,\` if\`, les nombres, les fonctions nommées de haut niveau et d'autres constructions simples. Cela n'autorise pas les objets, les chaînes, les fermetures, et tout ce qui nécessite une allocation de tas. Le code Asm.js ressemble à C de plusieurs façons, mais il reste toujours un JavaScript valide dans tous les moteurs actuels. Il pousse les moteurs JS à optimiser ce type de code et donne aux compilateurs comme Emascript une définition claire de ce type de code à générer. Nous allons montrer à quoi ressemble le code asm.js et expliquer comment il aide et comment vous pouvez l'utiliser.
+C'est un sous-ensemble très petit et strict de JavaScript qui ne permet que des choses comme \`while\`,\` if\`, les nombres, les fonctions nommées de haut niveau et d'autres constructions simples. Cela n'autorise pas les objets, les chaînes, les fermetures, et tout ce qui nécessite une allocation de tas. Le code Asm.js ressemble à C de plusieurs façons, mais il reste toujours un JavaScript valide dans tous les moteurs actuels. Il pousse les moteurs JS à optimiser ce type de code et donne aux compilateurs comme Emascript une définition claire de ce type de code à générer. Nous allons montrer à quoi ressemble le code asm.js et expliquer comment il aide et comment vous pouvez l'utiliser.
 
 Ce sous-ensemble de JavaScript est déjà très optimisé dans de nombreux moteurs JavaScript utilisant des techniques de compilation Just-In-Time (JIT). Cependant, en définissant une norme explicite, nous pouvons travailler sur l'optimisation de ce type de code encore plus et obtenir autant de performance que possible. Il est plus facile de collaborer sur plusieurs moteurs JS car il est facile de parler et de comparer. L'idée est que ce type de code devrait fonctionner très rapidement dans chaque moteur, et si ce n'est pas le cas, c'est un bug et il existe une spécification claire pour laquelle les moteurs devraient optimiser.
 
-Il permet également aux personnes d'écrire des compilateurs qui souhaitent générer un code performant sur le Web. Ils peuvent consulter la spécification asm.js et savoir qu'ils fonctionneront rapidement s'ils adhèrent aux modèles asm.js. [Emscripten](https://github.com/kripken/emscripten),  du C / C ++ au compilateur JavaScript, émet le code asm.js pour le faire fonctionner avec des performances proches natives sur plusieurs navigateurs.
+Il permet également aux personnes d'écrire des compilateurs qui souhaitent générer un code performant sur le Web. Ils peuvent consulter la spécification asm.js et savoir qu'ils fonctionneront rapidement s'ils adhèrent aux modèles asm.js. [Emscripten](https://github.com/kripken/emscripten),  du C / C ++ au compilateur JavaScript, émet le code asm.js pour le faire fonctionner avec des performances proches natives sur plusieurs navigateurs.
 
 En outre, si un moteur choisit de reconnaître spécialement le code asm.js, il existe encore plus d'optimisations qui peuvent être réalisées. Firefox est le seul navigateur à le faire maintenant.
 
diff --git a/files/fr/games/tools/index.md b/files/fr/games/tools/index.md
index 930b84358e..7dabccaa44 100644
--- a/files/fr/games/tools/index.md
+++ b/files/fr/games/tools/index.md
@@ -11,12 +11,12 @@ translation_of: Games/Tools
 ---
 {{GamesSidebar}}{{IncludeSubnav("/fr/docs/Games")}}
 
-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.
+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.
 
 - [asm.js](/fr/docs/Games/Tools/asm.js)
   - : 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.
 - [Emscripten](https://github.com/kripken/emscripten/wiki "https://github.com/kripken/emscripten/wiki")
-  - : 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 [tutoriel uitle Emscripten](https://github.com/kripken/emscripten/wiki/Tutorial) disponible sur le wiki. Notez que nous [visons à couvrir Emscripten dans sa propre section de MDN](/fr/docs/Emscripten).
+  - : 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 [tutoriel uitle Emscripten](https://github.com/kripken/emscripten/wiki/Tutorial) disponible sur le wiki. Notez que nous [visons à couvrir Emscripten dans sa propre section de MDN](/fr/docs/Emscripten).
 - [Gecko profiler](https://addons.mozilla.org/en-us/firefox/addon/gecko-profiler/ "https://addons.mozilla.org/en-us/firefox/addon/gecko-profiler/")
   - : 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.
 - [Moteurs de jeu et outils](/fr/docs/Games/Tools/Engines_and_tools)
diff --git a/files/fr/games/tutorials/2d_breakout_game_phaser/index.md b/files/fr/games/tutorials/2d_breakout_game_phaser/index.md
index f27cde10cf..4da8ade96e 100644
--- a/files/fr/games/tutorials/2d_breakout_game_phaser/index.md
+++ b/files/fr/games/tutorials/2d_breakout_game_phaser/index.md
@@ -12,7 +12,7 @@ Dans ce tutoriel étape par étape, nous créons un simple jeu mobile **MDN Brea
 
 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.
 
-Pour tirer le meilleur parti de cette série d'articles, vous devez déjà avoir des connaissances de base ou intermédiaires en [JavaScript](/fr/Learn/Getting_started_with_the_web/JavaScript_basics). Après avoir parcouru ce tutoriel, vous devriez être capable de construire vos propres jeux Web simples avec Phaser.
+Pour tirer le meilleur parti de cette série d'articles, vous devez déjà avoir des connaissances de base ou intermédiaires en [JavaScript](/fr/Learn/Getting_started_with_the_web/JavaScript_basics). Après avoir parcouru ce tutoriel, vous devriez être capable de construire vos propres jeux Web simples avec Phaser.
 
 ![](mdn-breakout-phaser.png)
 
@@ -37,11 +37,11 @@ Toutes les leçons - et les différentes versions du jeu [MDN Breakout game](htt
 15. [Boutons](/fr/docs/Games/Workflows/2D_Breakout_game_Phaser/Buttons)
 16. [Mode de jeu aléatoire](/fr/docs/Games/Workflows/2D_Breakout_game_Phaser/Randomizing_gameplay)
 
-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, [2D breakout game using pure JavaScript](/fr/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript).
+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, [2D breakout game using pure JavaScript](/fr/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript).
 
 Après cela, vous pouvez choisir n'importe quel framework que vous voulez et l'utiliser pour vos projets ; nous avons choisi Phaser car c'est un bon framework solide, avec un bon support et une communauté disponible, et un bon ensemble de plugins. Les cadres accélèrent le temps de développement et aident à prendre soin des parties ennuyeuses, vous permettant ainsi de vous concentrer sur les choses amusantes. Cependant, les frameworks ne sont pas toujours parfaits, donc si quelque chose d'inattendu se produit ou si vous voulez écrire des fonctionnalités que le framework ne fournit pas, vous aurez besoin de connaissances en JavaScript pur.
 
-> **Note :** 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 [Gamedev Phaser Content Kit](https://github.com/end3r/Gamedev-Phaser-Content-Kit) basé sur ce tutoriel si vous voulez donner une conférence sur le développement d'un jeu avec Phaser.
+> **Note :** 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 [Gamedev Phaser Content Kit](https://github.com/end3r/Gamedev-Phaser-Content-Kit) basé sur ce tutoriel si vous voulez donner une conférence sur le développement d'un jeu avec Phaser.
 
 ## Prochaines étapes
 
diff --git a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.md b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.md
index e0a0d0f3e4..8d6baba56e 100644
--- a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.md
+++ b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.md
@@ -20,7 +20,7 @@ original_slug: >-
 
 {{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Paddle_et_contr%C3%B4le_clavier")}}
 
-C'est la **3<sup>e</sup> étape sur** 10 de ce [tutoriel Gamedev Canvas](/fr/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript). Vous pouvez retrouver le code source de cette leçon sur [Gamedev-Canvas-workshop/lesson3.html](https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson01.html).
+C'est la **3<sup>e</sup> étape sur** 10 de ce [tutoriel Gamedev Canvas](/fr/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript). Vous pouvez retrouver le code source de cette leçon sur [Gamedev-Canvas-workshop/lesson3.html](https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson01.html).
 
 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.
 
@@ -62,7 +62,7 @@ if(y + dy > canvas.height) {
 }
 ```
 
-Si la position en y de la balle est supérieure à  la hauteur du canvas (soit 480 pixels dans cette leçon) on inverse encore la vitesse de la balle.
+Si la position en y de la balle est supérieure à la hauteur du canvas (soit 480 pixels dans cette leçon) on inverse encore la vitesse de la balle.
 
 On peut rassembler les deux conditions en une grâce au "ou" qui s'écrit || en JavaScript :
 
diff --git a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.md b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.md
index ab190b5bfc..4eda41525b 100644
--- a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.md
+++ b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.md
@@ -16,7 +16,7 @@ original_slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/Build_the_brick_
 
 {{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Game_over", "Games/Workflows/2D_Breakout_game_pure_JavaScript/detection_colisions")}}
 
-Il s'agit de la **6ème étape** sur 10 du [Gamedev Canvas tutorial](/fr/docs/Games/Workflows/Breakout_game_from_scratch). Vous pouvez trouver le code source après avoir complété cette leçon à : [Gamedev-Canvas-workshop/lesson6.html](https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson06.html).
+Il s'agit de la **6ème étape** sur 10 du [Gamedev Canvas tutorial](/fr/docs/Games/Workflows/Breakout_game_from_scratch). Vous pouvez trouver le code source après avoir complété cette leçon à : [Gamedev-Canvas-workshop/lesson6.html](https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson06.html).
 
 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.
 
@@ -34,9 +34,9 @@ var brickOffsetTop = 30;
 var brickOffsetLeft = 30;
 ```
 
-Ici nous avons défini dans l'ordre le nombre de lignes et de colonnes de briques, mais également une hauteur, une largeur et un espacement (_padding_) entre les briques pour qu'elles ne se touchent pas entre elles et qu'elles ne commencent pas a être tracées sur le bord du canevas.
+Ici nous avons défini dans l'ordre le nombre de lignes et de colonnes de briques, mais également une hauteur, une largeur et un espacement (_padding_) entre les briques pour qu'elles ne se touchent pas entre elles et qu'elles ne commencent pas a être tracées sur le bord du canevas.
 
-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 `x` et `y` pour afficher chaque brique sur l'écran.
+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 `x` et `y` pour afficher chaque brique sur l'écran.
 Ajoutez le code suivant juste en-dessous des variables :
 
 ```js
@@ -71,16 +71,16 @@ function drawBricks() {
 }
 ```
 
-Une nouvelle fois, nous parcourons les colonnes et les lignes pour attribuer une position `x` et `y` à chaque brique, et nous dessinons les briques — de taille : `brickWidth` x `brickHeight`  — 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 `(0,0)`. Ce dont nous avons besoin d'inclure ce sont quelques calculs qui vont définir la position `x` et `y` de chaque brique à chaque passage dans la boucle :
+Une nouvelle fois, nous parcourons les colonnes et les lignes pour attribuer une position `x` et `y` à chaque brique, et nous dessinons les briques — de taille&nbsp;: `brickWidth` x `brickHeight` — 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 `(0,0)`. Ce dont nous avons besoin d'inclure ce sont quelques calculs qui vont définir la position `x` et `y` de chaque brique à chaque passage dans la boucle&nbsp;:
 
 ```js
 var brickX = (c*(brickWidth+brickPadding))+brickOffsetLeft;
 var brickY = (r*(brickHeight+brickPadding))+brickOffsetTop;
 ```
 
-Chaque position `brickX` est déterminée par `brickWidth` + `brickPadding`, multiplié par le nombre de colonnes, `c`, plus `brickOffsetLeft`; la logique pour `brickY` est identique excepté qu'on utilise pour les ligne les valeurs `r`,`brickHeight` et `brickOffsetTop`. 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.
+Chaque position `brickX` est déterminée par `brickWidth` + `brickPadding`, multiplié par le nombre de colonnes, `c`, plus `brickOffsetLeft`; la logique pour `brickY` est identique excepté qu'on utilise pour les ligne les valeurs `r`,`brickHeight` et `brickOffsetTop`. 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.
 
-La version finale de la fonction `drawBricks()`, après avoir assigné les valeurs `brickX` et `brickY` comme coordonnées, plutot que `(0,0)` à chaque fois, va ressembler à ceci  — ajouter la fonction ci-dessous après `drawPaddle()` :
+La version finale de la fonction `drawBricks()`, après avoir assigné les valeurs `brickX` et `brickY` comme coordonnées, plutot que `(0,0)` à chaque fois, va ressembler à ceci — ajouter la fonction ci-dessous après `drawPaddle()`&nbsp;:
 
 ```js
 function drawBricks() {
@@ -102,7 +102,7 @@ function drawBricks() {
 
 ## Afficher les briques
 
-La dernière chose à faire dans cette leçon est d'ajouter un appel à `drawBricks()` quelque part dans la fonction `draw()`, 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 `drawBall()` :
+La dernière chose à faire dans cette leçon est d'ajouter un appel à `drawBricks()` quelque part dans la fonction `draw()`, 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 `drawBall()`&nbsp;:
 
 ```js
 drawBricks();
@@ -114,11 +114,11 @@ drawBricks();
 
 {{JSFiddleEmbed("https://jsfiddle.net/yumetodo/t1zqmzLp/","","395")}}
 
-Exercice : essayez de changer le nombre de briques dans une colonne ou dans une ligne ou bien leur position.
+Exercice : essayez de changer le nombre de briques dans une colonne ou dans une ligne ou bien leur position.
 
 ## Prochaines étapes
 
-Nous avons donc maintenant des briques !  
+Nous avons donc maintenant des briques !
 Mais la balle n'a toujours aucune interaction avec elles. Nous allons donc changer ça dans le chapitre sept : [Détection des collisions](/fr/docs/)
 
 {{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Game_over", "Games/Workflows/2D_Breakout_game_pure_JavaScript/detection_colisions")}}
diff --git a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.md b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.md
index f1d656f550..4ea2a5e1b8 100644
--- a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.md
+++ b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.md
@@ -15,7 +15,7 @@ original_slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/detection_colisi
 
 {{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Build_the_brick_field", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win")}}
 
-Il s'agit de la **7ème étape** sur 10 du [Gamedev Canvas tutorial](/fr/docs/Games/Workflows/Breakout_game_from_scratch). Vous pouvez trouver le code source tel qu'il devrait être après avoir complété cette leçon à : [Gamedev-Canvas-workshop/lesson7.html](https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson07.html).
+Il s'agit de la **7ème étape** sur 10 du [Gamedev Canvas tutorial](/fr/docs/Games/Workflows/Breakout_game_from_scratch). Vous pouvez trouver le code source tel qu'il devrait être après avoir complété cette leçon à : [Gamedev-Canvas-workshop/lesson7.html](https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson07.html).
 
 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.
 
@@ -58,7 +58,7 @@ function collisionDetection() {
 }
 ```
 
-Ajoutez le bloc ci-dessus à votre code, sous la fonction `keyUpHandler()` .
+Ajoutez le bloc ci-dessus à votre code, sous la fonction `keyUpHandler()` .
 
 ## Faire disparaître les briques après qu'elles aient été touchées
 
@@ -98,7 +98,7 @@ function drawBricks() {
 
 ## Suivi et mise à jour de l'état dans la fonction de détection de collision
 
-Nous devons maintenant impliquer la propriété de `status` de brique dans la fonction `collisionDetection()`: si la brique est active (son statut est `1`), 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 `0` afin qu'elle ne soit pas affichée à l'écran. Mettez à jour votre fonction `collisionDetection()` comme indiqué ci-dessous:
+Nous devons maintenant impliquer la propriété de `status` de brique dans la fonction `collisionDetection()`: si la brique est active (son statut est `1`), 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 `0` afin qu'elle ne soit pas affichée à l'écran. Mettez à jour votre fonction `collisionDetection()` comme indiqué ci-dessous:
 
 ```js
 function collisionDetection() {
@@ -134,6 +134,6 @@ Exercice: changez la couleur de la balle lorsqu'elle frappe une brique.
 
 ## Prochaine étape
 
-Nous ne sommes plus très loin de la fin ;  poursuivons ! Dans le huitième chapitre, nous verrons comment [Track the score and win](/fr/docs/Games/Workflows/Breakout_game_from_scratch/Track_the_score_and_win).
+Nous ne sommes plus très loin de la fin&nbsp;; poursuivons&nbsp;! Dans le huitième chapitre, nous verrons comment [Track the score and win](/fr/docs/Games/Workflows/Breakout_game_from_scratch/Track_the_score_and_win).
 
 {{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Build_the_brick_field", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win")}}
diff --git a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.md b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.md
index 39debd17dd..7479830b59 100644
--- a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.md
+++ b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.md
@@ -19,13 +19,13 @@ original_slug: >-
 
 {{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball")}}
 
-C'est la **1<sup>re</sup> étape sur** 10 de ce [tutoriel Gamedev Canvas](/fr/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript). Vous pouvez retrouver le code source de cette leçon sur [Gamedev-Canvas-workshop/lesson1.html](https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson01.html).
+C'est la **1<sup>re</sup> étape sur** 10 de ce [tutoriel Gamedev Canvas](/fr/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript). Vous pouvez retrouver le code source de cette leçon sur [Gamedev-Canvas-workshop/lesson1.html](https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson01.html).
 
-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")}}.
+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")}}.
 
 ## La page HTML du jeu
 
-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 `index.html`, et ajoutez-y le code suivant :
+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 `index.html`, et ajoutez-y le code suivant :
 
 ```html
 <!DOCTYPE html>
@@ -50,18 +50,18 @@ La structure de la page HTML est vraiment simple, car tout le jeu sera contenu d
 </html>
 ```
 
-Dans l'en-tête, nous avons défini l'encodage des caractères (`charset`), le titre  {{htmlelement("title")}} et quelques règles CSS très simples. Le corps contient les éléments {{htmlelement("canvas")}} et {{htmlelement("script")}}. L'élément {{htmlelement("canvas")}} contiendra le rendu du jeu et l'élément {{htmlelement("script")}} l'emplacement du code JavaScript pour contrôler le jeu. L'élément {{htmlelement("canvas")}} a un identifiant nommé `myCanvas` qui permettra de le retrouver facilement en JavaScript, et possède des dimensions de 480 pixels de longueur et 320 pixels de hauteur. Tout le code JavaScript que nous allons écrire dans ce tutoriel sera contenu entre la balise ouvrante `<script>` et la balise fermante `</script>`.
+Dans l'en-tête, nous avons défini l'encodage des caractères (`charset`), le titre  {{htmlelement("title")}} et quelques règles CSS très simples. Le corps contient les éléments {{htmlelement("canvas")}} et {{htmlelement("script")}}. L'élément {{htmlelement("canvas")}} contiendra le rendu du jeu et l'élément {{htmlelement("script")}} l'emplacement du code JavaScript pour contrôler le jeu. L'élément {{htmlelement("canvas")}} a un identifiant nommé `myCanvas` qui permettra de le retrouver facilement en JavaScript, et possède des dimensions de 480 pixels de longueur et 320 pixels de hauteur. Tout le code JavaScript que nous allons écrire dans ce tutoriel sera contenu entre la balise ouvrante `<script>` et la balise fermante `</script>`.
 
 ## Les bases de Canvas
 
-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 `<script>`.
+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 `<script>`.
 
 ```js
 var canvas = document.getElementById("myCanvas");
 var ctx = canvas.getContext("2d");
 ```
 
-Ici nous avons enregistré la référence à l'élément {{htmlelement("canvas")}} dans une variable nommée `canvas`. 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.
+Ici nous avons enregistré la référence à l'élément {{htmlelement("canvas")}} dans une variable nommée `canvas`. 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.
 
 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 `index.html` dans un navigateur pour l'essayer.
 
@@ -73,7 +73,7 @@ ctx.fill();
 ctx.closePath();
 ```
 
-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.
+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.
 
 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 :
 
@@ -108,11 +108,11 @@ Le code ci-dessus affiche un rectangle vide avec des traits bleus. Grâce au can
 
 ## Comparez votre code
 
-Voici tout le code source de cette première leçon, fonctionnant avec JSFiddle :
+Voici tout le code source de cette première leçon, fonctionnant avec JSFiddle :
 
 {{JSFiddleEmbed("https://jsfiddle.net/end3r/x62h15e2/","","370")}}
 
-**Exercice** : essayez de changer la taille et la couleur des formes géométriques.
+**Exercice**&nbsp;: essayez de changer la taille et la couleur des formes géométriques.
 
 ## Prochaines étapes
 
diff --git a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/game_over/index.md b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/game_over/index.md
index 74bd248ae1..c592c3da13 100644
--- a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/game_over/index.md
+++ b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/game_over/index.md
@@ -36,7 +36,7 @@ if(y + dy > canvas.height-ballRadius || y + dy < ballRadius) {
 
 Au lieu de permettre à la balle de rebondir sur les quatre murs, nous n'en autoriserons que trois désormais — gauche, haut et droite. Toucher le mur du bas mettra fin à la partie.
 
-Nous allons  donc modifier le second bloc `if` (qui gère le déplacement sur l'axe vertical, y) en y ajoutant un `else if` qui déclenchera un Game Over si la balle entre en collision avec le mur du bas. Pour l'instant nous allons rester simple, afficher un message d'alerte et redémarrer le jeu en rechargeant la page.
+Nous allons donc modifier le second bloc `if` (qui gère le déplacement sur l'axe vertical, y) en y ajoutant un `else if` qui déclenchera un Game Over si la balle entre en collision avec le mur du bas. Pour l'instant nous allons rester simple, afficher un message d'alerte et redémarrer le jeu en rechargeant la page.
 
 Tout d'abord remplacer l'appel initial à `setInterval()`
 
@@ -58,13 +58,13 @@ if(y + dy < ballRadius) {
 } else if(y + dy > canvas.height-ballRadius) {
     alert("GAME OVER");
     document.location.reload();
-    clearInterval(interval); // Needed for Chrome to end game
+    clearInterval(interval); // Needed for Chrome to end game
 }
 ```
 
 ## Faire rebondir la balle sur la raquette
 
-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 :
+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 :
 
 ```js
 if(y + dy < ballRadius) {
diff --git a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/index.md b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/index.md
index 3e2df54633..4199a2f93b 100644
--- a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/index.md
+++ b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/index.md
@@ -15,17 +15,17 @@ original_slug: Games/Workflows/2D_Breakout_game_pure_JavaScript
 
 {{Next("Games/Workflows/2D_Breakout_game_pure_JavaScript/creer_element_canvas_et_afficher")}}
 
-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")}}.
+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")}}.
 
-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.
+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.
 
-Pour comprendre la plupart des articles de ce tutoriel, vous devez déjà avoir un niveau basique ou intermédiaire en [JavaScript](/fr/Learn/Getting_started_with_the_web/JavaScript_basics). À la fin de ce tutoriel, vous serez capable de créer vos propres jeux Web.
+Pour comprendre la plupart des articles de ce tutoriel, vous devez déjà avoir un niveau basique ou intermédiaire en [JavaScript](/fr/Learn/Getting_started_with_the_web/JavaScript_basics). À la fin de ce tutoriel, vous serez capable de créer vos propres jeux Web.
 
 ![](mdn-breakout-gameplay.png)
 
 ## Détail de la leçon
 
-Toutes les leçons — et les différentes versions de ce [jeu de casse-brique MDN](http://breakout.enclavegames.com/lesson10.html) que nous allons créer ensemble — sont [disponibles sur GitHub](https://github.com/end3r/Canvas-gamedev-workshop) :
+Toutes les leçons — et les différentes versions de ce [jeu de casse-brique MDN](http://breakout.enclavegames.com/lesson10.html) que nous allons créer ensemble — sont [disponibles sur GitHub](https://github.com/end3r/Canvas-gamedev-workshop) :
 
 1.  [Créer l'élément canvas et dessiner dessus](/fr/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/creer_element_canvas_et_afficher)
 2.  [Déplacer la balle](/fr/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Move_the_ball)
@@ -46,6 +46,6 @@ Commencer avec du Javascript pur et dur est le meilleur moyen d'acquérir des co
 
 ## Prochaines étapes
 
-Ok, c'est parti ! Rendez-vous au premier chapitre pour commencer — Créer l'élément canvas et dessiner dessus
+Ok, c'est parti&nbsp;! Rendez-vous au premier chapitre pour commencer — Créer l'élément canvas et dessiner dessus
 
 {{Next("Games/Workflows/2D_Breakout_game_pure_JavaScript/creer_element_canvas_et_afficher")}}
diff --git a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.md b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.md
index ec2b525b5a..996bcc1eac 100644
--- a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.md
+++ b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.md
@@ -18,13 +18,13 @@ original_slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball
 
 Voici la deuxième étape de ce [tutoriel](/fr/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript). Vous pouvez retrouver le code source de cette leçon sur [Gamedev-Canvas-workshop/lesson2.html](https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson02.html).
 
-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).
+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).
 
 ## Définir une boucle de dessin
 
-Afin que le dessin soit mis à jour sur le canevas à chaque image, nous allons définir une fonction `draw()` qui sera exécutée en continu et qui utilisera des variables pour les positions des sprites, etc. Pour qu'une fonction s'exécute de façon répétée avec JavaScript, on pourra utiliser les méthodes {{domxref("WindowTimers.setInterval()", "setInterval()")}} ou {{domxref("window.requestAnimationFrame()", "requestAnimationFrame()")}}.
+Afin que le dessin soit mis à jour sur le canevas à chaque image, nous allons définir une fonction `draw()` qui sera exécutée en continu et qui utilisera des variables pour les positions des sprites, etc. Pour qu'une fonction s'exécute de façon répétée avec JavaScript, on pourra utiliser les méthodes {{domxref("WindowTimers.setInterval()", "setInterval()")}} ou {{domxref("window.requestAnimationFrame()", "requestAnimationFrame()")}}.
 
-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 `draw()` sera exécutée toutes les 10 millisecondes (environ) grâce à `setInterval` :
+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 `draw()` sera exécutée toutes les 10 millisecondes (environ) grâce à `setInterval` :
 
 ```js
 function draw() {
@@ -33,7 +33,7 @@ function draw() {
 setInterval(draw, 10);
 ```
 
-Grâce à la nature infinie de `setInterval`, la fonction `draw()` 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 `draw()` :
+Grâce à la nature infinie de `setInterval`, la fonction `draw()` 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 `draw()` :
 
 ```js
 ctx.beginPath();
@@ -47,9 +47,9 @@ Essayez votre code mis à jour maintenant, la balle devrait être repeinte sur c
 
 ## Déplacer la balle
 
-Pour le moment, vous ne voyez pas la balle "repeinte" car elle ne bouge pas. Améliorons tout ça. Pour commencer, au lieu d'une position bloquée à (50,50), nous allons définir un point de départ en bas et au milieu du canevas grâce aux variables `x` et `y` que nous utiliserons pour définir la position où le cercle est dessiné.
+Pour le moment, vous ne voyez pas la balle "repeinte" car elle ne bouge pas. Améliorons tout ça. Pour commencer, au lieu d'une position bloquée à (50,50), nous allons définir un point de départ en bas et au milieu du canevas grâce aux variables `x` et `y` que nous utiliserons pour définir la position où le cercle est dessiné.
 
-Ajoutez d'abord les deux lignes suivantes au-dessus de votre fonction `draw()` pour définir `x` et `y` :
+Ajoutez d'abord les deux lignes suivantes au-dessus de votre fonction `draw()` pour définir `x` et `y` :
 
 ```js
 var x = canvas.width/2;
@@ -68,14 +68,14 @@ function draw() {
 }
 ```
 
-Nous voici à la partie importante : nous voulons ajouter une valeur à `x` et `y` après que chaque image ait été dessinée afin de faire croire que la balle bouge. On définit ces valeurs comme `dx` et `dy` avec comme valeurs respectives 2 et -2. Ajoutez le code après la déclaration des variables `x` et `y` :
+Nous voici à la partie importante : nous voulons ajouter une valeur à `x` et `y` après que chaque image ait été dessinée afin de faire croire que la balle bouge. On définit ces valeurs comme `dx` et `dy` avec comme valeurs respectives 2 et -2. Ajoutez le code après la déclaration des variables `x` et `y` :
 
 ```js
 var dx = 2;
 var dy = -2;
 ```
 
-La dernière chose à faire est de mettre à jour `x` et `y` avec nos variables `dx` et  `dy` 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 `draw()` :
+La dernière chose à faire est de mettre à jour `x` et `y` avec nos variables `dx` et `dy` 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 `draw()` :
 
 ```js
 function draw() {
@@ -95,9 +95,9 @@ Enregistrez à nouveau votre code et essayez-le dans votre navigateur. Vous devr
 
 ## Effacer le canevas avant chaque image (_frame_)
 
-La balle laisse une trace parce que qu'une nouveau cercle est dessiné sur chaque frame sans qu'on enlève le précédent. Pas d'inquiétude, il existe un moyen d'effacer le contenu du canevas : {{domxref("CanvasRenderingContext2D.clearRect()","clearRect()")}}. Cette méthode prend en compte quatre paramètres: les coordonnées x et y du coin supérieur gauche d'un rectangle et les coordonnées x et y du coin inférieur droit d'un rectangle. Toute la zone couverte par ce rectangle sera effacée.
+La balle laisse une trace parce que qu'une nouveau cercle est dessiné sur chaque frame sans qu'on enlève le précédent. Pas d'inquiétude, il existe un moyen d'effacer le contenu du canevas : {{domxref("CanvasRenderingContext2D.clearRect()","clearRect()")}}. Cette méthode prend en compte quatre paramètres: les coordonnées x et y du coin supérieur gauche d'un rectangle et les coordonnées x et y du coin inférieur droit d'un rectangle. Toute la zone couverte par ce rectangle sera effacée.
 
-Ajoutez la nouvelle ligne en surbrillance ci-dessous à la fonction `draw()` :
+Ajoutez la nouvelle ligne en surbrillance ci-dessous à la fonction `draw()` :
 
 ```js
 function draw() {
@@ -112,11 +112,11 @@ function draw() {
 }
 ```
 
-Enregistrez votre code et essayez à nouveau. Cette fois, vous verrez la balle se déplacer sans laisser de trace. Toutes les 10 millisecondes, le canvas est effacé, la balle est dessinée sur une position donnée et les valeurs `x` et `y` sont mises à jour pour l'image suivante (en anglais, on parle de "_frame"_).
+Enregistrez votre code et essayez à nouveau. Cette fois, vous verrez la balle se déplacer sans laisser de trace. Toutes les 10 millisecondes, le canvas est effacé, la balle est dessinée sur une position donnée et les valeurs `x` et `y` sont mises à jour pour l'image suivante (en anglais, on parle de "_frame"_).
 
 ## Nettoyer notre code
 
-Dans les prochains articles, nous allons ajouter de plus en plus de d'instructions à la fonction `draw()`. Mieux vaut donc la garder aussi simple et propre que possible. Commençons par déplacer le code s'occupant de dessiner de la balle vers une fonction séparée.
+Dans les prochains articles, nous allons ajouter de plus en plus de d'instructions à la fonction `draw()`. Mieux vaut donc la garder aussi simple et propre que possible. Commençons par déplacer le code s'occupant de dessiner de la balle vers une fonction séparée.
 
 Remplacez la fonction `draw()` existante par les deux fonctions suivantes :
 
@@ -143,10 +143,10 @@ Vous pouvez vérifier le code de cet article avec la démo qui suit et jouer ave
 
 {{JSFiddleEmbed("https://jsfiddle.net/end3r/3x5foxb1/","","395")}}
 
-Exercice : Essayez de changer la vitesse de la balle en mouvement ou la direction dans laquelle elle se déplace.
+Exercice : Essayez de changer la vitesse de la balle en mouvement ou la direction dans laquelle elle se déplace.
 
 ## Prochaines étapes
 
-Nous avons dessiné nottre balle et elle se déplace mais elle ne cesse de disparaître du bord de notre canevas. Dans le troisième chapitre, nous verrons comment [faire rebondir la balle](/fr/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Faire_rebondir_la_balle_sur_les_murs) contre les bords.
+Nous avons dessiné nottre balle et elle se déplace mais elle ne cesse de disparaître du bord de notre canevas. Dans le troisième chapitre, nous verrons comment [faire rebondir la balle](/fr/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Faire_rebondir_la_balle_sur_les_murs) contre les bords.
 
 {{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")}}
diff --git a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.md b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.md
index 45c8e1bfa0..6d12a25b8e 100644
--- a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.md
+++ b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.md
@@ -18,7 +18,7 @@ original_slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/Paddle_et_contrÃ
 
 {{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Faire_rebondir_la_balle_sur_les_murs", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Game_over")}}
 
-C'est la **4<sup>e</sup> étape sur** 10 de ce [tutoriel Gamedev Canvas](/fr/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript). Vous pouvez retrouver le code source de cette leçon sur [Gamedev-Canvas-workshop/lesson4.html](https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson04.html).
+C'est la **4<sup>e</sup> étape sur** 10 de ce [tutoriel Gamedev Canvas](/fr/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript). Vous pouvez retrouver le code source de cette leçon sur [Gamedev-Canvas-workshop/lesson4.html](https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson04.html).
 
 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.
 
@@ -91,9 +91,9 @@ function keyUpHandler(e) {
 }
 ```
 
-Quand on presse une touche du clavier, l'information est stockée dans une variable. La variable concernée est mis sur `true`. Quand la touche est relachée, la variable revient à  `false`.
+Quand on presse une touche du clavier, l'information est stockée dans une variable. La variable concernée est mis sur `true`. Quand la touche est relachée, la variable revient à  `false`.
 
-Les deux fonctions prennent un événement comme paramètre, représenté par la variable `e`. De là, vous pouvez obtenir des informations utiles : la propriété `key` contient les informations sur la touche qui a été enfoncée.  La plupart des navigateurs utilisent `ArrowRight` et `ArrowLeft` pour les touches de flèche gauche/droite, mais nous devons également tester `Right` and `Left` pour prendre en charge les navigateurs IE/Edge. Si la touche gauche est enfoncé, la variable `leftPressed` est mise à `true`, et lorsqu'elle est relâchée, la variable `leftPressed` est mise à `false`. Le même principe s'applique à la touche droite et à la variable `RightPressed`.
+Les deux fonctions prennent un événement comme paramètre, représenté par la variable `e`. De là, vous pouvez obtenir des informations utiles : la propriété `key` contient les informations sur la touche qui a été enfoncée.  La plupart des navigateurs utilisent `ArrowRight` et `ArrowLeft` pour les touches de flèche gauche/droite, mais nous devons également tester `Right` and `Left` pour prendre en charge les navigateurs IE/Edge. Si la touche gauche est enfoncé, la variable `leftPressed` est mise à `true`, et lorsqu'elle est relâchée, la variable `leftPressed` est mise à `false`. Le même principe s'applique à la touche droite et à la variable `RightPressed`.
 
 ### La logique du déplacement de la raquette
 
diff --git a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/track_the_score_and_win/index.md b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/track_the_score_and_win/index.md
index 0ef6279158..e66cd4b6a6 100644
--- a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/track_the_score_and_win/index.md
+++ b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/track_the_score_and_win/index.md
@@ -8,7 +8,7 @@ original_slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_
 
 {{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/detection_colisions", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls")}}
 
-Ceci est la **8<sup>e</sup>** étape de ce [tutoriel Gamedev Canvas](/fr/docs/Games/Workflows/Breakout_game_from_scratch). Vous pouvez trouver le code source tel qu'il devrait être après avoir terminé cette leçon à : [Gamedev-Canvas-workshop/lesson8.html](https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson08.html).
+Ceci est la **8<sup>e</sup>** étape de ce [tutoriel Gamedev Canvas](/fr/docs/Games/Workflows/Breakout_game_from_scratch). Vous pouvez trouver le code source tel qu'il devrait être après avoir terminé cette leçon à : [Gamedev-Canvas-workshop/lesson8.html](https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson08.html).
 
 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.
 
@@ -20,7 +20,7 @@ Si vous pouvez voir votre score durant le jeu, vous pourrez impressioner vos ami
 var score = 0;
 ```
 
-Vous avez aussi besoin d'une fonction `drawScore()`, pour créer et mettre à jour l'affichage du score. Ajoutez ce qui suit après la fonction de détection de collision `collisionDetection()`:
+Vous avez aussi besoin d'une fonction `drawScore()`, pour créer et mettre à jour l'affichage du score. Ajoutez ce qui suit après la fonction de détection de collision `collisionDetection()`:
 
 ```js
 function drawScore() {
@@ -30,9 +30,9 @@ function drawScore() {
 }
 ```
 
-Dessiner du texte sur un canvas revient à dessiner une forme. La définition de la police est identique à celle en CSS — vous pouvez définir la taille et le type avec la méthode   {{domxref("CanvasRenderingContext2D.font","font()")}}. Puis utilisez {{domxref("CanvasRenderingContext2D.fillStyle()","fillStyle()")}} pour définir la couleur de la police et {{domxref("CanvasRenderingContext2D.fillText","fillText()")}} pour définir la position du texte sur le canevas. Le premier paramètre est le texte lui-même — le code ci-dessus indique le nombre actuel de points — et les deux derniers paramètres sont les coordonnées où le texte est placé sur le canevas.
+Dessiner du texte sur un canvas revient à dessiner une forme. La définition de la police est identique à celle en CSS — vous pouvez définir la taille et le type avec la méthode   {{domxref("CanvasRenderingContext2D.font","font()")}}. Puis utilisez {{domxref("CanvasRenderingContext2D.fillStyle()","fillStyle()")}} pour définir la couleur de la police et {{domxref("CanvasRenderingContext2D.fillText","fillText()")}} pour définir la position du texte sur le canevas. Le premier paramètre est le texte lui-même — le code ci-dessus indique le nombre actuel de points — et les deux derniers paramètres sont les coordonnées où le texte est placé sur le canevas.
 
-Pour attribuer le score à chaque collision avec une brique, ajoutez une ligne à la fonction `collisionDetection()` 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 :
+Pour attribuer le score à chaque collision avec une brique, ajoutez une ligne à la fonction `collisionDetection()` 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 :
 
 ```js
 function collisionDetection() {
@@ -51,7 +51,7 @@ function collisionDetection() {
 }
 ```
 
-Appelez la fonction `drawScore()` dans la fonction `draw()` pour garder le score à jour à chaque nouvelle frame — ajoutez la ligne suivante dans la fonction `draw()`, en dessous de l'appel à `drawPaddle()` :
+Appelez la fonction `drawScore()` dans la fonction `draw()` pour garder le score à jour à chaque nouvelle frame — ajoutez la ligne suivante dans la fonction `draw()`, en dessous de l'appel à `drawPaddle()`&nbsp;:
 
 ```js
 drawScore();
@@ -59,7 +59,7 @@ drawScore();
 
 ## Ajoutez un message de victoire lorsque toutes les briques ont été détruites
 
-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 `collisionDetection()`:
+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 `collisionDetection()`:
 
 ```js
 function collisionDetection() {
@@ -74,7 +74,7 @@ function collisionDetection() {
                     if(score == brickRowCount*brickColumnCount) {
                         alert("C'est gagné, Bravo!");
                         document.location.reload();
-                        clearInterval(interval); // Needed for Chrome to end game
+                        clearInterval(interval); // Needed for Chrome to end game
                     }
                 }
             }
@@ -83,7 +83,7 @@ function collisionDetection() {
 }
 ```
 
-Grâce à ça, les utilisateurs peuvent réellement gagner le jeu. La fonction `document.location.reload()` recharge la page et redémarre le jeu au clic sur le bouton d'alerte.
+Grâce à ça, les utilisateurs peuvent réellement gagner le jeu. La fonction `document.location.reload()` recharge la page et redémarre le jeu au clic sur le bouton d'alerte.
 
 ## Comparez votre code
 
diff --git a/files/fr/games/tutorials/html5_gamedev_phaser_device_orientation/index.md b/files/fr/games/tutorials/html5_gamedev_phaser_device_orientation/index.md
index d5c7702d58..2c8008ef2a 100644
--- a/files/fr/games/tutorials/html5_gamedev_phaser_device_orientation/index.md
+++ b/files/fr/games/tutorials/html5_gamedev_phaser_device_orientation/index.md
@@ -8,7 +8,7 @@ original_slug: Games/Workflows/HTML5_Gamedev_Phaser_Device_Orientation_FR
 
 {{IncludeSubnav("/fr/docs/Jeux")}}
 
-Dans ce tutoriel, nous allons passer par le processus de construction d'un jeu mobile HTML5 qui utilise les API  [Device Orientation](/fr/Apps/Fundamentals/gather_and_modify_data/responding_to_device_orientation_changes)  et [Vibration](/fr/docs/Web/API/Vibration_API)   pour améliorer le "gameplay" et est construit avec le "framework" [Phaser](http://phaser.io/). La connaissance JavaScript de base est recommandée pour tirer le meilleur parti de ce tutoriel.
+Dans ce tutoriel, nous allons passer par le processus de construction d'un jeu mobile HTML5 qui utilise les API [Device Orientation](/fr/Apps/Fundamentals/gather_and_modify_data/responding_to_device_orientation_changes) et [Vibration](/fr/docs/Web/API/Vibration_API) pour améliorer le "gameplay" et est construit avec le "framework" [Phaser](http://phaser.io/). La connaissance JavaScript de base est recommandée pour tirer le meilleur parti de ce tutoriel.
 
 ## Exemple de jeu
 
@@ -18,7 +18,7 @@ A la fin de ce tutoriel, vous aurez une démo entièrement fonctionnelle du jeu
 
 ## Le framework Phaser
 
-[Phaser](http://phaser.io/) est un framework pour créer des jeux mobiles et PC en utilisant les technologies HTML5. Malgré son manque de maturité, la communauté est assez active, et il évolue rapidement.  Les sources sont [sur GitHub](https://github.com/photonstorm/phaser), lisez y la [documentation](http://docs.phaser.io/) de base, jetez un œil aux [exemples](http://examples.phaser.io/). Le framework Phaser offre un ensemble d'outils qui permettent d'accélérer le développement et aident à mettre en oeuvre les tâches courantes nécessaires au développement d'un  jeu.
+[Phaser](http://phaser.io/) est un framework pour créer des jeux mobiles et PC en utilisant les technologies HTML5. Malgré son manque de maturité, la communauté est assez active, et il évolue rapidement. Les sources sont [sur GitHub](https://github.com/photonstorm/phaser), lisez y la [documentation](http://docs.phaser.io/) de base, jetez un œil aux [exemples](http://examples.phaser.io/). Le framework Phaser offre un ensemble d'outils qui permettent d'accélérer le développement et aident à mettre en oeuvre les tâches courantes nécessaires au développement d'un jeu.
 
 ## Mise en place du projet
 
@@ -92,7 +92,7 @@ La première valeur est le nom de l'état et la seconde est l'objet que nous vou
 
 ## Gestion des états du jeu
 
-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 : `Boot (démarrage)`, `Preloader (préchargement)`, `MainMenu (menu principal)`, `Howto` _(comment jouer)_ et `Game (jeu)`. `Boot` s'occupe d'initialiser quelques paramètres, `Preloader` charge tous les graphismes et les sons, `MainMenu` est le menu avec le bouton start, `Howto` affiche les instructions "comment jouer" et `Game`, est l'état qui permet de  jouer. Passons rapidement au contenu de ces états.
+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 : `Boot (démarrage)`, `Preloader (préchargement)`, `MainMenu (menu principal)`, `Howto` _(comment jouer)_ et `Game (jeu)`. `Boot` s'occupe d'initialiser quelques paramètres, `Preloader` charge tous les graphismes et les sons, `MainMenu` est le menu avec le bouton start, `Howto` affiche les instructions "comment jouer" et `Game`, est l'état qui permet de jouer. Passons rapidement au contenu de ces états.
 
 ### Boot.js _(démarrage)_
 
@@ -118,7 +118,7 @@ Ball.Boot.prototype = {
 };
 ```
 
-Le principal objet "`Ball`"  est défini et nous ajoutons deux variables appelées `_WIDTH` et `_HEIGHT` 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 `Preload` _(préchargement)_ pour montrer la progression du chargement de tous les autres éléments. La fonction `create` contient une configuration de base : nous configurons la mise à l'échelle et l'alignement du canevas et passons à l'état `Preload` lorsque tout est prêt.
+Le principal objet "`Ball`"  est défini et nous ajoutons deux variables appelées `_WIDTH` et `_HEIGHT` 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 `Preload` _(préchargement)_ pour montrer la progression du chargement de tous les autres éléments. La fonction `create` contient une configuration de base : nous configurons la mise à l'échelle et l'alignement du canevas et passons à l'état `Preload` lorsque tout est prêt.
 
 ### Preloader.js _(préchargement)_
 
@@ -201,7 +201,7 @@ L'état `Howto` affiche les instructions du jeu à l'écran avant de commencer l
 
 ### Game.js (jeu)
 
-L'état `game` à partir du fichier `Game.js` est le lieu où toute la magie opère. Toute l'initialisation est dans la fonction `create ()` (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 `update ()` exécutée à chaque frame, qui met à jour des choses telles que la position de la balle.
+L'état `game` à partir du fichier `Game.js` est le lieu où toute la magie opère. Toute l'initialisation est dans la fonction `create ()` (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 `update ()` exécutée à chaque frame, qui met à jour des choses telles que la position de la balle.
 
 ```js
 Ball.Game = function(game) {};
@@ -242,17 +242,17 @@ ball.body.setCircle(10, 11, 11);
 ball.body.linearDamping = 1;
 ```
 
-On ajoute un "sprite" à une place donnée sur l'écran en utilisant l'image `'ball'`. On ajoute aussi le point de repère de tous les calculs physiques ( '`anchor`' ) 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é `bounce` est utilisée pour définir le rebondissement de la balle quand elle frappe les obstacles.
+On ajoute un "sprite" à une place donnée sur l'écran en utilisant l'image `'ball'`. On ajoute aussi le point de repère de tous les calculs physiques ( '`anchor`' ) 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é `bounce` est utilisée pour définir le rebondissement de la balle quand elle frappe les obstacles.
 
 ### Contrôle de la balle
 
-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 ( _gyroscope_). Maintenant, concentrons-nous sur le clavier en ajoutant la ligne suivante pour la fonction `create()` :
+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 ( _gyroscope_). Maintenant, concentrons-nous sur le clavier en ajoutant la ligne suivante pour la fonction `create()` :
 
 ```js
 this.keys = this.game.input.keyboard.createCursorKeys();
 ```
 
-Comme vous pouvez le voir, Phaser a une fonction spéciale  `createCursorKeys()` qui nous donnera un objet avec des gestionnaires d'événements pour les quatre touches fléchées : haut, bas, gauche et droite.
+Comme vous pouvez le voir, Phaser a une fonction spéciale  `createCursorKeys()` qui nous donnera un objet avec des gestionnaires d'événements pour les quatre touches fléchées : haut, bas, gauche et droite.
 
 Ensuite, nous allons ajouter le code suivant dans la fonction `update ()`, il sera lancé à chaque "frame". L'objet `this.keys` sera vérifié aux pressions de touche du joueur, la balle réagira donc en conséquence :
 
@@ -273,9 +273,9 @@ else if(this.keys.down.isDown) {
 
 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.
 
-## Implémentation de l'API Device Orientation (_gyroscopique_)
+## Implémentation de l'API Device Orientation (_gyroscopique_)
 
-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  `create()` qui l'implémente :
+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  `create()` qui l'implémente :
 
 ```js
 window.addEventListener("deviceorientation", this.handleOrientation, true);
@@ -487,6 +487,6 @@ Ceci est simplement une démonstration de travail d'un jeu qui pourrait avoir be
 
 ## Résumé
 
-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 [Cyber Orb](http://orb.enclavegames.com/) et consulter son [code source sur GitHub](https://github.com/EnclaveGames/Cyber-Orb).
+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 [Cyber Orb](http://orb.enclavegames.com/) et consulter son [code source sur GitHub](https://github.com/EnclaveGames/Cyber-Orb).
 
 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' [autres frameworks](http://html5devstarter.enclavegames.com/#frameworks) qui méritent d'être considérés aussi, comme [ImpactJS](http://impactjs.com/), [Construct 2](https://www.scirra.com/construct2) ou [PlayCanvas](http://playcanvas.com/) — 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.