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 durant les cours de Javascript et servira d’évaluation de contrôle continue.

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

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.

1. Le donjon

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.

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).

Typologie d’un niveau (2)

Il existe 4 types de tile : - les murs- les obstacles- les escaliers d’entrée et sortie- les portails

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

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.

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)

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.

Exercice 2

2. Design

Objectif

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>

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

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’.

Exercice 1

Télécharger les assets ici : https://www.dropbox.com/sh/oq2yynb83me4qg8/AABNKYYPPHCVswfQIgvT9Lzma?dl=0

Ajouter vos fichiers JS à game.html

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.

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 ‘character’.

Afficher le joueur sur le jeux en ajoutant la class ‘player’ au div contenant la class ‘character’ de la bonne tile.

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’.

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 compteur ce met à jour.

Merci pour votre attention.

Crédits64x64 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