WEB Snake

Utiliser les flèches directionnelles

Démarrer Snake

Présentation

Ce projet intitulé : WEB Snake a été réalisé en JavaScript, Le but était de m'entrainer en JavaScript en essayant de reproduire le mythique jeu Snake.

Objectifs

Mes objectifs à travers ce projet étaient de :

Création du Canva (context)

J'ai tout d'abord commencer par créer le canva sur lequel vas se dérouler le jeu. Pour ca on utilise un objet nommé contexte(ctx) que l'on vas pouvoir remplir, restaurer et sauvegarder. On vas faire en sorte que le canva se rafraichisse réguliérement via la fonctrion init() et refreshCanvas()

Création du serpent et de la pomme

On vas ensuite créer un objet serpent. Puis on vas découper le canva en bloc, notre serpent sera donc un tableau de coordonnées qui seront les blocs du serpent. On vas ensuite créer une fonction permettant de faire avancer le serpent puis une autre permettant de changer la direction de celui-ci en fonction des inputs des flèches directionnelles. Puis on vas détecter la collision avec les murs ou son corps et déclencher un GameOver.
Enfin, on vas créer un objet pomme qui vas apparaître sur une case aléatoire du canva, sauf celles prises par le serpent, et celle sur laquelle la pomme était déjà. Pour finir on vas détecter la collision avec la tête du serpent.

Score, GameOver et rejouer

Pour le Score, on créé simplement une variable que l'on affiche sur le canva que l'on incrémente lors de la collision avec le serpent. Le Game Over est déclenché lors de la collision du serpent avec un mur ou avec son corps et donne la possibilité de rejouer en appuyant sur espace. Ce qui réinitialise le canva, le serpent et le score à son état d'origine.

Code Sources

Télécharger