Transforme ton trésor en porte

Tu aimerais rajouter une ou plusieurs portes dans ton niveau. Voici une façon de le faire facilement.

Modifier les classes room et wall

Tout d’abord, il te faut rajouter un nouveau paramètre sur chaque mur. Y a-t-il une porte sur ce mur, oui, non ? Disons non par défaut. Trouve la classe room() dans le script room.js et rajoutes-y cette ligne.

class room {
  
  constructor(){
    
    // ici sont déclarés les variables de chaque salle
    
    this.path = true;
    this.x = 0; 
    this.y = 0;
    this.walls = [];
    
    this.door = false ;
    
  }
  
}

Fait la même chose dans la classe wall() toujours dans le script room.js.

class wall {
  
  // ici sont déclarés les variables de chaque mur
  
  constructor(n){
    
    this.num = n; 
    this.art = false;
    this.r = random(0,PI);

    this.door = false ;

  }
    
} 

Créer une fonction qui affiche la porte

Bien, maintenant nous allons déterminer comment cette porte s’affiche. Pour ça je t’ai concocté une petite fonction, place la quelque part dans le script room.js.

function viewDoor( x , y , i , h , d ) {

  // affiche la porte

  const img = itemImages[0][d];

  let c = img.width/img.height;
  let r = sin( rooms[x][y].walls[i].r );

  view.texture(img);
  view.translate( -h / 4 , 0 , 4 );
  view.plane( h * c , h );
}

J’ai choisi l’image du trésor pour représenter la porte, libre à toi de mettre celle d'un autre objet. Pour ça modifie le 0 dans cette ligne.

const img = itemImages[0][d] ; // pour l'image du trésor

const img = itemImages[1][d] ; // pour l'image de l'objet 1

const img = itemImages[2][d] ; // pour l'image de l'objet 2

const img = itemImages[3][d] ; // pour l'image de l'objet 3

Tu peux aussi utiliser une nouvelle image, pour ça il te faudra faire un hack pour utiliser d'autres images que celle de ta feuille.

Créer une condition pour afficher la porte

Maintenant nous allons placer une condition qui vérifiera si ce nouveau paramètre que nous avons créé est vrai. Nous allons mettre cette condition dans la fonction displayWall() qui affiche les murs. Tu la trouveras dans le script room.js.

function displayWall(x, y, i, d, thisWall){

  // affiche les murs

  let img = textureImages[1];
  let n = thisWall.num;
  let h = view.height;
  
  d = constrain( d , 0 , img.length - 1 );

  view.push();

  view.texture(img[d]);
  view.translate(x*h,y*h);
  view.rotateX(-PI/2);
  view.rotateY(-PI/2);
  view.rotateY(-PI/2*n);
  view.translate(-h/4,0,-h/2);
  view.box(h/2,h,1);
  view.translate(h/2,0,0);
  view.box(h/2,h,1);
  
  if (thisWall.door) viewDoor( x, y, i, h, d );

  if (thisWall.art)  viewArt( x, y, i, h, d );
    
  view.pop();
  
}

Placer la porte dans le niveau

Ensuite, il va falloir déterminer où cette porte va apparaître. Pour ça il va nous falloir midifier la fonction placeItem() dans le scipt level.js. Dans cet exemple, je l’ai mis à la place du trésor.

function placeItem( n , x , y ){
  
  // place les éléments
  
  let p = createVector(x,y);
  
  if (n==0) rooms[x][y].path=false; // passages
  if (n==1) rooms[x][y].path=true; // passages
  if (n==2) append( enemys , new enemy ( p , 0 )) ; // ennemi 1
  if (n==3) append( enemys , new enemy ( p , 1 ) ); // ennemi 2
  if (n==4) append( items , new item (   p , 1 ) ); // objet 1
  if (n==5) append( items , new item (   p , 2 ) ); // objet 2
  if (n==6) append( items , new item (   p , 3 ) ); // objet 3
  if (n==7) playerPos=[ p , p ]; // départ

  if (n==8) append( items , new item (   p , 3 ) ); // objet 4
  if (n==8) rooms[x][y].door = true ; // porte
  
}

Tu peux aussi utiliser le hack pour modifier ton niveau et placer ta porte ailleurs.

Ensuite, pour que ta porte soit créée au début du jeu, trouve la fonction buildWall() dans le script room.js et ajoutes y ces lignes.

function buildWall(x,y,thisRoom) {
      
  // crée les murs dans les salles

  const mur = 0 ;

  let w = [];
  let s = createVector(rooms.length,rooms[0].length);

  if (x+1>=s.x || !rooms[x+1][y].path) append(w, new wall(0));
  if (y+1>=s.y || !rooms[x][y+1].path) append(w, new wall(1));
  if (x-1<0    || !rooms[x-1][y].path) append(w, new wall(2));
  if (y-1<0    || !rooms[x][y-1].path) append(w, new wall(3));

  if( thisRoom.door && w.length>mur ) w[mur].door = true;

  return w;

}

Tu peux changer la valeur de la variable mur pour que la porte s'affiche sur un autre mur de la case. Attention à bien choisir un mur qui existe, sinon ta porte n'apparaîtra pas.

const mur = 0 ; // pour le premier mur de la salle

const mur = 1 ; // pour le deuxième

const mur = 2 ; // pour le troisième

Interaction du joueur avec une porte

Nous y voilà, ta porte est maintenant dans ton niveau. J’imagine que tu aimerais que ton joueur puisse interagir avec. Rien de plus simple ! Pour que ton joueur gagne en allant dans une porte, rajoute cette ligne dans la fonction actionWall() dans le script room.js.

function actionWall( thisRoom ) {
 
  // quand le joueur touche une décoration
 
  if (thisRoom.art)  thisRoom.r += 1 ;

  if (thisRoom.door) winGame() ;
  
}

Pour que joueur déclanche quelque chose que tu as créée dans un autre hack, remplace winGame() par la fonction de ton choix.