From 1407c8fdef01ecd0ffb8a8bd46e7113f119b9fde Mon Sep 17 00:00:00 2001 From: julieng Date: Sat, 2 Oct 2021 17:20:24 +0200 Subject: convert content to md --- .../by_example/raining_rectangles/index.md | 64 ++++++++++++---------- 1 file changed, 35 insertions(+), 29 deletions(-) (limited to 'files/fr/web/api/webgl_api/by_example/raining_rectangles') diff --git a/files/fr/web/api/webgl_api/by_example/raining_rectangles/index.md b/files/fr/web/api/webgl_api/by_example/raining_rectangles/index.md index de42151f5c..4064bb708f 100644 --- a/files/fr/web/api/webgl_api/by_example/raining_rectangles/index.md +++ b/files/fr/web/api/webgl_api/by_example/raining_rectangles/index.md @@ -11,32 +11,34 @@ tags: translation_of: Web/API/WebGL_API/By_example/Raining_rectangles original_slug: Web/API/WebGL_API/By_example/Une_pluie_de_rectangle --- -
{{IncludeSubnav("/fr/Apprendre")}}
+{{IncludeSubnav("/fr/Apprendre")}} -

{{PreviousNext("Apprendre/WebGL/Par_exemple/Créer_une_animation_avec_découpe_et_applique","Apprendre/WebGL/Par_exemple/Hello_GLSL")}}

+{{PreviousNext("Apprendre/WebGL/Par_exemple/Créer_une_animation_avec_découpe_et_applique","Apprendre/WebGL/Par_exemple/Hello_GLSL")}} -

Cet exemple permet de créer un jeu simple qui illustre ce qu'il est possible de faire avec du « découpage », des animations et des interactions utilisateur.

+Cet exemple permet de créer un jeu simple qui illustre ce qu'il est possible de faire avec du « découpage », des animations et des interactions utilisateur. -

{{EmbedLiveSample("Utiliser_des_animations_et_des_interactions_grâce_à_des_découpes",660,425)}}

+{{EmbedLiveSample("Utiliser_des_animations_et_des_interactions_grâce_à_des_découpes",660,425)}} -

Utiliser des animations et des interactions grâce à des découpes

+### Utiliser des animations et des interactions grâce à des découpes -

Voici un jeu simple où il faut essayer de cliquer sur les rectangles qui tombent pour en attraper le plus possible. Dans cet exemple, on utilise un approche orientée objet pour représenter les rectangles. Cela permet de mieux gérer l'état du rectangle (sa position, sa couleur, etc.) et cela rend le code plus compact et plus facile à réutiliser.

+Voici un jeu simple où il faut essayer de cliquer sur les rectangles qui tombent pour en attraper le plus possible. Dans cet exemple, on utilise un approche orientée objet pour représenter les rectangles. Cela permet de mieux gérer l'état du rectangle (sa position, sa couleur, etc.) et cela rend le code plus compact et plus facile à réutiliser. -

Dans cet exemple, on combine l'applique de couleurs unis dans le tampon de dessin et des opérations de découpe. C'est un aperçu d'une application graphique complète qui manipule les différentes phases des processus {{Glossary("WebGL")}} et de son automate.

+Dans cet exemple, on combine l'applique de couleurs unis dans le tampon de dessin et des opérations de découpe. C'est un aperçu d'une application graphique complète qui manipule les différentes phases des processus {{Glossary("WebGL")}} et de son automate. -

De plus, cet exmple illustre comment intégrer des fonctions WebGL dans une boucle de jeu. La boucle de jeu est responsable du dessin pour l'animation, de la gestion des entrées utilisateur et de la réactivité de l'ensemble. Voici comment la boucle de jeu est implémentée avec des  setTimeout.

+De plus, cet exmple illustre comment intégrer des fonctions WebGL dans une boucle de jeu. La boucle de jeu est responsable du dessin pour l'animation, de la gestion des entrées utilisateur et de la réactivité de l'ensemble. Voici comment la boucle de jeu est implémentée avec des  `setTimeout`. - + HTML5 canvas. +``` - +``` - +```js hidden +;(function(){ +``` -
"use strict"
+```js
+"use strict"
 window.addEventListener("load", setupAnimation, false);
 var gl,
   timer,
@@ -88,7 +92,7 @@ function drawAnimation () {
       rainingRect.size[0] , rainingRect.size[1]);
   gl.clear(gl.COLOR_BUFFER_BIT);
   rainingRect.position[1] -= rainingRect.velocity;
-  if (rainingRect.position[1] < 0) {
+  if (rainingRect.position[1] < 0) {
     misses += 1;
     missesDisplay.innerHTML = misses;
     rainingRect = new Rectangle();
@@ -114,8 +118,8 @@ function playerClick (evt) {
   // On incrémente donc le score et on crée un nouveau rectangle
   var diffPos = [ position[0] - rainingRect.position[0],
       position[1] - rainingRect.position[1] ];
-  if ( diffPos[0] >= 0 && diffPos[0] < rainingRect.size[0]
-      && diffPos[1] >= 0 && diffPos[1] < rainingRect.size[1] ) {
+  if ( diffPos[0] >= 0 && diffPos[0] < rainingRect.size[0]
+      && diffPos[1] >= 0 && diffPos[1] < rainingRect.size[1] ) {
     score += 1;
     scoreDisplay.innerHTML = score;
     rainingRect = new Rectangle();
@@ -146,9 +150,10 @@ function Rectangle () {
     return [Math.random(), Math.random(), Math.random()];
   }
 }
-
+``` - +``` - +```js hidden +})(); +``` -

Le code source de cet exemple est également disponible sur GitHub.

+Le code source de cet exemple est également disponible sur [GitHub](https://github.com/idofilin/webgl-by-example/tree/master/raining-rectangles). -

{{PreviousNext("Apprendre/WebGL/Par_exemple/Créer_une_animation_avec_découpe_et_applique","Apprendre/WebGL/Par_exemple/Hello_GLSL")}}

+{{PreviousNext("Apprendre/WebGL/Par_exemple/Créer_une_animation_avec_découpe_et_applique","Apprendre/WebGL/Par_exemple/Hello_GLSL")}} -- cgit v1.2.3-54-g00ecf