Coder le jeu video html5 pong – Intelligence Artificielle




 

Huitième partie consacrée au développement d’un jeu vidéo html5 javascript. L’objectif du jour est de gérer l’intelligence artificielle de l’adversaire et notamment son déplacement.


 

Prérequis

Avoir lu les tutoriaux suivants :
– l’initialisation du projet Coder le jeu vidéo Pong;
– la mise en place de l’environnement du jeu constitué du terrain, du filet, des raquettes, de la balle et du score Coder le jeu vidéo Pong – Raquettes et Balle;
– l’animation de la balle Coder le jeu vidéo Pong – Animer la balle;
– le contrôle de la raquette par le joueur à l’aide du clavier Coder le jeu vidéo Pong – Animer les raquettes;
– le contrôle de la raquette par le joueur à l’aide de la souris Coder le jeu vidéo Pong – Controle à la souris;
– le renvoi de la balle par les raquettes Coder le jeu video html5 pong – Renvoi de la balle;
– l’ajout du son lorsque la balle cogne un mur ou une raquette Coder le jeu vidéo Pong – Ajout du son.

 

Le principe

La raquette IA désigne la raquette dirigée par l’intelligence artificielle.

Rien de très complexe en terme d’intelligence artificielle pour un jeu comme Pong. Pour commencer, vous devez gérer deux cas :
– lorsque la balle se dirige vers la raquette IA (de la gauche vers la droite);
– lorsque la balle se dirige en sens inverse de la direction de la raquette IA (de la droite vers la gauche).

Lorsque la balle se dirige vers la raquette IA, l’IA doit chercher à renvoyer la balle. Elle doit donc suivre le mouvement de la balle :
– lorsque la balle monte, l’IA dirige sa raquette vers le haut;
– lorsque la balle descend, l’IA dirige sa raquette vers le bas.

Lorsque la balle se dirige en sens inverse, l’IA doit ramener sa raquette au centre du terrain

 

Le code javascript

La première chose à déterminer est le sens dans laquelle la balle se dirige afin de gérer les deux cas présentés précédemment.

Voici le code dédié au déplacement de la balle :

move : function() {
  this.posX += this.directionX * this.speed;
  this.posY += this.directionY * this.speed;
}

Pour le déplacement, ce code utilise deux propriétés de l’objet ball sur chacun des axes (horizontal abscisse X et vertical ordonnée Y) que sont directionX et directionY.

directionX indique le sens de la balle sur l’axe des abscisses et directionY sur l’axe des ordonnées.

La valeur 1 indique un déplacement dans le sens positif de l’axe : de la gauche vers la droite sur l’axe horizontal et du haut vers le bas sur l’axe vertical.

La valeur -1 indique un déplacement dans le sens négatif de l’axe : de la droite vers la gauche sur l’axe horizontal et du bas vers le haut sur l’axe vertical.

C’est à partir de la propriété directionX que vous allez déterminer quand l’intelligence artificielle va suivre la balle et quand l’intelligence artificielle va se recentrer :
directionX à 1, la balle vient vers la raquette de l’intelligence artificielle : l’intelligence artificielle suit la balle;
directionX à -1, la balle va vers le joueur : l’intelligence artificielle se recentre sur le terrain.

Pour gérer l’intelligence artificielle, je vous propose de créer le namespace javascript dédié game.ai.

Créez un nouveau fichier nommé game.ai.js en y intégrant le code suivante :

game.ai = {
}

Dans ce namespace javascript dédié au jeu html5 pong, ajoutez
les propriétés player et ball:

game.ai = {
  player : null,
  ball : null
}

Pourquoi ajouter ces 2 propriétés alors qu’elles existent dans le namespace javascript game ?
Par simple soucis de lisibilité du code ainsi qu’une volonté de minimiser les couplages.

Les propriétés player et ball étant nulles à l’initialisation, il convient de créer une méthode dédiée à leur initialisation :

game.ai = {
  player : null,
  ball : null,

  setPlayerAndBall : function(player, ball) {
    this.player = player;
    this.ball = ball;
  }
}

Ceci fait, il reste à déterminer une fonction qui assure le déplacement par l’intelligence artificielle.

game.ai = {
  player : null,
  ball : null,
  ....
  move : function() {
  }
}

Cette méthode va déterminer quand l’intelligence artificielle se recentre et quand elle suit la balle conformément à la stratégie choisie au début de cet article : l’IA suit la balle quand elle s’approche, l’IA se recentre lorsqu’elle s’éloigne.

Souvenez vous que le sens de la balle détermine le mouvement de l’IA. S’ajoute aussi la position du joueur : à gauche ou à droite.

