Flyers Blog

Réaliser un Pong en HTML 5 – Game structure

03 nov

FlyersJeux, Programmation canvas, html5, jeux, multimédia, pong, programmation, tutoriel, web pas de commentaire

Introduction

Dans la continuité de l’article « Réalisation d’un Pong en HTML – Element Canvas« , je vais vous présentez comment les bases du fonctionnement d’un jeu vidéo.

Dans le cas d’un jeu de plateforme, nous allons avoir 3 phases présente sur l’ensemble des jeux :

- La gestion du clavier pour l’animation des éléments du joueur
- La game loop où l’animation des éléments non jouable se fera
- La gestion de la physique pour avoir un jeu réaliste

Nous créons donc une classe Javascript pour représenter cet objet :

function GameEngine(ctxt) {
this.ctxt = ctxt;
this.play = true;
this.plato = {mx: 400, my: 300};
this.P1 = {x:0, y:0, width: 20, height: this.plato.my/3};
this.P2 = {x:this.plato.mx-20, y:0, width: 20, height: this.plato.my/3};

/* Initialisation : forcé la taille du plateau */
this.init = function() {
  $("#game").attr("width",this.plato.mx+"px");
  $("#game").attr("height",this.plato.my+"px");
}
/* Gestion du clavier */
this.handleKey = function(e) { }
/* Game loop */
this.loop = function(ctxt) {
this.physics();
}
/* Game physics */
this.physics = function() {}
}

Nous avons donc notre ossature de jeu. Il nous faut ensuite instancier notre objet pour pouvoir l’utiliser comme il se doit :

La gestion du clavier

Dans le cas de notre jeu de Pong la gestion du clavier sera là pour bouger les briques de droite et de gauche en fonction des boutons.

Pour cela on a choisi que le joueur de gauche sera contrôlé par Z et S et celui de droite par ↑ et ↓. Comme présenter sur le dessin suivant :

Pour capturer les évènements du clavier on utilise la fonction JQuery keydown. En écoutant du l’élément $(document) nous recevons les touches appuyées par l’utilisateur :

$(document).keydown( function(e) { myGame.handleKey(e); } );

Il nous suffit ensuite de déplacer les éléments en fonction de la touche appuyée :

this.handleKey = function(e) {
   var Keys = {UP: 38, DOWN: 40, LEFT: 37, RIGHT: 39, Z: 90, S: 83, Q: 81, D: 68, SP: 32}
   switch( e.which ) {
      case Keys.UP :
         if ( this.P1.y > 0 )
         this.P1.y -= 10;
      break;
      case Keys.DOWN :
         if ( this.P1.y+this.P1.height < this.plato.my )
         this.P1.y += 10;
      break;
      case Keys.Z :
         if ( this.P2.y > 0 )
         this.P2.y -= 10;
      break;
      case Keys.S :
         if ( this.P2.y+this.P2.height < this.plato.my )
         this.P2.y += 10;
      break;
      case Keys.SP :
         if ( this.play )
           this.play = false;
         else
           this.play = true;
      break;
   }
}

La variable Keys nous permet de définir des constante au lieu de traiter le numéro de touche appuyée. Ainsi donc, la touche ↑ a le code 38, la touche ↓ a le code 40, etc…

Donc en fonction de la touche appuyée, nous déplaçons l’élément player 1 (joueur de gauche) de 10 sur l’axe y. Nous faisons de même pour le player 2 (joueur de droite) pour Z et S.

Conclusion

Vous savez à présent comment déplacer vos joueurs sur le plateau. Nous verrons dans le prochain article comment réaliser un moteur physique rudimentaire pour animer notre plateau de jeu.

See you soon.