Tutoriel : coder son propre jeu de tir

Score : 0

Pour réaliser ce jeu, il est nécessaire d'utiliser un éditeur en ligne de code (comme celui de W3Schools) ou son propre éditeur desktop (comme VSCode).

Étape préliminaire : corps du jeu en HTML/CSS

Pour que notre jeu s'affiche sur une page web comme ci-dessus, il faut commencer par créer la colonne vertébrale du jeu en HTML et CSS. Pour cela, recopier le code ci-dessous :

          <!DOCTYPE html>
          <html></html>
          <head></head>
              <meta charset="utf-8" ></meta charset="utf-8" >
              <title>Game JS</title>
              <style></style>
                  * { padding: 0; margin: 0; }
                  canvas { background: #eee; display: block; margin: 0 auto; }
                  button { display: block; margin: 0 auto; }
                  h2 { text-align: center; }


          <body></body>
          ‍
          <canvas id="mycanvas" width="500" height="500"><button onclick="restartgame()">Lancer le jeu</button onclick="restartgame()"></canvas id="mycanvas" width="500" height="500">
          <h2>Score : <span id="score">0</span id="score"></h2>
          <script></script>
        

Sans rentrer trop dans le détail, le langage HTML est structuré en balises délimitées par les symboles <>. La partie comprise dans les balises <head> ne sont pas très intéressantes pour notre cours.</head>

Trois éléments nous intéressent :

1 - <canvas> représente notre aire de dessin, c'est ici que nous allons dessiner notre jeu. Vous pouvez changer la taille du canvas en modifiant les valeurs "width" et "height".</canvas>

2 - <button> est le bouton nous permettant de lancer le jeu. Celui-ci exécute la fonction "restartGame" qui sera décrite dans la suite de ce cours.</button>

3 - <h2> fait office de score. On modifiera le nombre affiché à chaque fois que le joueur tue un ennemi.</h2>

Enfin, le plus important est la balise <script> : nous allons écrire l'intégralité du jeu ici.</script>

Etape 1 : Dessiner le joueur

La première chose que l'on souhaite faire est de dessiner le joueur. Pour cela, on va utiliser le code suivant et le recopier entre les balises <script> et </script> :

          let canvas = document.getElementById("myCanvas");
          let ctx = canvas.getContext("2d");
          ‍
          function drawPlayer(){
                  ctx.beginPath();
                  ctx.arc(canvas.width/2, canvas.height/2, 10, 0, 2*Math.PI);
                  ctx.fillStyle = "white";
                  ctx.fill();
                  ctx.strokeStyle = "black";
                  ctx.stroke();
                  ctx.closePath();
              }
          ‍
          drawPlayer();
        

Les deux premières lignes stockent respectivement dans les variables "canvas" et "ctx" le canvas et son contexte.
À la ligne suivante, on crée la fonction drawPlayer() qui va nous permettre de dessiner le joueur. Celle-ci est exécutée en dernière ligne.

Que fait cette fonction ? C'est assez simple en réalité : elle dessine !

1) Pour cela, on doit commencer et finir chaque dessin de notre canvas par les instructions beginPath() et closePath().

2) On commence par tracer un cercle avec la fonction arc(x, y, rayon, angle_début, angle_fin) en le plaçant au milieu du canvas avec un rayon de 10px.

3) Puis on le colorie en blanc avec les deux lignes suivantes.

4) Enfin, on dessine son contour en noir avec les fonctions stroke().

Vous devriez obtenir le résultat suivant :

Jeu avec le joueur Et voici l'intégralité du code jusqu'à présent :

Exemple jeu 1
          <!DOCTYPE html>
          <html></html>
          <head></head>
          <meta charset="utf-8">
          <title>Game JS</title>
          <style></style>
                 * { padding: 0; margin: 0; }
                 canvas { background: #eee; display: block; margin: 0 auto; }
                 button { display: block; margin: 0 auto; }
                 h2 { text-align: center; }


          <body></body>
          ‍
          <canvas id="myCanvas" width="500" height="500"></canvas>
          <button onclick="restartGame()">Lancer le jeu</button>
          <h2>Score : <span id="score">0</span></h2>
          <script></script>

          let canvas = document.getElementById("myCanvas");
          let ctx = canvas.getContext("2d");
          ‍
          function drawPlayer(){
                  ctx.beginPath();
                  ctx.arc(canvas.width/2, canvas.height/2, 10, 0, 2*Math.PI);
                  ctx.fillStyle = "white";
                  ctx.fill();
                  ctx.strokeStyle = "black";
                  ctx.stroke();
                  ctx.closePath();
              }
          ‍
          drawPlayer();
        

Etape 2 : Faire apparaitre les ennemis

Maintenant que notre joueur est placé, on a envie de faire apparaître des ennemis. Les ennemis doivent apparaître selon différents critères :

‍ 1) régulièrement : chaque seconde par exemple

2) aléatoirement sur un bord de l'écran

‍ 3) à des tailles, couleurs et vitesses aléatoires

