From 728e7b64e54f3b6e56eaba38b65adbbaa42990ca Mon Sep 17 00:00:00 2001 From: julieng Date: Thu, 11 Nov 2021 07:45:08 +0100 Subject: move *.html to *.md --- .../tutorials/2d_breakout_game_phaser/index.html | 62 --- .../tutorials/2d_breakout_game_phaser/index.md | 62 +++ .../bounce_off_the_walls/index.html | 109 ----- .../bounce_off_the_walls/index.md | 109 +++++ .../build_the_brick_field/index.html | 115 ------ .../build_the_brick_field/index.md | 115 ++++++ .../collision_detection/index.html | 133 ------ .../collision_detection/index.md | 133 ++++++ .../create_the_canvas_and_draw_on_it/index.html | 115 ------ .../create_the_canvas_and_draw_on_it/index.md | 115 ++++++ .../finishing_up/index.html | 107 ----- .../finishing_up/index.md | 107 +++++ .../game_over/index.html | 94 ----- .../game_over/index.md | 94 +++++ .../2d_breakout_game_pure_javascript/index.html | 59 --- .../2d_breakout_game_pure_javascript/index.md | 59 +++ .../mouse_controls/index.html | 58 --- .../mouse_controls/index.md | 58 +++ .../move_the_ball/index.html | 143 ------- .../move_the_ball/index.md | 143 +++++++ .../paddle_and_keyboard_controls/index.html | 138 ------- .../paddle_and_keyboard_controls/index.md | 138 +++++++ .../track_the_score_and_win/index.html | 92 ----- .../track_the_score_and_win/index.md | 92 +++++ .../index.html | 444 --------------------- .../index.md | 444 +++++++++++++++++++++ files/fr/games/tutorials/index.html | 29 -- files/fr/games/tutorials/index.md | 29 ++ 28 files changed, 1698 insertions(+), 1698 deletions(-) delete mode 100644 files/fr/games/tutorials/2d_breakout_game_phaser/index.html create mode 100644 files/fr/games/tutorials/2d_breakout_game_phaser/index.md delete mode 100644 files/fr/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.html create mode 100644 files/fr/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.md delete mode 100644 files/fr/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.html create mode 100644 files/fr/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.md delete mode 100644 files/fr/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.html create mode 100644 files/fr/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.md delete mode 100644 files/fr/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.html create mode 100644 files/fr/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.md delete mode 100644 files/fr/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.html create mode 100644 files/fr/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.md delete mode 100644 files/fr/games/tutorials/2d_breakout_game_pure_javascript/game_over/index.html create mode 100644 files/fr/games/tutorials/2d_breakout_game_pure_javascript/game_over/index.md delete mode 100644 files/fr/games/tutorials/2d_breakout_game_pure_javascript/index.html create mode 100644 files/fr/games/tutorials/2d_breakout_game_pure_javascript/index.md delete mode 100644 files/fr/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.html create mode 100644 files/fr/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.md delete mode 100644 files/fr/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.html create mode 100644 files/fr/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.md delete mode 100644 files/fr/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.html create mode 100644 files/fr/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.md delete mode 100644 files/fr/games/tutorials/2d_breakout_game_pure_javascript/track_the_score_and_win/index.html create mode 100644 files/fr/games/tutorials/2d_breakout_game_pure_javascript/track_the_score_and_win/index.md delete mode 100644 files/fr/games/tutorials/html5_gamedev_phaser_device_orientation/index.html create mode 100644 files/fr/games/tutorials/html5_gamedev_phaser_device_orientation/index.md delete mode 100644 files/fr/games/tutorials/index.html create mode 100644 files/fr/games/tutorials/index.md (limited to 'files/fr/games/tutorials') diff --git a/files/fr/games/tutorials/2d_breakout_game_phaser/index.html b/files/fr/games/tutorials/2d_breakout_game_phaser/index.html deleted file mode 100644 index 78680ebc8a..0000000000 --- a/files/fr/games/tutorials/2d_breakout_game_phaser/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: 2D breakout game using Phaser -slug: Games/Tutorials/2D_breakout_game_Phaser -translation_of: Games/Tutorials/2D_breakout_game_Phaser -original_slug: Games/Workflows/2D_breakout_game_Phaser ---- -
{{GamesSidebar}}
- -
{{IncludeSubnav("/fr/docs/Games")}}
- -

{{Next("Games/Workflows/2D_Breakout_game_Phaser/Initialize_the_framework")}}

- -

Dans ce tutoriel étape par étape, nous créons un simple jeu mobile MDN Breakout écrit en JavaScript, en utilisant le framework Phaser.

- -

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. Après avoir parcouru ce tutoriel, vous devriez être capable de construire vos propres jeux Web simples avec Phaser.

- -

- -

Détails de la leçon

- -

Toutes les leçons - et les différentes versions du jeu MDN Breakout game que nous construisons ensemble - sont disponibles sur GitHub :

- -
    -
  1. Initialiser le cadre
    2. -
  2. Mise à l'échelle
    3. -
  3. Charger les actifs et les imprimer à l'écran
    4. -
  4. Déplacer le ballon
    5. -
  5. Physique
    6. -
  6. Rebondir sur les murs
    7. -
  7. Pagaie et commandes du joueur
    8. -
  8. Fin de la partie
    9. -
  9. Construisez le champ de briques
    10. -
  10. Détection de collision
    11. -
  11. Le score
    12. -
  12. Gagnez la partie
    13. -
  13. Extra vies
    14. -
  14. Animations et préadolescents
    15. -
  15. Boutons
    16. -
  16. Mode de jeu aléatoire
    17. -
- -

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.

- - - -

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 basé sur ce tutoriel si vous voulez donner une conférence sur le développement d'un jeu avec Phaser.

-
- -

Prochaines étapes

- -

Ok, commençons ! Aller à la première partie de la série — Initialize the framework.

- -

{{Next("Games/Workflows/2D_Breakout_game_Phaser/Initialize_the_framework")}}

diff --git a/files/fr/games/tutorials/2d_breakout_game_phaser/index.md b/files/fr/games/tutorials/2d_breakout_game_phaser/index.md new file mode 100644 index 0000000000..78680ebc8a --- /dev/null +++ b/files/fr/games/tutorials/2d_breakout_game_phaser/index.md @@ -0,0 +1,62 @@ +--- +title: 2D breakout game using Phaser +slug: Games/Tutorials/2D_breakout_game_Phaser +translation_of: Games/Tutorials/2D_breakout_game_Phaser +original_slug: Games/Workflows/2D_breakout_game_Phaser +--- +
{{GamesSidebar}}
+ +
{{IncludeSubnav("/fr/docs/Games")}}
+ +

{{Next("Games/Workflows/2D_Breakout_game_Phaser/Initialize_the_framework")}}

+ +

Dans ce tutoriel étape par étape, nous créons un simple jeu mobile MDN Breakout écrit en JavaScript, en utilisant le framework Phaser.

+ +

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. Après avoir parcouru ce tutoriel, vous devriez être capable de construire vos propres jeux Web simples avec Phaser.

+ +

+ +

Détails de la leçon

+ +

Toutes les leçons - et les différentes versions du jeu MDN Breakout game que nous construisons ensemble - sont disponibles sur GitHub :

+ +
    +
  1. Initialiser le cadre
    2. +
  2. Mise à l'échelle
    3. +
  3. Charger les actifs et les imprimer à l'écran
    4. +
  4. Déplacer le ballon
    5. +
  5. Physique
    6. +
  6. Rebondir sur les murs
    7. +
  7. Pagaie et commandes du joueur
    8. +
  8. Fin de la partie
    9. +
  9. Construisez le champ de briques
    10. +
  10. Détection de collision
    11. +
  11. Le score
    12. +
  12. Gagnez la partie
    13. +
  13. Extra vies
    14. +
  14. Animations et préadolescents
    15. +
  15. Boutons
    16. +
  16. Mode de jeu aléatoire
    17. +
+ +

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.

+ + + +

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 basé sur ce tutoriel si vous voulez donner une conférence sur le développement d'un jeu avec Phaser.

+
+ +

Prochaines étapes

+ +

Ok, commençons ! Aller à la première partie de la série — Initialize the framework.

+ +

{{Next("Games/Workflows/2D_Breakout_game_Phaser/Initialize_the_framework")}}

diff --git a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.html b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.html deleted file mode 100644 index ba76f92846..0000000000 --- a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.html +++ /dev/null @@ -1,109 +0,0 @@ ---- -title: Faire rebondir la balle sur les murs -slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls -tags: - - Animation - - Canvas - - Débutant - - Exemple - - JavaScript - - Jeux - - Tuto - - Tutoriel - - detection - - graphique -translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls -original_slug: >- - Games/Workflows/2D_Breakout_game_pure_JavaScript/Faire_rebondir_la_balle_sur_les_murs ---- -
{{GamesSidebar}}
- -
{{IncludeSubnav("/fr/docs/Games")}}
- -

