Miage Evry 2015-2016: HTML5 games

Travaux pratiques première partie

Etudier les exemples du MOOC part 2, partir du dernier exemple le plus avancé (celui-ci) et/ou sa version éclatée en plusieurs fichiers (zip ici) et réfléchir à comment vous pourriez développer un jeu avec des niveaux différents, dont le scénario est le suivant:

• Le joueur est figuré par un petit carré (ce peut être par la suite un sprite animé), la sortie est figurée par un cercle jaune avec un contour bleu (par exemple...)
• On doit atteindre la sortie le plus rapidement possible (controle au clavier ou au gamepad, ou plus tard au doigts)
• On gérera les collisions avec les murs (on dessinera des murs pour délimiter la zone)
• Le parcours est chronométré, quand on atteint la sortie, le score dépend du temps qu'on a mis.
• Quand on atteint la sortie un écran nous félicite, affichera plus tard notre score parmi les hi scrores de ce niveau.
• En appuyant sur la barre d'espace (par exemple), on passe au niveau suivant.
• Quand la difficulté augmente, des obstacles fixes ou mouvants (ex un labyrinthe, ou des murs qui vont et viennent, des monstres qui vous attquent, vous ralentissent, inversent les commandes etc.) seront là pour vous empêcher de passer. Dans un premier temps on détectera les collisions et on fera rebondir le joueur, ou bin on le replacera à la position de départ ou dans des positions prédéfinies intermédiaires. Ces collisions décrémentent le nombre de collisions maximal par niveau. Si ce nombre atteint zéro il y a galme over. Ca c'est pour le jeu solo.

Dans le cadre du projet Nice Every, ce jeu sera: multi devices (mobiles, tablettes, ordis), multi joueurs syncrhone (plusieurs en même temps, plusieurs parties simultanées), multi joueurs asynchone (on pourra jouer contre des joueurs fantômes ayant déjà fait le niveau auquel vous jouez, et ayant un niveau proche du votre).

Exemple fait en cours en live coding avec des obstacles dont un qui bouge:  http://jsbin.com/fobiha/edit?js,output

Exemple fait en salle 109: http://jsbin.com/fikuve/edit?js,output