Les jeux ci-bas offrent des versions de différentes fontionnalités qui sont possibles d’implémenter dans votre jeu.
Quelques trucs à garder en tête :
Collecter un goodie vous donne un point. Les points s’accumulent et s’affichent à l’écran.
Après avoir collecté 3 goodies, on change de niveau. De nouveaux goodies sont générés, et le player bouge plus vite.
Notez comment le code s’occupe du passage entre les niveaux. Suivez les moments du jeu dans le code.
Les goodies apparaissent au haut de l’écran, et ils tombent. Le joueur ne peut bouger que dans le bas de l’écran.
Notez comment on gère la création des goodies (spawn) et leur movement.
Cet exemple applique aussi une fonte différente pour l’affichage du texte. Ce pourrait vous être utile.
En plus des goodies, on a ici des baddies; des objets qu’ils faut éviter.
Quand on touche un baddie, c’est la fin de la partie (game over).
On utilise la même logique que les goodies pour les baddies, mais le résultat d’une collision est bien différent.
Similaire au jeu à niveaux, mais au début du jeu, et entre les niveaux, un écran apparaît pour anoncer l’étape à venir.
L’écran est en HTML, il est animé par CSS et déclenché en JS au bon moment dans le code.
Le joueur indique dans quelle direction on bouge. Il est un triangle au lieu d’un cercle.
L’image du joueur est en fait une planche de sprites (sprite sheet). C’est un ficher qui contient plusieurs images. On affiche une sprite à la fois en recadrant (crop) l’image de sorte que le triangle semble tourner quand on change de direction.
Ce système de planche de sprites peut être utilisé pour faire des animations dans le canvas. Je vous en donne un exemple au moment où on gagne.
Cet exemple est un peu plus abstrait et peut-être compliqué, mais il illustre bien l’usage des sprites. Bien lire les commentaires que je viens de mettre à jour.
Les baddies chassent le joueur.
Le mouvement des baddies est calculé en fonction de la position du joueur.
Dans un système de ce genre, il faut s’assurer que le joueur bouge plus vite que les baddies, et que ceux-ci apparaissent loin du joueur en début de partie. Sinon, il est impossible de jouer.
Un chronomètre simple compte le temps écoulé durant la partie.
J’ai inclu deux type de chrono. D’abord on compte les secondes, simplement. Ensuite, une horloge affiche le temps en minutes et secondes. Le code est un peu plus élaboré.
Ce chrono part à 0 (zéro) et augmente. Si vous voulez faire un compteur à rebours, il faut adapter le code. Surtout, vous voulez probablement que quelque chose se passe quand on arrive à 0. À vous d’explorer.
Cet exemple applique aussi une fonte différente pour l’affichage du texte. Ce pourrait vous être utile.