Dans cette première partie, on ne s'occupera pas de faire déplacer les ennemis, uniquement de les faire apparaître.

Pour cela, nous allons utiliser de la programmation dite "orientée objet". Pas de panique cependant, c'est quelque chose d'assez simple !

En JavaScript, on peut présenter un objet de cette façon :

          function Ennemy() {
              this.x = 0;
              this.y = 0;
              this.spawnX = 0;
              this.spawnY = 0;
              this.radius = 0;
              this.color = "red";
              this.speed = 0;
              this.alive = true;
          }
        

Ici on a créé une nouvelle classe Ennemy qu'on pourra utiliser pour créer plein d'ennemis ! En-dessous se trouve les attributs de cette classe, c'est-à-dire les variables propres à chaque ennemi.

En détail :

- x : position horizontale
- y : position verticale
- spawnX : position d'apparition horizontale
- spawnY : position d'appartion verticale
- radius : le rayon (= la taille)
- color : la couleu
- speed : la vitesse
- alive : booléen qui précise si l'ennemi est vivant ou mort

Les valeurs par défaut n'ont pas d'importance.

Maintenant, on va créer des méthodes (= des fonctions propres à notre classe). La première doit permettre de dessiner l'ennemi :

          function Ennemy() {
              this.x = 0;
              this.y = 0;
              this.spawnX = 0;
              this.spawnY = 0;
              this.radius = 0;
              this.color = "red";
              this.speed = 0;
              this.alive = true;

              this.spawn = function(){
                  ctx.beginPath();
                  ctx.arc(this.spawnX, this.spawnY, this.radius, 0, 2*Math.PI);
                  ctx.fillStyle = this.color;
                  ctx.fill();
                  ctx.closePath();
                  this.x = this.spawnX;
                  this.y = this.spawnY;
              }
          }
        

Notre première classe, appelée "spawn" permet de dessiner notre ennemi en fonction de ses attributs. Si vous observez bien, vous reconnaissez la fonction qui permet de dessiner le joueur vue à la partie précédente ! En effet, le principe est exactement le même sauf qu'on utilise les attributs de chaque ennemi.

Le problème c'est que pour l'instant tous nos ennemis seront générés au même endroit avec la même taille et la même couleur. On veut donc rajouter de l'aléatoire.

Pour cela, on crée une fonction intermédiaire appelée "entierAleatoire()" qui va nous permettre de générer un nombre aléatoire entre deux nombres de notre choix. Cette fonction doit être placer en-dehors de la classe.

          function entierAleatoire(min, max){
          return Math.floor(Math.random() * (max - min + 1)) + min;
          }
        

On peut maintenant créer notre nouvelle méthode appelée "init" pour notre classe Ennemy !

          function Ennemy() {
              this.x = 0;
              this.y = 0;
              this.spawnX = 0;
              this.spawnY = 0;
              this.radius = 0;
              this.color = "red";
              this.speed = 0;
              this.alive = true;

              this.spawn = function(){
                  ctx.beginPath();
                  ctx.arc(this.spawnX, this.spawnY, this.radius, 0, 2*Math.PI);
                  ctx.fillStyle = this.color;
                  ctx.fill();
                  ctx.closePath();
                  this.x = this.spawnX;
                  this.y = this.spawnY;
              }

              this.init = function(){
                  spawnSide = entierAleatoire(0,3); // 0:haut,1:droite,2:bas,3:gauche
                  spawnCoord = entierAleatoire(0,canvas.width);
                  switch (spawnSide) {
                      case 0:
                          this.spawnX = spawnCoord;
                          this.spawnY = 0;
                          break;

                      case 1:
                          this.spawnX = canvas.width;
                          this.spawnY = spawnCoord;
                          break;
          ‍
                      case 2:
                          this.spawnX = spawnCoord;
                          this.spawnY = canvas.height;
                          break;
          ‍
                      case 3:
                          this.spawnX = 0;
                          this.spawnY = spawnCoord;
                          break;
                          }
          ‍
                  this.radius = entierAleatoire(7,25);
          ‍
                  let possibleColor = ["red", "blue", "green", "orange", "purple", "pink", "yellow"];
                  this.color = possibleColor[entierAleatoire(0,possibleColor.length-1)];
          ‍
                  this.speed = Math.random()*0.01;
              }
          }
        

Sans rentrer dans le détail, on utilise un switch et notre fonction "entierAléatoire()" pour faire apparaître notre ennemi sur un des côté du canvas (haut, bas, gauche ou droite) à un endroit aléatoire. Selon le côté choisi, une des coordonnées est fixée (soit x, soit y), il suffit donc de choisir un nombre aléatoire pour l'autre coordonnée restante.

Le rayon est choisi aléatoirement entre 7 et 25 px.

La couleur est choisie parmi une liste de couleurs possible. Libre à vous d'en rajouter !

La vitesse (qui servira pour l'étape suivante) est elle aussi aléatoire, comprise entre 0 et 0.01.