Sur un canvas de 500x500 pixels, vous allez concevoir un petit jeu de bulles.
Au chargement du jeu, le canvas va se remplir de 20 bulles, qui circuleront en boucle dans l'espace de jeu. Ces bulles seront bleues.
Lorsque le joueur actif cliquera sur une bulle bleue, elle deviendra rouge. Un clic sur une bulle rouge la fera disparaître.
Si le joueur clique sur un endroit sans bulle, une bulle jaune apparaîtra et s'animera. Un clic sur une bulle jaune la fera devenir bleue (et ensuite rouge, comme les autres).
Il est important de noter que chaque bulle générée aura un diamètre aléatoire, ainsi qu'un niveau d'opacité proportionel à son diamètre : plus la bulle est grande, plus son opacité est réduite. De même, plus la bulle est grande, plus sa vitesse est élevée.
Quand une bulle sort de l'écran, elle réapparaît en bas de l'écran, à une position horizontale différente.
Note: bien que la vitesse des bulles va varier en fonction de leurs diamètres, vous constaterez très vite qu'il est difficile de cliquer sur une bulle qui remonte vite. N'hésitez pas à travailler avec de toutes petites valeurs de vitesse.
Consigne bonus: créer une balise strong sous le canvas qui servira à indiquer le score du joueur : un click sur une bulle bleue rapportera 5 points, un click sur une bulle rouge 10 pts, un click générant une bulle jaune infligera un malus de 20 points, et le click transformant une bulle jaune en bulle bleue ne rapportera aucun point.
Vous avez 4h. Sur chaque machine sera installé Zeal, avec la doc de javascript installée. Pour la durée de l'examen, les machines seront déconnectée d'internet.
Lorsque vous avez terminé, faites-moi signe, je passerai récupérer les fichiers sur une clé USB.
Bon travail.