Javascript Projet : Barbarian Quest
0. Objectif
Le principe 
Vous devez réaliser par équipe de 2 un jeu de type rogue-like. 
Ce projet sera réalisé en plusieurs étapes du...
Rogue-like ? 
Dans un rogue-like, le joueur doit, tour par tour, explorer 
un ou plusieurs souterrains. Ce type de jeu est...
Et visuellement ? 
Le jeux sera réalisé sous forme de 2d isométrique. Pour cela 
il sera mis à disposition un certain nomb...
1. Le donjon
Niveau 
Chaque étage du donjon correspond à un niveau. Pour 
terminer le niveau en cours le joueur doit arriver jusqu’à 
l...
Typologie d’un niveau (1) 
Un niveau est une matrice composé de cases (tile). Les 
niveaux font toujours 16 tiles de large...
Typologie d’un niveau (2) 
Il existe 4 types de tile : 
- les murs 
- les obstacles 
- les escaliers d’entrée et sortie 
-...
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])...
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...
Exercice 1 
Créer un objet tile contenant les propriétés : 
- type (wall, start, end, portal, decorum et obstacle) 
- bloc...
Exercice 2 
Ajouter une méthode generateMap au prototype de level. 
Cette méthode doit permettre de générer un tableau à d...
2. Design
Objectif
Structure HTML 
<div id="game"> 
<ul> 
<li class="wall" style="margin: 0px 0px 0px 0px;"> 
<div class="element"></div> 
</...
Css rules (1) 
- Chaque tile est représenté par un li 
- Tous les li représentant un tile de type ‘wall’ ont la class ‘wal...
Exercice 0 
Refactorer le code réalisé précédemment pour ajouter un 
objet Element à Tile. 
- L’objet tile contient une pr...
Exercice 1 
Télécharger les assets ici : https://www.dropbox.com/sh/ 
oq2yynb83me4qg8/AABNKYYPPHCVswfQIgvT9Lzma?dl=0 
Ajou...
Exercice 2 
Créer une méthode toHtml() pour les objets level, tile et 
element. Cette méthode doit permettre de transforme...
3. Interactions
Exercice 0 
Mettre à jour les assets ici : https://www.dropbox.com/sh/ 
u9wsq7mbsw9plus/AAB9Kc5TqYR8xWKb4m1VJVa5a?dl=0
Exercice 1 
Refactorer la méthode toHtml() de tile pour ajouter trois div 
avec les class ‘action’, ’actionMarker’ et ‘cha...
Exercice 2 
Créer un événement permettant d’afficher au survol un carré 
dépendant de l’action possible de l’utilisateur. ...
Exercice 3 
Créer un événement permettant de déplacer le joueur d’une 
case au click de la sourie.
Exercice 4 
Permettre à l’utilisateur de pouvoir descendre ou monter 
d’un niveau. A chaque changement de niveau le compte...
Merci pour votre attention.
Crédits 
64x64 isometric roguelike tiles- Denzi, Alex Korol, Edger, Wan-ichi, So-Miya, Haruko Numata, Tatsuya, AllegroHack...
Prochain SlideShare
Chargement dans…5
×

Javascript #9 : barbarian quest

610 vues

Publié le

Javascript #9 : barbarian quest

Publié dans : Logiciels
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
610
Sur SlideShare
0
Issues des intégrations
0
Intégrations
267
Actions
Partages
0
Téléchargements
19
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Javascript #9 : barbarian quest

  1. 1. Javascript Projet : Barbarian Quest
  2. 2. 0. Objectif
  3. 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. 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. 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. 6. 1. Le donjon
  7. 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. 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. 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. 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. 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. 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. 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. 14. 2. Design
  15. 15. Objectif
  16. 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. 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. 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. 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. 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. 21. 3. Interactions
  22. 22. Exercice 0 Mettre à jour les assets ici : https://www.dropbox.com/sh/ u9wsq7mbsw9plus/AAB9Kc5TqYR8xWKb4m1VJVa5a?dl=0
  23. 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. 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. 25. Exercice 3 Créer un événement permettant de déplacer le joueur d’une case au click de la sourie.
  26. 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. 27. Merci pour votre attention.
  28. 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

×