🐍 Snake Game

Un jeu Snake moderne et responsive créé avec HTML5, CSS3 et JavaScript vanilla.

📋 Description

Un jeu Snake classique avec une interface moderne et des fonctionnalités avancées. Le serpent grandit en mangeant des pommes, et le but est d'obtenir le score le plus élevé possible sans toucher les murs ou son propre corps.

✨ Fonctionnalités

🎮 Gameplay

• Serpent dynamique qui grandit en mangeant des pommes
• Détection de collisions avec les murs et le corps du serpent
• Système de score avec sauvegarde du meilleur score
• Écran de Game Over avec possibilité de rejouer

🎯 Contrôles

• Clavier : Flèches directionnelles pour se déplacer
• Pause : Touche Espace ou bouton Pause
• Mobile : Contrôles tactiles (swipe dans la direction souhaitée)
• Interface : Boutons Commencer, Pause, Reset

🎨 Interface

• Design moderne avec effets glassmorphism
• Animations fluides en CSS
• Responsive design - compatible mobile et desktop
• Thème sombre avec dégradés colorés
• Indicateurs visuels pour le score et meilleur score

🔧 Fonctionnalités techniques

• Sauvegarde automatique du meilleur score (localStorage)
• Gestion de la pause avec reprise
• Démarrage intelligent - commence dès le premier mouvement
• Optimisé mobile avec support des gestes tactiles

🚀 Installation

Prérequis

• Un navigateur web moderne (Chrome, Firefox, Safari, Edge)
• Aucune installation supplémentaire requise

Étapes d'installation

1. Téléchargez les fichiers

   snake-game/
   ├── index.html
   ├── style.css
   ├── script.js
   └── README.md
   

2. Ouvrez le jeu

   • Double-cliquez sur index.html
   • Ou ouvrez le fichier dans votre navigateur

3. C'est parti ! 🎮

🎮 Comment jouer

Objectif

Contrôlez le serpent pour manger le maximum de pommes sans toucher les murs ou votre propre corps.

Contrôles

Ordinateur

• ↑ Flèche Haut : Aller vers le haut
• ↓ Flèche Bas : Aller vers le bas
• ← Flèche Gauche : Aller vers la gauche
• → Flèche Droite : Aller vers la droite
• Espace : Mettre en pause / Reprendre

Mobile

• Swipe vers le haut : Aller vers le haut
• Swipe vers le bas : Aller vers le bas
• Swipe vers la gauche : Aller vers la gauche
• Swipe vers la droite : Aller vers la droite

Règles

1. Mangez les pommes rouges pour faire grandir le serpent
2. Évitez les murs - toucher un bord = Game Over
3. Évitez votre queue - se mordre = Game Over
4. Chaque pomme vous rapporte 10 points
5. Le serpent devient plus long à chaque pomme mangée

📁 Structure du projet

snake-game/
│
├── index.html          # Structure HTML du jeu
├── style.css           # Styles et animations CSS
├── script.js           # Logique du jeu en JavaScript
└── README.md           # Documentation (ce fichier)

Détail des fichiers

index.html

• Structure HTML du jeu
• Canvas pour le rendu graphique
• Interface utilisateur (boutons, scores)
• Écran de Game Over

style.css

• Design moderne avec glassmorphism
• Animations CSS fluides
• Responsive design
• Thème sombre avec dégradés

script.js

• Logique complète du jeu
• Gestion des événements (clavier/tactile)
• Système de score et sauvegarde
• Rendu du serpent et de la nourriture

🎨 Personnalisation

Modifier la vitesse du jeu

Dans script.js, ligne 167 :

gameLoop = setInterval(update, 150); // 150ms = vitesse normale

• Plus petit = plus rapide
• Plus grand = plus lent

Changer la taille de la grille

Dans script.js, ligne 15 :

const gridSize = 20; // Taille des cases (20px par défaut)

Modifier les couleurs

Dans style.css, vous pouvez changer :

• Le dégradé de fond (ligne 7)
• Les couleurs du serpent (dans script.js lignes 70-76)
• La couleur de la nourriture (dans script.js ligne 79)

🔧 Fonctionnalités techniques

Sauvegarde des données

• Le meilleur score est sauvegardé dans le localStorage
• Persiste après fermeture du navigateur
• Réinitialisation possible en vidant le cache

Performance

• Utilise requestAnimationFrame pour des animations fluides
• Canvas HTML5 pour un rendu optimisé
• Code JavaScript vanilla (pas de dépendances)

Compatibilité

• ✅ Chrome 60+
• ✅ Firefox 55+
• ✅ Safari 12+
• ✅ Edge 79+
• ✅ Appareils mobiles (iOS/Android)

🐛 Résolution de problèmes

Le jeu ne se lance pas

• Vérifiez que les trois fichiers sont dans le même dossier
• Assurez-vous d'utiliser un navigateur moderne
• Ouvrez la console développeur (F12) pour voir les erreurs

Contrôles qui ne répondent pas

• Cliquez sur le canvas pour donner le focus
• Sur mobile, assurez-vous que le tactile est activé
• Vérifiez que JavaScript est activé dans votre navigateur

Meilleur score perdu

• Le score est sauvegardé dans le localStorage
• Vider le cache efface le meilleur score
• Le mode privé peut empêcher la sauvegarde

🎯 Améliorations futures

Fonctionnalités potentielles

• Niveaux de difficulté (Facile, Normal, Difficile)
• Power-ups spéciaux
• Mode multijoueur local
• Thèmes visuels alternatifs
• Effets sonores
• Classement en ligne
• Mode survie avec obstacles

Améliorations techniques

• Progressive Web App (PWA)
• Optimisation pour très grands écrans
• Mode hors ligne complet
• Analytics de jeu

📄 Licence

Ce projet est sous licence MIT. Vous êtes libre de l'utiliser, le modifier et le distribuer.

🤝 Contribution

Les contributions sont les bienvenues ! N'hésitez pas à :

• Signaler des bugs
• Proposer de nouvelles fonctionnalités
• Améliorer le code
• Corriger la documentation

---

Amusez-vous bien en jouant ! 🐍🎮