Javascript #9 : barbarian quest

1. Javascript Projet : Barbarian Quest

2. 0. Objectif

3. Le principe
Vous devez réaliser par équipe de 2 un jeu de type rogue-like.
Ce projet sera réalisé en plusieurs étapes durant les cours de
Javascript et servira d’évaluation de contrôle continue.

4. Rogue-like ?
Dans un rogue-like, le joueur doit, tour par tour, explorer
un ou plusieurs souterrains. Ce type de jeu est parfois
désigné sous le terme PMT pour Porte, Monstre, Trésor.
Graduellement, le personnage affronte des monstres plus
puissants, gagne de l'expérience et des objets de plus
grande valeur, à la manière de certains jeux de rôle.
http://fr.wikipedia.org

5. Et visuellement ?
Le jeux sera réalisé sous forme de 2d isométrique. Pour cela
il sera mis à disposition un certain nombre d’assets (fichiers
html/css, interface utilisateurs, tilesets & sprites) en licence
Creative Commons.

6. 1. Le donjon

7. Niveau
Chaque étage du donjon correspond à un niveau. Pour
terminer le niveau en cours le joueur doit arriver jusqu’à
l’escalier conduisant à l’étage suivant.
Chaque niveau est généré aléatoirement avec les éléments
suivants : mures, obstacles, objets et ennemies. La taille du niveau
augmente au fur et à mesure de la progression du joueur.

8. Typologie d’un niveau (1)
Un niveau est une matrice composé de cases (tile). Les
niveaux font toujours 16 tiles de large et entre 10 et 70 tiles
de haut.
Par convention nous considérerons la tile en haut à gauche
comme étant la tile (0,0).

9. Typologie d’un niveau (2)
Il existe 4 types de tile :
- les murs
- les obstacles
- les escaliers d’entrée et sortie
- les portails

10. Génération de niveau (1)
Règles de génération aléatoire :
- la hauteur du niveau est égale à 10 + (N° du niveau * [0-5])
avec un maximum de 70
- Les deux premières lignes et la dernière ligne sont
constituées de mur
- La première et dernière tile de chaque ligne sont
constituées de mur
- L’escalier d’entrée est placé sur la case la plus en haut à
gauche possible
- L’escalier de sortie est placé sur la case la plus en bas à
droite possible
- Le joueur commence le jeux à droite de l’escalier d’entrée

11. Génération de niveau (2)
Règles de génération aléatoire :
- Sur les tiles vides, sont placées aléatoirement un nombre
d’obstacles égale à : (hauteur/5) +/- [0-3]
- Un obstacle ne peut pas être adjacent à un mur.
- Un niveau à une chance sur dix de contenir un portail
- Un portail doit être placé sur une case vide dans la moitié
inferieur du niveau.

12. Exercice 1
Créer un objet tile contenant les propriétés :
- type (wall, start, end, portal, decorum et obstacle)
- blocking (true, false)
Créer un objet level contenant les propriétés :
- width
- height
- style (cave, castle, catacomb ou mucus)
- map (un tableau de tile)

13. Exercice 2
Ajouter une méthode generateMap au prototype de level.
Cette méthode doit permettre de générer un tableau à deux
dimensions de tile selon les règles définies.

14. 2. Design

15. Objectif

16. Structure HTML
<div id="game">
<ul>
<li class="wall" style="margin: 0px 0px 0px 0px;">
<div class="element"></div>
</li>
<li class="wall" style="margin: 0px 0px 0px 64px;">
<div class="element"></div>
</li>
<li class="wall" style="margin: 0px 0px 0px 128px;">
<div class="element"></div>
</li>
<!-- ... -->
</ul>
</div>

17. Css rules (1)
- Chaque tile est représenté par un li
- Tous les li représentant un tile de type ‘wall’ ont la class ‘wall’
- Tous les li de la dernière ligne ont la class ‘lastLine’
Tous les li sont positionnés en absolut et doivent donc avoir :
- une marge left de : colonne * 64 les lignes impaires
- une marge left de : (colonne * 64) + 32 les lignes paires
- une marge top de : ligne * 16

18. Exercice 0
Refactorer le code réalisé précédemment pour ajouter un
objet Element à Tile.
- L’objet tile contient une propriété ‘type’ pouvant être égale
à ‘wall’ ou ‘floor’.
- L’objet ‘element’ contient une propriété ‘type’ pouvant être
égale à ‘start’, ‘end’ ou ‘portal’.

19. Exercice 1
Télécharger les assets ici : https://www.dropbox.com/sh/
oq2yynb83me4qg8/AABNKYYPPHCVswfQIgvT9Lzma?dl=0
Ajouter vos fichiers JS à game.html

20. Exercice 2
Créer une méthode toHtml() pour les objets level, tile et
element. Cette méthode doit permettre de transformer
l’objet en code html pour être affiché dans la page du jeux.

21. 3. Interactions

22. Exercice 0
Mettre à jour les assets ici : https://www.dropbox.com/sh/
u9wsq7mbsw9plus/AAB9Kc5TqYR8xWKb4m1VJVa5a?dl=0

23. Exercice 1
Refactorer la méthode toHtml() de tile pour ajouter trois div
avec les class ‘action’, ’actionMarker’ et ‘character’.
Afficher le joueur sur le jeux en ajoutant la class ‘player’ au
div contenant la class ‘character’ de la bonne tile.

24. Exercice 2
Créer un événement permettant d’afficher au survol un carré
dépendant de l’action possible de l’utilisateur. Il suffit
d’ajouter pour cela une class ‘hoverMove’, ‘hoverAction’ ou
‘hoverNone’ sur le div avec la class ‘actionMarker’.

25. Exercice 3
Créer un événement permettant de déplacer le joueur d’une
case au click de la sourie.

26. Exercice 4
Permettre à l’utilisateur de pouvoir descendre ou monter
d’un niveau. A chaque changement de niveau le compteur ce
met à jour.

27. Merci pour votre attention.

28. Crédits
64x64 isometric roguelike tiles- Denzi, Alex Korol, Edger, Wan-ichi, So-Miya, Haruko Numata, Tatsuya, AllegroHack tiles, Dainokata, Zmy
http://opengameart.org/content/64x64-isometric-roguelike-tiles
environment - kirill777
http://opengameart.org/content/environment
Concept art of a necromancer. - kirill777
http://opengameart.org/content/necromancer