Intelligence artificielle – jeux vidéo – crash and turn




 

Connaissez vous le jeu Berzerk ? Pour ceux qui ne connaitrait pas, il s’agit un jeu dans lequel le joueur se déplace de pièces en pièces. Bien sur, chaque pièce regorge de robots qui cherchent à l’éliminer en le poursuivant. Et pour passer d’un pièce à l’autre, il lui faut abattre tous ses ennemis.

Je fais référence à Berzerk parce qu’il en est une illustration de l’usage d’un algorithme simple appelé Crash and Turn Algorithm. Facile à mettre en œuvre, cet algorithme simule une poursuite. Un premier pas dans l’intelligence artificielle.

Je vais donc vous montrer comment développer et utiliser cet algorithme Crash and Turn en javascript.

Dans cette première partie, vous allez créer un lecteur et afficheur de labyrinthe pour en rendre la modification rapide pour les différents tests à faire.

Que fait cet algorithme ?

L’objectif de l’algorithme Crash and Turn est de déplacer seul d’un lieu A vers un lieu B.

L’algorithme Crash and Turn consiste à se déplacer droit devant jusqu’à la rencontre d’un obstacle. Lorsqu’on rencontre l’obstacle, on change de direction à droite ou à gauche. Puis on se déplace droit devant jusqu’au nouvel obstacle.

Le lecteur afficheur de labyrinthe

Je vous propose dans un premier de créer une fonction qui lit une structure de données représentative d’un labyrinthe et l’affiche dans un canvas html5.

Dans un premier temps, une fonction qui crée un canvas html5 et l’intègre dans un élément html. Cette fonction prend 6 paramètres qui sont un identifiant, sa largeur, sa hauteur, sa position sur la pile des éléments affichés à l’écran, l’élément html auquel il est rattaché et sa couleur.

var createCanvasContext = function(name, width, height, zindex, htmlElement, color) {
  var canvas = window.document.createElement("canvas");
  canvas.id = name;
  canvas.style.position = "absolute";
  if ( color != undefined )
    canvas.style.background = color;
  canvas.style.zIndex = zindex;
  canvas.width = width;
  canvas.height = height;
  if ( htmlElement != undefined )
    htmlElement.appendChild(canvas.getContext('2d').canvas);
  return canvas.getContext('2d');
}

Une autre fonction qui permet d’afficher les murs du labyrinthe, un simple carré de 10 pixels sur 10. Cette fonction prend en paramètre le canvasContext dans lequel le mur est affiché, sa couleur et sa position.

var showSquare = function(canvasContext,color,x,y) {
  canvasContext.beginPath();
  canvasContext.rect(x*10,y*10,10,10);
  canvasContext.fillStyle = color;
  canvasContext.fill();
  canvasContext.stroke();
}

Trois fonctions pour afficher mur, joueur et ennemi :

var showWall = function(canvasContext,x,y) {
  showSquare(canvasContext,"yellow",x,y);
}

var showPlayer = function(canvasContext,x,y) {
  showSquare(canvasContext,"yellow",x,y);
}
	
var showEnemy = function(canvasContext,x,y) {
  showSquare(canvasContext,"red",x,y);
}

Pour l’exemple tout sera représenté par un simple carré : les murs en gris, l’ennemi en rouge et le joueur en jaune.

Pour terminer, la fonction qui lit la structure de données et l’affiche dans le canvas html5 et qui modifie la structure de données en y enlevant le joueur et l’ennemi :

var initGameGrid = function() {
  for(var i in walls)  {
    var line = walls[i];
    var element = line.split("");
    for(var j in element)  {
      if ( element[ j ] == "#" ) {
        showWall(gameCanvasContext,j,i);
      } else if ( element[ j ] == "E" ) {
        showPlayer(gameCanvasContext,j,i);
        element[ j ] = " ";
      } else if ( element[ j ] == "P" ) {
        showPlayer(gameCanvasContext,j,i);
        element[ j ] = " ";
      }
    }
  }
 }

Et la structure de données json avant lecture pour affichage, le signe # représente un mur, la lettre E représente l’ennemi qui va se déplacer automatiquement, et la lettre P représente le joueur vers lequel l’ennemi E va s déplacer :

