Berzerk revival html5 canvas Part II

 

Nous rentrons dans le dur du code html5 javascript. Un petit rappel que ce qu’est le jeu Berzerk : un jeu vidéo dans lequel le joueur se déplace de pièces en pièces regorgeant de robots assassins.

Avant de commencer

Je vous invite à initialiser votre projet. Pour les débutants, il suffit de le faire en suivant l’article Initialiser un projet de jeu vidéo javascript html5.

Modéliser une pièce du jeu

Si vous avez jeter un œil à la vidéo du jeu vidéo dans le précédent article Berzerk revival, vous avez probablement vu des pièces représentées sommairement avec des murs. Un labyrinthe en quelque sorte.

Nous allons dès à présent modéliser ces fameux labyrinthes par le biais d’un lecteur / afficheur.

Ce lecteur / afficheur prend la forme d’une fonction javascript qui va lire une structure de données json puis l’afficher.

La structure de données json avant lecture pour affichage, le signe # représente un mur, la lettre E représente les différents robots ennemis qui poursuivront le joueur.

let walls = {
  0:  "                    ",
  1:  "              #     ",
  2:  "              #     ",
  3:  "                    ",
  4:  "        E           ",
  5:  "                    ",
  6:  "              #     ",
  7:  "         #    #     ",
  8:  "         #    #     ",
  9:  "  E           #  P  ",
  10: "              #     ",
  11: "         #    #     ",
  12: "         #    #     ",
  13: "         #####      ",
  14: "                    ",
  15: "              ####  ",
  16: "    #####       E    ",
  17: "              #     ",
  18: "              #     ",
  19: "                    "
}

Représenté par cette structure, il va être facile pour le développeur de modifier le labyrinthe, d’en créer différents. En se projetant plus loin dans le projet, cette structure devrait permettre aussi de créer un éditeur de niveau.

Déclarez cette structure dans le fichier game.html côté javascript.

Afficher la pièce modélisée

La structure de données json créées, il faut maintenant lui donner un réalité visible, l’afficher.

En javascript, l’usage du composant canvas html5 pour coder des jeux vidéo est fortement conseillé.

Un bref rappel pour vous dire que le canvas html5 pourrait s’apparenter à une feuille de papier à dessin posée sur l’écran et qu’il est possible de superposer les feuilles (canvas html5) les unes sur les autres selon les besoins du codeur de jeux vidéo. Pour en savoir plus, lisez le tutoriel html5 canvas

Donc pour afficher notre labyrinthe, nous avons besoin d’un canvas html5 qu’il faut initialiser.

Par soucis de simplicité, nous déclarons le canvas html5 dans le code html en lui donnant un nom (theCanvas), une taille de 800 pixels sur 600 puis pour rendre visible son contour on ajoute une style qui affiche un bord noir de 1 pixel de large.

<body>
 <canvas id="theCanvas" width="800" height="600"  style="border: 1px solid #000000;">
  Votre navigateur ne supporte pas le Canvas HTML5
 </canvas>
</body>

Nous initialisons une variable canvasGameContext qui reprend le canvas html5 créé précédemment et en soutire son contexte 2D.

let canvasGameContext = document.getElementById("theCanvas").getContext('2d') ;

Mais aussi d’éléments graphiques pour représenter les murs et les ennemis. Je choisis arbitrairement un carré gris pour chaque élément mur et un carré rouge pour chaque ennemi.

Pour ce faire, nous créons une fonction showSquare qui dessine un carré dans un canvas html5 d’une couleur choisie, à une position choisie. Ces informations sont passées en paramètre de la fonction.

 let showSquare = function(canvasContext,color,x,y) {
  canvasContext.beginPath();
  canvasContext.rect(x*30,y*30,30,30);
  canvasContext.fillStyle = color;
  canvasContext.fill();
  canvasContext.stroke();
 }

Puis nous créons une fonction qui dessine un mur showWall et une autre un ennemi showEnemy. Ces deux fonctions appellent la fonction qui dessine un carré.

 let  showWall = function(canvasContext,x,y) {
  showSquare(canvasContext,"grey",x,y);
 }
	
 let showEnemy = function(canvasContext,x,y) {
  showSquare(canvasContext,"red",x,y);
 }

Il reste à balayer la structure de données du labyrinthe pour afficher les murs et les ennemis.

Cette fonction lit la structure de données ligne par ligne, lorsqu’elle :
– rencontre un vide, elle n’affiche rien;
– rencontre un caractère #, elle affiche un mur en appelant la fonction showWall;
– rencontre un caractère E, elle affiche un ennemi en appelant la fonction showEnemy.

 let initGameGrid = function() {
  for(let i in walls)  {
   let line = walls[i];
   let element = line.split("");
   for(let j in element)  {
    if ( element[ j ] == "#" ) {
     showWall(canvasGameContext,j,i);
    } else if ( element[ j ] == "E" ) {
     showEnemy(canvasGameContext,j,i);
     element[ j ] = " ";
    }
   }
  }
 }

Le résultat

Le code complet

Si vous souhaitez obtenir le code source complet, je vous invite à faire un vrai commentaire avec vos remarques, vos appréciations constructives à la suite desquels je vous enverrai personnellement les fichiers.

Conclusion

Le labyrinthe s’affiche, il reste maintenant à installer le joueur, bouger les ennemis (vers le joueur), puis les doter d’un fusil laser.

 

Si vous avez aimé cet article, partagez le.

 

Des remarques, des améliorations, des idées, des coquilles : dites le. Faites savoir si cet article vous a été utile par un commentaire ou les réseaux sociaux.

 

Posté dans cordova, javascript / html5Tagged berzerk stern, berzerk videogame, cordova, HTML5, javascript  |  Laisser un commentaire

Répondre