Flyers Blog

Réaliser un Pong en HTML 5 – Animer le plateau

07 nov

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

Introduction

Cet article présente comment réaliser un Pong à l’aide de la technologies HTML 5. Il s’inscrit dans la suite du précédent article sur comment mettre en place le moteur de jeu : « Réaliser un Pong en HTML 5 – Game structure« . Dans le présent article nous allons voir comment mettre en place notre boucle d’animation et comment faire bouger notre balle.

La game loop

Pour mettre en place notre game loop nous allons utiliser la fonction Javascript setTimeout qui permet d’appeler une fonction après x millisecondes d’attente. Elle prend en premier argument, la fonction a appeler puis en deuxième argument le temps à attendre et enfin il existe un dernier argument optionnel correspondant à l’argument à passer à la fonction.

Bien, nous savons maintenant comment un appel différé à une fonction. Et que se passe-t-il si nous faisons un appel récursif de fonction ? Prenons l’exemple de la fonction foo. Au sein de celle-ci, nous avons un setTimeout(foo,30). Et bien notre fonction sera appelée en continue toutes les 30 millisecondes.

Voila, vous savez maintenant créer une boucle d’animation. Malheureusement les choses étant ce qu’elles sont en Javascript, il n’est pas possible de faire un appel récursif dans un objet sur ce même objet. Pour cela on utilise un trick : la fonction anonyme. Comment ça marche ? Et bien nous allons passer en argument à notre fonction anonyme (d’on la portée est globale, contrairement à l’objet courant) l’objet courant pour pouvoir appeler notre boucle d’animation.

Voici ce que cela donne pour notre jeu de Pong :

$(document).ready(function() {
   var canvas = document.getElementById("game");
   var ctxt = canvas.getContext("2d");

   var myGame = new GameEngine(ctxt);
   myGame.init();
   // appel de notre boucle d'animation
   myGame.loop();
});

function GameEngine(ctxt) {

   this.ctxt = ctxt;

   this.init = function() {
      $("#game").attr("width",this.plato.mx+"px");
      $("#game").attr("height",this.plato.my+"px");
   }

   // boucle d'animation
   this.loop = function() {
      // appel récursif en passant par une fonction anonyme
      setTimeout( function(obj){obj.loop();}, 30, this );
   }

};

Mettre à jour les positions

Maintenant que nous avons notre Game Loop, il nous faut mettre à jour les positions des éléments de notre jeu. J’ai nommé, les joueurs 1 et 2 ainsi que la balle. Pour cela il nous faut effacer notre canvas et redessiner l’ensemble de notre scène.

Pour cela nous utilisons nos objets P1, P2 et Ball permettant de connaître la position de tout un chacun de cette manière :

this.loop = function() {
	/* Clearing canvas */
	this.ctxt.clearRect(0, 0, this.plato.mx, this.plato.my);
	this.ctxt.width = this.ctxt.width;
	this.ctxt.font = "10pt Verdana";

	/* Drawing the Ball */
	this.ctxt.fillStyle = "rgba(255, 0, 0, 1)";
	this.ctxt.beginPath();
	this.ctxt.arc(this.Ball.x,this.Ball.y,this.Ball.circ,0,Math.PI*2,true);
	this.ctxt.closePath();
	this.ctxt.fill();

	/* Drawing players */
	this.ctxt.fillStyle = "rgba(0,0,0,.5)";
	this.ctxt.fillRect(this.P1.x,this.P1.y,this.P1.width,this.P1.height);

	this.ctxt.fillStyle = "rgba(0,0,0,.5)";
	this.ctxt.fillRect(this.P2.x,this.P2.y,this.P2.width,this.P2.height);

	if (this.play)
	{
		this.physics();
		if ( this.opts.players < 2 )
			this.ia();

		/* Drawing text */
		this.ctxt.fillText("Playing", parseInt(this.plato.mx/2)-5, 10);
	}
	else
	{
		/* Drawing text */
		this.ctxt.fillText("Paused", parseInt(this.plato.mx/2)-5, 10);
	}
	setTimeout( function(obj){obj.loop();}, 30, this );
}

A noter la présence de la variable this.play qui permet à l’aide de la touche espace de mettre ou non en pause notre jeu. Nous pouvons voir que nous avons dans cette fonction un appel à la fonction this.physics qui s’occupe d’appliquer les effets physiques à notre plateau et la fonction this.ia qui est chargé de l’intelligence artificielle. Ces fonctions seront présentées dans un prochain article.

Conclusion

Vous avez maintenant la base de votre game engine. Dans le cadre de cet article, nous utilisons des éléments graphiques simplistes (rectangles et rond) mais il est tout à fait possible de placer des éléments plus complexes appelés sprites. Mais il s’agit d’une autre histoire, qui fera peut-être l’objet d’un article sur ce blog .

Dans la suite nous vous présenterons comment mettre en place de le moteur physique de notre Pong et enfin l’Intelligence Artificielle.

See you soon