https://tekdey-challenges-promo-flamel.github.io/S02E07-Jeu-RPG-Tekdey/
On va refaire le jeu du personnage qui cherche sa mine d'or! Rien que ça !
- une feuille CSS (presque) vide.
- un fichier JS (presque) vide.
- un fichier HTML qui inclu les deux autres (CSS et JS).
Et c'est tout !
Commençons par créer une div
dans le HTML. Donnons lui l'id board
, mais on ne met rien dedans.
Ensuite on s'attaque au JavaScript.
Comme on code proprement (en tout cas on essaie!), on va tout mettre dans l'objet app
.
On va devoir créer tout ça :
-
une propriété pour le joueur. Ce doit être un objet qui contient :
x
ety
, pour gérer la position du joueur sur la grille ayant rexpectivement la valeur0
.direction
(par défaut :'right'
).
-
une propriété
targetCell
, qui correspond à la case à atteindre. Elle contient les propiétésx
qui vaut5
ety
qui vaut3
.
On ajoute une méthode drawBoard
dans notre objet app
. Cette méthode doit créer des div
et les ajouter au DOM pour arriver au résultat suivant :
- la div
board
doit contenir 4 divs ayant la classerow
. - chaque div
row
doit contenir 6 divs ayant la classecell
.
Indice
Il faut une boucle dans une boucle !On appelle cette méthode depuis app.init
, pour dessiner la grille dès le chargement de la page !
Ensuite, on fait un peu de CSS, pour arriver au rendu suivant (les cases font 70px de côté):
Toujours dans la méthode drawBoard
, lors de la création des cases, on rajoute une série de test :
- Si la case courante a les mêmes coordonnées (
x
ETy
) que la variabletargetCell
, on ajoute la classe CSStargetCell
à la case. Cette classe CSS est a créer pour que la case soit verte. - Si la case courante a les mêmes coordonnées (
x
ETy
) que la variable qui correspond au joueur, alors on ajoute une div avec la classplayer
DANS la case courante. Le code css de cette classeplayer
est déjà fourni.
On ajoute une nouvelle méthode clearBoard
dans app
. Cette méthode doit vider le contenu de la div ayant l'id board
.
On ajoute aussi une méthode redrawBoard
, qui appelle clearBoard
puis drawBoard
.
Dans la console, on peut déjà faire bouger notre personnage ! Essayons :
app.player.x = 1; // on change la position du personnage
app.redrawBoard(); // on met à jour l'affichage !
🎉
Bon, c'est déjà vraiment bien tout ça ! Prend une pause, respire, tu peux tu féliciter d'avoir réussi.
Si t'as encore de l'énergie, et qu'il est pas trop tard (pense à ton sommeil 😉), tu peux te lancer dans la suite de ce challenge !
Ajoutons 2 méthodes turnLeft
et turnRight
dans l'objet app
. Ces méthodes changent la propriété direction
du joueur, en fonction de sa position courante. Cette direction peut prendre les valeurs "right", "left", "up" et "down".
Par exemple:
console.log(app.player.direction); // => "right"
app.turnLeft();
console.log(app.player.direction); // => "up"
app.turnLeft();
console.log(app.player.direction); // => "left"
app.turnRight();
console.log(app.player.direction); // => "up"
Ensuite, il faut modifier le code pour que cette propritété ait une influence visuelle.
Indices
- Dans
drawBoard
, ajouter une classe CSS à la divplayer
en fonction de la propriétédirection
. - Implémenter ces classes CSS en utilisant la propriété
transform: rotate(...)
.
Ajoutons une méthode moveForward
dans l'objet app
. Cette fonction modifie les coordonées du joueur pour le faire avancer dans la direction vers laquelle il est tourné.
Attention : le joueur ne doit pas pouvoir sortir de la grille !
Les méthodes turnLeft
, turnRight
et moveForward
doivent toutes appeler redrawBoard
en dernière instruction.
On ajoute une méthode listenKeyboardEvents
à notre objet app
. Cette méthode ajoute un "event listener" sur l'objet document
.
Ce listener écoute les évènement keyup
. En fonction des propriétés de l'event, on lancera les méthodes turnLeft
, turnRight
, ou moveForward
.
On oublie pas d'appeler listenKeyboardEvents
depuis app.init
pour créer le "listener" dès que la page est chargée.
Indice
Il faut tester event.keyCode
, et trouver à quel code correspondent les flèches directionnelles.
Pour finir, on va implémenter le fonctionnement de la fin de partie :
- Ajoutons une propriété
gameOver
(par défaut : false) àapp
. - Modifions
turnLeft
,turnRight
etmoveForward
: sigameOver
est égal àtrue
, ces méthodes ne doivent rien faire du tout ! - Implémentons une méthode
isGameOver
dansapp
. Cette méthode teste si le joueur est sur la bonne case. Si c'est le cas, on affiche un message et on change la valeur degameOver
à true. - La méthode
drawBoard
doit appellerisGameOver
en dernière instruction. Ainsi à chaque fois qu'on redessine la grille, on vérifie si la partie est finie.
🎉
Bonus facultatif
Ajouter un système pour compter le nombre de déplacements (attention : une rotation EST un déplacement 😉). Afficher ce compteur dans le message de fin de partie.
Bonus encore plus facultatif
Modifier le CSS pour utiliser l'image sprite.png
fournie et rendre le joueur plus beau, tout en tenant compte de son orientation !