Projet RL

I - Index.html && main.js

Index.html représente la scène. On y décide des emplacements présents. On y crée un canva.

main.js est le metteur en scène, il va remplir la scène et décider de ce qu'il s'y passera. Il récupère le canva et se charge de le remplir.

II - Définir la boucle de jeu

On a besoin :

• d'un outil pour "dessiner" dans le canva : ctx.getContext() -> Le pinceau.
• Un état du monde : Ici l'obj "player", mais plus tard on pourra ajouter des règles, des monstres, etc...
• Une fonction de render qui tourne 60 * seconde. On efface le canva, et on redraw en boucle : requestAnimationFrame(gameLoop).
  • Fonction fournie par le navigateur. Il gère le timing, le rendu est synchronisé avec l'écran pour une animation fluide.
  • Le navigateur peut gérer d'autres choses entre deux frames (clavier, souris, etc.);

III - Déplacement du joueur

• Introduire l'état des touches utilisés (up/down/left/right)

Ce qu'on fait ici, c'est que le navigateur écoute le clavier et émet des évènements.

Un event, c'est un message type : "La touche w vient d'être enfoncée".

Donc, avec addEventListener(), dés qu'une touche est pressé/relâché l'event est transmis au navigateur.

TRADUCTION : On mappe l'état des touches. À chaque frame, on regarde l'état des touches, et dans la fonction update() on ajuste la position du joueur.

a - window.addEventListener()

Quand on écrit du JS dans une page web, le code vite dans ce "monde" :

• window = Le monde extérieur (La page, la taille de l'écran, le clavier, la souris, le temps, etc.)
• document = Le contenu de la page html (les balises, le DOM)
• canvas = Un élément particulier de ce document.
• ctx (canva.getContext()) = un outil pour dessiner sur cet élément.

Exemples de ce que window offre comme méthodes :

• addEventListener() --> Écouter des évènements globaux (clavier, resize, etc.)
• requestAnimationFrame() --> Demander au navigateur un appel à la prochaine frame.
• innerWidth() --> Largeur de la fenêtre
• setTimeout() --> exécuter quelque chose plus tard.

objet.addEventListener(typeEvenement, fonctionCallBack);

objet = window

typeEvenement = "keyup" / "keydown"

b - Conclusion

• Pour déplacer le joueur, on mappe les touches avec la variable keys.
• On utilise window.addEventListener() : Si une des touche qu'on a mappé est pressée/relâchée, nos variables key correspondante passent en true / false
• Dans update, en fonction de l'état de nos variable keys, on adapte les coordonnées du joueur.

IV - La map

Désormais, on a notre personnage qui bouge. Il est tant de définir une géographie à notre monde.

On a besoin :

• D'une matrice (tableau de tableaux) --> Tilemap
• D'introduire un système de collision avec le joueur.

const map = [  
  [1,1,1,1,1,1,1,1,1,1],

  [1,0,0,0,0,0,0,0,0,1],

  [1,0,0,1,1,0,0,0,0,1],

  [1,0,0,0,0,0,0,1,0,1],

  [1,1,1,1,1,1,1,1,1,1]

];

Attention grille vs pixels : Pour convertir une case de tableau en pixel, il faut définir une taille de case.

const TILE_SIZE = 64; == Une case de la grille fait 64x64px. J'ai donc décidé de faire des map de 12 x 9 cases, avec canva width=768/height=576.

Donc pixelX = gridX * TILE_SIZE / pixelY = gridY * TILE_SIZE.

Une fonction drawMap() s'occupe de la render une fois la translation entre cases/pixels effectuée

b - Collisions joueur/map