Flyers Blog

Réaliser un Pong en HTML 5 – IA

17 nov

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

Introduction

Bonjour, cet article présente comment réaliser une Intelligence Artificielle basique pour un jeu de Pong en HTML 5. Il s’inscrit dans la suite de l’article « Réaliser un Pong en HTML 5 – Physics« .

Théorie

Ce qui est intéressant lors de la réalisation d’un jeu de Pong c’est que l’Intelligence Artificielle est réellement basique, ce qui en fait une très bonne initiation à la programmation de jeux en HTML 5.

Le fonctionnement de l’IA dans un Pong consiste à réceptionner du mieux possible la balle. Pour cela il faut que la balle soit entre les extrémités du pavé. Il nous faut simplement vérifier que la balle est bien comprise, sur l’axe Y, entre les extrémités du joueur et déplacer le pavé en conséquence, comme le montre le schémas qui suit :

Application

Dans l’application cela se fait simplement en prenant la coordonnées actuelle sur Y du joueur et de la comparée avec la coordonnée Y de la balle. Si celle-ci est au-dessus du pavé, on le fait monter de 10 pixels et s’il est au-dessous du pavé, on le fait descendre de 10 pixels :

this.ia = function() {
   if ( this.Ball.y < this.P2.y)
      this.P2.y -= 10;
   else if ( this.Ball.y > this.P2.y+this.P2.height)
      this.P2.y += 10;
}

 

Conclusion

Voici donc comment réaliser une intelligence artificielle pour un jeu de type Pong. Vous pouvez voir le résultat à cette adresse : lab.flyers-web.org. Nous verrons dans un prochain article comment intégrer un menu pour choisir le nombre de joueurs et ensuite comment mettre en place un mode multijoueur avec les Websockets.

See you