Pour cela, ajoutez une propriété aux objets player (playerOne et playerTwo) indiquant la position du joueur :

var game = {
  ...
  playerOne : {
    width : 10,
    height : 50,
    color : "#FFFFFF",
    posX : 30,
    posY : 200,
    goUp : false,
    goDown : false,
    originalPosition : "left"
  },
    
  playerTwo : {
    width : 10,
    height : 50,
    color : "#FFFFFF",
    posX : 650,
    posY : 200,
    goUp : false,
    goDown : false,
    originalPosition : "right"
  },
  ....
}

playerOne est le joueur de gauche d’où originalPosition : « left ».
playerTwo est le joueur de droite d’où originalPosition : « right ».

Ainsi il est possible de choisir en IA soit le playerOne, soit playerTwo.

Deux mouvements sont possibles :
– suivre la balle;
– se recentrer.

Créez deux méthodes dédiées à ces deux mouvements au sein du namespace game.ai, followBall et goCenter.

game.ai = {
  player : null,
  ball : null,

  setPlayerAndBall : function(player, ball) {
    this.player = player;
    this.ball = ball;
  },
	
  move : function() {
  },

  followBall : function() {
  },

  goCenter : function() {
  }
}

Ces deux fonctions seront appelées depuis la fonction move selon le sens de déplacement de la balle par rapport à la raquette.

game.ai = {
  ....	
  move : function() {
    if ( this.ball.directionX == 1 ) {
      if ( this.player.originalPosition == "right" ) {
        // follow
        this.followBall();
      }
      if ( this.player.originalPosition == "left" ) {
        // center
        this.goCenter();
      }		
    } else {
      if ( this.player.originalPosition == "right" ) {
        // center
        this.goCenter();
      }
      if ( this.player.originalPosition == "left" ) {
        // follow
        this.followBall();
      }	
    }
  },
  ....
}

Il ne reste plus qu’à définir les deux fonction followBall et goCenter.

Pour followBall (suivre la balle), le principe va être de regarder quelle est la position de la raquette par rapport à la balle :
– si la raquette est en dessous, la raquette doit monter;
– si la raquette est au dessus, la raquette doit descendre.

Ce qui donne en javascript :

game.ai = {
  ....	
  followBall : function() {
    if ( this.ball.posY < this.player.posY + this.player.height/2 ) {
      // la position de la balle est sur l'écran, au dessus de celle de la raquette
      this.player.posY--;
    } else if ( this.ball.posY > this.player.posY + this.player.height/2 ) {
      // la position de la balle est sur l'écran, en dessous de celle de la raquette
      this.player.posY++;
    }
  },
  ....
}

Pour goCenter (aller eu centre), le principe va être de regarder quelle est la position de la raquette par rapport à la centre du terrain :
– si la raquette est en dessous, la raquette doit monter;
– si la raquette est au dessus, la raquette doit descendre.

Ce qui donne en javascript :

game.ai = {
  ....	
  goCenter : function() {
    if ( this.player.posY + this.player.height/2 > game.groundHeight / 2 ) {
      this.player.posY--;
    } else if ( this.player.posY + this.player.height/2 < game.groundHeight / 2 ) {
      this.player.posY++;
    }
  }
  ....
}

N’oubliez pas d’ajouter le fichier game.ai.js en dépendance javascript dans le fichier html, d’initialiser dans la fonction init les objets player et ball du namespacegame.ai, mais aussi de faire appel à la fonction move dans la boucle principale :

  init : function() {
    ....
    this.wallSound = new Audio("./sound/wall.ogg");
    this.playerSound = new Audio("./sound/player.ogg");
	
    game.ai.setPlayerAndBall(this.playerTwo, this.ball);
  },
  var main = function() {
    // le code du jeu
    game.clearLayer(game.playersBallLayer);
    game.movePlayers();
    game.displayPlayers();
    game.moveBall();
    game.ai.move();
    game.collideBallWithPlayersAndAction();
    requestAnimId = window.requestAnimationFrame(main); // rappel de main au prochain rafraichissement de la page
  }

Vous avez maintenant une intelligence artificielle fonctionnelle.

 
Pour voir en live le code, cliquez sur Pong

 

Si vous avez aimé cet article, partagez le.

 

Si vous constatez des coquilles, ou avez des remarques à faire ou encore souhaitez manifester votre satisfaction de ce tuto, n’hésitez pas les commentaires sont faits pour ça.

 

Posté dans html5, pongTaggé développer pong, pong html5, pong javascript, tutoriel html5, tutoriel jeu vidéo, tutoriel pong  |  14 commentaires

14 réponses à "Coder le jeu video html5 pong – Intelligence Artificielle"

Répondre

*