Ce hack va te premttre de concevoir un labyrinthe sur plusieurs étages. Pour cela quelques étapes sont nécessaires. Tout d'abord, tu dois d'abord avoir réalisé les hacks pour modifier ton niveau, et pour ajouter des objets.
La suite n'est pas très difficile. Assures-toi bien de tester ton jeu entre chaque étape pour vérifier que tu ne t'es pas trompé.
Créer de nouvelles variables
Pour ce hack, nous allons avoir besoin de nouvelles variables. Ajoute celles-ci dans le script game.js, en dehors d'une fonction.
let currentLevel ;
let useStairs ;
let stairsAnimation ;Initialiser les nouvelles variables
Maintenant nous allons attribuer une valeur par défaut à ces nouvelles variables. Ajoutes ces quelques lignes dans la fonction initGame() du script game.js.
function initGame() {
musics[5].stop();
title = false ;
win = false ;
credit = false ;
thanks = false ;
touchDir = null ;
playerR = [0,0] ;
currentLevel = 0 ;
stairsAnimation = 0 ;
useStairs = false ;
playerLevel() ;
}Modier la fonction levelEditor()
Passons aux choses sérieuses. Ton niveau va maintenant se dérouler sur plusieurs étages, il va donc falloir procéder un peu différemment.
Dans le script level.js, modifie la fonction levelEditor() comme suit :
function levelEditor() {
// cette fonction initialise les couloirs et les éléments du niveau
let grid = [
[ 7 , 1 , 1 , 1 , 1 , 1 , 1 , 8 ],
[ 1 , 1 , 1 , 1 , 1 , 1 , 1 , 1 ],
[ 1 , 1 , 1 , 1 , 1 , 1 , 1 , 1 ],
[ 1 , 2 , 1 , 3 , 1 , 9 , 1 , 1 ],
[ 1 , 1 , 1 , 1 , 1 , 1 , 1 , 1 ],
[ 1 , 1 , 1 , 1 , 1 , 9 , 1 , 1 ],
[ 1 , 1 , 1 , 1 , 1 , 1 , 1 , 1 ],
[ 1 , 1 , 1 , 1 , 1 , 1 , 1 , 1 ],
];
let grid = [
[
[ 7 , 1 , 1 , 1 ],
[ 1 , 1 , 9 , 1 ],
[ 0 , 1 , 1 , 1 ],
[ 1 , 1 , 1 , 1 ],
],
[
[ 1 , 1 , 1 , 1 ],
[ 1 , 1 , 1 , 1 ],
[ 1 , 1 , 1 , 1 ],
[ 10, 1 , 1 , 1 ],
],
];
/*
0 = mur
1 = passage
2 = ennemi 1
3 = ennemi 2
4 = objet 1
5 = objet 2
6 = objet 3
7 = départ
8 = trésor
9 = escalier qui monte
10 = escalier qui descent
*/
return grid[currentLevel] ;
return grid[currentLevel] ;
}
Ton niveau est maintenant représenté par plusieurs tableaux, correspondant chacun à un étage de ton jeu.
Ici le chiffre 9 à été choisi pour correspondre aux escaliers qui montent et le chiffre 10 à ceux qui descendent.
Modifer la fonction placeItem()
Pour que les chiffres 9 et 10 positionnent de nouveaux éléments dans ton niveau, il va nous falloir ajouter ces quelques lignes à la fonction placeItem(), toujours dans le script level.js.
Nous allons également ajouter une petite condition supplémentaire à l'aide de l'un de nos nouveaux variables pour que ton personnage ne soit placé au point de dépard qu'au lancement du jeu.
function placeItem( n , x , y ) {
// place les éléments
let p = createVector( x , y ) ;
let b = isFloating ;
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 , b[0] ) ) ; // ennemi 1
if (n==3) append( enemys , new enemy( p , 1 , b[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 && !useStairs) playerPos=[ p , p ] ; // départ
if (n==8) append( items , new item ( p , 0 ) ) ; // trésor
if (n==9 ) append( items , new item( p , 4 ) ) ; // vers le haut
if (n==10) append( items , new item( p , 5 ) ) ; // vers le bas
}Créer la fonction stairs()
Si tu as fait le hack pour ajouter un objet, tu devrais savoir comment changer l'apparence d'un objet.
Il va ensuite nous falloir ajouter un nouveau type de comportement pour ce nouvel objet.
Dans le script item.js, ajoute cette nouvelle fonction.
function stairs( thisItem , i ) {
// le interragit avec les escaliers
useStairs=true;
playerPos[1] = thisItem.pos ;
stairsAnimation = i ;
currentLevel+=i;
}Appeler la fonction stairs()
Maintenant il va nous falloir appeler cette fonction quand ton joueur interagit avec cet objet.
Toujours dans le script item.js, ajoute cette ligne dans la fonction pick().
function pick( thisItem ) {
// interaction du joueur avec les objets
let objet = thisItem.type ;
if ( objet == 0 ) treasure( thisItem ) ;
if ( objet == 1 ) pickItem( thisItem ) ;
if ( objet == 2 ) pickItem( thisItem ) ;
if ( objet == 3 ) pickItem( thisItem ) ;
if ( objet == 4 ) stairs( thisItem , 1 ) ;
if ( objet == 5 ) stairs( thisItem , -1 ) ;
}Créer la fonction changeFloor()
Maintenant, pour que cette fonction ait réellement un effet, rends-toi à nouveau dans le script game.js, puis ajoute cette nouvelle fonction.
function changeFloor() {
// le joueur monte les escaliers
let b = !( stairsAnimation > 0.5 || stairsAnimation < -0.5 ) ;
let speed = 0.1;
let d = Math.sign(stairsAnimation);
let r = abs(stairsAnimation) ;
if (useStairs && b) {
playerLevel() ;
useStairs=false;
}
if (r>speed) stairsAnimation-=speed*d;
else stairsAnimation=0;
}Appeler la fonction changeFloor()
Cette fonction devra être lue en continue durant ton jeu. Pour cela, nous allons l'appeler dans la fonction game(), toujours dans le script game.js.
function game(){
background( 0 ) ;
viewDisplay() ;
inventoryDisplay() ;
changeFloor() ;
if ( animation() ) playerControl() ;
}Et voilà, ton joueur peut maintenant naviguer d'un étage à l'autre. Mais il nous reste une petite étape pour que ton joueur ait bien l'impression de monter et descendre.
Créer une animation
Je te propose de rajouter une petite animation très simple que j'ai bricolé en rajoutant dans le script view.js ces quelques lignes à la fonction viewDisplay().
function viewDisplay() {
// cette fonction affiche le jeu à l'écran
let h = view.height ;
let stairAnim ;
if(stairsAnimation>0.5) stairAnim = - ( 1 - stairsAnimation ) ;
else stairAnim = stairsAnimation ;
view.push() ;
stoner() ;
view.background(backgroundColor) ;
view.translate( 0 , 0 , h / 8 ) ;
view.rotateY( PI / 2 * playerR[0] ) ;
view.rotateX( PI / 2 ) ;
view.translate( -playerPos[0].x * h , -playerPos[0].y * h ) ;
view.translate( 0,0, h * stairAnim ) ;
viewRooms() ;
for( let i = 0 ; i < rooms.length ; i ++ ) {
viewEnemys( rooms.length-i ) ;
viewItems( rooms.length-i ) ;
}
view.pop() ;
imageMode( CENTER , CENTER ) ;
image( view , width / 2 , height / 2 ) ;
}