var walls = {
  0:  "                    ",
  1:  "              #     ",
  2:  "              #     ",
  3:  "                    ",
  4:  "                    ",
  5:  "                    ",
  6:  "              #     ",
  7:  "         #    #     ",
  8:  "         #    #     ",
  9:  "  E           #  P  ",
  10: "              #     ",
  11: "         #    #     ",
  12: "         #    #     ",
  13: "         #    #     ",
  14: "                    ",
  15: "                    ",
  16: "                    ",
  17: "              #     ",
  18: "              #     ",
  19: "                    "
}

Et la structure de données json après lecture pour affichage :

  0:  "                    ",
  1:  "              #     ",
  2:  "              #     ",
  3:  "                    ",
  4:  "                    ",
  5:  "                    ",
  6:  "              #     ",
  7:  "         #    #     ",
  8:  "         #    #     ",
  9:  "              #     ",
  10: "              #     ",
  11: "         #    #     ",
  12: "         #    #     ",
  13: "         #    #     ",
  14: "                    ",
  15: "                    ",
  16: "                    ",
  17: "              #     ",
  18: "              #     ",
  19: "                    "

Remarquez qu’il devient facile de modifier le labyrinthe.

Le code complet :

<html>
 <body>
    <div id="gameDiv" style="margin-left:auto;margin-right:auto;width:1168px;height:740px;">
	</div>
 </body>
 <script>
(function() {
 
 var createCanvasContext = function(name, width, height, zindex, htmlElement, color) {
  var canvas = window.document.createElement("canvas");
  canvas.id = name;
  canvas.style.position = "absolute";
  if ( color != undefined )
   canvas.style.background = color;
  canvas.style.zIndex = zindex;
  canvas.width = width;
  canvas.height = height;
  if ( htmlElement != undefined )
   htmlElement.appendChild(canvas.getContext('2d').canvas);
  return canvas.getContext('2d');
 }
 
 var showSquare = function(canvasContext,color,x,y) {
  canvasContext.beginPath();
  canvasContext.rect(x*10,y*10,10,10);
  canvasContext.fillStyle = color;
  canvasContext.fill();
  canvasContext.stroke();
 }

 var showWall = function(canvasContext,x,y) {
  showSquare(canvasContext,"grey",x,y);
 }

 var showPlayer = function(canvasContext,x,y) {
  showSquare(canvasContext,"yellow",x,y);
 }
	
 var showEnemy = function(canvasContext,x,y) {
  showSquare(canvasContext,"red",x,y);
 }

 var initGameGrid = function() {
  for(var i in walls)  {
   var line = walls[i];
   var element = line.split("");
   for(var j in element)  {
    if ( element[ j ] == "#" ) {
     showWall(gameCanvasContext,j,i);
    } else if ( element[ j ] == "E" ) {
     showEnemy(gameCanvasContext,j,i);
     element[ j ] = " ";
    } else if ( element[ j ] == "P" ) {
     showPlayer(gameCanvasContext,j,i);
     element[ j ] = " ";
    }
   }
  }
 }
	
 var walls = {
  0:  "                    ",
  1:  "              #     ",
  2:  "              #     ",
  3:  "                    ",
  4:  "                    ",
  5:  "                    ",
  6:  "              #     ",
  7:  "         #    #     ",
  8:  "         #    #     ",
  9:  "  E           #  P  ",
  10: "              #     ",
  11: "         #    #     ",
  12: "         #    #     ",
  13: "         #    #     ",
  14: "                    ",
  15: "                    ",
  16: "                    ",
  17: "              #     ",
  18: "              #     ",
  19: "                    "
 }

 var gameDiv = document.getElementById("gameDiv");
 var gameCanvasContext = createCanvasContext("game",200,200,1,gameDiv,"#000000");
	
 // read and display game grid
 initGameGrid();
 
})();
 </script>
</html>

Ce qui devrait donner :

IA_labyrinthe

Dans le prochain article Intelligence artificielle – jeux vidéo – mouvement, vous apprendrez à déplacer l’enemy en fonction de la position du joueur.

 

Si vous avez aimé cet article, partagez le.

 

Des remarques, des améliorations, des idées, des coquilles : dites le. Faites savoir si cet article vous a été utile par un commentaire ou les réseaux sociaux.

 

Posté dans html5Taggé intelligence artificielle, intelligence artificielle jeu vidéo, jeu vidéo javascript  |  2 commentaires

2 réponses à "Intelligence artificielle – jeux vidéo – crash and turn"

Répondre

*