Créer un jeu jouable en navigateur en une semaine, c’était le défi. Je voulais aller de zéro à une démo fonctionnelle, avec un gameplay simple mais une vraie cohérence visuelle et structurelle.
Le concept : guider une tribu dans un environnement hostile à travers les premières étapes de la sédentarisation. Feu de camp, huttes en branchages, famine, stockage, outils, foi… tout repose sur un système de construction et de ressources, dans une carte générée aléatoirement.
Voici un retour complet sur les fondations du projet, les choix techniques et les systèmes mis en place.
Architecture et organisation du code
Le jeu est développé avec Vue 3 et Pinia pour la gestion d’état. J’ai choisi une structure modulaire, avec un store par domaine :
useMapStore: gestion de la carte, zoom, sélection, placementsuseResourceStore: ressources (or, nourriture, population, foi)useMeepleStore: gestion des personnages animésbuildings.json: fichier de configuration de tous les bâtimentstutorialSteps.json: progression tutorielle dynamique
Les composants Vue sont organisés par rôle : MapCanvas.vue pour le rendu isométrique, ActionMenu.vue pour les menus, BuildingButton.vue pour les actions de construction.
Carte isométrique et biomes
La carte est une grille 2D classique rendue en vue isométrique via Canvas. Chaque case contient un identifiant, un type de terrain (grass, water, hills, mountain) et un éventuel bâtiment.
La fonction de transformation getScreenCoords(x, y) applique les offsets isométriques.
Trois biomes sont disponibles, chacun avec ses contraintes :
- Plaines : équilibrées, avec rivière, arbres, gibier
- Désert : vaste, peu de nourriture, beaucoup d’espace
- Neige : dense, très rocheux, riche en gibier mais peu de terrain libre
La génération utilise des fonctions utilitaires spécifiques à chaque biome, qui placent également les montagnes, arbres, zones d’eau, et parfois des éléments indestructibles.
Système de construction
Le cœur du jeu repose sur un système de placement de bâtiments, avec des règles conditionnelles définies dans le mapStore :
- Interdiction de placer un bâtiment dans l’eau ou sur une montagne
- Interdiction de construire trop près d’un feu de camp
- Un bâtiment peut nécessiter un autre bâtiment à proximité (ex : scierie → entrepôt)
- Certains bâtiments ne peuvent apparaître qu’une seule fois (ex : Pierre des savoirs)
- D’autres doivent se positionner sur des ressources spécifiques (ex : piège sur gibier)
Voici un exemple simplifié de règle :
if (selectedBuilding.value === "branch_hut") {
// Doit être proche d’un feu
const radius = 3;
const isValid = checkFireNearby(x, y, radius);
return isValid;
}
Le système vérifie aussi les ressources disponibles (or, cuir, poterie…), et applique un coût d’entretien à chaque bâtiment actif.
Gestion des ressources
Les ressources sont définies dans le resourceStore : or, nourriture, matériaux de construction, objets transformés, foi, etc.
Chaque bâtiment peut produire ou consommer automatiquement des ressources toutes les 10 secondes. Les revenus sont liés à la population disponible, répartie entre les bâtiments qui en nécessitent.
Une consommation automatique de nourriture est appliquée en fonction de la population. En cas de famine prolongée, des habitations se transforment en ruines :
if (totalFood < population.value) {
// Une maison s’effondre toutes les 10 secondes
const target = findRandomHouse();
target.building = "ruin";
}
Les bâtiments inactifs affichent une alerte visuelle.
Meeples et animation
Les meeples représentent les habitants du village. Ils apparaissent automatiquement selon la population disponible et sont placés dans les habitations non occupées.
Chaque meeple possède des coordonnées logiques (grille) et visuelles (canvas), ce qui permet une animation fluide. Ils se déplacent de case en case toutes les 500 ms, avec un petit effet de saut et des variations d’orientation :
if (dx > 0) meeple.facing = "right";
else if (dx < 0) meeple.facing = "left";
Les sprites sont différenciés en version masculine et féminine.
Tutoriel dynamique
Le jeu intègre un système de tutoriel progressif, piloté par un fichier JSON. Chaque étape s’active lorsqu’une condition spécifique est remplie (ex : avoir placé un feu de camp, construit trois huttes, etc.).
Chaque étape affiche une image, un titre, un texte narratif, une explication gameplay et parfois des contraintes (ex : avoir assez de gibier).
Exemple :
{
"id": "afterHuntingTraps",
"title": "La roche",
"check": "hunting_traps >= 1",
"explanation": "Placez une carrière à côté d’une montagne pour extraire de la pierre."
}
Cela permet de guider le joueur dans un vrai scénario de montée en complexité, sans bloquer l’exploration.
Interface et affichage
Le menu des actions est fixe à droite de l’écran. Il est découpé par catégories (besoins, logement, récoltes, industrie, religion, défense…).
Chaque bouton est un composant qui affiche :
- une icône
- le nom du bâtiment
- le coût en or et autres ressources
- les prérequis (bâtiments ou ressources)
Une barre latérale affiche également les ressources actuelles, ainsi qu’un indicateur de gain ou de perte d’or, calculé en temps réel.
Assets et direction artistique
Tous les visuels sont créés pour une vue isométrique, en style cartoon, avec des couleurs mates et un fort contraste.
Contraintes :
- Pas d’ombre portée
- Fond transparent
- Contours sur l’objet uniquement (jamais sur le sol)
- Style lisible sur mobile
Chaque bâtiment, arbre, piège ou décoration a été décliné en version désert, neige ou classique.
Les bâtiments comme les ruines ou les blocs inconstructibles ont un style plus brut ou effondré, pour renforcer la lecture visuelle.
Évolutions prévues
- Ajout de catastrophes naturelles déclenchables (incendies, inondations…)
- Meilleure IA pour le déplacement des meeples
- Système de commerce ou de tribus concurrentes
- Mode conquête de territoire avec brouillard de guerre
- Mode scoring et génération de seeds de carte
Conclusion
Ce défi de 7 jours m’a permis de construire une base solide pour un jeu de gestion jouable dans le navigateur, avec une vraie profondeur stratégique et une direction artistique cohérente.
Ce que j’en retiens :
- Vue 3 et Pinia sont parfaitement adaptés pour un city builder
- La logique isométrique est complexe mais gratifiante
- Structurer les règles dans un JSON ou un store dédié rend le projet évolutif
- Le plus difficile reste l’équilibrage… mais c’est aussi ce qui rend le jeu vivant
Prehistopia est encore en développement, mais vous pouvez déjà y jouer et voir jusqu’où votre tribu peut aller.