Nokia Snake Game
Une recréation nostalgique du classique jeu Snake du Nokia 3310, construit avec React et HTML5 Canvas. Joue directement dans ton navigateur.
Tu te souviens du Nokia 3310 ? Le téléphone qui pouvait survivre à tout. Avant les smartphones, avant les écrans tactiles, il y avait Snake.
Je l'ai reconstruit de zéro. Les mêmes règles simples. Le même gameplay addictif. Maintenant dans ton navigateur.
Jouez
L'Original
Snake est apparu pour la première fois sur les téléphones Nokia en 1998. Les règles étaient simples : contrôlez une ligne grandissante, mangez des points, ne heurtez pas les murs ni vous-même. Pas de tutoriels. Pas d'achats in-app. Juste du gameplay pur.
La version du Nokia 3310 est devenue légendaire. Elle a été livrée sur plus de 100 millions d'appareils et a introduit toute une génération aux jeux mobiles. L'écran LCD gris, les gros pixels, le bip satisfaisant quand tu mangeais un point — cela a défini les jeux portables pendant des années.
Construction de la Recréation
Rendu Canvas
Le jeu utilise HTML5 Canvas pour un contrôle pixel-perfect. Chaque frame :
- Efface l'écran avec le fond du thème (clair :
#fafafa, sombre :#171717) - Dessine une grille subtile pour l'orientation visuelle
- Rend le serpent comme une série de rectangles remplis
- Dessine la nourriture comme un petit cercle coloré
La tête du serpent est légèrement plus grande que les segments du corps, facilitant le suivi de ta direction.
Architecture du Game Loop
Le jeu tourne sur une boucle basée sur setTimeout plutôt que requestAnimationFrame. Cela donne un contrôle précis sur la vitesse — le serpent se déplace à intervalles fixes, comme l'original.
Game Loop:
1. Traite le changement de direction en file
2. Calcule la nouvelle position de la tête
3. Vérifie les collisions (murs, soi-même)
4. Gère la collision avec la nourriture → grandir + accélérer
5. Met à jour les positions du serpent
6. Rend le frame
7. Planifie le prochain tick
La vitesse commence à 150ms par mouvement et diminue de 5ms à chaque fois que tu manges, jusqu'à un minimum de 50ms. Cela crée la courbe de difficulté graduelle qui a rendu l'original si addictif.
Contrôles
Desktop :
- Touches fléchées ou WASD pour le mouvement
- Espace pour pause/reprendre
Mobile :
- Boutons directionnels à l'écran
- Boutons circulaires en disposition D-pad adaptés au tactile
Le système de contrôle empêche les virages à 180° (tu ne peux pas inverser immédiatement la direction), correspondant au comportement du jeu original.
Gestion d'État
Le jeu utilise les React refs pour l'état critique en termes de performance (position du serpent, direction, nourriture) et React state pour les éléments d'interface (score, état du jeu). Cette approche hybride maintient le game loop rapide tout en laissant React gérer les re-rendus pour l'affichage du score et les overlays.
Les meilleurs scores persistent dans localStorage, survivant aux rafraîchissements du navigateur.
Décisions de Design
Design Adaptatif au Thème
Le jeu s'adapte au schéma de couleurs de ton système avec une palette minimaliste et moderne :
Mode clair :
- Fond :
#fafafa(blanc cassé) - Serpent :
#171717(presque noir) - Nourriture :
#3b82f6(bleu)
Mode sombre :
- Fond :
#171717(presque noir) - Serpent :
#fafafa(blanc cassé) - Nourriture :
#60a5fa(bleu clair)
Le cadre du téléphone utilise des coins arrondis et une ombre pour évoquer le plastique des téléphones mobiles classiques.
Taille de la Grille
Le Nokia 3310 original avait un écran de 84×48 pixels. J'ai choisi une grille de 20×20 avec des cellules de 12px, qui :
- S'adapte bien aux écrans modernes
- Fournit suffisamment de défi sans être frustrant
- S'adapte bien aux appareils mobiles
Pas de Son
J'ai intentionnellement laissé de côté les effets sonores. L'original avait des bips simples, mais l'audio peut être intrusif sur les sites web. Le feedback visuel est suffisamment clair — tu vois le serpent grandir quand il mange.
Ce Que J'ai Appris
Canvas est puissant. Pour les jeux avec des graphiques simples, Canvas fournit tout ce dont tu as besoin sans la complexité de WebGL ou des moteurs de jeux.
Les refs battent le state pour les game loops. Le React state déclenche des re-rendus. Dans un game loop tournant 10+ fois par seconde, c'est trop lent. Les refs donnent des valeurs mutables sans le coût de rendu.
Les contrôles mobiles nécessitent un design soigné. Les cibles tactiles doivent être assez grandes pour être touchées de manière fiable. La disposition D-pad semble naturelle car elle correspond aux contrôleurs de jeu physiques.
Idées Futures
- Ajouter les fonctionnalités classiques de Snake II (obstacles, items bonus)
- Implémenter le multijoueur en utilisant WebSockets
- Ajouter des effets sonores avec un toggle de sourdine
- Créer différents presets de difficulté
- Ajouter un leaderboard utilisant un service backend
Pour l'instant, profite de ce voyage dans le temps. Quel score peux-tu atteindre ?
Outcomes
- •Design minimaliste avec support des modes clair et sombre
- •Game loop fluide avec difficulté progressive
- •Contrôles tactiles pour appareils mobiles
- •Persistance du meilleur score via localStorage
- •Design responsif fonctionnant sur toutes les tailles d'écran