{{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 3e étape sur 10 de ce tutoriel Gamedev Canvas. Vous pouvez retrouver le code source de cette leçon sur Gamedev-Canvas-workshop/lesson3.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.

- -

Détection des collisions

- -

Pour détecter la collision, nous vérifierons si la balle touche (entre en collision avec) le mur et, si c'est le cas, nous modifierons la direction de son mouvement en conséquence.
-
- Pour faciliter les calculs, nous allons définir une variable appelée ballRadius qui contiendra le rayon du cercle dessiné et sera utilisée pour les calculs. Ajoutez cette variable à votre code, quelque part en dessous des déclarations de variables existantes :
-  

- -
var ballRadius = 10;
- -

Mettez maintenant à jour la ligne qui dessine la balle à l'intérieur de la fonction drawBall() :

- -
ctx.arc(x, y, ballRadius, 0, Math.PI*2);
- -

Rebondir en haut et en bas

- -

Il y a 4 murs en tout mais nous allons d'abord nous pencher sur le mur du haut. Nous devons, à chaque rafraichissement du canvas, regarder si la balle touche le bord du haut. Si c'est le cas, alors nous devons inverser la direction de la balle pour créer un effet de limite de zone de jeu. Il ne faut surtout pas oublier que le point d'origine est en haut à gauche ! Nous pouvons donc écrire :

- -
if(y + dy < 0) {
-    dy = -dy;
-}
- -

Si la valeur y de la position de la balle est inférieure à zéro, changez la direction du mouvement sur l'axe y en le rendant égal à son inverse. Si la balle se déplaçait vers le haut à une vitesse de 2 pixels par image, elle se déplacera maintenant "vers le haut" à une vitesse de -2 pixels, ce qui équivaut en fait à se déplacer vers le bas à une vitesse de 2 pixels par image.
-
- Le code ci-dessus traite du rebondissement de la balle sur le bord supérieur, alors traitons maintenant le bord inférieur :

- -
if(y + dy > canvas.height) {
-    dy = -dy;
-}
- -

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 :

- -
if(y + dy > canvas.height || y + dy < 0) {
-    dy = -dy;
-}
- -

Si une des deux conditions est vérifiée, alors la vitesse est inversée. Essayez de créer votre propre code pour la gauche et la droite avant de passer à la prochaine sous-partie. Vous verrez que le principe est le même.

- -

Rebondir à gauche et à droite

- -

Nous avons couvert les bords supérieur et inférieur, alors pensons à ceux de gauche et de droite. C'est très similaire en fait, il suffit de répéter les instructions pour x au lieu de y :

- -
if(x + dx > canvas.width || x + dx < 0) {
-    dx = -dx;
-}
-
-if(y + dy > canvas.height || y + dy < 0) {
-    dy = -dy;
-}
- -

À ce stade, vous devez insérer le bloc de code ci-dessus dans la fonction draw(), juste avant l'accolade de fermeture.

- -

La balle disparaît toujours!

- -

Testez votre code à ce stade, et vous serez impressionné — nous avons maintenant une balle qui rebondit sur les quatre bords de la toile ! Mais nous avons un autre problème — lorsque la balle frappe un mur, elle s'y enfonce légèrement avant de changer de direction :

- -

- -

C'est parce que nous calculons le point de collision entre le mur et le centre de la balle, alors que nous devrions le faire pour sa circonférence. La balle devrait rebondir juste après avoir touché le mur, et non pas lorsqu'elle est déjà à mi-chemin dans le mur, alors ajustons un peu nos déclarations pour inclure cela. Mettez à jour le dernier code que vous avez ajouté :

- -
if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) {
-    dx = -dx;
-}
-if(y + dy > canvas.height-ballRadius || y + dy < ballRadius) {
-    dy = -dy;
-}
- -

Lorsque la distance entre le centre de la balle et le bord du mur est exactement la même que le rayon de la balle, cela change la direction du mouvement. Soustraire le rayon de la largeur d'un bord et l'ajouter à l'autre nous donne l'impression d'une détection de collision correcte — la balle rebondit sur les murs comme elle devrait le faire.

- -

Comparez votre code

- -

Vérifions encore une fois le code fini pour cette partie par rapport à ce que vous avez, et jouons une partie :

- -

{{JSFiddleEmbed("https://jsfiddle.net/end3r/redj37dc/","","395")}}

- -

Exercice: essayez de changer la couleur de la balle à chaque fois que celle-ci tape un mur.

- -

Dans le prochain chapitre

- -

Nous sommes maintenant arrivés au stade où notre balle se déplace et reste sur le plateau de jeu. Dans le quatrième chapitre, nous examinerons la mise en place d'une raquette contrôlable - voir Raquette et contrôle au clavier. {PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Paddle_et_contr%C3%B4le_clavier")}}

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 new file mode 100644 index 0000000000..ba76f92846 --- /dev/null +++ b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.md @@ -0,0 +1,109 @@ +--- +title: Faire rebondir la balle sur les murs +slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls +tags: + - Animation + - Canvas + - Débutant + - Exemple + - JavaScript + - Jeux + - Tuto + - Tutoriel + - detection + - graphique +translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls +original_slug: >- + Games/Workflows/2D_Breakout_game_pure_JavaScript/Faire_rebondir_la_balle_sur_les_murs +--- +
{{GamesSidebar}}
+ +
{{IncludeSubnav("/fr/docs/Games")}}
+ +

{{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 3e étape sur 10 de ce tutoriel Gamedev Canvas. Vous pouvez retrouver le code source de cette leçon sur Gamedev-Canvas-workshop/lesson3.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.

+ +

Détection des collisions

+ +

Pour détecter la collision, nous vérifierons si la balle touche (entre en collision avec) le mur et, si c'est le cas, nous modifierons la direction de son mouvement en conséquence.
+
+ Pour faciliter les calculs, nous allons définir une variable appelée ballRadius qui contiendra le rayon du cercle dessiné et sera utilisée pour les calculs. Ajoutez cette variable à votre code, quelque part en dessous des déclarations de variables existantes :
+  

+ +
var ballRadius = 10;
+ +

Mettez maintenant à jour la ligne qui dessine la balle à l'intérieur de la fonction drawBall() :

+ +
ctx.arc(x, y, ballRadius, 0, Math.PI*2);
+ +

Rebondir en haut et en bas

+ +

Il y a 4 murs en tout mais nous allons d'abord nous pencher sur le mur du haut. Nous devons, à chaque rafraichissement du canvas, regarder si la balle touche le bord du haut. Si c'est le cas, alors nous devons inverser la direction de la balle pour créer un effet de limite de zone de jeu. Il ne faut surtout pas oublier que le point d'origine est en haut à gauche ! Nous pouvons donc écrire :

+ +
if(y + dy < 0) {
+    dy = -dy;
+}
+ +

Si la valeur y de la position de la balle est inférieure à zéro, changez la direction du mouvement sur l'axe y en le rendant égal à son inverse. Si la balle se déplaçait vers le haut à une vitesse de 2 pixels par image, elle se déplacera maintenant "vers le haut" à une vitesse de -2 pixels, ce qui équivaut en fait à se déplacer vers le bas à une vitesse de 2 pixels par image.
+
+ Le code ci-dessus traite du rebondissement de la balle sur le bord supérieur, alors traitons maintenant le bord inférieur :

+ +
if(y + dy > canvas.height) {
+    dy = -dy;
+}
+ +

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 :

+ +
if(y + dy > canvas.height || y + dy < 0) {
+    dy = -dy;
+}
+ +

Si une des deux conditions est vérifiée, alors la vitesse est inversée. Essayez de créer votre propre code pour la gauche et la droite avant de passer à la prochaine sous-partie. Vous verrez que le principe est le même.

+ +

Rebondir à gauche et à droite

+ +

Nous avons couvert les bords supérieur et inférieur, alors pensons à ceux de gauche et de droite. C'est très similaire en fait, il suffit de répéter les instructions pour x au lieu de y :

+ +
if(x + dx > canvas.width || x + dx < 0) {
+    dx = -dx;
+}
+
+if(y + dy > canvas.height || y + dy < 0) {
+    dy = -dy;
+}
+ +

À ce stade, vous devez insérer le bloc de code ci-dessus dans la fonction draw(), juste avant l'accolade de fermeture.

+ +

La balle disparaît toujours!

+ +

Testez votre code à ce stade, et vous serez impressionné — nous avons maintenant une balle qui rebondit sur les quatre bords de la toile ! Mais nous avons un autre problème — lorsque la balle frappe un mur, elle s'y enfonce légèrement avant de changer de direction :

+ +

+ +

C'est parce que nous calculons le point de collision entre le mur et le centre de la balle, alors que nous devrions le faire pour sa circonférence. La balle devrait rebondir juste après avoir touché le mur, et non pas lorsqu'elle est déjà à mi-chemin dans le mur, alors ajustons un peu nos déclarations pour inclure cela. Mettez à jour le dernier code que vous avez ajouté :

+ +
if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) {
+    dx = -dx;
+}
+if(y + dy > canvas.height-ballRadius || y + dy < ballRadius) {
+    dy = -dy;
+}
+ +

Lorsque la distance entre le centre de la balle et le bord du mur est exactement la même que le rayon de la balle, cela change la direction du mouvement. Soustraire le rayon de la largeur d'un bord et l'ajouter à l'autre nous donne l'impression d'une détection de collision correcte — la balle rebondit sur les murs comme elle devrait le faire.

+ +

Comparez votre code

+ +

Vérifions encore une fois le code fini pour cette partie par rapport à ce que vous avez, et jouons une partie :

+ +

{{JSFiddleEmbed("https://jsfiddle.net/end3r/redj37dc/","","395")}}

+ +

Exercice: essayez de changer la couleur de la balle à chaque fois que celle-ci tape un mur.

+ +

Dans le prochain chapitre

+ +

Nous sommes maintenant arrivés au stade où notre balle se déplace et reste sur le plateau de jeu. Dans le quatrième chapitre, nous examinerons la mise en place d'une raquette contrôlable - voir Raquette et contrôle au clavier. {PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Paddle_et_contr%C3%B4le_clavier")}}

diff --git a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.html b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.html deleted file mode 100644 index 7814fecefa..0000000000 --- a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.html +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: Créer les briques -slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Build_the_brick_field -tags: - - Canvas - - Casse-Brique - - Débutant - - JavaScript - - Jeu - - Tutoriel - - graphique -translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Build_the_brick_field -original_slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/Build_the_brick_field ---- -
{{GamesSidebar}}
- -
{{IncludeSubnav("/fr/docs/Games")}}
- -

{{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. Vous pouvez trouver le code source après avoir complété cette leçon à : Gamedev-Canvas-workshop/lesson6.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.

- -

Mettre en place les variables "Brique"

- -

Le principal objectif de cette leçon est d'avoir quelques lignes de code pour afficher les briques, en utilisant une boucle imbriquée qui va parcourir un tableau à deux dimensions. Cependant nous avons besoin de définir quelques variables pour stocker des informations décrivant les briques, telles que leur largeur, leur hauteur, les colonnes et les lignes, etc. Ajoutez les lignes suivantes dans votre code, sous les variables préalablement déclarées.

- -
var brickRowCount = 3;
-var brickColumnCount = 5;
-var brickWidth = 75;
-var brickHeight = 20;
-var brickPadding = 10;
-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.

- -

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 :

- -
var bricks = [];
-for(var c=0; c<brickColumnCount; c++) {
-    bricks[c] = [];
-    for(var r=0; r<brickRowCount; r++) {
-        bricks[c][r] = { x: 0, y: 0 };
-    }
-}
- -

Le code ci-dessus va parcourir les lignes et les colonnes et créer de nouvelles briques. REMARQUE : les objets briques seront également utilisés plus tard afin de détecter les collisions.

- -

Logique de dessin des briques

- -

Maintenant créons une fonction pour parcourir toutes les briques dans le tableau et les dessiner sur l'écran. Notre code pourrait ressembler à ça :

- -
function drawBricks() {
-    for(var c=0; c<brickColumnCount; c++) {
-        for(var r=0; r<brickRowCount; r++) {
-            bricks[c][r].x = 0;
-            bricks[c][r].y = 0;
-            ctx.beginPath();
-            ctx.rect(0, 0, brickWidth, brickHeight);
-            ctx.fillStyle = "#0095DD";
-            ctx.fill();
-            ctx.closePath();
-        }
-    }
-}
- -

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 :

- -
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.

- -

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() :

- -
function drawBricks() {
-    for(var c=0; c<brickColumnCount; c++) {
-        for(var r=0; r<brickRowCount; r++) {
-            var brickX = (c*(brickWidth+brickPadding))+brickOffsetLeft;
-            var brickY = (r*(brickHeight+brickPadding))+brickOffsetTop;
-            bricks[c][r].x = brickX;
-            bricks[c][r].y = brickY;
-            ctx.beginPath();
-            ctx.rect(brickX, brickY, brickWidth, brickHeight);
-            ctx.fillStyle = "#0095DD";
-            ctx.fill();
-            ctx.closePath();
-        }
-    }
-}
- -

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() :

- -
drawBricks();
-
- -

Comparez votre code

- -

À ce stade, le jeu a gagné un peu en intérêt :

- -

{{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.

- -

Prochaines étapes

- -

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 

- -

{{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/build_the_brick_field/index.md b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.md new file mode 100644 index 0000000000..7814fecefa --- /dev/null +++ b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.md @@ -0,0 +1,115 @@ +--- +title: Créer les briques +slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Build_the_brick_field +tags: + - Canvas + - Casse-Brique + - Débutant + - JavaScript + - Jeu + - Tutoriel + - graphique +translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Build_the_brick_field +original_slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/Build_the_brick_field +--- +
{{GamesSidebar}}
+ +
{{IncludeSubnav("/fr/docs/Games")}}
+ +

{{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. Vous pouvez trouver le code source après avoir complété cette leçon à : Gamedev-Canvas-workshop/lesson6.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.

+ +

Mettre en place les variables "Brique"

+ +

Le principal objectif de cette leçon est d'avoir quelques lignes de code pour afficher les briques, en utilisant une boucle imbriquée qui va parcourir un tableau à deux dimensions. Cependant nous avons besoin de définir quelques variables pour stocker des informations décrivant les briques, telles que leur largeur, leur hauteur, les colonnes et les lignes, etc. Ajoutez les lignes suivantes dans votre code, sous les variables préalablement déclarées.

+ +
var brickRowCount = 3;
+var brickColumnCount = 5;
+var brickWidth = 75;
+var brickHeight = 20;
+var brickPadding = 10;
+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.

+ +

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 :

+ +
var bricks = [];
+for(var c=0; c<brickColumnCount; c++) {
+    bricks[c] = [];
+    for(var r=0; r<brickRowCount; r++) {
+        bricks[c][r] = { x: 0, y: 0 };
+    }
+}
+ +

Le code ci-dessus va parcourir les lignes et les colonnes et créer de nouvelles briques. REMARQUE : les objets briques seront également utilisés plus tard afin de détecter les collisions.

+ +

Logique de dessin des briques

+ +

Maintenant créons une fonction pour parcourir toutes les briques dans le tableau et les dessiner sur l'écran. Notre code pourrait ressembler à ça :

+ +
function drawBricks() {
+    for(var c=0; c<brickColumnCount; c++) {
+        for(var r=0; r<brickRowCount; r++) {
+            bricks[c][r].x = 0;
+            bricks[c][r].y = 0;
+            ctx.beginPath();
+            ctx.rect(0, 0, brickWidth, brickHeight);
+            ctx.fillStyle = "#0095DD";
+            ctx.fill();
+            ctx.closePath();
+        }
+    }
+}
+ +

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 :

+ +
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.

+ +

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() :

+ +
function drawBricks() {
+    for(var c=0; c<brickColumnCount; c++) {
+        for(var r=0; r<brickRowCount; r++) {
+            var brickX = (c*(brickWidth+brickPadding))+brickOffsetLeft;
+            var brickY = (r*(brickHeight+brickPadding))+brickOffsetTop;
+            bricks[c][r].x = brickX;
+            bricks[c][r].y = brickY;
+            ctx.beginPath();
+            ctx.rect(brickX, brickY, brickWidth, brickHeight);
+            ctx.fillStyle = "#0095DD";
+            ctx.fill();
+            ctx.closePath();
+        }
+    }
+}
+ +

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() :

+ +
drawBricks();
+
+ +

Comparez votre code

+ +

À ce stade, le jeu a gagné un peu en intérêt :

+ +

{{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.

+ +

Prochaines étapes

+ +

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 

+ +

{{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.html b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.html deleted file mode 100644 index f5f8302b6a..0000000000 --- a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.html +++ /dev/null @@ -1,133 +0,0 @@ ---- -title: Détection de collisions -slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Collision_detection -tags: - - Canvas - - JavaScript - - Jeu - - collision - - detection - - totoriel -translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Collision_detection -original_slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/detection_colisions ---- -
{{GamesSidebar}}
- -
{{IncludeSubnav("/fr/docs/Games")}}
- -

{{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. Vous pouvez trouver le code source tel qu'il devrait être après avoir complété cette leçon à : Gamedev-Canvas-workshop/lesson7.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.

- -

C'est notre décision, bien sûr, de mettre ça en œuvre, mais il peut être difficile de calculer si la balle touche le rectangle ou non, car il n'y a pas de fonction d'aide dans Canvas pour cela. Dans l'intérêt de ce tutoriel, nous le ferons de la manière la plus simple possible. Nous vérifierons si le centre de la balle entre en collision avec l'une des briques données. Cela ne donnera pas toujours un résultat parfait, et il existe des moyens beaucoup plus sophistiqués de détecter des collisions, mais cela fonctionnera assez bien pour vous apprendre les concepts de base.

- -

Une fonction de détection de collision

- -


- Pour commencer, nous voulons créer une fonction de détection de collision qui va parcourir toutes les briques et comparer la position de chaque brique avec les coordonnées de la balle lorsque chaque image est dessinée. Pour une meilleure lisibilité du code, nous allons définir la variable b pour stocker l’objet brique dans la boucle de la détection de collision:

- -
function collisionDetection() {
-    for(var c=0; c<brickColumnCount; c++) {
-        for(var r=0; r<brickRowCount; r++) {
-            var b = bricks[c][r];
-            // calculs
-        }
-    }
-}
- -

Si le centre de la balle se trouve à l'intérieur des coordonnées d'une de nos briques, nous changerons la direction de la balle. Pour que le centre de la balle soit à l'intérieur de la brique, les quatre affirmations suivantes doivent être vraies :

- - - -

Écrivons cela sous forme de code:

- -
function collisionDetection() {
-    for(var c=0; c<brickColumnCount; c++) {
-        for(var r=0; r<brickRowCount; r++) {
-            var b = bricks[c][r];
-            if(x > b.x && x < b.x+brickWidth && y > b.y && y < b.y+brickHeight) {
-                dy = -dy;
-            }
-        }
-    }
-}
- -

Ajoutez le bloc ci-dessus à votre code, sous la fonction keyUpHandler() .

- -

Faire disparaître les briques après qu'elles aient été touchées

- -

Le code ci-dessus fonctionnera comme vous le souhaitez et la balle changera de direction. Le problème est que les briques restent là où elles sont. Nous devons trouver un moyen de nous débarrasser de celles que nous avons déjà touchées avec la balle. Nous pouvons le faire en ajoutant un paramètre supplémentaire pour indiquer si nous voulons ou non afficher chaque brique à l’écran. Dans la partie du code où nous initialisons les briques, ajoutons une propriété status à chaque brique. Mettez à jour la partie suivante du code comme indiqué par la ligne en évidence:

- -
var bricks = [];
-for(var c=0; c<brickColumnCount; c++) {
-    bricks[c] = [];
-    for(var r=0; r<brickRowCount; r++) {
-        bricks[c][r] = { x: 0, y: 0, status: 1 };
-    }
-}
- -

Nous vérifierons ensuite la valeur de la propriété status de chaque brique dans la fonction drawBricks() avant de la dessiner. Si status vaut 1, dessinez-la, mais s'il vaut 0, la balle a été touchée et nous ne voulons pas la voir sur l'écran. Mettez à jour votre fonction drawBricks() comme suit:

- -
function drawBricks() {
-    for(var c=0; c<brickColumnCount; c++) {
-        for(var r=0; r<brickRowCount; r++) {
-            if(bricks[c][r].status == 1) {
-                var brickX = (c*(brickWidth+brickPadding))+brickOffsetLeft;
-                var brickY = (r*(brickHeight+brickPadding))+brickOffsetTop;
-                bricks[c][r].x = brickX;
-                bricks[c][r].y = brickY;
-                ctx.beginPath();
-                ctx.rect(brickX, brickY, brickWidth, brickHeight);
-                ctx.fillStyle = "#0095DD";
-                ctx.fill();
-                ctx.closePath();
-            }
-        }
-    }
-}
- -

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:

- -
function collisionDetection() {
-    for(var c=0; c<brickColumnCount; c++) {
-        for(var r=0; r<brickRowCount; r++) {
-            var b = bricks[c][r];
-            if(b.status == 1) {
-                if(x > b.x && x < b.x+brickWidth && y > b.y && y < b.y+brickHeight) {
-                    dy = -dy;
-                    b.status = 0;
-                }
-            }
-        }
-    }
-}
- -

Activer notre détection de collision

- -

La dernière chose à faire est d’ajouter un appel à la fonction collisionDetection () à notre fonction draw() principale. Ajoutez la ligne suivante à la fonction draw (), juste en dessous de l'appel drawPaddle():

- -
collisionDetection();
-
- -

Comparez votre code

- -

La détection de collision de la balle est maintenant vérifiée sur chaque image, avec chaque brique. Maintenant, nous pouvons détruire des briques ! : -

- -

{{JSFiddleEmbed("https://jsfiddle.net/yumetodo/mkwtxgc3/242/","","395")}}

- -

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.

- -

{{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/collision_detection/index.md b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.md new file mode 100644 index 0000000000..f5f8302b6a --- /dev/null +++ b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.md @@ -0,0 +1,133 @@ +--- +title: Détection de collisions +slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Collision_detection +tags: + - Canvas + - JavaScript + - Jeu + - collision + - detection + - totoriel +translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Collision_detection +original_slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/detection_colisions +--- +
{{GamesSidebar}}
+ +
{{IncludeSubnav("/fr/docs/Games")}}
+ +

{{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. Vous pouvez trouver le code source tel qu'il devrait être après avoir complété cette leçon à : Gamedev-Canvas-workshop/lesson7.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.

+ +

C'est notre décision, bien sûr, de mettre ça en œuvre, mais il peut être difficile de calculer si la balle touche le rectangle ou non, car il n'y a pas de fonction d'aide dans Canvas pour cela. Dans l'intérêt de ce tutoriel, nous le ferons de la manière la plus simple possible. Nous vérifierons si le centre de la balle entre en collision avec l'une des briques données. Cela ne donnera pas toujours un résultat parfait, et il existe des moyens beaucoup plus sophistiqués de détecter des collisions, mais cela fonctionnera assez bien pour vous apprendre les concepts de base.

+ +

Une fonction de détection de collision

+ +


+ Pour commencer, nous voulons créer une fonction de détection de collision qui va parcourir toutes les briques et comparer la position de chaque brique avec les coordonnées de la balle lorsque chaque image est dessinée. Pour une meilleure lisibilité du code, nous allons définir la variable b pour stocker l’objet brique dans la boucle de la détection de collision:

+ +
function collisionDetection() {
+    for(var c=0; c<brickColumnCount; c++) {
+        for(var r=0; r<brickRowCount; r++) {
+            var b = bricks[c][r];
+            // calculs
+        }
+    }
+}
+ +

Si le centre de la balle se trouve à l'intérieur des coordonnées d'une de nos briques, nous changerons la direction de la balle. Pour que le centre de la balle soit à l'intérieur de la brique, les quatre affirmations suivantes doivent être vraies :

+ + + +

Écrivons cela sous forme de code:

+ +
function collisionDetection() {
+    for(var c=0; c<brickColumnCount; c++) {
+        for(var r=0; r<brickRowCount; r++) {
+            var b = bricks[c][r];
+            if(x > b.x && x < b.x+brickWidth && y > b.y && y < b.y+brickHeight) {
+                dy = -dy;
+            }
+        }
+    }
+}
+ +

Ajoutez le bloc ci-dessus à votre code, sous la fonction keyUpHandler() .

+ +

Faire disparaître les briques après qu'elles aient été touchées

+ +

Le code ci-dessus fonctionnera comme vous le souhaitez et la balle changera de direction. Le problème est que les briques restent là où elles sont. Nous devons trouver un moyen de nous débarrasser de celles que nous avons déjà touchées avec la balle. Nous pouvons le faire en ajoutant un paramètre supplémentaire pour indiquer si nous voulons ou non afficher chaque brique à l’écran. Dans la partie du code où nous initialisons les briques, ajoutons une propriété status à chaque brique. Mettez à jour la partie suivante du code comme indiqué par la ligne en évidence:

+ +
var bricks = [];
+for(var c=0; c<brickColumnCount; c++) {
+    bricks[c] = [];
+    for(var r=0; r<brickRowCount; r++) {
+        bricks[c][r] = { x: 0, y: 0, status: 1 };
+    }
+}
+ +

Nous vérifierons ensuite la valeur de la propriété status de chaque brique dans la fonction drawBricks() avant de la dessiner. Si status vaut 1, dessinez-la, mais s'il vaut 0, la balle a été touchée et nous ne voulons pas la voir sur l'écran. Mettez à jour votre fonction drawBricks() comme suit:

+ +
function drawBricks() {
+    for(var c=0; c<brickColumnCount; c++) {
+        for(var r=0; r<brickRowCount; r++) {
+            if(bricks[c][r].status == 1) {
+                var brickX = (c*(brickWidth+brickPadding))+brickOffsetLeft;
+                var brickY = (r*(brickHeight+brickPadding))+brickOffsetTop;
+                bricks[c][r].x = brickX;
+                bricks[c][r].y = brickY;
+                ctx.beginPath();
+                ctx.rect(brickX, brickY, brickWidth, brickHeight);
+                ctx.fillStyle = "#0095DD";
+                ctx.fill();
+                ctx.closePath();
+            }
+        }
+    }
+}
+ +

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:

+ +
function collisionDetection() {
+    for(var c=0; c<brickColumnCount; c++) {
+        for(var r=0; r<brickRowCount; r++) {
+            var b = bricks[c][r];
+            if(b.status == 1) {
+                if(x > b.x && x < b.x+brickWidth && y > b.y && y < b.y+brickHeight) {
+                    dy = -dy;
+                    b.status = 0;
+                }
+            }
+        }
+    }
+}
+ +

Activer notre détection de collision

+ +

La dernière chose à faire est d’ajouter un appel à la fonction collisionDetection () à notre fonction draw() principale. Ajoutez la ligne suivante à la fonction draw (), juste en dessous de l'appel drawPaddle():

+ +
collisionDetection();
+
+ +

Comparez votre code

+ +

La détection de collision de la balle est maintenant vérifiée sur chaque image, avec chaque brique. Maintenant, nous pouvons détruire des briques ! : -

+ +

{{JSFiddleEmbed("https://jsfiddle.net/yumetodo/mkwtxgc3/242/","","395")}}

+ +

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.

+ +

{{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.html b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.html deleted file mode 100644 index ff39e2bf9d..0000000000 --- a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.html +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: Créer l'élément Canvas et l'afficher -slug: >- - Games/Tutorials/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it -tags: - - 2D - - Canvas - - Débutant - - HTML - - JavaScript - - Jeux - - Tutoriel -translation_of: >- - Games/Tutorials/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it -original_slug: >- - Games/Workflows/2D_Breakout_game_pure_JavaScript/creer_element_canvas_et_afficher ---- -
{{GamesSidebar}}
- -
{{IncludeSubnav("/fr/docs/Jeux")}}
- -

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball")}}

- -

C'est la 1re étape sur 10 de ce tutoriel Gamedev Canvas. Vous pouvez retrouver le code source de cette leçon sur Gamedev-Canvas-workshop/lesson1.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")}}.

- -

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 :

- -
<!DOCTYPE html>
-<html>
-<head>
-    <meta charset="utf-8" />
-    <title>Gamedev Canvas Workshop</title>
-    <style>
-    	* { padding: 0; margin: 0; }
-    	canvas { background: #eee; display: block; margin: 0 auto; }
-    </style>
-</head>
-<body>
-
-<canvas id="myCanvas" width="480" height="320"></canvas>
-
-<script>
-	// JavaScript code goes here
-</script>
-
-</body>
-</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>.

- -

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>.

- -
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.

- -

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.

- -
ctx.beginPath();
-ctx.rect(20, 40, 50, 50);
-ctx.fillStyle = "#FF0000";
-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.

- -

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 :

- -
ctx.beginPath();
-ctx.arc(240, 160, 20, 0, Math.PI*2, false);
-ctx.fillStyle = "green";
-ctx.fill();
-ctx.closePath();
- -

Comme nous pouvons le voir, nous utilisons à nouveau les méthodes {{domxref("CanvasRenderingContext2D.beginPath()","beginPath()")}} et {{domxref("CanvasRenderingContext2D.closePath()","closePath()")}} . Entre elles, la partie la plus importante du code ci-dessus est la méthode {{domxref("CanvasRenderingContext2D.arc()","arc()")}} . Elle comporte six paramètres :

- - - -

La propriété {{domxref("CanvasRenderingContext2D.fillStyle","fillStyle")}} semble différente par rapport à l'exemple précédent. C'est parce que, tout comme avec CSS, la couleur peut être spécifiée sous la forme d'une valeur hexadécimale, d'un mot-clé, de la fonction rgba () (RVBA) ou de toute autre méthode disponible pour les couleurs.

- -

Au lieu d'utiliser {{domxref("CanvasRenderingContext2D.fillStyle","fillStyle")}} et de remplir les formes avec des couleurs, nous pouvons utiliser {{domxref("CanvasRenderingContext2D.stroke()","stroke()")}} pour ne colorer que le contour exterieur. Essayez d'ajouter ce code à votre JavaScript aussi :

- -
ctx.beginPath();
-ctx.rect(160, 10, 100, 40);
-ctx.strokeStyle = "rgba(0, 0, 255, 0.5)";
-ctx.stroke();
-ctx.closePath();
- -

Le code ci-dessus affiche un rectangle vide avec des traits bleus. Grâce au canal alpha de la fonction rgba (), la couleur bleue est semi transparente.

- -

Comparez votre code

- -

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.

- -

Prochaines étapes

- -

Maintenant, nous avons mis en place le code HTML de base et avons appris un peu sur Canvas, passons au deuxième chapitre et étudions comment Déplacer une balle sur notre jeu.

- -

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball")}}

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 new file mode 100644 index 0000000000..ff39e2bf9d --- /dev/null +++ b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.md @@ -0,0 +1,115 @@ +--- +title: Créer l'élément Canvas et l'afficher +slug: >- + Games/Tutorials/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it +tags: + - 2D + - Canvas + - Débutant + - HTML + - JavaScript + - Jeux + - Tutoriel +translation_of: >- + Games/Tutorials/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it +original_slug: >- + Games/Workflows/2D_Breakout_game_pure_JavaScript/creer_element_canvas_et_afficher +--- +
{{GamesSidebar}}
+ +
{{IncludeSubnav("/fr/docs/Jeux")}}
+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball")}}

+ +

C'est la 1re étape sur 10 de ce tutoriel Gamedev Canvas. Vous pouvez retrouver le code source de cette leçon sur Gamedev-Canvas-workshop/lesson1.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")}}.

+ +

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 :

+ +
<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <title>Gamedev Canvas Workshop</title>
+    <style>
+    	* { padding: 0; margin: 0; }
+    	canvas { background: #eee; display: block; margin: 0 auto; }
+    </style>
+</head>
+<body>
+
+<canvas id="myCanvas" width="480" height="320"></canvas>
+
+<script>
+	// JavaScript code goes here
+</script>
+
+</body>
+</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>.

+ +

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>.

+ +
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.

+ +

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.

+ +
ctx.beginPath();
+ctx.rect(20, 40, 50, 50);
+ctx.fillStyle = "#FF0000";
+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.

+ +

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 :

+ +
ctx.beginPath();
+ctx.arc(240, 160, 20, 0, Math.PI*2, false);
+ctx.fillStyle = "green";
+ctx.fill();
+ctx.closePath();
+ +

Comme nous pouvons le voir, nous utilisons à nouveau les méthodes {{domxref("CanvasRenderingContext2D.beginPath()","beginPath()")}} et {{domxref("CanvasRenderingContext2D.closePath()","closePath()")}} . Entre elles, la partie la plus importante du code ci-dessus est la méthode {{domxref("CanvasRenderingContext2D.arc()","arc()")}} . Elle comporte six paramètres :

+ + + +

La propriété {{domxref("CanvasRenderingContext2D.fillStyle","fillStyle")}} semble différente par rapport à l'exemple précédent. C'est parce que, tout comme avec CSS, la couleur peut être spécifiée sous la forme d'une valeur hexadécimale, d'un mot-clé, de la fonction rgba () (RVBA) ou de toute autre méthode disponible pour les couleurs.

+ +

Au lieu d'utiliser {{domxref("CanvasRenderingContext2D.fillStyle","fillStyle")}} et de remplir les formes avec des couleurs, nous pouvons utiliser {{domxref("CanvasRenderingContext2D.stroke()","stroke()")}} pour ne colorer que le contour exterieur. Essayez d'ajouter ce code à votre JavaScript aussi :

+ +
ctx.beginPath();
+ctx.rect(160, 10, 100, 40);
+ctx.strokeStyle = "rgba(0, 0, 255, 0.5)";
+ctx.stroke();
+ctx.closePath();
+ +

Le code ci-dessus affiche un rectangle vide avec des traits bleus. Grâce au canal alpha de la fonction rgba (), la couleur bleue est semi transparente.

+ +

Comparez votre code

+ +

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.

+ +

Prochaines étapes

+ +

Maintenant, nous avons mis en place le code HTML de base et avons appris un peu sur Canvas, passons au deuxième chapitre et étudions comment Déplacer une balle sur notre jeu.

+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball")}}

diff --git a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.html b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.html deleted file mode 100644 index db9da728f2..0000000000 --- a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.html +++ /dev/null @@ -1,107 +0,0 @@ ---- -title: Finitions -slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Finishing_up -tags: - - Canevas - - Débutant - - JavaScript - - Jeux - - Tutoriel - - requestAnimationFrame - - vies -translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Finishing_up -original_slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/finitions ---- -
{{GamesSidebar}}
- -
{{IncludeSubnav("/fr/docs/Games")}}
- -

{{Previous("Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls")}}

- -

C'est la dernière étape de ce tutoriel Gamedev Canvas. Vous pouvez trouver le code source tel qu'il devrait être après avoir terminé cette leçon à l'adresse Gamedev-Canvas-workshop/lesson10.html.

- -

Il y a toujours des améliorations possibles pour tous les jeux que nous créons. Par exemple, nous pouvons offrir plus d'une vie au joueur. Il peut faire une ou deux erreurs et être encore capable de terminer le jeu. Nous pourrions également améliorer le rendu visuel du jeu.

- -

Donner des vies au joueur

- -

Mettre en œuvre des vies est assez simple. Ajoutons d'abord une variable pour stocker le nombre de vies à l'endroit où nous avons déclaré nos autres variables :

- -
var lives = 3;
- -

L'affichage du compteur de vie est similaire à celui du compteur de points — ajoutez la fonction suivante à votre code, sous la fonction drawScore() :

- -
function drawLives() {
-    ctx.font = "16px Arial";
-    ctx.fillStyle = "#0095DD";
-    ctx.fillText("Lives: "+lives, canvas.width-65, 20);
-}
- -

Au lieu de mettre immédiatement fin au jeu, nous allons réduire le nombre de vies jusqu'à ce qu'il n'y en ait plus. Nous pouvons également réinitialiser les positions du ballon et de la raquette lorsque le joueur commence sa prochaine vie. Ainsi, dans la fonction draw(), remplacez les trois lignes suivantes :

- -
alert("GAME OVER");
-document.location.reload();
-clearInterval(interval); // Needed for Chrome to end game
- - - -

Nous pouvons ainsi y ajouter une logique un peu plus complexe, comme indiqué ci-dessous :

- -
lives--;
-if(!lives) {
-    alert("GAME OVER");
-    document.location.reload();
-    clearInterval(interval); // Needed for Chrome to end game
-}
-else {
-    x = canvas.width/2;
-    y = canvas.height-30;
-    dx = 2;
-    dy = -2;
-    paddleX = (canvas.width-paddleWidth)/2;
-}
- -

Maintenant, quand la balle frappe le bord inférieur de l'écran, nous soustrayons une vie de la variable lives. S'il n'y a plus de vies, la partie est perdue ; s'il reste encore des vies, alors la position de la balle et la raquette sont remises à zéro, ainsi que le mouvement de la balle.

- -

Afficher le compteur de vies

- -

Maintenant, vous devez ajouter un appel à drawLives() dans la fonction draw() et l'ajouter sous l'appel drawScore().

- -
drawLives();
-
- -

Améliorer le rendu avec requestAnimationFrame()

- -

Maintenant, travaillons sur quelque chose qui n'est pas lié à la mécanique du jeu, mais à la façon dont il est rendu. {{domxref("window.requestAnimationFrame", "requestAnimationFrame")}} aide le navigateur à rendre le jeu mieux que la cadence fixe que nous avons actuellement mise en place en utilisant {{domxref("windowTimers.setInterval()", "setInterval()")}}. Remplacez la ligne suivante :

- -
var interval = setInterval(draw, 10);
- -

avec simplement :

- -
draw();
- -

et supprimez chaque occurence de :

- -
clearInterval(interval); // Needed for Chrome to end game
-
- -

Ensuite, tout en bas de la fonction draw() (juste avant l'accolade de fermeture), ajoutez la ligne suivante, ce qui fait que la fonction draw() s'appelle encore et encore :

- -
requestAnimationFrame(draw);
- -

La fonction draw() est maintenant exécutée indéfiniment dans une boucle requestAnimationFrame(), mais au lieu de la cadence fixe de 10 millisecondes, nous redonnons le contrôle de la cadence au navigateur. Il synchronisera la cadence en conséquence et ne n'acutalisera l'affichage que lorsque cela sera nécessaire. Cela permet d'obtenir une boucle d'animation plus efficace et plus fluide que l'ancienne méthode setInterval().

- -

Comparez votre code your code

- -

C'est tout — la version finale du jeu est prête et prête à être lancée !

- -

{{JSFiddleEmbed("https://jsfiddle.net/raymondjplante/dfh2tpu1/","","395")}}

- -

Exercice: changer le nombre de vies et l'angle de rebond de la balle sur la raquette.

- -

Game over - pour l'instant !

- -

Vous avez terminé toutes les leçons - félicitations ! À ce stade, vous devriez maintenant connaître les bases de la manipulation des Canevas et la logique des jeux simples en 2D. C'est maintenant le bon moment pour apprendre quelques frameworks et continuer le développement du jeu. Vous pouvez découvrir le pendant de cette série, le casse-brique 2D utilisant Phaser ou le tutoriel Cyber Orb construit avec Phaser. Vous pouvez également consulter la section Jeux sur MDN pour vous inspirer et approfondir vos connaissances.

- -

Vous pouvez également revenir à la page d'accueil de cette série de tutoriels. Amusez-vous bien à coder !

- -

{{Previous("Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls")}}

diff --git a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.md b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.md new file mode 100644 index 0000000000..db9da728f2 --- /dev/null +++ b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.md @@ -0,0 +1,107 @@ +--- +title: Finitions +slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Finishing_up +tags: + - Canevas + - Débutant + - JavaScript + - Jeux + - Tutoriel + - requestAnimationFrame + - vies +translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Finishing_up +original_slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/finitions +--- +
{{GamesSidebar}}
+ +
{{IncludeSubnav("/fr/docs/Games")}}
+ +

{{Previous("Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls")}}

+ +

C'est la dernière étape de ce tutoriel Gamedev Canvas. Vous pouvez trouver le code source tel qu'il devrait être après avoir terminé cette leçon à l'adresse Gamedev-Canvas-workshop/lesson10.html.

+ +

Il y a toujours des améliorations possibles pour tous les jeux que nous créons. Par exemple, nous pouvons offrir plus d'une vie au joueur. Il peut faire une ou deux erreurs et être encore capable de terminer le jeu. Nous pourrions également améliorer le rendu visuel du jeu.

+ +

Donner des vies au joueur

+ +

Mettre en œuvre des vies est assez simple. Ajoutons d'abord une variable pour stocker le nombre de vies à l'endroit où nous avons déclaré nos autres variables :

+ +
var lives = 3;
+ +

L'affichage du compteur de vie est similaire à celui du compteur de points — ajoutez la fonction suivante à votre code, sous la fonction drawScore() :

+ +
function drawLives() {
+    ctx.font = "16px Arial";
+    ctx.fillStyle = "#0095DD";
+    ctx.fillText("Lives: "+lives, canvas.width-65, 20);
+}
+ +

Au lieu de mettre immédiatement fin au jeu, nous allons réduire le nombre de vies jusqu'à ce qu'il n'y en ait plus. Nous pouvons également réinitialiser les positions du ballon et de la raquette lorsque le joueur commence sa prochaine vie. Ainsi, dans la fonction draw(), remplacez les trois lignes suivantes :

+ +
alert("GAME OVER");
+document.location.reload();
+clearInterval(interval); // Needed for Chrome to end game
+ + + +

Nous pouvons ainsi y ajouter une logique un peu plus complexe, comme indiqué ci-dessous :

+ +
lives--;
+if(!lives) {
+    alert("GAME OVER");
+    document.location.reload();
+    clearInterval(interval); // Needed for Chrome to end game
+}
+else {
+    x = canvas.width/2;
+    y = canvas.height-30;
+    dx = 2;
+    dy = -2;
+    paddleX = (canvas.width-paddleWidth)/2;
+}
+ +

Maintenant, quand la balle frappe le bord inférieur de l'écran, nous soustrayons une vie de la variable lives. S'il n'y a plus de vies, la partie est perdue ; s'il reste encore des vies, alors la position de la balle et la raquette sont remises à zéro, ainsi que le mouvement de la balle.

+ +

Afficher le compteur de vies

+ +

Maintenant, vous devez ajouter un appel à drawLives() dans la fonction draw() et l'ajouter sous l'appel drawScore().

+ +
drawLives();
+
+ +

Améliorer le rendu avec requestAnimationFrame()

+ +

Maintenant, travaillons sur quelque chose qui n'est pas lié à la mécanique du jeu, mais à la façon dont il est rendu. {{domxref("window.requestAnimationFrame", "requestAnimationFrame")}} aide le navigateur à rendre le jeu mieux que la cadence fixe que nous avons actuellement mise en place en utilisant {{domxref("windowTimers.setInterval()", "setInterval()")}}. Remplacez la ligne suivante :

+ +
var interval = setInterval(draw, 10);
+ +

avec simplement :

+ +
draw();
+ +

et supprimez chaque occurence de :

+ +
clearInterval(interval); // Needed for Chrome to end game
+
+ +

Ensuite, tout en bas de la fonction draw() (juste avant l'accolade de fermeture), ajoutez la ligne suivante, ce qui fait que la fonction draw() s'appelle encore et encore :

+ +
requestAnimationFrame(draw);
+ +

La fonction draw() est maintenant exécutée indéfiniment dans une boucle requestAnimationFrame(), mais au lieu de la cadence fixe de 10 millisecondes, nous redonnons le contrôle de la cadence au navigateur. Il synchronisera la cadence en conséquence et ne n'acutalisera l'affichage que lorsque cela sera nécessaire. Cela permet d'obtenir une boucle d'animation plus efficace et plus fluide que l'ancienne méthode setInterval().

+ +

Comparez votre code your code

+ +

C'est tout — la version finale du jeu est prête et prête à être lancée !

+ +

{{JSFiddleEmbed("https://jsfiddle.net/raymondjplante/dfh2tpu1/","","395")}}

+ +

Exercice: changer le nombre de vies et l'angle de rebond de la balle sur la raquette.

+ +

Game over - pour l'instant !

+ +

Vous avez terminé toutes les leçons - félicitations ! À ce stade, vous devriez maintenant connaître les bases de la manipulation des Canevas et la logique des jeux simples en 2D. C'est maintenant le bon moment pour apprendre quelques frameworks et continuer le développement du jeu. Vous pouvez découvrir le pendant de cette série, le casse-brique 2D utilisant Phaser ou le tutoriel Cyber Orb construit avec Phaser. Vous pouvez également consulter la section Jeux sur MDN pour vous inspirer et approfondir vos connaissances.

+ +

Vous pouvez également revenir à la page d'accueil de cette série de tutoriels. Amusez-vous bien à coder !

+ +

{{Previous("Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls")}}

diff --git a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/game_over/index.html b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/game_over/index.html deleted file mode 100644 index 44cf0953f4..0000000000 --- a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/game_over/index.html +++ /dev/null @@ -1,94 +0,0 @@ ---- -title: Fin de partie -slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Game_over -tags: - - Canvas - - Débutant - - Fin de partie - - JavaScript - - Jeux - - Tutoriel - - game over -translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Game_over -original_slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/Game_over ---- -
{{GamesSidebar}}
- -
{{IncludeSubnav("/fr/docs/Games")}}
- -

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Paddle_et_contr%C3%B4le_clavier", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Build_the_brick_field")}}

- -

Voici la 5ème étape sur 10 du Gamedev Canvas tutorial. Vous pouvez trouver le code source comme il devrait être après avoir terminé cette leçon sur Gamedev-Canvas-workshop/lesson5.html.

- -

C'est sympa de regarder la balle rebondir contre les murs et de pouvoir bouger la raquette, mais à part ça, le jeu ne fait rien, il n'y a pas de progression ni de but final. Il serait bien, du point de vue du gameplay, de pouvoir perdre. La façon de perdre dans le casse briques est simple. Si vous loupez la balle avec le paddle et la laissez atteindre le bas de l'écran, la partie est terminée.

- -

Intégrer une fin de partie

- -

Essayons d'intégrer une fin de partie dans le jeu . Voyons une partie du code de la troisième leçon, où nous faisions rebondir la balle contre les murs :

- -
if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) {
-    dx = -dx;
-}
-
-if(y + dy > canvas.height-ballRadius || y + dy < ballRadius) {
-    dy = -dy;
-}
- -

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.

- -

Tout d'abord remplacer l'appel initial à setInterval()

- -
setInterval(draw, 10);
-
- -

par 

- -
var interval = setInterval(draw, 10);
-
- - - -

Puis remplacez la seconde instruction if par le code suivant:

- -
if(y + dy < ballRadius) {
-    dy = -dy;
-} else if(y + dy > canvas.height-ballRadius) {
-    alert("GAME OVER");
-    document.location.reload();
-    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 :

- -
if(y + dy < ballRadius) {
-    dy = -dy;
-} else if(y + dy > canvas.height-ballRadius) {
-    if(x > paddleX && x < paddleX + paddleWidth) {
-        dy = -dy;
-    }
-    else {
-        alert("GAME OVER");
-        document.location.reload();
-        clearInterval(interval);
-    }
-}
- -

Si la balle entre en collision avec le mur du bas, nous devons vérifier si elle touche la raquette. Si c'est le cas, la balle rebondit et revient dans la zone de jeu. Sinon, le jeu est terminé comme avant.

- -

Comparez votre code

- -

Voici le code fonctionnel avec lesquel vous pouvez comparer le vôtre :

- -

{{JSFiddleEmbed("https://jsfiddle.net/end3r/z4zy79fo/","","395")}}

- -

Exercice: Faites en sorte que la balle accélère quand elle touche la raquette.

- -

Prochaine étape

- -

Nous avons déja bien avancé et notre jeu est devenu plus intéressant depuis que vous pouvez perdre ! Mais il manque encore quelque chose. Rendons-nous au sixième chapitre — Créer le champs de briques — et créons quelques briques que la balle pourra détruire.

- -

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Paddle_et_contr%C3%B4le_clavier", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Build_the_brick_field")}}

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 new file mode 100644 index 0000000000..44cf0953f4 --- /dev/null +++ b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/game_over/index.md @@ -0,0 +1,94 @@ +--- +title: Fin de partie +slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Game_over +tags: + - Canvas + - Débutant + - Fin de partie + - JavaScript + - Jeux + - Tutoriel + - game over +translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Game_over +original_slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/Game_over +--- +
{{GamesSidebar}}
+ +
{{IncludeSubnav("/fr/docs/Games")}}
+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Paddle_et_contr%C3%B4le_clavier", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Build_the_brick_field")}}

+ +

Voici la 5ème étape sur 10 du Gamedev Canvas tutorial. Vous pouvez trouver le code source comme il devrait être après avoir terminé cette leçon sur Gamedev-Canvas-workshop/lesson5.html.

+ +

C'est sympa de regarder la balle rebondir contre les murs et de pouvoir bouger la raquette, mais à part ça, le jeu ne fait rien, il n'y a pas de progression ni de but final. Il serait bien, du point de vue du gameplay, de pouvoir perdre. La façon de perdre dans le casse briques est simple. Si vous loupez la balle avec le paddle et la laissez atteindre le bas de l'écran, la partie est terminée.

+ +

Intégrer une fin de partie

+ +

Essayons d'intégrer une fin de partie dans le jeu . Voyons une partie du code de la troisième leçon, où nous faisions rebondir la balle contre les murs :

+ +
if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) {
+    dx = -dx;
+}
+
+if(y + dy > canvas.height-ballRadius || y + dy < ballRadius) {
+    dy = -dy;
+}
+ +

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.

+ +

Tout d'abord remplacer l'appel initial à setInterval()

+ +
setInterval(draw, 10);
+
+ +

par 

+ +
var interval = setInterval(draw, 10);
+
+ + + +

Puis remplacez la seconde instruction if par le code suivant:

+ +
if(y + dy < ballRadius) {
+    dy = -dy;
+} else if(y + dy > canvas.height-ballRadius) {
+    alert("GAME OVER");
+    document.location.reload();
+    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 :

+ +
if(y + dy < ballRadius) {
+    dy = -dy;
+} else if(y + dy > canvas.height-ballRadius) {
+    if(x > paddleX && x < paddleX + paddleWidth) {
+        dy = -dy;
+    }
+    else {
+        alert("GAME OVER");
+        document.location.reload();
+        clearInterval(interval);
+    }
+}
+ +

Si la balle entre en collision avec le mur du bas, nous devons vérifier si elle touche la raquette. Si c'est le cas, la balle rebondit et revient dans la zone de jeu. Sinon, le jeu est terminé comme avant.

+ +

Comparez votre code

+ +

Voici le code fonctionnel avec lesquel vous pouvez comparer le vôtre :

+ +

{{JSFiddleEmbed("https://jsfiddle.net/end3r/z4zy79fo/","","395")}}

+ +

Exercice: Faites en sorte que la balle accélère quand elle touche la raquette.

+ +

Prochaine étape

+ +

Nous avons déja bien avancé et notre jeu est devenu plus intéressant depuis que vous pouvez perdre ! Mais il manque encore quelque chose. Rendons-nous au sixième chapitre — Créer le champs de briques — et créons quelques briques que la balle pourra détruire.

+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Paddle_et_contr%C3%B4le_clavier", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Build_the_brick_field")}}

diff --git a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/index.html b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/index.html deleted file mode 100644 index cc9fed3143..0000000000 --- a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: Jeu de casse-briques 2D en pur JavaScript -slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript -tags: - - 2D - - Canvas - - Débutant - - JavaScript - - Jeux - - Tutoriel -translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript -original_slug: Games/Workflows/2D_Breakout_game_pure_JavaScript ---- -
{{GamesSidebar}}
- -
{{IncludeSubnav("/fr/docs/Jeux")}}
- -

{{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")}}.

- -

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. À la fin de ce tutoriel, vous serez capable de créer vos propres jeux Web.

- -

- -

Détail de la leçon

- -

Toutes les leçons — et les différentes versions de ce jeu de casse-brique MDN que nous allons créer ensemble — sont disponibles sur GitHub :

- -
    -
  1. Créer l'élément canvas et dessiner dessus
    2. -
  2. Déplacer la balle
    3. -
  3. Rebondir sur les murs
    4. -
  4. Contrôles clavier
    5. -
  5. Jeu terminé
    6. -
  6. Construire le mur de briques
    7. -
  7. Détection des collisions
    8. -
  8. Afficher le score et gagner
    9. -
  9. Contrôles souris
    10. -
  10. Finir
    11. -
- -

Commencer avec du Javascript pur et dur est le meilleur moyen d'acquérir des connaissances de développement de jeu web. Après ceci, vous pourrez prendre n'importe quel "framework" et l'utiliser pour vos projets. Les "frameworks" sont des outils créés avec le langage Javascript ; donc, même si vous voulez travailler avec ces derniers, c'est toujours bon d'apprendre le langage lui-même pour savoir ce qu'il se passe exactement. Les "frameworks" améliorent la vitesse de développement et aident à traiter les parties les moins intéressantes du jeu, mais si quelque chose ne fonctionne pas comme prévu, vous pouvez toujours essayer de déboguer ou juste écrire vos propre solutions en Javascript. 

- -
-

Note : Si vous êtes intéressé par l'apprentissage du développement un jeu web 2D avec un "framework", consultez la série Jeu de casse-tête 2D 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 le Gamedev Canvas Content Kit basé sur ce tutoriel si vous voulez faire une présentation sur le développement de jeux en général .

-
- -

Prochaines étapes

- -

Ok, c'est parti ! 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/index.md b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/index.md new file mode 100644 index 0000000000..cc9fed3143 --- /dev/null +++ b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/index.md @@ -0,0 +1,59 @@ +--- +title: Jeu de casse-briques 2D en pur JavaScript +slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript +tags: + - 2D + - Canvas + - Débutant + - JavaScript + - Jeux + - Tutoriel +translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript +original_slug: Games/Workflows/2D_Breakout_game_pure_JavaScript +--- +
{{GamesSidebar}}
+ +
{{IncludeSubnav("/fr/docs/Jeux")}}
+ +

{{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")}}.

+ +

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. À la fin de ce tutoriel, vous serez capable de créer vos propres jeux Web.

+ +

+ +

Détail de la leçon

+ +

Toutes les leçons — et les différentes versions de ce jeu de casse-brique MDN que nous allons créer ensemble — sont disponibles sur GitHub :

+ +
    +
  1. Créer l'élément canvas et dessiner dessus
    2. +
  2. Déplacer la balle
    3. +
  3. Rebondir sur les murs
    4. +
  4. Contrôles clavier
    5. +
  5. Jeu terminé
    6. +
  6. Construire le mur de briques
    7. +
  7. Détection des collisions
    8. +
  8. Afficher le score et gagner
    9. +
  9. Contrôles souris
    10. +
  10. Finir
    11. +
+ +

Commencer avec du Javascript pur et dur est le meilleur moyen d'acquérir des connaissances de développement de jeu web. Après ceci, vous pourrez prendre n'importe quel "framework" et l'utiliser pour vos projets. Les "frameworks" sont des outils créés avec le langage Javascript ; donc, même si vous voulez travailler avec ces derniers, c'est toujours bon d'apprendre le langage lui-même pour savoir ce qu'il se passe exactement. Les "frameworks" améliorent la vitesse de développement et aident à traiter les parties les moins intéressantes du jeu, mais si quelque chose ne fonctionne pas comme prévu, vous pouvez toujours essayer de déboguer ou juste écrire vos propre solutions en Javascript. 

+ +
+

Note : Si vous êtes intéressé par l'apprentissage du développement un jeu web 2D avec un "framework", consultez la série Jeu de casse-tête 2D 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 le Gamedev Canvas Content Kit basé sur ce tutoriel si vous voulez faire une présentation sur le développement de jeux en général .

+
+ +

Prochaines étapes

+ +

Ok, c'est parti ! 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/mouse_controls/index.html b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.html deleted file mode 100644 index 9220f1a557..0000000000 --- a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: Contrôle à la souris -slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Mouse_controls -tags: - - Canevas - - Contrôles - - Débutant - - JavaScript - - Jeux - - Souris - - Tutoriel -translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Mouse_controls -original_slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls ---- -
{{GamesSidebar}}
- -
{{IncludeSubnav("/fr/docs/Games")}}
- -

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win", "Games/Workflows/2D_Breakout_game_pure_JavaScript/finitions")}}

- -

C'est la 9e étape sur 10 de ce tutoriel Gamedev Canvas. Vous pouvez trouver le code source tel qu'il devrait être après avoir terminé cette leçon à l'adresse Gamedev-Canvas-workshop/lesson9.html.

- -

Le jeu lui-même est en fait terminé, alors travaillons à le peaufiner. Nous avons déjà ajouté des commandes au clavier, mais nous pourrions facilement ajouter des commandes à la souris.

- -

Détecter les mouvements de la souris

- -

Il est encore plus facile de détecter les mouvements de la souris que les pressions sur les touches : il suffit d'écouter l'évènement {{event("mousemove")}}. Ajouter la ligne suivante au même endroit que les autres écouteurs d'événement, juste en dessous de l'évènement keyup :

- -
document.addEventListener("mousemove", mouseMoveHandler, false);
- -

Lier le mouvement de la raquette au mouvement de la souris

- -

Nous pouvons mettre à jour la position de la raquette en fonction des coordonnées du pointeur — c'est exactement ce que fera la fonction de manipulation suivante. Ajoutez la fonction ci-dessous à votre code, sous la dernière ligne que vous avez ajoutée :

- -
function mouseMoveHandler(e) {
-    var relativeX = e.clientX - canvas.offsetLeft;
-    if(relativeX > 0 && relativeX < canvas.width) {
-        paddleX = relativeX - paddleWidth/2;
-    }
-}
- -

Dans cette fonction, nous calculons d'abord une valeur relativeX, qui est égale à la position horizontale de la souris dans la fenêtre de visualisation (e.clientX) moins la distance entre le bord gauche de la toile et le bord gauche de la fenêtre de visualisation (canvas.offsetLeft) — en fait, cette valeur est égale à la distance entre le bord gauche du canevas et le pointeur de la souris. Si la position relative du pointeur X est supérieure à zéro et inférieure à la largeur du canevas, le pointeur se trouve dans les limites du canevas, et la position paddleX (ancrée sur le bord gauche de la palette) est fixée à la valeur relativeX moins la moitié de la largeur de la palette, de sorte que le mouvement sera en fait relatif au milieu de la raquette.

- -

La raquette suivra désormais la position du curseur de la souris, mais comme nous limitons le mouvement à la taille du canevas, elle ne disparaîtra pas complètement d'un côté ou de l'autre.

- -

Comparez votre code

- -

Voici le code final du chapitre, à vous de vérifier et de le tester pour voir si il y a des différences.

- -

{{JSFiddleEmbed("https://jsfiddle.net/raymondjplante/vt7y5hcp/","","395")}}

- -

Exercice : ajustez les limites du mouvement de la raquette, de sorte que la raquette entière soit visible sur les deux bords du canevas au lieu de seulement la moitié.

- -

Prochaine étape

- -

Maintenant que nous avons un jeu complet, nous allons terminer notre série de leçons avec quelques petites retouches supplémentaires — Finitions.

- -

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win", "Games/Workflows/2D_Breakout_game_pure_JavaScript/finitions")}}

diff --git a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.md b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.md new file mode 100644 index 0000000000..9220f1a557 --- /dev/null +++ b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.md @@ -0,0 +1,58 @@ +--- +title: Contrôle à la souris +slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Mouse_controls +tags: + - Canevas + - Contrôles + - Débutant + - JavaScript + - Jeux + - Souris + - Tutoriel +translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Mouse_controls +original_slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls +--- +
{{GamesSidebar}}
+ +
{{IncludeSubnav("/fr/docs/Games")}}
+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win", "Games/Workflows/2D_Breakout_game_pure_JavaScript/finitions")}}

+ +

C'est la 9e étape sur 10 de ce tutoriel Gamedev Canvas. Vous pouvez trouver le code source tel qu'il devrait être après avoir terminé cette leçon à l'adresse Gamedev-Canvas-workshop/lesson9.html.

+ +

Le jeu lui-même est en fait terminé, alors travaillons à le peaufiner. Nous avons déjà ajouté des commandes au clavier, mais nous pourrions facilement ajouter des commandes à la souris.

+ +

Détecter les mouvements de la souris

+ +

Il est encore plus facile de détecter les mouvements de la souris que les pressions sur les touches : il suffit d'écouter l'évènement {{event("mousemove")}}. Ajouter la ligne suivante au même endroit que les autres écouteurs d'événement, juste en dessous de l'évènement keyup :

+ +
document.addEventListener("mousemove", mouseMoveHandler, false);
+ +

Lier le mouvement de la raquette au mouvement de la souris

+ +

Nous pouvons mettre à jour la position de la raquette en fonction des coordonnées du pointeur — c'est exactement ce que fera la fonction de manipulation suivante. Ajoutez la fonction ci-dessous à votre code, sous la dernière ligne que vous avez ajoutée :

+ +
function mouseMoveHandler(e) {
+    var relativeX = e.clientX - canvas.offsetLeft;
+    if(relativeX > 0 && relativeX < canvas.width) {
+        paddleX = relativeX - paddleWidth/2;
+    }
+}
+ +

Dans cette fonction, nous calculons d'abord une valeur relativeX, qui est égale à la position horizontale de la souris dans la fenêtre de visualisation (e.clientX) moins la distance entre le bord gauche de la toile et le bord gauche de la fenêtre de visualisation (canvas.offsetLeft) — en fait, cette valeur est égale à la distance entre le bord gauche du canevas et le pointeur de la souris. Si la position relative du pointeur X est supérieure à zéro et inférieure à la largeur du canevas, le pointeur se trouve dans les limites du canevas, et la position paddleX (ancrée sur le bord gauche de la palette) est fixée à la valeur relativeX moins la moitié de la largeur de la palette, de sorte que le mouvement sera en fait relatif au milieu de la raquette.

+ +

La raquette suivra désormais la position du curseur de la souris, mais comme nous limitons le mouvement à la taille du canevas, elle ne disparaîtra pas complètement d'un côté ou de l'autre.

+ +

Comparez votre code

+ +

Voici le code final du chapitre, à vous de vérifier et de le tester pour voir si il y a des différences.

+ +

{{JSFiddleEmbed("https://jsfiddle.net/raymondjplante/vt7y5hcp/","","395")}}

+ +

Exercice : ajustez les limites du mouvement de la raquette, de sorte que la raquette entière soit visible sur les deux bords du canevas au lieu de seulement la moitié.

+ +

Prochaine étape

+ +

Maintenant que nous avons un jeu complet, nous allons terminer notre série de leçons avec quelques petites retouches supplémentaires — Finitions.

+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win", "Games/Workflows/2D_Breakout_game_pure_JavaScript/finitions")}}

diff --git a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.html b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.html deleted file mode 100644 index 31b96ea7d8..0000000000 --- a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.html +++ /dev/null @@ -1,143 +0,0 @@ ---- -title: Déplacer la balle -slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Move_the_ball -tags: - - 2D - - Boucle - - Canevas - - Débutant - - JavaScript - - Mouvement - - Tutoriel -translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Move_the_ball -original_slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball ---- -
{{GamesSidebar}}
- -
{{IncludeSubnav("/fr/docs/Games")}}
- -

{{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")}}

- -

Voici la deuxième étape de ce tutoriel. Vous pouvez retrouver le code source de cette leçon sur Gamedev-Canvas-workshop/lesson2.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).

- -

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()")}}.

- -

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 :

- -
function draw() {
-  // le code pour dessiner
-}
-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() :

- -
ctx.beginPath();
-ctx.arc(50, 50, 10, 0, Math.PI*2);
-ctx.fillStyle = "#0095DD";
-ctx.fill();
-ctx.closePath();
-
- -

Essayez votre code mis à jour maintenant, la balle devrait être repeinte sur chaque image.

- -

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é.

- -

Ajoutez d'abord les deux lignes suivantes au-dessus de votre fonction draw() pour définir x et y :

- -
var x = canvas.width/2;
-var y = canvas.height-30;
-
- -

Ensuite, mettez à jour la fonction draw() afin d'utiliser les variables x et y dans la méthode {{domxref("CanvasRenderingContext2D.arc()","arc()")}} , comme indiqué dans la ligne mise en évidence ci-dessous :

- -
function draw() {
-  ctx.beginPath();
-  ctx.arc(x, y, 10, 0, Math.PI*2);
-  ctx.fillStyle = "#0095DD";
-  ctx.fill();
-  ctx.closePath();
-}
-
- -

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 :

- -
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() :

- -
function draw() {
-  ctx.beginPath();
-  ctx.arc(x, y, 10, 0, Math.PI*2);
-  ctx.fillStyle = "#0095DD";
-  ctx.fill();
-  ctx.closePath();
-  x += dx;
-  y += dy;
-}
- -

Enregistrez à nouveau votre code et essayez-le dans votre navigateur. Vous devriez avoir le résultat suivant : ça fonctionne mais on a une trainée laissée par la balle derrière elle :

- -

- -

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.

- -

Ajoutez la nouvelle ligne en surbrillance ci-dessous à la fonction draw() :

- -
function draw() {
-  ctx.clearRect(0, 0, canvas.width, canvas.height);
-  ctx.beginPath();
-  ctx.arc(x, y, 10, 0, Math.PI*2);
-  ctx.fillStyle = "#0095DD";
-  ctx.fill();
-  ctx.closePath();
-  x += dx;
-  y += dy;
-}
-
- -

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.

- -

Remplacez la fonction draw() existante par les deux fonctions suivantes :

- -
function drawBall() {
-  ctx.beginPath();
-  ctx.arc(x, y, 10, 0, Math.PI*2);
-  ctx.fillStyle = "#0095DD";
-  ctx.fill();
-  ctx.closePath();
-}
-
-function draw() {
-  ctx.clearRect(0, 0, canvas.width, canvas.height);
-  drawBall();
-  x += dx;
-  y += dy;
-}
- -

Comparez votre code

- -

Vous pouvez vérifier le code de cet article avec la démo qui suit et jouer avec pour mieux comprendre comment il fonctionne :

- -

{{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.

- -

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 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/move_the_ball/index.md b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.md new file mode 100644 index 0000000000..31b96ea7d8 --- /dev/null +++ b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.md @@ -0,0 +1,143 @@ +--- +title: Déplacer la balle +slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Move_the_ball +tags: + - 2D + - Boucle + - Canevas + - Débutant + - JavaScript + - Mouvement + - Tutoriel +translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Move_the_ball +original_slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball +--- +
{{GamesSidebar}}
+ +
{{IncludeSubnav("/fr/docs/Games")}}
+ +

{{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")}}

+ +

Voici la deuxième étape de ce tutoriel. Vous pouvez retrouver le code source de cette leçon sur Gamedev-Canvas-workshop/lesson2.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).

+ +

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()")}}.

+ +

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 :

+ +
function draw() {
+  // le code pour dessiner
+}
+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() :

+ +
ctx.beginPath();
+ctx.arc(50, 50, 10, 0, Math.PI*2);
+ctx.fillStyle = "#0095DD";
+ctx.fill();
+ctx.closePath();
+
+ +

Essayez votre code mis à jour maintenant, la balle devrait être repeinte sur chaque image.

+ +

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é.

+ +

Ajoutez d'abord les deux lignes suivantes au-dessus de votre fonction draw() pour définir x et y :

+ +
var x = canvas.width/2;
+var y = canvas.height-30;
+
+ +

Ensuite, mettez à jour la fonction draw() afin d'utiliser les variables x et y dans la méthode {{domxref("CanvasRenderingContext2D.arc()","arc()")}} , comme indiqué dans la ligne mise en évidence ci-dessous :

+ +
function draw() {
+  ctx.beginPath();
+  ctx.arc(x, y, 10, 0, Math.PI*2);
+  ctx.fillStyle = "#0095DD";
+  ctx.fill();
+  ctx.closePath();
+}
+
+ +

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 :

+ +
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() :

+ +
function draw() {
+  ctx.beginPath();
+  ctx.arc(x, y, 10, 0, Math.PI*2);
+  ctx.fillStyle = "#0095DD";
+  ctx.fill();
+  ctx.closePath();
+  x += dx;
+  y += dy;
+}
+ +

Enregistrez à nouveau votre code et essayez-le dans votre navigateur. Vous devriez avoir le résultat suivant : ça fonctionne mais on a une trainée laissée par la balle derrière elle :

+ +

+ +

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.

+ +

Ajoutez la nouvelle ligne en surbrillance ci-dessous à la fonction draw() :

+ +
function draw() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  ctx.beginPath();
+  ctx.arc(x, y, 10, 0, Math.PI*2);
+  ctx.fillStyle = "#0095DD";
+  ctx.fill();
+  ctx.closePath();
+  x += dx;
+  y += dy;
+}
+
+ +

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.

+ +

Remplacez la fonction draw() existante par les deux fonctions suivantes :

+ +
function drawBall() {
+  ctx.beginPath();
+  ctx.arc(x, y, 10, 0, Math.PI*2);
+  ctx.fillStyle = "#0095DD";
+  ctx.fill();
+  ctx.closePath();
+}
+
+function draw() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  drawBall();
+  x += dx;
+  y += dy;
+}
+ +

Comparez votre code

+ +

Vous pouvez vérifier le code de cet article avec la démo qui suit et jouer avec pour mieux comprendre comment il fonctionne :

+ +

{{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.

+ +

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 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.html b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.html deleted file mode 100644 index 27c2478019..0000000000 --- a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.html +++ /dev/null @@ -1,138 +0,0 @@ ---- -title: Raquette et contrôle clavier -slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls -tags: - - Canvas - - Clavier - - Débutant - - JavaScript - - Jeux - - Tuto - - Tutoriel - - contrôle clavier - - graphique -translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls -original_slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/Paddle_et_contrôle_clavier ---- -
{{GamesSidebar}}
- -
{{IncludeSubnav("/fr/docs/Games")}}
- -

{{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 4e étape sur 10 de ce tutoriel Gamedev Canvas. Vous pouvez retrouver le code source de cette leçon sur Gamedev-Canvas-workshop/lesson4.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.

- -

Créer une raquette pour frapper la balle

- -

Il nous faut donc une raquette pour frapper la balle. Définissons quelques variables pour cela. Ajoutez les variables suivantes en haut de votre code, près de vos autres variables :

- -
var paddleHeight = 10;
-var paddleWidth = 75;
-var paddleX = (canvas.width-paddleWidth)/2;
- -

Ici, nous définissons la hauteur et la largeur de la raquette et son point de départ sur l'axe des x pour l'utiliser dans les calculs plus loin dans le code. Créons une fonction qui dessinera la raquette sur l'écran. Ajoutez ce qui suit juste en dessous de votre fonction drawBall() :

- -
function drawPaddle() {
-    ctx.beginPath();
-    ctx.rect(paddleX, canvas.height-paddleHeight, paddleWidth, paddleHeight);
-    ctx.fillStyle = "#0095DD";
-    ctx.fill();
-    ctx.closePath();
-}
- -

Permettre à l'utilisateur de contrôler la raquette

- -

Nous pouvons dessiner la raquette où nous voulons, mais elle doit répondre aux actions de l'utilisateur. Il est temps de mettre en place certaines commandes au clavier. Nous aurons besoin de ce qui suit :
-  

- - - -

L'état des touches peut être mémorisé dans des variables booléennes comme dans l'exemple ci-dessous. Ajoutez ces lignes près de vos variables :

- -
var rightPressed = false;
-var leftPressed = false;
- -

La valeur par défaut pour les deux est fausse car au début, car les touches ne sont pas enfoncés. Pour être informé des appuis sur les touches, nous allons mettre en place deux écouteurs d'événements. Ajoutez les lignes suivantes juste au-dessus de la ligne setInterval() au bas de votre JavaScript :

- -
document.addEventListener("keydown", keyDownHandler, false);
-document.addEventListener("keyup", keyUpHandler, false);
- -

Lorsque l'événement keydown est déclenché par l'appui d'une des touches de votre clavier (lorsqu'elles sont enfoncées), la fonction keyDownHandler() est exécutée. Le même principe est vrai pour le deuxième écouteur : les événements keyup activent la fonction keyUpHandler() (lorsque les touches cessent d'être enfoncées). Ajoutez ces lignes à votre code, sous les lignes addEventListener() :

- -
function keyDownHandler(e) {
-    if(e.key == "Right" || e.key == "ArrowRight") {
-        rightPressed = true;
-    }
-    else if(e.key == "Left" || e.key == "ArrowLeft") {
-        leftPressed = true;
-    }
-}
-
-function keyUpHandler(e) {
-    if(e.key == "Right" || e.key == "ArrowRight") {
-        rightPressed = false;
-    }
-    else if(e.key == "Left" || e.key == "ArrowLeft") {
-        leftPressed = 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.

- -

La logique du déplacement de la raquette

- -

Nous avons maintenant mis en place les variables pour stocker les informations sur les touches pressées, les écouteurs d'événements et les fonctions associées. Ensuite, nous allons entrer dans le code pour utiliser tout ce que nous venons de configurer et pour déplacer la palette à l'écran. Dans la fonction draw(), nous vérifierons si les touches gauche ou droite sont pressées lors du rendu de chaque image. Notre code pourrait ressembler à ceci :

- -
if(rightPressed) {
-    paddleX += 7;
-}
-else if(leftPressed) {
-    paddleX -= 7;
-}
- -

Si la touche gauche est enfoncée, la raquette se déplacera de sept pixels vers la gauche, et si la droite est enfoncé, la raquette se déplacera de sept pixels vers la droite. Cela fonctionne actuellement, mais la raquette disparaît du bord du canevas si nous maintenons l'une ou l'autre des touches trop longtemps enfoncée. Nous pourrions améliorer cela et déplacer la raquette uniquement dans les limites du canevas en changeant le code comme ceci :

- -
if(rightPressed) {
-    paddleX += 7;
-    if (paddleX + paddleWidth > canvas.width){
-        paddleX = canvas.width - paddleWidth;
-    }
-}
-else if(leftPressed) {
-    paddleX -= 7;
-    if (paddleX < 0){
-        paddleX = 0;
-    }
-}
- -

La position de paddleX que nous utilisons variera entre 0 sur le côté gauche du canevas et canvas.width-paddleWidth sur le côté droit, ce qui fonctionnera exactement comme nous le souhaitons.
-
- Ajoutez le bloc de code ci-dessus dans la fonction draw() en bas, juste au-dessus de l'accolade de fermeture.
-
- Il ne reste plus qu'à appeler la fonction drawPaddle() depuis la fonction draw(), pour l'afficher réellement à l'écran. Ajoutez la ligne suivante à l'intérieur de votre fonction draw(), juste en dessous de la ligne qui appelle drawBall() :

- -
drawPaddle();
-
- -

Comparez votre code

- -

Voici le code de référence auquel vous pouvez comparer le vôtre :

- -

{{JSFiddleEmbed("https://jsfiddle.net/end3r/tgn3zscj/","","395")}}

- -

Exercice: faites aller la raquette plus vite ou plus lentement, ou changez sa taille.

- -

Dans le prochain chapitre

- -

Maintenant, nous avons quelque chose qui ressemble à un jeu. Le seul problème, c'est que vous pouvez continuer à frapper la balle avec la raquette indéfiniment. Tout cela va changer dans le cinquième chapitre, Game over, lorsque nous commencerons à ajouter un état de fin de partie pour notre jeu.

- -

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Faire_rebondir_la_balle_sur_les_murs", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Game_over")}}

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 new file mode 100644 index 0000000000..27c2478019 --- /dev/null +++ b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.md @@ -0,0 +1,138 @@ +--- +title: Raquette et contrôle clavier +slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls +tags: + - Canvas + - Clavier + - Débutant + - JavaScript + - Jeux + - Tuto + - Tutoriel + - contrôle clavier + - graphique +translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls +original_slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/Paddle_et_contrôle_clavier +--- +
{{GamesSidebar}}
+ +
{{IncludeSubnav("/fr/docs/Games")}}
+ +

{{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 4e étape sur 10 de ce tutoriel Gamedev Canvas. Vous pouvez retrouver le code source de cette leçon sur Gamedev-Canvas-workshop/lesson4.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.

+ +

Créer une raquette pour frapper la balle

+ +

Il nous faut donc une raquette pour frapper la balle. Définissons quelques variables pour cela. Ajoutez les variables suivantes en haut de votre code, près de vos autres variables :

+ +
var paddleHeight = 10;
+var paddleWidth = 75;
+var paddleX = (canvas.width-paddleWidth)/2;
+ +

Ici, nous définissons la hauteur et la largeur de la raquette et son point de départ sur l'axe des x pour l'utiliser dans les calculs plus loin dans le code. Créons une fonction qui dessinera la raquette sur l'écran. Ajoutez ce qui suit juste en dessous de votre fonction drawBall() :

+ +
function drawPaddle() {
+    ctx.beginPath();
+    ctx.rect(paddleX, canvas.height-paddleHeight, paddleWidth, paddleHeight);
+    ctx.fillStyle = "#0095DD";
+    ctx.fill();
+    ctx.closePath();
+}
+ +

Permettre à l'utilisateur de contrôler la raquette

+ +

Nous pouvons dessiner la raquette où nous voulons, mais elle doit répondre aux actions de l'utilisateur. Il est temps de mettre en place certaines commandes au clavier. Nous aurons besoin de ce qui suit :
+  

+ + + +

L'état des touches peut être mémorisé dans des variables booléennes comme dans l'exemple ci-dessous. Ajoutez ces lignes près de vos variables :

+ +
var rightPressed = false;
+var leftPressed = false;
+ +

La valeur par défaut pour les deux est fausse car au début, car les touches ne sont pas enfoncés. Pour être informé des appuis sur les touches, nous allons mettre en place deux écouteurs d'événements. Ajoutez les lignes suivantes juste au-dessus de la ligne setInterval() au bas de votre JavaScript :

+ +
document.addEventListener("keydown", keyDownHandler, false);
+document.addEventListener("keyup", keyUpHandler, false);
+ +

Lorsque l'événement keydown est déclenché par l'appui d'une des touches de votre clavier (lorsqu'elles sont enfoncées), la fonction keyDownHandler() est exécutée. Le même principe est vrai pour le deuxième écouteur : les événements keyup activent la fonction keyUpHandler() (lorsque les touches cessent d'être enfoncées). Ajoutez ces lignes à votre code, sous les lignes addEventListener() :

+ +
function keyDownHandler(e) {
+    if(e.key == "Right" || e.key == "ArrowRight") {
+        rightPressed = true;
+    }
+    else if(e.key == "Left" || e.key == "ArrowLeft") {
+        leftPressed = true;
+    }
+}
+
+function keyUpHandler(e) {
+    if(e.key == "Right" || e.key == "ArrowRight") {
+        rightPressed = false;
+    }
+    else if(e.key == "Left" || e.key == "ArrowLeft") {
+        leftPressed = 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.

+ +

La logique du déplacement de la raquette

+ +

Nous avons maintenant mis en place les variables pour stocker les informations sur les touches pressées, les écouteurs d'événements et les fonctions associées. Ensuite, nous allons entrer dans le code pour utiliser tout ce que nous venons de configurer et pour déplacer la palette à l'écran. Dans la fonction draw(), nous vérifierons si les touches gauche ou droite sont pressées lors du rendu de chaque image. Notre code pourrait ressembler à ceci :

+ +
if(rightPressed) {
+    paddleX += 7;
+}
+else if(leftPressed) {
+    paddleX -= 7;
+}
+ +

Si la touche gauche est enfoncée, la raquette se déplacera de sept pixels vers la gauche, et si la droite est enfoncé, la raquette se déplacera de sept pixels vers la droite. Cela fonctionne actuellement, mais la raquette disparaît du bord du canevas si nous maintenons l'une ou l'autre des touches trop longtemps enfoncée. Nous pourrions améliorer cela et déplacer la raquette uniquement dans les limites du canevas en changeant le code comme ceci :

+ +
if(rightPressed) {
+    paddleX += 7;
+    if (paddleX + paddleWidth > canvas.width){
+        paddleX = canvas.width - paddleWidth;
+    }
+}
+else if(leftPressed) {
+    paddleX -= 7;
+    if (paddleX < 0){
+        paddleX = 0;
+    }
+}
+ +

La position de paddleX que nous utilisons variera entre 0 sur le côté gauche du canevas et canvas.width-paddleWidth sur le côté droit, ce qui fonctionnera exactement comme nous le souhaitons.
+
+ Ajoutez le bloc de code ci-dessus dans la fonction draw() en bas, juste au-dessus de l'accolade de fermeture.
+
+ Il ne reste plus qu'à appeler la fonction drawPaddle() depuis la fonction draw(), pour l'afficher réellement à l'écran. Ajoutez la ligne suivante à l'intérieur de votre fonction draw(), juste en dessous de la ligne qui appelle drawBall() :

+ +
drawPaddle();
+
+ +

Comparez votre code

+ +

Voici le code de référence auquel vous pouvez comparer le vôtre :

+ +

{{JSFiddleEmbed("https://jsfiddle.net/end3r/tgn3zscj/","","395")}}

+ +

Exercice: faites aller la raquette plus vite ou plus lentement, ou changez sa taille.

+ +

Dans le prochain chapitre

+ +

Maintenant, nous avons quelque chose qui ressemble à un jeu. Le seul problème, c'est que vous pouvez continuer à frapper la balle avec la raquette indéfiniment. Tout cela va changer dans le cinquième chapitre, Game over, lorsque nous commencerons à ajouter un état de fin de partie pour notre jeu.

+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Faire_rebondir_la_balle_sur_les_murs", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Game_over")}}

diff --git a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/track_the_score_and_win/index.html b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/track_the_score_and_win/index.html deleted file mode 100644 index 55ed6a8aa3..0000000000 --- a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/track_the_score_and_win/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: Suivre le score et gagner -slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win -translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win -original_slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win ---- -
{{GamesSidebar}}
- -
{{IncludeSubnav("/fr/docs/Games")}}
- -

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/detection_colisions", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls")}}

- -

Ceci est la 8e étape de ce tutoriel Gamedev Canvas. Vous pouvez trouver le code source tel qu'il devrait être après avoir terminé cette leçon à : Gamedev-Canvas-workshop/lesson8.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.

- -

Calculer le score

- -

Si vous pouvez voir votre score durant le jeu, vous pourrez impressioner vos amis. Vous avez besoin d'une variable pour stocker le score. Ajoutez ce qui suit dans votre JavaScript après le reste de vos variables : 

- -
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():

- -
function drawScore() {
-    ctx.font = "16px Arial";
-    ctx.fillStyle = "#0095DD";
-    ctx.fillText("Score: "+score, 8, 20);
-}
- -

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 :

- -
function collisionDetection() {
-    for(var c=0; c<brickColumnCount; c++) {
-        for(var r=0; r<brickRowCount; r++) {
-            var b = bricks[c][r];
-            if(b.status == 1) {
-                if(x > b.x && x < b.x+brickWidth && y > b.y && y < b.y+brickHeight) {
-                    dy = -dy;
-                    b.status = 0;
-                    score++;
-                }
-            }
-        }
-    }
-}
- -

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() :

- -
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():

- -
function collisionDetection() {
-    for(var c=0; c<brickColumnCount; c++) {
-        for(var r=0; r<brickRowCount; r++) {
-            var b = bricks[c][r];
-            if(b.status == 1) {
-                if(x > b.x && x < b.x+brickWidth && y > b.y && y < b.y+brickHeight) {
-                    dy = -dy;
-                    b.status = 0;
-                    score++;
-                    if(score == brickRowCount*brickColumnCount) {
-                        alert("C'est gagné, Bravo!");
-                        document.location.reload();
-                        clearInterval(interval); // Needed for Chrome to end game
-                    }
-                }
-            }
-        }
-    }
-}
- -

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

- -

Le code réalisé fonctionne et ressemble à cela, au cas où vous voudriez le comparer avec le vôtre : 

- -

{{JSFiddleEmbed("https://jsfiddle.net/raymondjplante/b3z2Lpu9/","","395")}}

- -

Exercice: Ajoutez plus de points par brique touchée et indiquez le nombre de points gagnés dans la boîte d'alerte de fin de partie.

- -

Prochaine étape

- -

Le jeu est plutôt réussi à ce stade. Dans la prochaine leçon, vous le rendrez plus attraynt en ajoutant le contrôle à la souris.

- -

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/detection_colisions", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls")}}

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 new file mode 100644 index 0000000000..55ed6a8aa3 --- /dev/null +++ b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/track_the_score_and_win/index.md @@ -0,0 +1,92 @@ +--- +title: Suivre le score et gagner +slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win +translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win +original_slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win +--- +
{{GamesSidebar}}
+ +
{{IncludeSubnav("/fr/docs/Games")}}
+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/detection_colisions", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls")}}

+ +

Ceci est la 8e étape de ce tutoriel Gamedev Canvas. Vous pouvez trouver le code source tel qu'il devrait être après avoir terminé cette leçon à : Gamedev-Canvas-workshop/lesson8.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.

+ +

Calculer le score

+ +

Si vous pouvez voir votre score durant le jeu, vous pourrez impressioner vos amis. Vous avez besoin d'une variable pour stocker le score. Ajoutez ce qui suit dans votre JavaScript après le reste de vos variables : 

+ +
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():

+ +
function drawScore() {
+    ctx.font = "16px Arial";
+    ctx.fillStyle = "#0095DD";
+    ctx.fillText("Score: "+score, 8, 20);
+}
+ +

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 :

+ +
function collisionDetection() {
+    for(var c=0; c<brickColumnCount; c++) {
+        for(var r=0; r<brickRowCount; r++) {
+            var b = bricks[c][r];
+            if(b.status == 1) {
+                if(x > b.x && x < b.x+brickWidth && y > b.y && y < b.y+brickHeight) {
+                    dy = -dy;
+                    b.status = 0;
+                    score++;
+                }
+            }
+        }
+    }
+}
+ +

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() :

+ +
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():

+ +
function collisionDetection() {
+    for(var c=0; c<brickColumnCount; c++) {
+        for(var r=0; r<brickRowCount; r++) {
+            var b = bricks[c][r];
+            if(b.status == 1) {
+                if(x > b.x && x < b.x+brickWidth && y > b.y && y < b.y+brickHeight) {
+                    dy = -dy;
+                    b.status = 0;
+                    score++;
+                    if(score == brickRowCount*brickColumnCount) {
+                        alert("C'est gagné, Bravo!");
+                        document.location.reload();
+                        clearInterval(interval); // Needed for Chrome to end game
+                    }
+                }
+            }
+        }
+    }
+}
+ +

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

+ +

Le code réalisé fonctionne et ressemble à cela, au cas où vous voudriez le comparer avec le vôtre : 

+ +

{{JSFiddleEmbed("https://jsfiddle.net/raymondjplante/b3z2Lpu9/","","395")}}

+ +

Exercice: Ajoutez plus de points par brique touchée et indiquez le nombre de points gagnés dans la boîte d'alerte de fin de partie.

+ +

Prochaine étape

+ +

Le jeu est plutôt réussi à ce stade. Dans la prochaine leçon, vous le rendrez plus attraynt en ajoutant le contrôle à la souris.

+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/detection_colisions", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls")}}

diff --git a/files/fr/games/tutorials/html5_gamedev_phaser_device_orientation/index.html b/files/fr/games/tutorials/html5_gamedev_phaser_device_orientation/index.html deleted file mode 100644 index 50ed7d56f1..0000000000 --- a/files/fr/games/tutorials/html5_gamedev_phaser_device_orientation/index.html +++ /dev/null @@ -1,444 +0,0 @@ ---- -title: Jeu 2D avec l'API Device orientation -slug: Games/Tutorials/HTML5_Gamedev_Phaser_Device_Orientation -translation_of: Games/Tutorials/HTML5_Gamedev_Phaser_Device_Orientation -original_slug: Games/Workflows/HTML5_Gamedev_Phaser_Device_Orientation_FR ---- -
{{GamesSidebar}}

{{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  et Vibration   pour améliorer le "gameplay" et est construit avec le "framework" Phaser . La connaissance JavaScript de base est recommandée pour tirer le meilleur parti de ce tutoriel.

- -

Exemple de jeu

- -

A la fin de ce tutoriel, vous aurez une démo entièrement fonctionnelle du jeu : Cyber Orb. Il ressemblera à quelque chose comme cela :

- -

- -

Le framework Phaser

- -

Phaser 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, lisez y la documentation de base, jetez un œil aux exemples. 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

- -

Vous pouvez voir le code d'exemple du projet sur GitHub. La structure n'est pas compliquée : le point de départ est le fichier index.html où nous initialisons le framework, mettons en place le {{htmlelement("canvas")}} et jouons au jeu.

- -

- -

Vous pouvez l'ouvir avec votre navigateur préféré pour essayer le jeu. Il y a aussi trois dossiers :

- - - -

Mettre en place le canevas

- -

Nous voulons un rendu de notre jeu sur un canevas, mais nous ne le ferons pas manuellement - cela sera pris en charge par le framework. Disons-le : notre point de départ est le fichier index.html avec le contenu suivant. Vous pouvez créer vous-même si vous voulez suivre :

- -
<!DOCTYPE html>
-<html>
-<head>
-    <meta charset="utf-8" />
-    <title>Cyber Orb demo</title>
-    <style> body { margin: 0; background: #333; } </style>
-    <script src="src/phaser-arcade-physics.2.2.2.min.js"></script>
-    <script src="src/Boot.js"></script>
-    <script src="src/Preloader.js"></script>
-    <script src="src/MainMenu.js"></script>
-    <script src="src/Howto.js"></script>
-    <script src="src/Game.js"></script>
-</head>
-<body>
-<script>
-(function() {
-    var game = new Phaser.Game(320, 480, Phaser.CANVAS, 'game');
-    game.state.add('Boot', Ball.Boot);
-    game.state.add('Preloader', Ball.Preloader);
-    game.state.add('MainMenu', Ball.MainMenu);
-    game.state.add('Howto', Ball.Howto);
-    game.state.add('Game', Ball.Game);
-    game.state.start('Boot');
-})();
-</script>
-</body>
-</html>
- -

Ça ressemble à une simple page de site HTML avec des éléments basiques dans la balise <head> (en-tête) : police de caractères, titre, CSS et inclusion des fichiers Javascript. Le <body> (corps) contient l'initialisation du framework et la définition des états du jeu.

- -
var game = new Phaser.Game(320, 480, Phaser.CANVAS, 'game');
- -

La ligne ci-dessus va initialiser l'instance de Phaser - les arguments sont la largeur et la hauteur du canevas, la méthode de rendu (nous utilisons CANVAS, mais il y a aussi les options WEBGL et AUTO disponibles) et l'ID optionnel du conteneur DOM dans lequel nous voulons placer le canevas. Si rien n'est spécifié dans ce dernier argument, ou si l'élément n'est pas trouvé, le canvas sera ajouté à la balise <body>. Sans le framework, pour ajouter l'élément canvas à la page, il faudrait écrire quelque chose comme ça dans la balise <body>:

- -
<canvas id='game' width='320' height='480'></canvas>
- -

La chose importante à retenir est que le framework met en place des méthodes utiles pour accélérer beaucoup de choses comme la manipulation d'images ou la gestion des éléments, ce qui serait beaucoup plus difficile à faire manuellement.

- -
-

Note : Vous pouvez lire l'article Building Monster Wants Candy pour une introduction approfondie aux fonctions et méthodes de base de Phaser.

-
- -

Retour aux états du jeu : la ligne ci-dessous ajoute un nouvel état appelé Boot au jeu :

- -
game.state.add('Boot', Ball.Boot);
- -

La première valeur est le nom de l'état et la seconde est l'objet que nous voulons lui assigner. La méthode start démarre l'état donné et le rend actif. Voyons ce que les états sont en réalité. 

- -

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.

- -

Boot.js (démarrage)

- -

L'état Boot est le premier du jeu.

- -
var Ball = {
-    _WIDTH: 320,
-    _HEIGHT: 480
-};
-Ball.Boot = function(game) {};
-Ball.Boot.prototype = {
-    preload: function() {
-        this.load.image('preloaderBg', 'img/loading-bg.png');
-        this.load.image('preloaderBar', 'img/loading-bar.png');
-    },
-    create: function() {
-        this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
-        this.game.scale.pageAlignHorizontally = true;
-        this.game.scale.pageAlignVertically = true;
-        this.game.state.start('Preloader');
-    }
-};
- -

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)

- -

L'état Preloader prend soin de charger tous les éléments :

- -
Ball.Preloader = function(game) {};
-Ball.Preloader.prototype = {
-    preload: function() {
-        this.preloadBg = this.add.sprite((Ball._WIDTH-297)*0.5, (Ball._HEIGHT-145)*0.5, 'preloaderBg');
-        this.preloadBar = this.add.sprite((Ball._WIDTH-158)*0.5, (Ball._HEIGHT-50)*0.5, 'preloaderBar');
-        this.load.setPreloadSprite(this.preloadBar);
-
-        this.load.image('ball', 'img/ball.png');
-        // ...
-        this.load.spritesheet('button-start', 'img/button-start.png', 146, 51);
-        // ...
-        this.load.audio('audio-bounce', ['audio/bounce.ogg', 'audio/bounce.mp3', 'audio/bounce.m4a']);
-    },
-    create: function() {
-        this.game.state.start('MainMenu');
-    }
-};
- -

Il y a des images uniques, des feuilles de "sprites" et des fichiers audio chargés par le "framework". Dans cet état, la preloadBar (barre du préchargement) affiche la progression à l'écran. Cette progression des éléments chargés est visualisée par le framework avec l'utilisation d'une image. Avec chaque élément chargé, vous pouvez voir plus de l'image preloadBar: de 0% à 100%, mis à jour sur chaque image. Une fois que tous les éléments sont chargés, l'état MainMenu est lancé.

- - - -

L'état MainMenu montre le menu principal du jeu, sur lequel vous pouvez lancer le jeu en cliquant sur le bouton.

- -
Ball.MainMenu = function(game) {};
-Ball.MainMenu.prototype = {
-    create: function() {
-        this.add.sprite(0, 0, 'screen-mainmenu');
-        this.gameTitle = this.add.sprite(Ball._WIDTH*0.5, 40, 'title');
-        this.gameTitle.anchor.set(0.5,0);
-        this.startButton = this.add.button(Ball._WIDTH*0.5, 200, 'button-start', this.startGame, this, 2, 0, 1);
-        this.startButton.anchor.set(0.5,0);
-        this.startButton.input.useHandCursor = true;
-    },
-    startGame: function() {
-        this.game.state.start('Howto');
-    }
-};
- -

Pour créer un nouveau bouton, il y a la méthode add.button avec la liste suivante d'arguments facultatifs :

- - - -

Anchor.set configure le point d'ancrage du bouton sur lequel tous les calculs de la position sont appliqués. Dans notre cas, il est ancré à mi-chemin du bord gauche et au début du bord supérieur, de sorte qu'il peut être facilement centré horizontalement sur l'écran sans avoir besoin de connaître sa largeur.

- -

Lorsque le bouton de démarrage est enfoncé, au lieu de sauter directement dans l'action, le jeu affichera l'écran avec les informations sur la façon de jouer.

- -

Howto.js (comment jouer)

- -
Ball.Howto = function(game) {
-};
-Ball.Howto.prototype = {
-    create: function() {
-        this.buttonContinue = this.add.button(0, 0, 'screen-howtoplay', this.startGame, this);
-    },
-    startGame: function() {
-        this.game.state.start('Game');
-    }
-};
- -

L'état Howto affiche les instructions du jeu à l'écran avant de commencer le jeu. Après avoir cliqué sur l'écran, le jeu réel est lancé.

- -

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.

- -
Ball.Game = function(game) {};
-Ball.Game.prototype = {
-    create: function() {},
-    initLevels: function() {},
-    showLevel: function(level) {},
-    updateCounter: function() {},
-    managePause: function() {},
-    manageAudio: function() {},
-    update: function() {},
-    wallCollision: function() {},
-    handleOrientation: function(e) {},
-    finishLevel: function() {}
-};
- -

Les fonctions create et update sont spécifiques au framework, tandis que d'autres seront nos créations :

- - - -

Ajout de la balle et de ses mécanismes de mouvement

- -

D'abord, dans la fonction create, initialisons l'objet 'ball' et assignons lui quelques propriétés :

- -
ball = this.add.sprite((320-22)/2, 450, 'ball');
-ball.anchor.setTo(0.5, 0.5);
-ball.body.bounce.setTo(0.3, 0.3);
-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.

- -

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() :

- -
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. 

- -

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 :

- -
if(this.keys.left.isDown) {
-    this.ball.body.velocity.x -= this.movementForce;
-}
-else if(this.keys.right.isDown) {
-    this.ball.body.velocity.x += this.movementForce;
-}
-if(this.keys.up.isDown) {
-    this.ball.body.velocity.y -= this.movementForce;
-}
-else if(this.keys.down.isDown) {
-    this.ball.body.velocity.y += this.movementForce;
-}
- -

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)

- -

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 :

- -
window.addEventListener("deviceorientation", this.handleOrientation, true);
- -

L'ajout d'un évènement "listener" à l'évenement "deviceorientation" et la modification de la fonction handleOrientationressembleront à ceci :

- -
handleOrientation: function(e) {
-    var x = e.gamma;
-    var y = e.beta;
-    Ball._player.body.velocity.x += x;
-    Ball._player.body.velocity.y += y;
-}
- -

Plus l'appareil est incliné, plus la force appliquée à la balle et sa vélocité sont importantes.

- -

- -
-

Note : Pour en savoir plus sur l'implémentation de l'orientation du périphérique et sur le code brut, lisez Gardez-le au niveau : en réponse aux changements d'orientation du périphérique. 

-
- -

Ajout du trou

- -

L'objectif principal du jeu est de déplacer la balle du point de départ vers le point d'arrivée, qui est dans notre cas, un trou dans le sol. L'implémentation ressemble beaucoup à celle de la création de la balle et est ajoutée dans la fonction create() de l'état Game :

- -
this.hole = this.add.sprite(Ball._WIDTH*0.5, 90, 'hole');
-this.physics.enable(this.hole, Phaser.Physics.ARCADE);
-this.hole.anchor.set(0.5);
-this.hole.body.setSize(2, 2);
- -

La seule différence est que 'hole.body' est mis à immovable(fixe), il ne bougera donc pas quand la balle le touchera et la collision sera alors calculée ( ce point sera approfondit plus loin dans cet article ).

- -

Création du mur du labyrinthe

- -

Pour rendre le jeu plus difficile et plus intéressant, nous allons ajouter des obstacles entre la balle et la sortie. Nous pourrions utiliser un éditeur de niveau, mais pour ce tutoriel, créons quelque chose par nous-mêmes.

- -

Pour conserver les informations du bloc, nous utiliserons un tableau de données de niveau : pour chaque bloc, nous stockons les positions absolues supérieure et gauche en pixels (x et y) et le type du bloc - horizontal ou vertical (t avec le 'w 'valeur signifiant largeur et' h 'signifiant hauteur). Ensuite, pour charger le niveau, nous allons analyser les données et afficher les blocs spécifiques à ce niveau. Dans la fonction initLevels, nous avons :

- -
this.levelData = [
-    [
-        { x: 96, y: 224, t: 'w' }
-    ],
-    [
-        { x: 72, y: 320, t: 'w' },
-        { x: 200, y: 320, t: 'h' },
-        { x: 72, y: 150, t: 'w' }
-    ],
-    // ...
-];
- -

Chaque élément de tableau contient une collection de blocs avec une position x et y et une valeur t pour chacun. Après levelData, mais toujours dans la fonction initLevels, nous ajoutons les blocs dans un tableau de la boucle for en utilisant certaines des méthodes spécifiques au framework :

- -
for(var i=0; i<this.maxLevels; i++) {
-    var newLevel = this.add.group();
-    newLevel.enableBody = true;
-    newLevel.physicsBodyType = Phaser.Physics.ARCADE;
-    for(var e=0; e<this.levelData[i].length; e++) {
-        var item = this.levelData[i][e];
-        newLevel.create(item.x, item.y, 'element-'+item.t);
-    }
-    newLevel.setAll('body.immovable', true);
-    newLevel.visible = false;
-    this.levels.push(newLevel);
-}
- -

Tout d'abord, add.group () est utilisé pour créer un nouveau groupe d'éléments. Ensuite, le type de corps ARCADE est défini pour ce groupe pour activer les calculs physiques. La méthode newLevel.create crée de nouveaux éléments dans le groupe avec les positions de départ haut et gauche et sa propre image. Si vous ne souhaitez pas parcourir à nouveau la liste des éléments pour ajouter explicitement une propriété à chacun d'eux, vous pouvez utiliser setAll sur un groupe pour l'appliquer à tous les éléments de ce groupe.
-
- Les objets sont stockés dans le tableau this.levels, qui est ,par défaut, invisible. Pour charger des niveaux spécifiques, nous nous assurons que les niveaux précédents sont cachés et affichent le niveau actuel :

- -
showLevel: function(level) {
-    var lvl = level | this.level;
-    if(this.levels[lvl-2]) {
-        this.levels[lvl-2].visible = false;
-    }
-    this.levels[lvl-1].visible = true;
-}
- -

Grâce à cela, le jeu donne au joueur un défi : il doit maintenant rouler la balle à travers l'aire de jeu et la guider dans le labyrinthe construit à partir des blocs. C'est juste un exemple de chargement des niveaux, et il n'y a que 5, juste pour présenter l'idée, mais vous pouvez travailler à l'étendre par vous-même.

- -

Détection de collision

- -

À ce stade, nous avons la balle qui est contrôlée par le joueur, le trou à atteindre et les obstacles qui bloquent la route. Il y a un problème cependant : notre jeu n'a pas encore de détection de collision, donc il ne se passe rien quand la balle frappe les blocs, elle passe juste à travers. Réparons-le ! Les bonnes nouvelles sont que le cadre se chargera de calculer la détection de collision, il suffit de spécifier les objets en collision dans la fonction update () :

- -
this.physics.arcade.collide(this.ball, this.borderGroup, this.wallCollision, null, this);
-this.physics.arcade.collide(this.ball, this.levels[this.level-1], this.wallCollision, null, this);
- -

Cela dira à la structure d'exécuter la fonction wallCollision lorsque la balle frappe l'un des murs. Nous pouvons utiliser la fonction wallCollision pour ajouter toutes les fonctionnalités que nous voulons comme jouer le son du rebondissement et implémenter l'API Vibration.

- -

Ajout de son

- -

Parmi les éléments préchargés, il y avait une piste audio (dans différents formats pour la compatibilité avec les navigateurs), que nous pouvons utiliser maintenant. Il doit d'abord être défini dans la fonction create () :

- -
this.bounceSound = this.game.add.audio('audio-bounce');
- -

Si l'état de l'audio est true (vrai) (les sons du jeu sont activés), nous pouvons le jouer dans la fonction wallCollision:

- -
if(this.audioStatus) {
-    this.bounceSound.play();
-}
- -

C'est tout - charger et jouer les sons est facile avec Phaser.

- -

Implementing the Vibration API

- -

Lorsque la détection de collision fonctionne comme prévu, ajoutons quelques effets spéciaux avec l'aide de l'API Vibration.

- -

- -

La meilleure façon de l'utiliser dans notre cas est de faire vibrer le téléphone chaque fois que la balle frappe les murs, à l'intérieur de la fonction wallCollision :

- -
if("vibrate" in window.navigator) {
-    window.navigator.vibrate(100);
-}
- -

Si la méthode vibrate est prise en charge par le navigateur et disponible dans l'objet window.navigator, faites vibrer le téléphone pendant 100 millisecondes. C'est tout !

- -

Ajout du temps écoulé

- -

Pour améliorer la rejouabilité et donner aux joueurs l'option de rivaliser les uns avec les autres, nous pouvons introduire le temps écoulé. Grâce à cela, le joueur peut jouer les niveaux encore et encore en essayant d'améliorer son score. Pour implémenter cela dans le jeu, nous devons créer une variable pour stocker le nombre réel de secondes écoulées depuis le début du jeu et le montrer au joueur dans le jeu. Définissons d'abord la variable :

- -
this.timer = 0; // time elapsed in the current level
-this.totalTimer = 0; // time elapsed in the whole game
- -

Ensuite, juste après, nous pouvons initialiser les objets texte nécessaires à l'affichage de cette information pour l'utilisateur:

- -
this.timerText = this.game.add.text(15, 15, "Time: "+this.timer, this.fontBig);
-this.totalTimeText = this.game.add.text(120, 30, "Total time: "+this.totalTimer, this.fontSmall);
- -

Nous définissons les positions supérieure et gauche du texte, le contenu qui sera affiché et le style appliqué au texte. Nous l'avons imprimé à l'écran, mais il serait bon de mettre à jour les valeurs toutes les secondes :

- -
this.time.events.loop(Phaser.Timer.SECOND, this.updateCounter, this);
- -

Cette boucle, également dans la fonction create , exécutera la fonction updateCounter à chaque seconde du début du jeu afin que nous puissions appliquer les modifications en conséquence. Voici à quoi ressemble la fonction updateCounter complète :

- -
updateCounter: function() {
-    this.timer++;
-    this.timerText.setText("Time: "+this.timer);
-    this.totalTimeText.setText("Total time: "+(this.totalTimer+this.timer));
-},
- -

Comme vous pouvez le voir, nous incrémentons la variable this.timer et mettons à jour le contenu des objets texte avec les valeurs actuelles à chaque itération, de sorte que le joueur voit le temps écoulé.

- -

Finition du niveau et du jeu

- -

La balle tourne sur l'écran, le minutage fonctionne et nous avons le trou créé que nous devons atteindre. Maintenant, mettons en place la possibilité de finir le niveau ! La ligne suivante de la fonction update () ajoute un écouteur qui se déclenche lorsque la balle arrive au trou.

- -
this.physics.arcade.overlap(this.ball, this.hole, this.finishLevel, null, this);
- -

Cela fonctionne de la même manière que la méthode collide expliquée précédemment. Lorsque la balle chevauche le trou (au lieu de collision), la fonction finishLevel est exécutée :

- -
finishLevel: function() {
-    if(this.level >= this.maxLevels) {
-        this.totalTimer += this.timer;
-        alert('Congratulations, game completed!\nTotal time of play: '+this.totalTimer+' seconds!');
-        this.game.state.start('MainMenu');
-    }
-    else {
-        alert('Congratulations, level '+this.level+' completed!');
-        this.totalTimer += this.timer;
-        this.timer = 0;
-        this.level++;
-        this.timerText.setText("Time: "+this.timer);
-        this.totalTimeText.setText("Total time: "+this.totalTimer);
-        this.levelText.setText("Level: "+this.level+" / "+this.maxLevels);
-        this.ball.body.x = this.ballStartPos.x;
-        this.ball.body.y = this.ballStartPos.y;
-        this.ball.body.velocity.x = 0;
-        this.ball.body.velocity.y = 0;
-        this.showLevel();
-    }
-},
- -

Si le niveau actuel est égal au nombre maximum de niveaux (dans ce cas, 5), le jeu est terminé - vous recevrez un message de félicitations avec le nombre de secondes écoulées pendant toute la partie et un clique sur un bouton vous ramène au menu principal.

- -

Si le niveau actuel est inférieur à 5, toutes les variables nécessaires sont réinitialisées et le niveau suivant est chargé.

- -

Idées pour de nouvelles fonctionnalités

- -

Ceci est simplement une démonstration de travail d'un jeu qui pourrait avoir beaucoup de fonctionnalités supplémentaires. Nous pouvons par exemple ajouter des "power-ups" à collecter en cours de route qui feront rouler notre balle plus rapidement, arrêter le chronomètre pendant quelques secondes ou donner à la balle des pouvoirs spéciaux pour traverser les obstacles. Il y a aussi de la place pour les pièges qui ralentiront la balle ou rendront le but plus difficile à atteindre. Vous pouvez créer plus de niveaux de difficulté croissante. Vous pouvez même mettre en œuvre des trophées, des classements et des médailles pour différentes actions du jeu. Il y a des possibilités infinies - elles ne dépendent que de votre imagination.

- -

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 et consulter son code source sur GitHub.

- -

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 qui méritent d'être considérés aussi, comme ImpactJS, Construct 2 ou PlayCanvas — 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.

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 new file mode 100644 index 0000000000..50ed7d56f1 --- /dev/null +++ b/files/fr/games/tutorials/html5_gamedev_phaser_device_orientation/index.md @@ -0,0 +1,444 @@ +--- +title: Jeu 2D avec l'API Device orientation +slug: Games/Tutorials/HTML5_Gamedev_Phaser_Device_Orientation +translation_of: Games/Tutorials/HTML5_Gamedev_Phaser_Device_Orientation +original_slug: Games/Workflows/HTML5_Gamedev_Phaser_Device_Orientation_FR +--- +
{{GamesSidebar}}

{{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  et Vibration   pour améliorer le "gameplay" et est construit avec le "framework" Phaser . La connaissance JavaScript de base est recommandée pour tirer le meilleur parti de ce tutoriel.

+ +

Exemple de jeu

+ +

A la fin de ce tutoriel, vous aurez une démo entièrement fonctionnelle du jeu : Cyber Orb. Il ressemblera à quelque chose comme cela :

+ +

+ +

Le framework Phaser

+ +

Phaser 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, lisez y la documentation de base, jetez un œil aux exemples. 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

+ +

Vous pouvez voir le code d'exemple du projet sur GitHub. La structure n'est pas compliquée : le point de départ est le fichier index.html où nous initialisons le framework, mettons en place le {{htmlelement("canvas")}} et jouons au jeu.

+ +

+ +

Vous pouvez l'ouvir avec votre navigateur préféré pour essayer le jeu. Il y a aussi trois dossiers :

+ + + +

Mettre en place le canevas

+ +

Nous voulons un rendu de notre jeu sur un canevas, mais nous ne le ferons pas manuellement - cela sera pris en charge par le framework. Disons-le : notre point de départ est le fichier index.html avec le contenu suivant. Vous pouvez créer vous-même si vous voulez suivre :

+ +
<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <title>Cyber Orb demo</title>
+    <style> body { margin: 0; background: #333; } </style>
+    <script src="src/phaser-arcade-physics.2.2.2.min.js"></script>
+    <script src="src/Boot.js"></script>
+    <script src="src/Preloader.js"></script>
+    <script src="src/MainMenu.js"></script>
+    <script src="src/Howto.js"></script>
+    <script src="src/Game.js"></script>
+</head>
+<body>
+<script>
+(function() {
+    var game = new Phaser.Game(320, 480, Phaser.CANVAS, 'game');
+    game.state.add('Boot', Ball.Boot);
+    game.state.add('Preloader', Ball.Preloader);
+    game.state.add('MainMenu', Ball.MainMenu);
+    game.state.add('Howto', Ball.Howto);
+    game.state.add('Game', Ball.Game);
+    game.state.start('Boot');
+})();
+</script>
+</body>
+</html>
+ +

Ça ressemble à une simple page de site HTML avec des éléments basiques dans la balise <head> (en-tête) : police de caractères, titre, CSS et inclusion des fichiers Javascript. Le <body> (corps) contient l'initialisation du framework et la définition des états du jeu.

+ +
var game = new Phaser.Game(320, 480, Phaser.CANVAS, 'game');
+ +

La ligne ci-dessus va initialiser l'instance de Phaser - les arguments sont la largeur et la hauteur du canevas, la méthode de rendu (nous utilisons CANVAS, mais il y a aussi les options WEBGL et AUTO disponibles) et l'ID optionnel du conteneur DOM dans lequel nous voulons placer le canevas. Si rien n'est spécifié dans ce dernier argument, ou si l'élément n'est pas trouvé, le canvas sera ajouté à la balise <body>. Sans le framework, pour ajouter l'élément canvas à la page, il faudrait écrire quelque chose comme ça dans la balise <body>:

+ +
<canvas id='game' width='320' height='480'></canvas>
+ +

La chose importante à retenir est que le framework met en place des méthodes utiles pour accélérer beaucoup de choses comme la manipulation d'images ou la gestion des éléments, ce qui serait beaucoup plus difficile à faire manuellement.

+ +
+

Note : Vous pouvez lire l'article Building Monster Wants Candy pour une introduction approfondie aux fonctions et méthodes de base de Phaser.

+
+ +

Retour aux états du jeu : la ligne ci-dessous ajoute un nouvel état appelé Boot au jeu :

+ +
game.state.add('Boot', Ball.Boot);
+ +

La première valeur est le nom de l'état et la seconde est l'objet que nous voulons lui assigner. La méthode start démarre l'état donné et le rend actif. Voyons ce que les états sont en réalité. 

+ +

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.

+ +

Boot.js (démarrage)

+ +

L'état Boot est le premier du jeu.

+ +
var Ball = {
+    _WIDTH: 320,
+    _HEIGHT: 480
+};
+Ball.Boot = function(game) {};
+Ball.Boot.prototype = {
+    preload: function() {
+        this.load.image('preloaderBg', 'img/loading-bg.png');
+        this.load.image('preloaderBar', 'img/loading-bar.png');
+    },
+    create: function() {
+        this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
+        this.game.scale.pageAlignHorizontally = true;
+        this.game.scale.pageAlignVertically = true;
+        this.game.state.start('Preloader');
+    }
+};
+ +

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)

+ +

L'état Preloader prend soin de charger tous les éléments :

+ +
Ball.Preloader = function(game) {};
+Ball.Preloader.prototype = {
+    preload: function() {
+        this.preloadBg = this.add.sprite((Ball._WIDTH-297)*0.5, (Ball._HEIGHT-145)*0.5, 'preloaderBg');
+        this.preloadBar = this.add.sprite((Ball._WIDTH-158)*0.5, (Ball._HEIGHT-50)*0.5, 'preloaderBar');
+        this.load.setPreloadSprite(this.preloadBar);
+
+        this.load.image('ball', 'img/ball.png');
+        // ...
+        this.load.spritesheet('button-start', 'img/button-start.png', 146, 51);
+        // ...
+        this.load.audio('audio-bounce', ['audio/bounce.ogg', 'audio/bounce.mp3', 'audio/bounce.m4a']);
+    },
+    create: function() {
+        this.game.state.start('MainMenu');
+    }
+};
+ +

Il y a des images uniques, des feuilles de "sprites" et des fichiers audio chargés par le "framework". Dans cet état, la preloadBar (barre du préchargement) affiche la progression à l'écran. Cette progression des éléments chargés est visualisée par le framework avec l'utilisation d'une image. Avec chaque élément chargé, vous pouvez voir plus de l'image preloadBar: de 0% à 100%, mis à jour sur chaque image. Une fois que tous les éléments sont chargés, l'état MainMenu est lancé.

+ + + +

L'état MainMenu montre le menu principal du jeu, sur lequel vous pouvez lancer le jeu en cliquant sur le bouton.

+ +
Ball.MainMenu = function(game) {};
+Ball.MainMenu.prototype = {
+    create: function() {
+        this.add.sprite(0, 0, 'screen-mainmenu');
+        this.gameTitle = this.add.sprite(Ball._WIDTH*0.5, 40, 'title');
+        this.gameTitle.anchor.set(0.5,0);
+        this.startButton = this.add.button(Ball._WIDTH*0.5, 200, 'button-start', this.startGame, this, 2, 0, 1);
+        this.startButton.anchor.set(0.5,0);
+        this.startButton.input.useHandCursor = true;
+    },
+    startGame: function() {
+        this.game.state.start('Howto');
+    }
+};
+ +

Pour créer un nouveau bouton, il y a la méthode add.button avec la liste suivante d'arguments facultatifs :

+ + + +

Anchor.set configure le point d'ancrage du bouton sur lequel tous les calculs de la position sont appliqués. Dans notre cas, il est ancré à mi-chemin du bord gauche et au début du bord supérieur, de sorte qu'il peut être facilement centré horizontalement sur l'écran sans avoir besoin de connaître sa largeur.

+ +

Lorsque le bouton de démarrage est enfoncé, au lieu de sauter directement dans l'action, le jeu affichera l'écran avec les informations sur la façon de jouer.

+ +

Howto.js (comment jouer)

+ +
Ball.Howto = function(game) {
+};
+Ball.Howto.prototype = {
+    create: function() {
+        this.buttonContinue = this.add.button(0, 0, 'screen-howtoplay', this.startGame, this);
+    },
+    startGame: function() {
+        this.game.state.start('Game');
+    }
+};
+ +

L'état Howto affiche les instructions du jeu à l'écran avant de commencer le jeu. Après avoir cliqué sur l'écran, le jeu réel est lancé.

+ +

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.

+ +
Ball.Game = function(game) {};
+Ball.Game.prototype = {
+    create: function() {},
+    initLevels: function() {},
+    showLevel: function(level) {},
+    updateCounter: function() {},
+    managePause: function() {},
+    manageAudio: function() {},
+    update: function() {},
+    wallCollision: function() {},
+    handleOrientation: function(e) {},
+    finishLevel: function() {}
+};
+ +

Les fonctions create et update sont spécifiques au framework, tandis que d'autres seront nos créations :

+ + + +

Ajout de la balle et de ses mécanismes de mouvement

+ +

D'abord, dans la fonction create, initialisons l'objet 'ball' et assignons lui quelques propriétés :

+ +
ball = this.add.sprite((320-22)/2, 450, 'ball');
+ball.anchor.setTo(0.5, 0.5);
+ball.body.bounce.setTo(0.3, 0.3);
+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.

+ +

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() :

+ +
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. 

+ +

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 :

+ +
if(this.keys.left.isDown) {
+    this.ball.body.velocity.x -= this.movementForce;
+}
+else if(this.keys.right.isDown) {
+    this.ball.body.velocity.x += this.movementForce;
+}
+if(this.keys.up.isDown) {
+    this.ball.body.velocity.y -= this.movementForce;
+}
+else if(this.keys.down.isDown) {
+    this.ball.body.velocity.y += this.movementForce;
+}
+ +

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)

+ +

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 :

+ +
window.addEventListener("deviceorientation", this.handleOrientation, true);
+ +

L'ajout d'un évènement "listener" à l'évenement "deviceorientation" et la modification de la fonction handleOrientationressembleront à ceci :

+ +
handleOrientation: function(e) {
+    var x = e.gamma;
+    var y = e.beta;
+    Ball._player.body.velocity.x += x;
+    Ball._player.body.velocity.y += y;
+}
+ +

Plus l'appareil est incliné, plus la force appliquée à la balle et sa vélocité sont importantes.

+ +

+ +
+

Note : Pour en savoir plus sur l'implémentation de l'orientation du périphérique et sur le code brut, lisez Gardez-le au niveau : en réponse aux changements d'orientation du périphérique. 

+
+ +

Ajout du trou

+ +

L'objectif principal du jeu est de déplacer la balle du point de départ vers le point d'arrivée, qui est dans notre cas, un trou dans le sol. L'implémentation ressemble beaucoup à celle de la création de la balle et est ajoutée dans la fonction create() de l'état Game :

+ +
this.hole = this.add.sprite(Ball._WIDTH*0.5, 90, 'hole');
+this.physics.enable(this.hole, Phaser.Physics.ARCADE);
+this.hole.anchor.set(0.5);
+this.hole.body.setSize(2, 2);
+ +

La seule différence est que 'hole.body' est mis à immovable(fixe), il ne bougera donc pas quand la balle le touchera et la collision sera alors calculée ( ce point sera approfondit plus loin dans cet article ).

+ +

Création du mur du labyrinthe

+ +

Pour rendre le jeu plus difficile et plus intéressant, nous allons ajouter des obstacles entre la balle et la sortie. Nous pourrions utiliser un éditeur de niveau, mais pour ce tutoriel, créons quelque chose par nous-mêmes.

+ +

Pour conserver les informations du bloc, nous utiliserons un tableau de données de niveau : pour chaque bloc, nous stockons les positions absolues supérieure et gauche en pixels (x et y) et le type du bloc - horizontal ou vertical (t avec le 'w 'valeur signifiant largeur et' h 'signifiant hauteur). Ensuite, pour charger le niveau, nous allons analyser les données et afficher les blocs spécifiques à ce niveau. Dans la fonction initLevels, nous avons :

+ +
this.levelData = [
+    [
+        { x: 96, y: 224, t: 'w' }
+    ],
+    [
+        { x: 72, y: 320, t: 'w' },
+        { x: 200, y: 320, t: 'h' },
+        { x: 72, y: 150, t: 'w' }
+    ],
+    // ...
+];
+ +

Chaque élément de tableau contient une collection de blocs avec une position x et y et une valeur t pour chacun. Après levelData, mais toujours dans la fonction initLevels, nous ajoutons les blocs dans un tableau de la boucle for en utilisant certaines des méthodes spécifiques au framework :

+ +
for(var i=0; i<this.maxLevels; i++) {
+    var newLevel = this.add.group();
+    newLevel.enableBody = true;
+    newLevel.physicsBodyType = Phaser.Physics.ARCADE;
+    for(var e=0; e<this.levelData[i].length; e++) {
+        var item = this.levelData[i][e];
+        newLevel.create(item.x, item.y, 'element-'+item.t);
+    }
+    newLevel.setAll('body.immovable', true);
+    newLevel.visible = false;
+    this.levels.push(newLevel);
+}
+ +

Tout d'abord, add.group () est utilisé pour créer un nouveau groupe d'éléments. Ensuite, le type de corps ARCADE est défini pour ce groupe pour activer les calculs physiques. La méthode newLevel.create crée de nouveaux éléments dans le groupe avec les positions de départ haut et gauche et sa propre image. Si vous ne souhaitez pas parcourir à nouveau la liste des éléments pour ajouter explicitement une propriété à chacun d'eux, vous pouvez utiliser setAll sur un groupe pour l'appliquer à tous les éléments de ce groupe.
+
+ Les objets sont stockés dans le tableau this.levels, qui est ,par défaut, invisible. Pour charger des niveaux spécifiques, nous nous assurons que les niveaux précédents sont cachés et affichent le niveau actuel :

+ +
showLevel: function(level) {
+    var lvl = level | this.level;
+    if(this.levels[lvl-2]) {
+        this.levels[lvl-2].visible = false;
+    }
+    this.levels[lvl-1].visible = true;
+}
+ +

Grâce à cela, le jeu donne au joueur un défi : il doit maintenant rouler la balle à travers l'aire de jeu et la guider dans le labyrinthe construit à partir des blocs. C'est juste un exemple de chargement des niveaux, et il n'y a que 5, juste pour présenter l'idée, mais vous pouvez travailler à l'étendre par vous-même.

+ +

Détection de collision

+ +

À ce stade, nous avons la balle qui est contrôlée par le joueur, le trou à atteindre et les obstacles qui bloquent la route. Il y a un problème cependant : notre jeu n'a pas encore de détection de collision, donc il ne se passe rien quand la balle frappe les blocs, elle passe juste à travers. Réparons-le ! Les bonnes nouvelles sont que le cadre se chargera de calculer la détection de collision, il suffit de spécifier les objets en collision dans la fonction update () :

+ +
this.physics.arcade.collide(this.ball, this.borderGroup, this.wallCollision, null, this);
+this.physics.arcade.collide(this.ball, this.levels[this.level-1], this.wallCollision, null, this);
+ +

Cela dira à la structure d'exécuter la fonction wallCollision lorsque la balle frappe l'un des murs. Nous pouvons utiliser la fonction wallCollision pour ajouter toutes les fonctionnalités que nous voulons comme jouer le son du rebondissement et implémenter l'API Vibration.

+ +

Ajout de son

+ +

Parmi les éléments préchargés, il y avait une piste audio (dans différents formats pour la compatibilité avec les navigateurs), que nous pouvons utiliser maintenant. Il doit d'abord être défini dans la fonction create () :

+ +
this.bounceSound = this.game.add.audio('audio-bounce');
+ +

Si l'état de l'audio est true (vrai) (les sons du jeu sont activés), nous pouvons le jouer dans la fonction wallCollision:

+ +
if(this.audioStatus) {
+    this.bounceSound.play();
+}
+ +

C'est tout - charger et jouer les sons est facile avec Phaser.

+ +

Implementing the Vibration API

+ +

Lorsque la détection de collision fonctionne comme prévu, ajoutons quelques effets spéciaux avec l'aide de l'API Vibration.

+ +

+ +

La meilleure façon de l'utiliser dans notre cas est de faire vibrer le téléphone chaque fois que la balle frappe les murs, à l'intérieur de la fonction wallCollision :

+ +
if("vibrate" in window.navigator) {
+    window.navigator.vibrate(100);
+}
+ +

Si la méthode vibrate est prise en charge par le navigateur et disponible dans l'objet window.navigator, faites vibrer le téléphone pendant 100 millisecondes. C'est tout !

+ +

Ajout du temps écoulé

+ +

Pour améliorer la rejouabilité et donner aux joueurs l'option de rivaliser les uns avec les autres, nous pouvons introduire le temps écoulé. Grâce à cela, le joueur peut jouer les niveaux encore et encore en essayant d'améliorer son score. Pour implémenter cela dans le jeu, nous devons créer une variable pour stocker le nombre réel de secondes écoulées depuis le début du jeu et le montrer au joueur dans le jeu. Définissons d'abord la variable :

+ +
this.timer = 0; // time elapsed in the current level
+this.totalTimer = 0; // time elapsed in the whole game
+ +

Ensuite, juste après, nous pouvons initialiser les objets texte nécessaires à l'affichage de cette information pour l'utilisateur:

+ +
this.timerText = this.game.add.text(15, 15, "Time: "+this.timer, this.fontBig);
+this.totalTimeText = this.game.add.text(120, 30, "Total time: "+this.totalTimer, this.fontSmall);
+ +

Nous définissons les positions supérieure et gauche du texte, le contenu qui sera affiché et le style appliqué au texte. Nous l'avons imprimé à l'écran, mais il serait bon de mettre à jour les valeurs toutes les secondes :

+ +
this.time.events.loop(Phaser.Timer.SECOND, this.updateCounter, this);
+ +

Cette boucle, également dans la fonction create , exécutera la fonction updateCounter à chaque seconde du début du jeu afin que nous puissions appliquer les modifications en conséquence. Voici à quoi ressemble la fonction updateCounter complète :

+ +
updateCounter: function() {
+    this.timer++;
+    this.timerText.setText("Time: "+this.timer);
+    this.totalTimeText.setText("Total time: "+(this.totalTimer+this.timer));
+},
+ +

Comme vous pouvez le voir, nous incrémentons la variable this.timer et mettons à jour le contenu des objets texte avec les valeurs actuelles à chaque itération, de sorte que le joueur voit le temps écoulé.

+ +

Finition du niveau et du jeu

+ +

La balle tourne sur l'écran, le minutage fonctionne et nous avons le trou créé que nous devons atteindre. Maintenant, mettons en place la possibilité de finir le niveau ! La ligne suivante de la fonction update () ajoute un écouteur qui se déclenche lorsque la balle arrive au trou.

+ +
this.physics.arcade.overlap(this.ball, this.hole, this.finishLevel, null, this);
+ +

Cela fonctionne de la même manière que la méthode collide expliquée précédemment. Lorsque la balle chevauche le trou (au lieu de collision), la fonction finishLevel est exécutée :

+ +
finishLevel: function() {
+    if(this.level >= this.maxLevels) {
+        this.totalTimer += this.timer;
+        alert('Congratulations, game completed!\nTotal time of play: '+this.totalTimer+' seconds!');
+        this.game.state.start('MainMenu');
+    }
+    else {
+        alert('Congratulations, level '+this.level+' completed!');
+        this.totalTimer += this.timer;
+        this.timer = 0;
+        this.level++;
+        this.timerText.setText("Time: "+this.timer);
+        this.totalTimeText.setText("Total time: "+this.totalTimer);
+        this.levelText.setText("Level: "+this.level+" / "+this.maxLevels);
+        this.ball.body.x = this.ballStartPos.x;
+        this.ball.body.y = this.ballStartPos.y;
+        this.ball.body.velocity.x = 0;
+        this.ball.body.velocity.y = 0;
+        this.showLevel();
+    }
+},
+ +

Si le niveau actuel est égal au nombre maximum de niveaux (dans ce cas, 5), le jeu est terminé - vous recevrez un message de félicitations avec le nombre de secondes écoulées pendant toute la partie et un clique sur un bouton vous ramène au menu principal.

+ +

Si le niveau actuel est inférieur à 5, toutes les variables nécessaires sont réinitialisées et le niveau suivant est chargé.

+ +

Idées pour de nouvelles fonctionnalités

+ +

Ceci est simplement une démonstration de travail d'un jeu qui pourrait avoir beaucoup de fonctionnalités supplémentaires. Nous pouvons par exemple ajouter des "power-ups" à collecter en cours de route qui feront rouler notre balle plus rapidement, arrêter le chronomètre pendant quelques secondes ou donner à la balle des pouvoirs spéciaux pour traverser les obstacles. Il y a aussi de la place pour les pièges qui ralentiront la balle ou rendront le but plus difficile à atteindre. Vous pouvez créer plus de niveaux de difficulté croissante. Vous pouvez même mettre en œuvre des trophées, des classements et des médailles pour différentes actions du jeu. Il y a des possibilités infinies - elles ne dépendent que de votre imagination.

+ +

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 et consulter son code source sur GitHub.

+ +

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 qui méritent d'être considérés aussi, comme ImpactJS, Construct 2 ou PlayCanvas — 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.

diff --git a/files/fr/games/tutorials/index.html b/files/fr/games/tutorials/index.html deleted file mode 100644 index cb07031e7a..0000000000 --- a/files/fr/games/tutorials/index.html +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: Workflows for different game types -slug: Games/Tutorials -tags: - - Canvas - - JavaScript - - Jeux - - Web -translation_of: Games/Tutorials -original_slug: Games/Workflows ---- -
{{GamesSidebar}}

 

- -
{{IncludeSubnav("/fr/docs/Jeux")}}
- -

Cette page contient plusieurs séries de tutoriels qui mettent en évidence différentes démarches pour créer efficacement différents types de jeux Web.

- -
-
Jeu 2D avec du pur JavaScript
-
Dans ce tutoriel étape par étape, vous implémenterez un jeu en utilisant du pur JavaScript. En cours de route, vous apprendrez les bases de l'utilisation de l'élément {{htmlelement ("canvas")}} pour implémenter les mécanismes fondamentaux du jeu tels que le rendu et les images en mouvement, la détection de collision, les mécanismes de contrôle et les états gagnants et perdants.
-
Jeu 2D avec Phaser
-
Dans ce tutoriel étape par étape, vous implémenterez un jeu en utilisant le framework de jeu HTML5 Phaser . Cette idée ici est d'enseigner quelques-uns des fondamentaux (et des avantages) de travailler avec des cadres (frameworks), avec les mécanismes de jeu.
-
Jeu 2D avec API Device orientation
-
Ce tutoriel montre comment créer un jeu de labyrinthe en 2D en utilisant HTML5, en intégrant des principes fondamentaux tels que la détection de collision et le placement de "sprites" sur un {{htmlelement ("canvas")}}. Il s'agit d'un jeu mobile qui utilise les API Device Orientation et Vibration, pour améliorer le gameplay, et est construit en utilisant le framework Phaser .
-
Jeu de plateforme 2D avec Phaser
-
Cette série de tutoriels montre comment créer un jeu de plateforme simple à l'aide de Phaser , couvrant les fondamentaux tels que les "sprites", les collisions, la physique, les objets de collection et plus encore.
-
- -

 

diff --git a/files/fr/games/tutorials/index.md b/files/fr/games/tutorials/index.md new file mode 100644 index 0000000000..cb07031e7a --- /dev/null +++ b/files/fr/games/tutorials/index.md @@ -0,0 +1,29 @@ +--- +title: Workflows for different game types +slug: Games/Tutorials +tags: + - Canvas + - JavaScript + - Jeux + - Web +translation_of: Games/Tutorials +original_slug: Games/Workflows +--- +
{{GamesSidebar}}

 

+ +
{{IncludeSubnav("/fr/docs/Jeux")}}
+ +

Cette page contient plusieurs séries de tutoriels qui mettent en évidence différentes démarches pour créer efficacement différents types de jeux Web.

+ +
+
Jeu 2D avec du pur JavaScript
+
Dans ce tutoriel étape par étape, vous implémenterez un jeu en utilisant du pur JavaScript. En cours de route, vous apprendrez les bases de l'utilisation de l'élément {{htmlelement ("canvas")}} pour implémenter les mécanismes fondamentaux du jeu tels que le rendu et les images en mouvement, la détection de collision, les mécanismes de contrôle et les états gagnants et perdants.
+
Jeu 2D avec Phaser
+
Dans ce tutoriel étape par étape, vous implémenterez un jeu en utilisant le framework de jeu HTML5 Phaser . Cette idée ici est d'enseigner quelques-uns des fondamentaux (et des avantages) de travailler avec des cadres (frameworks), avec les mécanismes de jeu.
+
Jeu 2D avec API Device orientation
+
Ce tutoriel montre comment créer un jeu de labyrinthe en 2D en utilisant HTML5, en intégrant des principes fondamentaux tels que la détection de collision et le placement de "sprites" sur un {{htmlelement ("canvas")}}. Il s'agit d'un jeu mobile qui utilise les API Device Orientation et Vibration, pour améliorer le gameplay, et est construit en utilisant le framework Phaser .
+
Jeu de plateforme 2D avec Phaser
+
Cette série de tutoriels montre comment créer un jeu de plateforme simple à l'aide de Phaser , couvrant les fondamentaux tels que les "sprites", les collisions, la physique, les objets de collection et plus encore.
+
+ +

 

-- cgit v1.2.3-54-g00ecf