Web 2

Travaux

Les cours

Création d'un jeu en JavaScript




Le travail de session consiste à développer un jeu en JavaScript. Celui-ci doit posséder une page pour la "connexion", une page qui raconte l'histoire du jeu et une page pour jouer.

Stratégie : Afin de rendre ce travail moins intimidant, développez une page à la fois, en oubliant les deux autres. Décomposez ce travail en 3 parties distinctes. Cette stratégie souvent utilisée consiste à fragmenter une situation complexe en plusieurs petits cas plus simples.

Page : Accueil

Page d'accueil du jeu.

Particularités : 
- La page doit avoir un formulaire de connexion, qui est validée en JavaScript. Si le nom d'utilisateur est "joueur" et le mot de passe est "secret", alors l'usaqer est redirigé à la page d'introduction. Autrement, un message d'erreur est affiché à l'usager
- La page doit avoir une animation (des éléments dynamiques modifiés en JavaScript) afin de fournir une ambiance intéressante pour le jeu.

Page : Introduction

Page qui raconte l'histoire du jeu.

Particularités : 
- Doit avoir une séquence d'animations. Dans l'exemple de mon jeu de zombie, au début une ville est affichée, puis le fond devient semi-opaque. Par la suite, le ninja apparait à l'écran. Celui-ci raconte l'histoire de sa ville, une bulle de texte à la fois (+ images).
- Lorsque l'histoire est terminée, un bouton "Débuter" ou "Jouer" doit apparaître à l'écran. Lorsque l'usager clique sur le bouton, il est redirité à la page du jeu.

Page : Jeu

Page de jeu

Particularités : 
- Doit avoir un système de pointage
- Doit contenir une gestion de la fin de la partie (ex: afficher "game over")
- Doit contenir une gestion d'événements de la souris et/ou du clavier (ex: Quand je clique ici, alors ceci se passe)
- Doit avoir une manipulation du DOM. C'est-à-dire des éléments qui sont ajoutés/supprimés dans la page (appendChild/removeChild)

Remise du travail:
Pour remettre votre projet, compressez-le puis déposez-le sur Léa. Dans votre projet, assurez-vous d'avoir créé un fichier README.txt, indiquant où sont les animations sur les pages et comment jouer à votre jeu.

Autres informations:
- Le jeu est au choix. Il faut seulement qu'il soit jouable et montre votre compréhension du JavaScript.
- Il y aura quelques points accordés à l'immersion/ambiance du jeu, ainsi que de la richesse de l'interface graphique. Autrement dit, prenez le temps de mettre du style sur vos textes, boutons, etc.
- Sans être une obligation, je vous encourage à utiliser la classe TiledImage telle que montré en classe afin d'avoir des sprites animés. En cas de difficulté, je peux également vous donner un coup de main à les implémenter. Voici quelques sites qui vous permettront (je l'espère) de trouver vos sprite sheets :
   - www.spriters-resource.com
   - itch.io/game-assets/free

Pour envoyer une demande d'assistance à l'enseignant, cliquez ici