Pour apprendre le Canvas, j'ai décidé de recréé un jeu basique dont les règles et les fonctionnalités sont simples. Le Snake répondait parfaitement à ces conditions.
Le fonctionnement du Canvas est assez spécial, mais très intéressant ! Rien que pour la gestion des mouvements, tout n'est qu'"illusion". Rien ne se déplace. "Mais comment alors ?" me diriez-vous ?
Le Canvas n'est rien d'autre qu'une zone où l'on dessine des formes. Point. On lui dit, "dessine une forme de couleur rouge, à telle position, longueur et hauteur" et on a une forme rouge dessinée. Maintenant, si l'on veut faire bouger cette forme. Il suffit de lui dire, "dessine un forme blanche sur l'ensemble de la zone de dessin. Et dessine la même forme rouge, mais de quelques pixels plus à droite", la forme blanche va "supprimer" le contenu de la zone, permettant de dessiner de nouveau la forme rouge, mais à une position légèrement différente. Répéter cette action 60 fois par seconde, et vous verrez votre forme prendre vie, et bouger dans une direction donnée. Ceci est vrai dans mon cas, en contexte 2D. On peut aller bien plus loin avec le Canvas, comme du 3D, mais je n'en suis pas encore là !
"Ok pour le mouvement, mais pour les collisions ?". Bonne remarque ! Lorsque l'on crée une forme, on possède plein d'information la concernant, la position dans la zone, sa longueur, sa hauteur, etc.. Et à chaque fois que l'on redessine la ou les formes, on passe par plusieurs conditions qui vont vérifier si l'une des formes se trouve dans les coordonnées d'une autre, ou si elle sort de la zone. Et si cela arrive, dans le cas de la collision avec une pomme, on demande à Canvas de cesser de dessiner cette pomme, et on modifie les champs de la page pour informer de cette situation (incrémentation des points, décrémentation du nombre de pommes restantes), dans le cas du hors zone, on fait cesser tout dessin, et on affiche les textes informant de la fin de la partie.
Appuyer sur l'une des flèches de votre clavier pour démarrer la partie et faire bouger le serpent.
Cliquer sur "Relancer" pour démarrer une nouvelle partie !
