Hex Conquest
Jeu de stratégie au tour par tour sur grille hexagonale, développé entièrement en JavaScript vanilla dans le navigateur — sans moteur, sans framework, juste le canvas et la logique à la main. Inspiration directe de Civilization, Command & Conquer et Age of Empires, dans un contexte napoléonien.
Aperçu du jeu
Grille hexagonale isométrique 3D rendue entièrement via Canvas API. Vue inclinée avec tuiles en relief (face supérieure + face latérale ombragée). La caméra se déplace avec Z/S/Q/D. Les ressources (or, hommes, nourriture) s'affichent en temps réel en HUD. Le panneau latéral droit affiche les infos du bâtiment ou de l'unité sélectionné.
Architecture — les 18 modules
Le projet est découpé en 18 fichiers JS modulaires, chaque fichier ayant une responsabilité unique. Zéro dépendance externe, zéro framework.
Constantes
Toutes les valeurs fixes du jeu : taille des hexagones, dimensions de tuile, couleurs de terrain, paramètres de rendu isométrique.
Géométrie
Fonctions de conversion pixel ↔ coordonnées axiales (q, r), calcul des voisins hexagonaux, distances et zones d'influence.
Bruit procédural
Génération de bruit de Perlin/Simplex pour créer la carte de manière procédurale — élévation, humidité, distribution des biomes.
Terrain
Génération des tuiles hexagonales à partir du bruit. Assignation du type de terrain (plaine, forêt, colline, eau, désert) selon les seuils d'élévation.
Biomes
Définition des biomes et de leurs propriétés : bonus défensif, malus de mouvement, ressources disponibles, rendu visuel spécifique.
Rivières
Génération des cours d'eau suivant le gradient d'élévation. Les rivières constituent des obstacles naturels et modifient les bonus défensifs.
Forts & bâtiments
Logique des forts alliés et ennemis : recrutement d'unités, amélioration de niveau, zone de contrôle, points de vie et réparation.
Générateur de carte
Orchestration de la génération complète : appel du bruit, placement des biomes, des rivières, des forts, des villages et des ressources.
Rendu
Moteur de rendu Canvas. Projection isométrique des hexagones, dessin des faces latérales, ombres portées, rendu des unités, animations de sélection.
Interactions
Gestion des événements souris et clavier : sélection d'unité au clic gauche, déplacement/attaque au clic droit, défilement de la caméra Z/S/Q/D.
Modèles 3D
Dessin vectoriel des unités et bâtiments via Canvas : mousquetaires, cavalerie, canons, forts, villages — chaque sprite est dessiné programmatiquement.
Points d'intérêt
Villages, ressources et points stratégiques sur la carte. Gestion de la capture, des bonus de production et de la visibilité en Fog of War.
Logique de jeu
État global du jeu : ressources, tours, score, conditions de victoire/défaite. Gestion du cycle de tour et des transitions entre phases.
Unités
Définition de toutes les unités (stats, portée, mouvement, coût). Logique de déplacement avec vérification des cases accessibles selon les points de mouvement restants.
Système de combat
Résolution des attaques : calcul des dégâts selon le type d'attaque (mêlée/distance), les bonus de terrain, la portée de tir et les points de vie restants.
Recherche
Arbre de recherche technologique inspiré de Civilization : déblocage de nouvelles unités, améliorations de stats, bâtiments avancés.
Interface recherche
Panneau UI de l'arbre de recherche : affichage des nœuds disponibles, coûts, progression, et prévisualisation des bonus débloqués.
IA ennemie (en cours)
Pathfinding A* adapté aux coordonnées hexagonales. Arbre de décision pour les ordres offensifs et défensifs de l'IA. En cours d'implémentation.
Mécaniques implémentées
Ce que ce projet m'a appris
Coordonnées hexagonales — la conversion entre coordonnées pixel et axiales (q, r, s) n'est pas triviale. Implémenter le voisinage, la distance et le pathfinding sur cette géométrie m'a forcé à comprendre les maths derrière, pas juste les formules copiées.
Architecture sans framework — gérer l'état du jeu, les événements canvas, le rendu et la logique métier impose une discipline de structure qu'on n'apprend pas en faisant du DOM simple. Les 18 modules ont une responsabilité unique et claire — sans ça, le code devient incontrôlable à cette échelle (109 Ko pour le seul m14_units.js).
Rendu isométrique — la projection isométrique des hexagones (face supérieure + face latérale ombragée + tri par profondeur) demande de gérer l'ordre de dessin soigneusement pour éviter les artefacts visuels. Résolu via un tri des tuiles de haut en bas, de gauche à droite.