# Les éléments d'un cahier des charges # SNHESS ## 1. Contexte et définition du problème **Contexte** https://www.snake.fr/ Le problème que le code du jeu de Snake tente de résoudre est de créer une expérience ludique interactive dans un navigateur web, où un joueur contrôle un serpent qui doit grandir en mangeant des pommes tout en évitant de se heurter aux bords de l'écran ou à son propre corps. :bulb:  ## 2. Les objectifs Implémenter un jeu de Snake complet et jouable dans un navigateur web, respectant les règles fondamentales du jeu. ## 3. Le périmètre du projet Le périmètre du projet de développement du jeu de Snake, tel que nous l'avons défini jusqu'à présent, inclut les fonctionnalités et les aspects suivants: Fonctionnalités de base du jeu Aspects visuels Implémentation complète en HTML, CSS et JavaScript ## 4. Description fonctionelle Voici ce que chaque partie du code fait pour le jeu : initialiserJeu() : Prépare la partie.(objectif) boucleJeu() : Anime le jeu en continu.(contrainte) deplacerSerpent() : Gère le mouvement, la pomme mangée et les collisions.(containte) collisionSerpent() : Détecte si le serpent se heurte à lui-même.(objectif) genererPomme() : Place une nouvelle pomme.(objectif) changerDirection() : Modifie la direction du serpent via le clavier.(objectif) dessinerSegmentSerpent() : Dessine un morceau du serpent.(objectif) dessinerSerpent() : Dessine le serpent entier.(priorité,objectif) dessinerPomme() : Dessine la pomme.(priorité,objectif) | élément | contenu | | ------- | ------- | | objectif | Avoir un jeu de Snake fonctionnel et visuellement agréable, implémenté en HTML, CSS et JavaScript| |description|HTML : Pour la structure de la page web (le canvas pour le jeu et la div pour le score).CSS : Pour le style visuel de la page, du canvas et du score (fond, bordures, couleurs, etc.).JavaScript : Pour la logique du jeu| |contrainte| Complexité limitée : Le jeu doit rester relativement simple pour faciliter la compréhension et les modifications.| |priorité|Maintenir et potentiellement améliorer l'aspect visuel (style CSS, rendu du serpent et de la pomme). |répartition| Gaspard le Css (Modifier les styles pour changer l'apparence générale.)Ilyas le Html (travaille sur le code) ## 5. Journal de bord Semaine 1 : 27 Mai 2025 - Initialisation et Structure Date : Mardi 27 mai 2025 Participants : Gaspard, Ilyas Objectif de la semaine : Mettre en place la structure HTML de base et les fondations du JavaScript pour le mouvement. Tâches effectuées : Ilyas (HTML/JS) : Création du fichier index.html avec la balise <canvas> et la div pour le score. Initialisation du script JavaScript dans script.js (ou <script> intégré). Mise en place des constantes de base (taille cellule, dimensions canvas). Implémentation de la fonction initialiserJeu() pour positionner le serpent et la pomme initialement. Début de la fonction boucleJeu() et son setInterval. Ébauche de deplacerSerpent() (sans gestion des collisions encore). Gaspard (CSS) : Application des styles de base pour centrer le jeu et définir les couleurs d'arrière-plan du body et du #jeuCanvas. Ajout d'une bordure visible au canvas. Stylisation initiale de l'affichage du #score. Décisions : Utilisation de la taille de cellule de 20px pour une grille de 400x400. Thème sombre choisi dès le départ pour le CSS. Problèmes rencontrés : Aucun problème majeur, le serpent bouge bien. Prochaines étapes : Implémenter les collisions et la gestion de la pomme. Semaine 2 : 3 Juin 2025 - Fonctionnalités de Jeu & Premiers Graphismes Date : Lundi 3 juin 2025 Participants : Gaspard, Ilyas Objectif de la semaine : Implémenter les mécaniques de collision, la gestion de la pomme, et commencer le rendu amélioré des éléments. Tâches effectuées : Ilyas (HTML/JS) : Finalisation de deplacerSerpent() avec la gestion de la croissance du serpent après avoir mangé. Implémentation de genererPomme() et s'assurer qu'elle n'apparaît pas sur le serpent. Implémentation de collisionSerpent() pour la détection avec le corps. Ajout de la logique de "Game Over" (collision murs/corps) et de la réinitialisation. Intégration de changerDirection() pour les contrôles clavier. Refactorisation des fonctions de dessin (dessinerSegmentSerpent, dessinerPomme). Gaspard (CSS) : Affinement des couleurs dans les variables CSS pour le serpent et la pomme (vert naturel, rouge profond). Ajout d'une ombre et de bords arrondis au #jeuCanvas pour un look plus moderne. Ajustement de la taille de la police pour le score. Décisions : Utilisation de cercles pour les segments du serpent et la pomme. Yeux pour la tête du serpent implémentés. Petite feuille pour la pomme ajoutée. Problèmes rencontrés : La pomme apparaissait parfois sous le serpent juste après le démarrage. Les yeux du serpent ne s'alignaient pas toujours parfaitement avec la direction. Solutions : Modifié genererPomme() pour inclure une boucle while qui régénère la pomme si elle collisionne avec le serpent au moment de la génération. Ajusté les calculs de position des yeux dans dessinerSegmentSerpent() pour être dynamiques en fonction de direction.x et direction.y. ## 6. Bilan du Projet Snake Le projet a abouti à un jeu de Snake fonctionnel et visuellement amélioré, développé en HTML, CSS et JavaScript. Réalisé Jeu opérationnel : Mouvement, croissance, gestion des pommes, et détection des collisions (murs, auto-collision) sont fonctionnels. Contrôles réactifs : Le serpent se dirige avec les flèches clavier. Graphismes soignés : Serpent arrondi avec yeux, pomme réaliste, et thème visuel cohérent. Maîtrise technique : Renforcement des compétences HTML, CSS et JavaScript, notamment avec l'API Canvas. Code structuré : Fonctions claires et modulaires. Souhaité (Pistes Futures) UI avancée : Écrans de démarrage/fin, menus de pause. Fonctionnalités étendues : Niveaux de difficulté, sons, meilleurs scores. Optimisation mobile : Contrôles tactiles pour smartphones/tablettes. Conclusion Le projet Snake est une réussite, livrant un jeu fonctionnel et visuellement amélioré qui répond aux objectifs fixés.