vesta/defiance
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Compare commits

base: vesta:1489f28899504c1ff13547ab936c78c2c14d9cd7
Branches Tags
vesta:master
...
compare: vesta:af533ab3993ca381a2aac237f757068c78aed365
Branches Tags
vesta:master

2 commits
1489f28899 ... af533ab399

Author SHA1 Message Date
vesta
af533ab399 version alpha 2025-09-02 19:51:56 +02:00
vesta
627ddd0520 with svg design 2025-08-30 14:41:29 +02:00
4 changed files with 1279 additions and 61 deletions
Download patch file Download diff file Expand all files Collapse all files

157
html/main.html
View file

@ -32,7 +32,146 @@
</style>
</head>
<body class="bg-gray-900 text-white flex h-screen">
<svg width="0" height="0" style="position:absolute; display: none;">
<defs>
<!-- Asset Forêt --> <!-- Asset Forêt Dense -->
<g id="forest-svg" viewBox="0 0 100 100">
<defs>
<linearGradient id="treeTrunkDark" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" style="stop-color:#5F432A;"/><stop offset="100%" style="stop-color:#4A2E1A;"/></linearGradient>
<linearGradient id="treeLeavesDark" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" style="stop-color:#2F855A;"/><stop offset="100%" style="stop-color:#276749;"/></linearGradient>
</defs>
<rect x="55" y="65" width="8" height="20" fill="url(#treeTrunkDark)"/>
<path d="M 59 35 L 85 70 L 33 70 Z" fill="url(#treeLeavesDark)"/>
<rect x="20" y="70" width="10" height="25" fill="url(#treeTrunkDark)"/>
<path d="M 25 25 L 60 75 L -10 75 Z" fill="url(#treeLeavesDark)"/>
<rect x="40" y="75" width="5" height="15" fill="url(#treeTrunkDark)" opacity="0.8"/>
<path d="M 42.5 50 L 60 80 L 25 80 Z" fill="url(#treeLeavesDark)" opacity="0.8"/>
</g>
<!-- Asset Forêt Enchantée -->
<g id="enchanted-forest-svg" viewBox="0 0 100 100">
<defs>
<linearGradient id="enchantedTrunk" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" style="stop-color:#5B21B6;"/><stop offset="100%" style="stop-color:#4C1D95;"/></linearGradient>
<linearGradient id="enchantedLeaves" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" style="stop-color:#A78BFA;"/><stop offset="100%" style="stop-color:#7C3AED;"/></linearGradient>
<radialGradient id="glowEffect"><stop offset="0%" stop-color="#FDE047" stop-opacity="0.8"/><stop offset="100%" stop-color="#FDE047" stop-opacity="0"/></radialGradient>
</defs>
<circle cx="25" cy="85" r="10" fill="url(#glowEffect)"/>
<circle cx="75" cy="80" r="12" fill="url(#glowEffect)"/>
<rect x="46" y="50" width="8" height="45" fill="url(#enchantedTrunk)"/>
<path d="M 50 10 C 20 50, 80 50, 50 10 Z" fill="url(#enchantedLeaves)" transform="rotate(-15 50 50)"/>
<path d="M 50 15 L 85 65 L 15 65 Z" fill="url(#enchantedLeaves)"/>
</g>
<!-- Asset Marais -->
<g id="swamp-svg" viewBox="0 0 100 100">
<defs>
<linearGradient id="swampWater" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" style="stop-color:#4A5568;"/><stop offset="100%" style="stop-color:#2D3748;"/></linearGradient>
<linearGradient id="deadWood" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" style="stop-color:#718096;"/><stop offset="100%" style="stop-color:#4A5568;"/></linearGradient>
</defs>
<path d="M 0 80 Q 50 70, 100 80 L 100 100 L 0 100 Z" fill="url(#swampWater)"/>
<path d="M 20 90 L 22 40 L 25 90 L 27 50 L 29 90" stroke="url(#deadWood)" stroke-width="2" fill="none"/>
<path d="M 70 95 L 68 30 L 72 35 L 75 95 L 73 40" stroke="url(#deadWood)" stroke-width="3" fill="none"/>
</g>
<!-- Asset Horde de Loups -->
<g id="wolf-pack-svg" viewBox="0 0 100 100">
<defs>
<linearGradient id="wolfFurGrey" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" style="stop-color:#A0AEC0;"/><stop offset="100%" style="stop-color:#718096;"/></linearGradient>
</defs>
<!-- Loup 1 (leader) -->
<path d="M 50 25 L 70 45 L 65 75 L 35 75 L 30 45 Z" fill="url(#wolfFurGrey)"/>
<path d="M 40 47 L 30 30 L 45 40 Z" fill="#A0AEC0" stroke="#2D3748" stroke-width="1"/>
<path d="M 60 47 L 70 30 L 55 40 Z" fill="#A0AEC0" stroke="#2D3748" stroke-width="1"/>
<!-- Loup 2 (gauche) -->
<path d="M 25 45 L 40 60 L 35 85 L 10 85 L 5 60 Z" fill="url(#wolfFurGrey)" opacity="0.9"/>
<!-- Loup 3 (droite) -->
<path d="M 75 45 L 95 60 L 90 85 L 65 85 L 60 60 Z" fill="url(#wolfFurGrey)" opacity="0.9"/>
</g>
<!-- Asset Sanglier -->
<!-- Asset Sanglier (détaillé v2) -->
<g id="boar-svg" viewBox="0 0 100 100">
<defs>
<linearGradient id="boarFurDark" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#593C2A;"/>
<stop offset="100%" style="stop-color:#3D2A1F;"/>
</linearGradient>
<linearGradient id="boarTusk" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#F7FAFC;"/>
<stop offset="100%" style="stop-color:#E2E8F0;"/>
</linearGradient>
</defs>
<!-- Pattes arrières -->
<rect x="25" y="70" width="10" height="20" fill="url(#boarFurDark)" transform="rotate(-10 30 80)"/>
<rect x="40" y="72" width="10" height="20" fill="url(#boarFurDark)" transform="rotate(-5 45 82)"/>
<!-- Corps -->
<path d="M 20 60 C 10 40, 40 25, 60 30 L 80 35 C 95 40, 95 60, 80 75 L 30 85 C 15 80, 25 75, 20 60 Z" fill="url(#boarFurDark)"/>
<!-- Pattes avants -->
<rect x="70" y="68" width="12" height="22" fill="url(#boarFurDark)" transform="rotate(10 76 79)"/>
<rect x="80" y="65" width="12" height="22" fill="url(#boarFurDark)" transform="rotate(5 86 76)"/>
<!-- Tête -->
<path d="M 78 33 C 85 28, 95 30, 100 38 L 95 55 L 82 50 Z" fill="url(#boarFurDark)"/>
<!-- Oreille -->
<path d="M 75 32 C 70 25, 80 25, 80 32 Z" fill="#3D2A1F"/>
<!-- Défenses -->
<path d="M 98 52 C 102 47, 97 42, 95 44" fill="url(#boarTusk)" stroke="#A0AEC0" stroke-width="0.5"/>
<!-- Oeil -->
<circle cx="88" cy="42" r="2" fill="#1A202C"/>
<!-- Queue -->
<path d="M 20 65 Q 15 70, 18 75" stroke="#3D2A1F" stroke-width="3" fill="none" stroke-linecap="round"/>
</g>
<!-- Asset Ville -->
<g id="city-svg" viewBox="0 0 100 100">
<defs>
<linearGradient id="stoneGradient" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" style="stop-color:#A9A9A9;"/><stop offset="100%" style="stop-color:#696969;"/></linearGradient>
<linearGradient id="stoneShadowGradient" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" style="stop-color:#808080;"/><stop offset="100%" style="stop-color:#4A5568;"/></linearGradient>
</defs>
<path d="M 10 95 L 15 70 L 85 70 L 90 95 Z" fill="url(#stoneShadowGradient)" stroke="#1A202C" stroke-width="2"/>
<path d="M 15 70 L 15 65 L 25 65 L 25 70 L 35 70 L 35 65 L 45 65 L 45 70 L 55 70 L 55 65 L 65 65 L 65 70 L 75 70 L 75 65 L 85 65 L 85 70 Z" fill="url(#stoneShadowGradient)" stroke="#1A202C" stroke-width="1.5"/>
<rect x="20" y="30" width="20" height="40" fill="url(#stoneGradient)" stroke="#1A202C" stroke-width="2"/><rect x="18" y="25" width="24" height="5" fill="url(#stoneGradient)" stroke="#1A202C" stroke-width="2"/>
<rect x="60" y="30" width="20" height="40" fill="url(#stoneGradient)" stroke="#1A202C" stroke-width="2"/><rect x="58" y="25" width="24" height="5" fill="url(#stoneGradient)" stroke="#1A202C" stroke-width="2"/>
<rect x="40" y="15" width="20" height="55" fill="url(#stoneGradient)" stroke="#1A202C" stroke-width="2"/>
<path d="M 38 15 L 38 10 L 43 10 L 43 15 L 48 15 L 48 10 L 53 10 L 53 15 L 58 15 L 58 10 L 63 10 L 63 15 Z" fill="url(#stoneGradient)" stroke="#1A202C" stroke-width="1.5"/>
</g>
<!-- Asset Village -->
<g id="village-svg" viewBox="0 0 100 100">
<defs>
<linearGradient id="woodGradient" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" style="stop-color:#A0522D;"/><stop offset="100%" style="stop-color:#8B4513;"/></linearGradient>
<linearGradient id="thatchGradient" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" style="stop-color:#D4A373;"/><stop offset="100%" style="stop-color:#A0522D;"/></linearGradient>
</defs>
<rect x="20" y="50" width="60" height="45" fill="url(#woodGradient)" stroke="#1A202C" stroke-width="2"/>
<polygon points="15,50 85,50 50,20" fill="url(#thatchGradient)" stroke="#1A202C" stroke-width="2"/>
<rect x="65" y="60" width="25" height="35" fill="#8B4513" stroke="#1A202C" stroke-width="1.5"/><polygon points="62,60 93,60 77.5,40" fill="#A0522D" stroke="#1A202C" stroke-width="1.5"/>
<rect x="45" y="65" width="10" height="10" fill="#2D3748"/>
</g>
<!-- Asset Joueur (Loup) -->
<g id="player-svg" viewBox="0 0 100 100">
<defs>
<linearGradient id="wolfFurGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#A0AEC0;" />
<stop offset="100%" style="stop-color:#718096;" />
</linearGradient>
<linearGradient id="wolfShadowGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#4A5568;" />
<stop offset="100%" style="stop-color:#2D3748;" />
</linearGradient>
</defs>
<path d="M 50 20 L 90 50 L 80 95 L 20 95 L 10 50 Z" fill="url(#wolfFurGradient)" />
<path d="M 50 20 L 70 55 L 50 65 L 30 55 Z" fill="url(#wolfShadowGradient)" />
<path d="M 25 52 L 10 30 L 35 40 Z" fill="#A0AEC0" stroke="#2D3748" stroke-width="1.5"/>
<path d="M 75 52 L 90 30 L 65 40 Z" fill="#A0AEC0" stroke="#2D3748" stroke-width="1.5"/>
<path d="M 35 55 Q 40 52 45 55 Q 40 58 35 55 Z" fill="#FBBF24" />
<path d="M 65 55 Q 60 52 55 55 Q 60 58 65 55 Z" fill="#FBBF24" />
<circle cx="39" cy="55" r="1.5" fill="black" />
<circle cx="61" cy="55" r="1.5" fill="black" />
</g>
</defs>
</svg>
<!-- Panneau d'information Desktop -->
<div id="desktop-panel" class="w-1/4 max-w-sm p-6 bg-gray-800 shadow-lg overflow-y-auto flex-col hidden md:flex">
<h1 class="text-2xl font-bold mb-4 text-cyan-400">defiance v0.12.1</h1>
@ -46,7 +185,7 @@
</div>
<div class="mt-auto pt-6 text-center text-xs text-gray-500"><p>Généré par Gemini</p></div>
</div>
<!-- Zone du jeu -->
<div class="flex-1 relative">
<canvas id="gameCanvas"></canvas>
@ -58,7 +197,7 @@
</div>
<!-- Bouton d'info Mobile -->
<button id="info-toggle-btn" class="control-btn absolute top-5 right-5 w-16 h-16 rounded-full text-3xl z-20">🎒</button>
<!-- Panneau d'info Mobile (Overlay) -->
<div id="mobile-info-panel" class="absolute inset-0 bg-black/75 p-4 flex-col items-center justify-center z-30 hidden">
<div class="w-full max-w-md max-h-full bg-gray-800 rounded-lg shadow-lg overflow-y-auto p-6 space-y-4">
@ -68,11 +207,11 @@
<div id="tile-info-mobile" class="bg-gray-700 p-4 rounded-lg text-sm"></div>
</div>
</div>
<!-- Contrôles Mobiles -->
<div id="mobile-controls" class="absolute bottom-20 right-5 flex items-end gap-4 z-20">
<button id="btn-camp" class="control-btn rounded-full w-20 h-20 text-3xl">⛺</button>
<button id="btn-action" class="control-btn rounded-full w-20 h-20 text-3xl">✋</button>
<button id="btn-camp" class="control-btn rounded-full w-20 h-20 text-3xl">⛺</button>
<button id="btn-action" class="control-btn rounded-full w-20 h-20 text-3xl">✋</button>
<div class="grid grid-cols-3 grid-rows-3 w-36 h-36 gap-1">
<div></div><button id="btn-up" class="control-btn rounded-t-lg">▲</button><div></div>
<button id="btn-left" class="control-btn rounded-l-lg">◀</button><div></div><button id="btn-right" class="control-btn rounded-r-lg">▶</button>
@ -104,7 +243,7 @@
</div>
</div>
</div>
<script src="../js/script.js"></script>
</body>
<script src="../js/scriptalpha.js"></script>
</body>
</html>

262
js/script.js
View file

@ -3,7 +3,7 @@ document.addEventListener('DOMContentLoaded', () => {
WATER_DEEP: { acceptStructure:false, movements:['swim'], affinities:[('water',0.8),('dark',0.2)], name: 'Eau Profonde', winterColor: '#3D5A80', fallColor: '#3D5A80', summerColor: '#3D5A80', autumnColor: '#3D5A80',maxElevation:0,minElevation:0 },
WATER_SHALLOW: { acceptStructure:false,movements:['swim','ride','navigate','fly'], affinities:[('water',0.8),('life',0.2)],name: 'Eau Peu Profonde', winterColor: '#97aabdff', fallColor: '#5A8AB8', summerColor: '#5A8AB8', autumnColor: '#5A8AB8',maxElevation:1,minElevation:1 },
BEACH: { acceptStructure:true, movements:['walk','ride','fly'],affinities:[('sand',0.8),('water',0.2)],name: 'Sable', winterColor: '#E9D9A1', fallColor: '#E9D9A1', summerColor: '#E9D9A1', autumnColor: '#E9D9A1',maxElevation:2 ,minElevation:2 },
GRASSLAND: { acceptStructure:true, movements:['walk','ride','fly'],affinities:[('life',0.6),('earth',0.2)],name: 'Plaine', winterColor: '#ecf1e3ff', fallColor: '#98C159', summerColor: '#a5a450ff', autumnColor: '#455e21ff',maxElevation:3,minElevation:2 },
GRASSLAND: { sprite:{frame:4,animationSpeed:200 }, acceptStructure:true, movements:['walk','ride','fly'],affinities:[('life',0.6),('earth',0.2)],name: 'Plaine', winterColor: '#ecf1e3ff', fallColor: '#98C159', summerColor: '#a5a450ff', autumnColor: '#455e21ff',maxElevation:3,minElevation:2 },
FOREST: { acceptStructure:true,movements:['walk','ride','fly'],affinities:[('wood',0.6),('earth',0.4)], name: 'Forêt', winterColor: '#92ac83ff', fallColor: '#21a32cff', summerColor: '#6A994E', autumnColor: '#b88a28ff',maxElevation:3,minElevation:2 },
ENCHANTED_FOREST: { acceptStructure:true,movements:['walk','ride','fly'],affinities:[('wood',0.8),('dark',0.2),('life',0.2)], name: 'Forêt Enchantée', winterColor: '#7B6094', fallColor: '#7B6094', summerColor: '#7B6094', autumnColor: '#7B6094',maxElevation:3,minElevation:2 },
MOUNTAIN: { acceptStructure:false, movements:['climb','fly'],affinities:[('rock',0.6),('wind',0.4)],name: 'Montagne', winterColor: '#F7F7F7', fallColor: '#A9A9A9', summerColor: '#A9A9A9', autumnColor: '#A9A9A9',maxElevation:5,minElevation:3 },
@ -11,9 +11,13 @@ document.addEventListener('DOMContentLoaded', () => {
SNOWMOUNTAIN: { acceptStructure:false, movements:['climb','fly'],affinities:[('ice',0.4),('rock',0.4),('wind',0.2)],name: 'Mont enneigé', winterColor: '#F7F7F7', fallColor: '#F7F7F7', summerColor: '#F7F7F7', autumnColor: '#F7F7F7',maxElevation:8,minElevation:4 },
DESERT: { acceptStructure:true,movements:['walk','ride','fly'],affinities:[('sand',0.8),('life',0.1),('fire',0.1)], name: 'Désert', winterColor: '#D4A373', fallColor: '#D4A373', summerColor: '#D4A373', autumnColor: '#D4A373',maxElevation:2,minElevation:2 },
RIVER: { acceptStructure:false,movements:['navigate','swim','fly'],affinities:[('water',0.6),('earth',0.2),('life',0.2)],name: 'Rivière', winterColor: '#97aabdff', fallColor: '#5A8AB8', summerColor: '#5A8AB8', autumnColor: '#5A8AB8',maxElevation:2,minElevation:2 },
SWAMP: { acceptStructure:false, movements:['fly'],affinities:[('water',0.6),('earth',0.2),('dark',0.2)],name: 'Marais', winterColor: '#0b2e10ff', fallColor: '#0b2e10ff', summerColor: '#0b2e10ff', autumnColor: '#0b2e10ff',maxElevation:1,minElevation:1 }
SWAMP: { acceptStructure:false, movements:['fly'],affinities:[('water',0.6),('earth',0.2),('dark',0.2)],name: 'Marais', winterColor: '#15521eff', fallColor: '#15521eff', summerColor: '#15521eff', autumnColor: '#15521eff',maxElevation:1,minElevation:1 }
}
let grasslandSheet;
let grasslandFrame = 0;
let lastGrassFrameTime = 0;
const NAME_PREFIXES = ["Chêne", "Sombre", "Pierre", "Haut", "Val", "Mur", "Guet", "Clair"];
const NAME_SUFFIXES = ["bourg", "fort", "ville", "mont", "port", "bois", "rivage", "gard"];
@ -73,8 +77,8 @@ document.addEventListener('DOMContentLoaded', () => {
};
const ANIMAL_TYPES = {
WOLF: { name: 'Loup', icon: '🐺', hp: 20, strength: 4, xp: 15, loot: { 'Cuir': 1, 'Os': 1 }, design: `<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="wolfFurGradient" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" style="stop-color:#4A5568;" /><stop offset="100%" style="stop-color:#2D3748;" /></linearGradient><linearGradient id="wolfShadowGradient" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" style="stop-color:#2D3748;" /><stop offset="100%" style="stop-color:#1A202C;" /></linearGradient></defs><g><path d="M 50 10 L 90 40 L 80 95 L 20 95 L 10 40 Z" fill="url(#wolfFurGradient)" /><path d="M 50 10 L 70 45 L 50 55 L 30 45 Z" fill="url(#wolfShadowGradient)" /><path d="M 20 95 Q 40 70 50 75 Q 60 70 80 95 L 75 98 L 25 98 Z" fill="#2D3748" /><path d="M 25 42 L 10 20 L 35 30 Z" fill="#4A5568" stroke="#1A202C" stroke-width="1"/><path d="M 75 42 L 90 20 L 65 30 Z" fill="#4A5568" stroke="#1A202C" stroke-width="1"/><path d="M 28 38 L 18 25 L 35 32 Z" fill="#2D3748"/><path d="M 72 38 L 82 25 L 65 32 Z" fill="#2D3748"/><path d="M 50 50 L 65 80 L 50 90 L 35 80 Z" fill="#4A5568" /><path d="M 50 85 L 55 95 L 45 95 Z" fill="black" /><path d="M 35 45 Q 40 42 45 45 Q 40 48 35 45 Z" fill="#FBBF24" /><path d="M 65 45 Q 60 42 55 45 Q 60 48 65 45 Z" fill="#FBBF24" /><circle cx="39" cy="45" r="1" fill="black" /><circle cx="61" cy="45" r="1" fill="black" /><path d="M 18 50 L 10 40 L 25 55 Z" fill="#4A5568" /><path d="M 82 50 L 90 40 L 75 55 Z" fill="#4A5568" /><path d="M 20 65 L 5 55 L 22 70 Z" fill="#4A5568" /><path d="M 80 65 L 95 55 L 78 70 Z" fill="#4A5568" /></g></svg>`},
BOAR: { name: 'Sanglier', icon: '🐗', hp: 25, strength: 5, xp: 20, loot: { 'Cuir': 2 } },
WOLF: { name: 'Loup', svgAsset: () => wolfsSVG, hp: 20, strength: 4, xp: 15, loot: { 'Cuir': 1, 'Os': 1 }, biomes: [Biome.FOREST, Biome.MOUNTAIN, Biome.SNOWLAND], spawnChance: 0.01 },
BOAR: { name: 'Sanglier', svgAsset: () => boarSVG, hp: 25, strength: 5, xp: 20, loot: { 'Cuir': 2 }, biomes: [Biome.FOREST, Biome.GRASSLAND], spawnChance: 0.02 },
};
@ -115,6 +119,8 @@ document.addEventListener('DOMContentLoaded', () => {
this.setElevation();
this.setStructure();
//this.setDesign(ctx);
//this.forestSvg=null;
//this.setSvg();
}
// Méthode de l'objet
@ -125,6 +131,7 @@ document.addEventListener('DOMContentLoaded', () => {
let mRaw = (simplex.noise2D(this.position.x * scale * 1.5, this.position.y * scale * 1.5) + 1) / 2;
if (eRaw < 0.25) this.biome = Biome.WATER_DEEP;
else if (eRaw < 0.3) this.biome = Biome.WATER_SHALLOW;
else if (eRaw < 0.32) this.biome = Biome.SWAMP;
else if (eRaw < 0.35) this.biome = Biome.BEACH;
else if (eRaw > 0.85) this.biome = Biome.SNOWMOUNTAIN;
else if (eRaw > 0.75) this.biome = Biome.MOUNTAIN;
@ -134,47 +141,52 @@ document.addEventListener('DOMContentLoaded', () => {
else this.biome = Biome.GRASSLAND;
}
}
setDesign(ctx){
setDesign(ctx,currentTime){
if (!this.biome) return;
const screenPos = this.position.cartToIso();
const elevationHeight = this.position.h * 8;
let baseColor=null;
ctx.save();
ctx.translate(screenPos.x, screenPos.y - elevationHeight);
const baseColor = this.biome.summerColor;
if (currentTime.season == 'winter') { baseColor = this.biome.winterColor;}
if (currentTime.season == 'summer') { baseColor = this.biome.summerColor;}
if (currentTime.season == 'fall') { baseColor = this.biome.fallColor;}
if (currentTime.season == 'autumn') { baseColor = this.biome.autumnColor;}
const shadowColor = shadeColor(baseColor, -30);
// Right Face
ctx.fillStyle = shadowColor;
ctx.beginPath();
ctx.moveTo(0, 32); ctx.lineTo(32, 16); ctx.lineTo(32, 16 + elevationHeight); ctx.lineTo(0, 32 + elevationHeight);
ctx.closePath();
ctx.fill();
// Left Face
ctx.fillStyle = shadeColor(shadowColor, -10);
ctx.beginPath();
ctx.moveTo(0, 32); ctx.lineTo(-32, 16); ctx.lineTo(-32, 16 + elevationHeight); ctx.lineTo(0, 32 + elevationHeight);
ctx.closePath();
ctx.fill();
// Top Face
ctx.fillStyle = baseColor;
ctx.beginPath();
ctx.moveTo(0, 0); ctx.lineTo(32, 16); ctx.lineTo(0, 32); ctx.lineTo(-32, 16);
ctx.closePath();
ctx.fill();
if (this.structure && this.structure.type === 'village') {
ctx.fillStyle = '#D4A373';
ctx.fillRect(-8, -12, 16, 12);
ctx.fillStyle = '#8B4513';
ctx.beginPath();
ctx.moveTo(0, -22); ctx.lineTo(-10, -12); ctx.lineTo(10, -12);
ctx.closePath();
ctx.fill();
} else if (this.structure && this.structure.type === 'city') {
ctx.fillStyle = '#C0C0C0';
ctx.fillRect(-10, -20, 20, 20);
ctx.fillStyle = '#808080';
ctx.beginPath();
ctx.moveTo(-10, -20); ctx.lineTo(-12, -22); ctx.lineTo(22, -22); ctx.lineTo(20, -20);
ctx.closePath();
ctx.fill();
if (this.biome === Biome.FOREST && forestSVG) {
ctx.drawImage(forestSVG, -25, -25, 50, 50);
} else if (this.biome === Biome.ENCHANTED_FOREST && mforestSVG) {
ctx.drawImage(mforestSVG, -25, -25, 50, 50);
} else if (this.biome === Biome.SWAMP && swampSVG) {
ctx.drawImage(swampSVG, -25, -5, 50, 30);
}
if (this.structure) {
if (this.structure.type === 'village' && villageSVG) {
ctx.drawImage(villageSVG, -20, -16, 40, 40);
} else if (this.structure.type === 'city' && citySVG) {
ctx.drawImage(citySVG, -24, -28, 48, 48);
}
}
ctx.restore();
}
@ -285,7 +297,54 @@ document.addEventListener('DOMContentLoaded', () => {
// Méthode de l'objet
}
class Animal {
constructor(type, tile) {
this.type = type;
this.tile = tile; // The tile the animal is currently on
this.lastMoveTime = 0;
this.moveCooldown = 2000 + Math.random() * 3000; // Move every 2-5 seconds
}
update(currentTime, gameMap) {
if (currentTime - this.lastMoveTime > this.moveCooldown) {
this.move(gameMap);
this.lastMoveTime = currentTime;
this.moveCooldown = 2000 + Math.random() * 3000;
}
}
move(gameMap) {
const possibleMoves = [
{ dx: 0, dy: -1 }, { dx: 0, dy: 1 }, { dx: -1, dy: 0 }, { dx: 1, dy: 0 },
];
const move = possibleMoves[Math.floor(Math.random() * possibleMoves.length)];
const newX = this.tile.position.x + move.dx;
const newY = this.tile.position.y + move.dy;
if (newX >= 0 && newX < gameMap.size && newY >= 0 && newY < gameMap.size) {
const targetTile = gameMap.tiles[newY][newX];
if (targetTile.biome && (targetTile.biome.movements.includes('walk') || targetTile.biome.movements.includes('climb')) && this.type.biomes.includes(targetTile.biome)) {
this.tile = targetTile;
}
}
}
setDesign(ctx) {
const svgImage = this.type.svgAsset();
if (!this.tile || !svgImage) return;
const screenPos = this.tile.position.cartToIso();
const elevationHeight = this.tile.position.h * 8;
const size = this.type.size || { w: 40, h: 40 };
const offset = this.type.offset || { x: -20, y: -35 };
ctx.save();
ctx.translate(screenPos.x, screenPos.y - elevationHeight);
ctx.drawImage(svgImage, offset.x, offset.y, size.w, size.h);
ctx.restore();
}
}
class Creature {
constructor(name,attributes,level,affinities,alignments,tile,species,race,hp,items) {
this.name = name;
@ -330,14 +389,17 @@ document.addEventListener('DOMContentLoaded', () => {
}
class Player {
constructor(creature,equipments) {
constructor(creature,equipments,playerImage) {
this.creature=creature;
this.equipments=equipments;
this.color = '#E53E3E';
//this.playerImage = playerImage ;
//this.setSvg();
}
get position() {
return this.creature.tile.position;
}
setDesign(ctx) {
const tile = this.creature.tile
if(!tile) return;
@ -347,9 +409,12 @@ document.addEventListener('DOMContentLoaded', () => {
ctx.save();
ctx.translate(screenPos.x, screenPos.y - elevationHeight);
ctx.fillStyle = 'rgba(0, 0, 0, 0.4)'; ctx.beginPath(); ctx.ellipse(0, TILE_HEIGHT / 2 + 2, 6, 3, 0, 0, Math.PI * 2); ctx.fill();
ctx.fillStyle = this.color; ctx.beginPath(); ctx.arc(0, TILE_HEIGHT / 2 - 6, 8, 0, Math.PI * 2); ctx.fill();
ctx.strokeStyle = shadeColor(this.color, -30); ctx.lineWidth = 2; ctx.stroke();
if (playerSVG && playerSVG.complete) {
ctx.drawImage(playerSVG, -25, -50, 50, 60);
} else { // Fallback to circle
ctx.fillStyle = this.color; ctx.beginPath(); ctx.arc(0, TILE_HEIGHT / 2 - 6, 8, 0, Math.PI * 2); ctx.fill();
}
ctx.restore();
}
move(dx, dy, gameMap) {
@ -469,18 +534,32 @@ document.addEventListener('DOMContentLoaded', () => {
constructor(name) {
this.name = name;
this.map = new Map(200)
let spawnX, spawnY;
do {
spawnX = Math.floor(Math.random() * this.map.size);
spawnY = Math.floor(Math.random() * this.map.size);
} while (!this.map.tiles[spawnY][spawnX].biome || !this.map.tiles[spawnY][spawnX].biome.movements.includes('walk') );
this.player = new Player(new Creature('player',new Attributes(RACE.HUMAN),1,null,null,this.map.tiles[spawnY][spawnX],'human',RACE.HUMAN,10,null),null);
this.currentTime=new Time();
this.animals = [];
this.setAnimals();
}
// Méthode de l'objet
save() {
}
setAnimals() {
console.time('Animal Spawning');
for (let y = 0; y < this.map.size; y++) {
for (let x = 0; x < this.map.size; x++) {
const tile = this.map.tiles[y][x];
if (tile.biome && tile.biome.movements.includes('walk')) {
for (const key in ANIMAL_TYPES) {
const animalType = ANIMAL_TYPES[key];
if (animalType.biomes.includes(tile.biome) && Math.random() < animalType.spawnChance) {
this.animals.push(new Animal(animalType, tile));
}
}
}
}
}
console.log(`Spawned ${this.animals.length} animals.`);
console.timeEnd('Animal Spawning');
}
}
class Camera {
@ -506,14 +585,30 @@ document.addEventListener('DOMContentLoaded', () => {
this.camera = new Camera(0,0, canvas);
this.setControls();
this.loop = this.loop.bind(this);
this.player=null;
this.setInitial();
}
// Méthode de l'objet
loop(currentTime) {
this.updateAnimals(currentTime);
this.handleMovement(currentTime);
this.camera.setCamera(this.world.player.position);
this.camera.setCamera(this.player.position);
this.setDesign();
requestAnimationFrame(this.loop);
}
updateAnimals(currentTime) {
this.world.animals.forEach(animal => {
animal.update(currentTime, this.world.map);
});
}
setInitial(){
let spawnX, spawnY;
do {
spawnX = Math.floor(Math.random() * this.world.map.size);
spawnY = Math.floor(Math.random() * this.world.map.size);
} while (!this.world.map.tiles[spawnY][spawnX].biome || !this.world.map.tiles[spawnY][spawnX].biome.movements.includes('walk') );
this.player = new Player(new Creature('player',new Attributes(RACE.HUMAN),1,null,null,this.world.map.tiles[spawnY][spawnX],'human',RACE.HUMAN,10,null),);
}
setControls() {
document.addEventListener('keydown', e => {
const key = e.key.toLowerCase();
@ -544,8 +639,9 @@ document.addEventListener('DOMContentLoaded', () => {
ctx.save();
ctx.translate(this.camera.x, this.camera.y);
for (let y = 0; y < this.world.map.size; y++) for (let x = 0; x < this.world.map.size; x++) this.world.map.tiles[y][x].setDesign(ctx);
this.world.player.setDesign(ctx);
for (let y = 0; y < this.world.map.size; y++) for (let x = 0; x < this.world.map.size; x++) this.world.map.tiles[y][x].setDesign(ctx,this.world.currentTime);
this.world.animals.forEach(animal => animal.setDesign(ctx));
this.player.setDesign(ctx);
this.world.currentTime.setDesign(ctx);
ctx.fillRect(this.camera.x * -1, this.camera.y * -1, canvas.width, canvas.height);
ctx.globalAlpha = 1.0;
@ -557,10 +653,10 @@ document.addEventListener('DOMContentLoaded', () => {
handleMovement(currentTime) {
if (currentTime - lastMoveTime < 150) return;
let moved = false;
if (controls.up) { this.world.player.move(0, -1,this.world.map); moved = true; }
if (controls.down) { this.world.player.move(0, 1,this.world.map); moved = true; }
if (controls.left) { this.world.player.move(-1, 0,this.world.map); moved = true; }
if (controls.right) { this.world.player.move(1, 0,this.world.map); moved = true; }
if (controls.up) { this.player.move(0, -1,this.world.map); moved = true; }
if (controls.down) { this.player.move(0, 1,this.world.map); moved = true; }
if (controls.left) { this.player.move(-1, 0,this.world.map); moved = true; }
if (controls.right) { this.player.move(1, 0,this.world.map); moved = true; }
if(moved) lastMoveTime = currentTime;
}
}
@ -577,28 +673,90 @@ document.addEventListener('DOMContentLoaded', () => {
const TILE_WIDTH = 64;
const TILE_HEIGHT = 32;
const ELEVATION_STEP = TILE_HEIGHT / 4;
let forestSVG, villageSVG, citySVG, boarSVG,wolfsSVG,swampSVG, playerSVG,mforestSVG;
function seededRandom(seed) {
let s = seed;
return () => { s = (s * 9301 + 49297) % 233280; return s / 233280.0; };
}
function loadSvgAsImage(gElement) {
return new Promise((resolve, reject) => {
if (!gElement) {
return reject(new Error("SVG <g> element not found."));
}
const viewBox = gElement.getAttribute('viewBox') || '0 0 100 100';
// Create a new, standalone <svg> element in memory
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
svg.setAttribute('viewBox', viewBox);
// Clone the content of the <g> element into the new <svg>
svg.innerHTML = gElement.innerHTML;
const serializer = new XMLSerializer();
const svgString = serializer.serializeToString(svg);
const svgBlob = new Blob([svgString], { type: "image/svg+xml;charset=utf-8" });
const url = URL.createObjectURL(svgBlob);
const img = new Image();
img.onload = () => {
URL.revokeObjectURL(url);
resolve(img);
};
img.onerror = (err) => {
URL.revokeObjectURL(url);
reject(new Error('Failed to load SVG as image: ' + err.type));
};
img.src = url;
});
}
function shadeColor(c, p) {
let R=parseInt(c.substring(1,3),16),G=parseInt(c.substring(3,5),16),B=parseInt(c.substring(5,7),16);R=parseInt(R*(100+p)/100);G=parseInt(G*(100+p)/100);B=parseInt(B*(100+p)/100);R=(R<255)?R:255;G=(G<255)?G:255;B=(B<255)?B:255;
return "#"+("0"+R.toString(16)).slice(-2)+("0"+G.toString(16)).slice(-2)+("0"+B.toString(16)).slice(-2);
}
function initializeGame() {
async function initializeGame() {
canvas.width = canvas.parentElement.clientWidth;
canvas.height = canvas.parentElement.clientHeight;
let session=new Session();
isGameReady = true;
loadingScreen.style.display = 'none';
session.loop();
try {
// Load SVG assets from HTML and convert them to Image objects
const forestElement = document.getElementById('forest-svg');
const villageElement = document.getElementById('village-svg');
const cityElement = document.getElementById('city-svg');
const playerElement = document.getElementById('player-svg');
const boarElement = document.getElementById('boar-svg');
const wolfsElement = document.getElementById('wolf-pack-svg');
const swampElement = document.getElementById('swamp-svg');
const manaForestElement = document.getElementById('enchanted-forest-svg');
//const cityElement = document.getElementById('swamp-svg');
[forestSVG, villageSVG, citySVG, boarSVG,wolfsSVG,swampSVG, playerSVG,mforestSVG] = await Promise.all([
loadSvgAsImage(forestElement),
loadSvgAsImage(villageElement),
loadSvgAsImage(cityElement),
loadSvgAsImage(boarElement),
loadSvgAsImage(wolfsElement),
loadSvgAsImage(swampElement),
loadSvgAsImage(playerElement),
loadSvgAsImage(manaForestElement)
]);
console.log("All SVG assets loaded as images.");
let session = new Session();
loadingScreen.style.display = 'none';
session.loop();
} catch (error) {
console.error("Failed to load SVG assets:", error);
loadingScreen.innerHTML = "Error loading assets. Please refresh.";
}
}
initializeGame();
})

804
js/scriptalpha.js Normal file
View file

@ -0,0 +1,804 @@
document.addEventListener('DOMContentLoaded', () => {
const Biome = {
WATER_DEEP: { sprite: null, acceptStructure:false, movements:['swim'], affinities:[('water',0.8),('dark',0.2)], name: 'Eau Profonde', winterColor: '#3D5A80', fallColor: '#3D5A80', summerColor: '#3D5A80', autumnColor: '#3D5A80',maxElevation:0,minElevation:0 },
WATER_SHALLOW: { sprite: null, acceptStructure:false,movements:['swim','ride','navigate','fly'], affinities:[('water',0.8),('life',0.2)],name: 'Eau Peu Profonde', winterColor: '#97aabdff', fallColor: '#5A8AB8', summerColor: '#5A8AB8', autumnColor: '#5A8AB8',maxElevation:1,minElevation:1 },
BEACH: { sprite: null, acceptStructure:true, movements:['walk','ride','fly'],affinities:[('sand',0.8),('water',0.2)],name: 'Sable', winterColor: '#E9D9A1', fallColor: '#E9D9A1', summerColor: '#E9D9A1', autumnColor: '#E9D9A1',maxElevation:2 ,minElevation:2 },
GRASSLAND: { sprite: null, acceptStructure:true, movements:['walk','ride','fly'],affinities:[('life',0.6),('earth',0.2)],name: 'Plaine', winterColor: '#ecf1e3ff', fallColor: '#98C159', summerColor: '#a5a450ff', autumnColor: '#455e21ff',maxElevation:3,minElevation:2 },
FOREST: { sprite: null, acceptStructure:true,movements:['walk','ride','fly'],affinities:[('wood',0.6),('earth',0.4)], name: 'Forêt', winterColor: '#92ac83ff', fallColor: '#21a32cff', summerColor: '#6A994E', autumnColor: '#b88a28ff',maxElevation:3,minElevation:2 },
ENCHANTED_FOREST: { sprite: null, acceptStructure:true,movements:['walk','ride','fly'],affinities:[('wood',0.8),('dark',0.2),('life',0.2)], name: 'Forêt Enchantée', winterColor: '#7B6094', fallColor: '#7B6094', summerColor: '#7B6094', autumnColor: '#7B6094',maxElevation:3,minElevation:2 },
MOUNTAIN: { sprite: null, acceptStructure:false, movements:['climb','fly'],affinities:[('rock',0.6),('wind',0.4)],name: 'Montagne', winterColor: '#F7F7F7', fallColor: '#A9A9A9', summerColor: '#A9A9A9', autumnColor: '#A9A9A9',maxElevation:5,minElevation:3 },
SNOWLAND: { sprite: null, acceptStructure:true,movements:['walk','ride','fly'], affinities:[('ice',0.8),('earth',0.2)],name: 'Toundra', winterColor: '#F7F7F7', fallColor: '#F7F7F7', summerColor: '#F7F7F7', autumnColor: '#F7F7F7',maxElevation:2,minElevation:2 },
SNOWMOUNTAIN: { sprite: null, acceptStructure:false, movements:['climb','fly'],affinities:[('ice',0.4),('rock',0.4),('wind',0.2)],name: 'Mont enneigé', winterColor: '#F7F7F7', fallColor: '#F7F7F7', summerColor: '#F7F7F7', autumnColor: '#F7F7F7',maxElevation:8,minElevation:4 },
DESERT: { sprite: null, acceptStructure:true,movements:['walk','ride','fly'],affinities:[('sand',0.8),('life',0.1),('fire',0.1)], name: 'Désert', winterColor: '#D4A373', fallColor: '#D4A373', summerColor: '#D4A373', autumnColor: '#D4A373',maxElevation:2,minElevation:2 },
RIVER: { sprite: null, acceptStructure:false,movements:['navigate','swim','fly'],affinities:[('water',0.6),('earth',0.2),('life',0.2)],name: 'Rivière', winterColor: '#97aabdff', fallColor: '#5A8AB8', summerColor: '#5A8AB8', autumnColor: '#5A8AB8',maxElevation:2,minElevation:2 },
SWAMP: { sprite: null, acceptStructure:false, movements:['fly'],affinities:[('water',0.6),('earth',0.2),('dark',0.2)],name: 'Marais', winterColor: '#0b2e10ff', fallColor: '#0b2e10ff', summerColor: '#0b2e10ff', autumnColor: '#0b2e10ff',maxElevation:1,minElevation:1 }
}
const NAME_PREFIXES = ["Chêne", "Sombre", "Pierre", "Haut", "Val", "Mur", "Guet", "Clair"];
const NAME_SUFFIXES = ["bourg", "fort", "ville", "mont", "port", "bois", "rivage", "gard"];
const Affinities = ['water','fire','sand','rock','dark','life','ice','wood','wind','metal','time','space','lava','light','spirit'];
const RACE = {
HUMAN: {strength:1,vitality:1,dexterity:1,intelligence:1,wisdom:1,luck:1}
};
const Slot = ['head','body','leg','foot','right-hand','left-hand','two-hands','finger1','finger2','neck','purse','backpack','belt1','belt2'];
const ItemType = {
lightWeapon:{slot:['right-hand','left-hand','backpack'],soul:true,enchant:true},
heavyWeapon:{slot:('two-hands','backpack'),soul:true,enchant:true},
heavyArmor:{slot:('body','backpack'),soul:true,enchant:true},
lightArmor:{slot:('body','backpack'),soul:true,enchant:true},
shield:{slot:('right-hand','left-hand','backpack'),soul:true,enchant:true},
shoes:{slot:('foot','backpack'),soul:true,enchant:true},
pant:{slot:('leg','backpack'),soul:true,enchant:true},
helmet:{slot:('leg','backpack'),soul:true,enchant:true},
potion:{slot:('heal','backpack'),soul:false,enchant:false},
throwable:{slot:('belt','backpack'),soul:true,enchant:true},
craftMaterial:{slot:('backpack'),soul:false,enchant:false},
ring:{slot:('finger1','finger2','backpack'),soul:true,enchant:true},
amulet:{slot:('neck','backpack'),soul:true,enchant:true},
currency:{slot:('purse'),soul:true,enchant:true},
enchantMaterial:{slot:('backpack'),soul:false,enchant:false},
mercantMaterial:{slot:('backpack'),soul:false,enchant:false}
}
const Items = {
'Épée en Bois': { name: 'Épée en Bois', itemType: 'lightWeapon', stats: { strength: 2 }, icon: '🗡️' ,enchantments:[] },
'Armure de Cuir': { name: 'Armure de Cuir', itemType: 'lightArmor', stats: { vitality: 2 }, icon: '🧥',enchantments:[] },
'Claymore': { name: 'Claymore', itemType: 'lightArmor', stats: { vitality: 2 }, icon: '🧥',enchantments:['primal'] },
'Bois': { name: 'Bois', itemType: 'craftMaterial', icon: '🌲',biome:['FOREST'],occurence:0.9},
'stone': { name: 'Pierre', itemType: 'craftMaterial', icon: '🗿',biome:['MOUNTAIN'],occurence:0.4},
'Herbes': { name: 'Herbes', itemType: 'craftMaterial', icon: '🌿',biome:['GRASSLAND'],occurence:0.4},
'Cristaux Magiques': { name: ' enchantMaterial',icon: '💎',biome:['MOUNTAIN','ENCHANTED_FOREST'],occurence:0.005},
'Fer': { name: 'Fer', itemType: 'craftMaterial', icon: '🔩',biome:['MOUNTAIN'],occurence:0.001},
'Mushroom': { name: 'Champignons', itemType: 'craftMaterial', icon: '🍄',biome:['FOREST'],occurence:0.01},
'gold': { name: 'Champignons', itemType: 'mercantMaterial', icon: '💰',biome:['MOUNTAIN','RIVER'],occurence:0.001}
};
const StructureType = {
TOWN: { name: 'Ville', population:15, icon: '🗡️', occurence:0.001 },
VILLAGE: { name: 'Village', population:5, icon: '🗡️',occurence:0.005 },
FARM: { name: 'Ferme', population:5, icon: '🗡️',occurence:0.010 },
CAMP:{ name: 'Campement', population:2, icon: '⛺',occurence:0.002 },
};
const MONSTER_TYPES = {
GOBLIN: { name: 'Gobelin', icon: '👺', hp: 30, strength: 3, xp: 25, loot: { 'Or': 5 } },
ORC: { name: 'Orc', icon: '👹', hp: 60, strength: 6, xp: 50, loot: { 'Or': 15, 'Fer': 1 } },
};
const ANIMAL_TYPES = {
WOLF: { name: 'Loup', svgAsset: () => wolfPackSVG, hp: 20, strength: 4, xp: 15, loot: { 'Cuir': 1, 'Os': 1 }, biomes: [Biome.FOREST, Biome.MOUNTAIN, Biome.SNOWLAND], spawnChance: 0.01, size: { w: 40, h: 40 }, offset: { x: -20, y: -35 } },
BOAR: { name: 'Sanglier', svgAsset: () => boarSVG, hp: 25, strength: 5, xp: 20, loot: { 'Cuir': 2 }, biomes: [Biome.FOREST, Biome.GRASSLAND], spawnChance: 0.02, size: { w: 30, h: 30 }, offset: { x: -15, y: -28 } },
};
// --- Global Asset Variables ---
let forestSVG, villageSVG, citySVG, playerSVG, enchantedForestSVG, swampSVG, wolfPackSVG, boarSVG;
class Sprite {
constructor(sheet, frameWidth, frameHeight, frameCount, animationSpeed) {
this.sheet = sheet;
this.frameWidth = frameWidth;
this.frameHeight = frameHeight;
this.frameCount = frameCount;
this.animationSpeed = animationSpeed;
this.currentFrame = 0;
this.lastFrameTime = 0;
}
update(currentTime) {
if (this.frameCount <= 1) return; // Don't animate static sprites
if (currentTime - this.lastFrameTime > this.animationSpeed) {
this.currentFrame = (this.currentFrame + 1) % this.frameCount;
this.lastFrameTime = currentTime;
}
}
draw(ctx, dx, dy) {
if (!this.sheet) return;
const sx = 0;
const sy = this.currentFrame * this.frameHeight;
ctx.drawImage(this.sheet,
sx, sy, this.frameWidth, this.frameHeight,
dx, dy, this.frameWidth, this.frameHeight
);
}
}
class Position{
constructor(x,y,h=0) {
this.x = x;
this.y = y;
this.h = h;
}
setPosition(x, y, h=0) {
this.x = x;
this.y = y;
this.h = h;
}
getPosition() {
return { x: this.x, y: this.y, h: this.h };
}
cartToIso() {
return {
x: (this.x - this.y) * (TILE_WIDTH / 2),
y: (this.x + this.y) * (TILE_HEIGHT / 2)
}
}
}
class Animal {
constructor(type, tile) {
this.type = type;
this.tile = tile;
this.lastMoveTime = 0;
this.moveCooldown = 2000 + Math.random() * 3000;
}
update(currentTime, gameMap) {
if (currentTime - this.lastMoveTime > this.moveCooldown) {
this.move(gameMap);
this.lastMoveTime = currentTime;
this.moveCooldown = 2000 + Math.random() * 3000;
}
}
move(gameMap) {
const possibleMoves = [ { dx: 0, dy: -1 }, { dx: 0, dy: 1 }, { dx: -1, dy: 0 }, { dx: 1, dy: 0 }];
const move = possibleMoves[Math.floor(Math.random() * possibleMoves.length)];
const newX = this.tile.position.x + move.dx;
const newY = this.tile.position.y + move.dy;
if (newX >= 0 && newX < gameMap.size && newY >= 0 && newY < gameMap.size) {
const targetTile = gameMap.tiles[newY][newX];
if (targetTile.biome && (targetTile.biome.movements.includes('walk') || targetTile.biome.movements.includes('climb')) && this.type.biomes.includes(targetTile.biome)) {
this.tile = targetTile;
}
}
}
setDesign(ctx) {
if (!this.tile || this.tile.visibility !== 2) return;
const svgImage = this.type.svgAsset();
if (!svgImage) return;
const screenPos = this.tile.position.cartToIso();
const elevationHeight = this.tile.position.h * ELEVATION_STEP;
const size = this.type.size || { w: 40, h: 40 };
const offset = this.type.offset || { x: -20, y: -35 };
ctx.save();
ctx.translate(screenPos.x, screenPos.y - elevationHeight);
ctx.drawImage(svgImage, offset.x, offset.y, size.w, size.h);
ctx.restore();
}
}
class Tile {
constructor(x, y) {
this.position = new Position(x, y);
this.biome = null;
this.structure = null;
this.visibility = 0; // 0: Unseen, 1: Seen, 2: Visible
this.setBiome();
this.setElevation();
this.setStructure();
}
setBiome() {
let scale = 0.05;
let eRaw = (simplex.noise2D(this.position.x * scale, this.position.y * scale) + 1) / 2;
let tRaw = (simplex.noise2D(this.position.x * scale * 0.8, this.position.y * scale * 0.8) + 1) / 2;
let mRaw = (simplex.noise2D(this.position.x * scale * 1.5, this.position.y * scale * 1.5) + 1) / 2;
if (eRaw < 0.25) this.biome = Biome.WATER_DEEP;
else if (eRaw < 0.3) this.biome = Biome.WATER_SHALLOW;
else if (eRaw < 0.32) this.biome = Biome.SWAMP;
else if (eRaw < 0.35) this.biome = Biome.BEACH;
else if (eRaw > 0.85) this.biome = Biome.SNOWMOUNTAIN;
else if (eRaw > 0.75) this.biome = Biome.MOUNTAIN;
else {
if (tRaw < 0.3) this.biome = Biome.DESERT;
else if (tRaw > 0.6) this.biome = (mRaw > 0.7) ? Biome.ENCHANTED_FOREST : Biome.FOREST;
else this.biome = Biome.GRASSLAND;
}
}
setDesign(ctx){
if (!this.biome || this.visibility === 0) return;
const screenPos = this.position.cartToIso();
const elevationHeight = this.position.h * ELEVATION_STEP;
ctx.save();
ctx.translate(screenPos.x, screenPos.y - elevationHeight);
const baseColor = this.biome.summerColor;
const shadowColor = shadeColor(baseColor, -30);
// Draw tile faces
ctx.fillStyle = shadowColor;
ctx.beginPath();
ctx.moveTo(0, TILE_HEIGHT); ctx.lineTo(TILE_WIDTH / 2, TILE_HEIGHT / 2); ctx.lineTo(TILE_WIDTH / 2, TILE_HEIGHT / 2 + elevationHeight); ctx.lineTo(0, TILE_HEIGHT + elevationHeight);
ctx.closePath();
ctx.fill();
ctx.fillStyle = shadeColor(shadowColor, -10);
ctx.beginPath();
ctx.moveTo(0, TILE_HEIGHT); ctx.lineTo(-TILE_WIDTH / 2, TILE_HEIGHT / 2); ctx.lineTo(-TILE_WIDTH / 2, TILE_HEIGHT / 2 + elevationHeight); ctx.lineTo(0, TILE_HEIGHT + elevationHeight);
ctx.closePath();
ctx.fill();
// Draw top surface using a sprite if available
if (this.biome.sprite) {
this.biome.sprite.draw(ctx, -TILE_WIDTH / 2, 0);
} else {
ctx.fillStyle = baseColor;
ctx.beginPath();
ctx.moveTo(0, 0); ctx.lineTo(TILE_WIDTH / 2, TILE_HEIGHT / 2); ctx.lineTo(0, TILE_HEIGHT); ctx.lineTo(-TILE_WIDTH / 2, TILE_HEIGHT / 2);
ctx.closePath();
ctx.fill();
}
// Draw features if fully visible
if(this.visibility === 2) {
if (this.biome === Biome.FOREST && forestSVG) {
ctx.drawImage(forestSVG, -25, -25, 50, 50);
} else if (this.biome === Biome.ENCHANTED_FOREST && enchantedForestSVG) {
ctx.drawImage(enchantedForestSVG, -25, -25, 50, 50);
} else if (this.biome === Biome.SWAMP && swampSVG) {
ctx.drawImage(swampSVG, -25, -5, 50, 30);
}
if (this.structure) {
if (this.structure.type === 'village' && villageSVG) {
ctx.drawImage(villageSVG, -20, -16, 40, 40);
} else if (this.structure.type === 'city' && citySVG) {
ctx.drawImage(citySVG, -24, -28, 48, 48);
}
}
}
// Draw fog overlay if seen but not currently visible
if (this.visibility === 1) {
ctx.fillStyle = 'rgba(0,0,0,0.5)';
ctx.beginPath();
ctx.moveTo(0, 0); ctx.lineTo(TILE_WIDTH / 2, TILE_HEIGHT / 2); ctx.lineTo(0, TILE_HEIGHT); ctx.lineTo(-TILE_WIDTH / 2, TILE_HEIGHT / 2);
ctx.closePath();
ctx.fill();
}
ctx.restore();
}
setElevation(){
if (!this.biome) return;
this.position.h = Math.floor(Math.random() * (this.biome.maxElevation - this.biome.minElevation+ 1) + this.biome.minElevation);
}
setStructure(){
if (!this.biome || !this.biome.acceptStructure) return;
var rand = seededRandom(this.position.x * 13 + this.position.y * 59);
var structureChance = rand();
if (structureChance < 0.005) {
this.structure = { type: 'city', name: NAME_PREFIXES[Math.floor(rand() * NAME_PREFIXES.length)] + NAME_SUFFIXES[Math.floor(rand() * NAME_SUFFIXES.length)] };
} else if (structureChance < 0.02) {
this.structure = { type: 'village', name: NAME_PREFIXES[Math.floor(rand() * NAME_PREFIXES.length)] + NAME_SUFFIXES[Math.floor(rand() * NAME_SUFFIXES.length)] };
}
}
}
class Map {
constructor(size) {
this.size = size;
this.tiles = [];
this.initializeMap();
}
initializeMap(){
console.time('Map Generation');
this.tiles = Array(this.size).fill(null).map((_, y) => Array(this.size).fill(null).map((_, x) => new Tile(x, y)));
console.timeEnd('Map Generation');
}
}
class Time {
constructor() {
this.year = 812;
this.month = 1;
this.day = 13;
this.season = 'winter';
this.hour = 12;
this.daylight = true;
this.minute=2
}
tick(){
this.minute=(this.minute+1) % 60
if (this.minute==0) this.hour=(this.hour+1) % 24
if (this.hour==0 && this.minute == 0) this.day=(this.day+1) % 31;
if (this.day==1 && this.hour == 0 && this.minute == 0) this.month=(this.month+1) % 13;
if (this.month==1 && this.day == 1 && this.hour == 0 && this.minute == 0) this.year++;
const timeStr = `${this.hour.toString().padStart(2, '0')}:${this.minute.toString().padStart(2, '0')}`;
document.getElementById('time-display').textContent = `Jour ${this.day}, ${timeStr}`;
document.getElementById('season-display').textContent = this.season;
}
setDesign(ctx){
let overlayColor = 'rgba(0,0,0,0)';
let opacity = 0;
if (this.hour >= 20 || this.hour < 6) {
opacity = 0.5;
} else if (this.hour >= 18) {
opacity = 0.3 * ( (this.hour - 18) / 2 );
} else if (this.hour < 8) {
opacity = 0.3 * ( (8 - this.hour) / 2 );
}
if (opacity > 0) {
ctx.fillStyle = '#000033';
ctx.globalAlpha = opacity;
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.globalAlpha = 1.0;
}
}
}
class Attributes {
constructor(race) {
this.strength = race.strength;
this.vitality = race.vitality;
this.dexterity = race.dexterity;
this.intelligence = race.intelligence;
this.wisdom = race.wisdom;
this.luck = race.luck;
}
}
class Creature {
constructor(name,attributes,level,affinities,alignments,tile,species,race,hp,items) {
this.name = name;
this.attributes = attributes;
this.level = level;
this.affinities = affinities;
this.name = name;
this.alignments = alignments;
this.species = species;
this.race = race;
this.tile=tile;
this.items=items;
this.hp=hp;
}
}
class Npc {
constructor(name, creature, settlement, equipments) {
this.creature = creature;
this.settlement = settlement;
this.equipments = equipments;
}
}
class Player {
constructor(creature,equipments) {
this.creature=creature;
this.equipments=equipments;
}
get position() {
return this.creature.tile.position;
}
setDesign(ctx) {
const tile = this.creature.tile
if(!tile) return;
const screenPos = tile.position.cartToIso();
const elevationHeight = tile.position.h * ELEVATION_STEP;
ctx.save();
ctx.translate(screenPos.x, screenPos.y - elevationHeight);
if (playerSVG) {
ctx.drawImage(playerSVG, -25, -50, 50, 60);
} else {
ctx.fillStyle = '#E53E3E'; ctx.beginPath(); ctx.arc(0, TILE_HEIGHT / 2 - 6, 8, 0, Math.PI * 2); ctx.fill();
}
ctx.restore();
}
move(dx, dy, gameMap) {
const newX = this.position.x + dx;
const newY = this.position.y + dy;
if (newX >= 0 && newX < gameMap.size && newY >= 0 && newY < gameMap.size) {
const targetTile = gameMap.tiles[newY][newX];
if (targetTile.biome && targetTile.biome.movements.includes('walk')) {
this.creature.tile = targetTile;
}
}
}
}
class World {
constructor(name) {
this.name = name;
this.map = new Map(200);
this.currentTime=new Time();
this.animals = [];
this.spawnAnimals();
}
spawnAnimals() {
console.time('Animal Spawning');
for (let y = 0; y < this.map.size; y++) {
for (let x = 0; x < this.map.size; x++) {
const tile = this.map.tiles[y][x];
if (tile.biome && tile.biome.movements.includes('walk')) {
for (const key in ANIMAL_TYPES) {
const animalType = ANIMAL_TYPES[key];
if (animalType.biomes.includes(tile.biome) && Math.random() < animalType.spawnChance) {
this.animals.push(new Animal(animalType, tile));
}
}
}
}
}
console.log(`Spawned ${this.animals.length} animals.`);
console.timeEnd('Animal Spawning');
}
}
class Camera {
constructor(x=0,y=0,canvas) {
this.x=x;
this.y=y;
this.canvas = canvas;
}
setCamera(position) {
var target = position.cartToIso();
var perspective = position.h * ELEVATION_STEP;
this.x = this.canvas.width / 2 - target.x;
this.y = this.canvas.height / 2 - (target.y - perspective);
}
}
class Session {
constructor() {
this.world = new World('Defiance');
this.camera = new Camera(0,0, canvas);
this.setControls();
this.loop = this.loop.bind(this);
this.player=null;
this.setInitial();
}
loop(currentTime) {
this.update(currentTime);
this.setDesign();
requestAnimationFrame(this.loop);
}
update(currentTime) {
this.handleMovement(currentTime);
this.updateVisibility();
this.world.animals.forEach(animal => {
animal.update(currentTime, this.world.map);
});
this.camera.setCamera(this.player.position);
// Update all biome sprites
for (const key in Biome) {
if (Biome[key].sprite) {
Biome[key].sprite.update(currentTime);
}
}
this.world.currentTime.tick();
}
updateVisibility() {
const map = this.world.map;
const px = this.player.position.x;
const py = this.player.position.y;
const radius = VISION_RADIUS;
const radiusSq = radius * radius;
const viewBox = {
minX: Math.max(0, px - radius - 2),
maxX: Math.min(map.size - 1, px + radius + 2),
minY: Math.max(0, py - radius - 2),
maxY: Math.min(map.size - 1, py + radius + 2)
};
for(let y = viewBox.minY; y <= viewBox.maxY; y++) {
for(let x = viewBox.minX; x <= viewBox.maxX; x++) {
const tile = map.tiles[y][x];
if(tile.visibility === 2) tile.visibility = 1;
const dx = px - x;
const dy = py - y;
if (dx * dx + dy * dy <= radiusSq) {
tile.visibility = 2;
}
}
}
}
setInitial(){
let spawnX, spawnY;
do {
spawnX = Math.floor(Math.random() * this.world.map.size);
spawnY = Math.floor(Math.random() * this.world.map.size);
} while (!this.world.map.tiles[spawnY][spawnX].biome || !this.world.map.tiles[spawnY][spawnX].biome.movements.includes('walk') );
this.player = new Player(new Creature('player',new Attributes(RACE.HUMAN),1,null,null,this.world.map.tiles[spawnY][spawnX],'human',RACE.HUMAN,10,null),);
this.updateVisibility();
}
setControls() {
document.addEventListener('keydown', e => {
const key = e.key.toLowerCase();
if (key.startsWith('arrow')) { controls[key.replace('arrow', '')] = true; }
else if (['w', 'z'].includes(key)) { controls.up = true; }
else if (['s'].includes(key)) { controls.down = true; }
else if (['a', 'q'].includes(key)) { controls.left = true; }
else if (['d'].includes(key)) { controls.right = true; }
});
document.addEventListener('keyup', e => {
const key = e.key.toLowerCase();
if (key.startsWith('arrow')) { controls[key.replace('arrow', '')] = false; }
else if (['w', 'z'].includes(key)) { controls.up = false; }
else if (['s'].includes(key)) { controls.down = false; }
else if (['a', 'q'].includes(key)) { controls.left = false; }
else if (['d'].includes(key)) { controls.right = false; }
});
const controlMap = { 'btn-up': 'up', 'btn-down': 'down', 'btn-left': 'left', 'btn-right': 'right' };
for (const [id, dir] of Object.entries(controlMap)) {
const btn = document.getElementById(id);
btn.addEventListener('touchstart', e => { e.preventDefault(); controls[dir] = true; }, { passive: false });
btn.addEventListener('touchend', e => { e.preventDefault(); controls[dir] = false; });
}
}
setDesign(){
ctx.fillStyle = '#000000';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.save();
ctx.translate(this.camera.x, this.camera.y);
const [startX, endX, startY, endY] = this.getVisibleTileBounds();
for (let y = startY; y < endY; y++) {
for (let x = startX; x < endX; x++) {
if (this.world.map.tiles[y] && this.world.map.tiles[y][x]) {
this.world.map.tiles[y][x].setDesign(ctx);
}
}
}
this.world.animals.forEach(animal => animal.setDesign(ctx));
this.player.setDesign(ctx);
ctx.restore();
ctx.save();
this.world.currentTime.setDesign(ctx);
ctx.restore();
}
getVisibleTileBounds() {
const margin = 5;
const viewWidth = canvas.width;
const viewHeight = canvas.height;
const isoToCart = (isoX, isoY) => {
const cartX = (isoX / (TILE_WIDTH / 2) + isoY / (TILE_HEIGHT / 2)) / 2;
const cartY = (isoY / (TILE_HEIGHT / 2) - isoX / (TILE_WIDTH / 2)) / 2;
return { x: Math.floor(cartX), y: Math.floor(cartY) };
};
const topLeft = isoToCart(-this.camera.x, -this.camera.y);
const bottomRight = isoToCart(-this.camera.x + viewWidth, -this.camera.y + viewHeight);
const startX = Math.max(0, topLeft.x - margin);
const endX = Math.min(this.world.map.size - 1, bottomRight.x + margin);
const startY = Math.max(0, topLeft.y - margin);
const endY = Math.min(this.world.map.size - 1, bottomRight.y + margin);
return [startX, endX, startY, endY];
}
handleMovement(currentTime) {
if (currentTime - lastMoveTime < 150) return;
let moved = false;
if (controls.up) { this.player.move(0, -1,this.world.map); moved = true; }
if (controls.down) { this.player.move(0, 1,this.world.map); moved = true; }
if (controls.left) { this.player.move(-1, 0,this.world.map); moved = true; }
if (controls.right) { this.player.move(1, 0,this.world.map); moved = true; }
if(moved) lastMoveTime = currentTime;
}
}
const controls = { up: false, down: false, left: false, right: false };
const simplex = new SimplexNoise();
let lastMoveTime = 0;
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const loadingScreen = document.getElementById('loading');
const TILE_WIDTH = 64;
const TILE_HEIGHT = 32;
const ELEVATION_STEP = TILE_HEIGHT / 4;
const VISION_RADIUS = 8;
function seededRandom(seed) {
let s = seed;
return () => { s = (s * 9301 + 49297) % 233280; return s / 233280.0; };
}
function shadeColor(c, p) {
let R=parseInt(c.substring(1,3),16),G=parseInt(c.substring(3,5),16),B=parseInt(c.substring(5,7),16);R=parseInt(R*(100+p)/100);G=parseInt(G*(100+p)/100);B=parseInt(B*(100+p)/100);R=(R<255)?R:255;G=(G<255)?G:255;B=(B<255)?B:255;
return "#"+("0"+R.toString(16)).slice(-2)+("0"+G.toString(16)).slice(-2)+("0"+B.toString(16)).slice(-2);
}
function createAnimatedSheet(width, height, frameCount, drawFrameFn) {
const sheetCanvas = document.createElement('canvas');
sheetCanvas.width = width;
sheetCanvas.height = height * frameCount;
const sheetCtx = sheetCanvas.getContext('2d');
sheetCtx.imageSmoothingEnabled = false;
for (let frame = 0; frame < frameCount; frame++) {
sheetCtx.save();
sheetCtx.translate(0, frame * height);
drawFrameFn(sheetCtx, frame, width, height);
sheetCtx.restore();
}
return sheetCanvas;
}
function drawGrasslandFrame(ctx, frame, width, height) {
const PIXEL_SCALE = 2;
const colors = ['#6A994E', '#588142', '#A5A450'];
ctx.fillStyle = colors[1];
ctx.beginPath();
ctx.moveTo(width / 2, 0); ctx.lineTo(width, height / 2); ctx.lineTo(width / 2, height); ctx.lineTo(0, height / 2);
ctx.closePath();
ctx.fill();
for (let i = 0; i < 150; i++) {
const x = Math.random() * width;
const y = (Math.random() * height / 2) + height / 4;
const dx = Math.abs(x - width / 2);
const dy = Math.abs(y - height / 2);
if (dx / (width / 2) + dy / (height / 2) > 1) continue;
const wave = Math.sin(x / 5 + frame * Math.PI / 2) * PIXEL_SCALE;
ctx.fillStyle = colors[i % 2];
ctx.fillRect(x + wave, y - PIXEL_SCALE, PIXEL_SCALE, PIXEL_SCALE);
}
}
function drawWaterFrame(ctx, frame, width, height) {
const colors = ['#5A8AB8', '#4A7AA8', '#97aabdff'];
ctx.fillStyle = colors[0];
ctx.beginPath();
ctx.moveTo(width / 2, 0); ctx.lineTo(width, height / 2); ctx.lineTo(width / 2, height); ctx.lineTo(0, height / 2);
ctx.closePath();
ctx.fill();
for (let i = 0; i < 3; i++) {
ctx.strokeStyle = colors[1];
ctx.lineWidth = 1;
ctx.beginPath();
const startY = (height / 4) * (i + 1);
const offset = (frame * 0.2) + i * 2;
ctx.moveTo(0, startY + Math.sin(offset) * 2);
for (let x = 0; x < width; x++) {
const y = startY + Math.sin(x * 0.15 + offset) * 2;
if (Math.abs(x - width / 2) / (width / 2) + Math.abs(y - height / 2) / (height / 2) < 1) {
ctx.lineTo(x, y);
}
}
ctx.stroke();
}
}
function drawDeepWaterFrame(ctx, frame, width, height) {
const colors = ['#3D5A80', '#2A4A6D', '#1A202C'];
ctx.fillStyle = colors[0];
ctx.beginPath();
ctx.moveTo(width / 2, 0); ctx.lineTo(width, height / 2); ctx.lineTo(width / 2, height); ctx.lineTo(0, height / 2);
ctx.closePath();
ctx.fill();
for (let i = 0; i < 2; i++) {
ctx.strokeStyle = colors[1];
ctx.lineWidth = 2;
ctx.beginPath();
const startY = (height / 3) * (i + 1);
const offset = (frame * 0.1) + i * 3;
ctx.moveTo(0, startY + Math.sin(offset) * 1.5);
for (let x = 0; x < width; x++) {
const y = startY + Math.sin(x * 0.1 + offset) * 1.5;
if (Math.abs(x - width / 2) / (width / 2) + Math.abs(y - height / 2) / (height / 2) < 1) {
ctx.lineTo(x, y);
}
}
ctx.stroke();
}
}
function drawMountainFrame(ctx, frame, width, height) {
const colors = ['#A9A9A9', '#808080', '#696969'];
ctx.fillStyle = colors[0];
ctx.beginPath();
ctx.moveTo(width / 2, 0); ctx.lineTo(width, height / 2); ctx.lineTo(width / 2, height); ctx.lineTo(0, height / 2);
ctx.closePath();
ctx.fill();
for (let i = 0; i < 70; i++) {
const x = Math.random() * width;
const y = Math.random() * height;
if (Math.abs(x - width / 2) / (width / 2) + Math.abs(y - height / 2) / (height / 2) > 1) continue;
const w = 2 + Math.random() * 4;
const h = 2 + Math.random() * 4;
ctx.fillStyle = colors[1 + Math.floor(Math.random() * 2)];
ctx.fillRect(x - w / 2, y - h / 2, w, h);
}
}
function loadSvgAsImage(gElement) {
return new Promise((resolve, reject) => {
if (!gElement) return reject(new Error("SVG <g> element not found."));
const viewBox = gElement.getAttribute('viewBox') || '0 0 100 100';
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('viewBox', viewBox);
const defs = document.querySelector('svg > defs');
if (defs) svg.appendChild(defs.cloneNode(true));
svg.appendChild(gElement.cloneNode(true));
const svgString = new XMLSerializer().serializeToString(svg);
const url = URL.createObjectURL(new Blob([svgString], { type: "image/svg+xml;charset=utf-8" }));
const img = new Image();
img.onload = () => { URL.revokeObjectURL(url); resolve(img); };
img.onerror = (err) => { URL.revokeObjectURL(url); reject(err); };
img.src = url;
});
}
async function initializeGame() {
canvas.width = canvas.parentElement.clientWidth;
canvas.height = canvas.parentElement.clientHeight;
try {
Biome.GRASSLAND.sprite = new Sprite(createAnimatedSheet(TILE_WIDTH, TILE_HEIGHT, 4, drawGrasslandFrame), TILE_WIDTH, TILE_HEIGHT, 4, 200);
Biome.WATER_SHALLOW.sprite = new Sprite(createAnimatedSheet(TILE_WIDTH, TILE_HEIGHT, 6, drawWaterFrame), TILE_WIDTH, TILE_HEIGHT, 6, 150);
Biome.WATER_DEEP.sprite = new Sprite(createAnimatedSheet(TILE_WIDTH, TILE_HEIGHT, 8, drawDeepWaterFrame), TILE_WIDTH, TILE_HEIGHT, 8, 250);
Biome.MOUNTAIN.sprite = new Sprite(createAnimatedSheet(TILE_WIDTH, TILE_HEIGHT, 1, drawMountainFrame), TILE_WIDTH, TILE_HEIGHT, 1, 9999);
const assetIds = ['forest-svg', 'village-svg', 'city-svg', 'player-svg', 'enchanted-forest-svg', 'swamp-svg', 'wolf-pack-svg', 'boar-svg'];
const assetElements = assetIds.map(id => document.getElementById(id));
[forestSVG, villageSVG, citySVG, playerSVG, enchantedForestSVG, swampSVG, wolfPackSVG, boarSVG] = await Promise.all(
assetElements.map(el => loadSvgAsImage(el))
);
console.log("All assets loaded.");
let session = new Session();
loadingScreen.style.display = 'none';
session.loop();
} catch (error) {
console.error("Failed to load assets:", error);
loadingScreen.innerHTML = "Error loading assets. Please refresh.";
}
}
initializeGame();
});

117
svg/svg.html Normal file
View file

@ -0,0 +1,117 @@
<defs>
<!-- Asset Forêt --> <!-- Asset Forêt Dense -->
<g id="forest-svg" viewBox="0 0 100 100">
<defs>
<linearGradient id="treeTrunkDark" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" style="stop-color:#5F432A;"/><stop offset="100%" style="stop-color:#4A2E1A;"/></linearGradient>
<linearGradient id="treeLeavesDark" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" style="stop-color:#2F855A;"/><stop offset="100%" style="stop-color:#276749;"/></linearGradient>
</defs>
<rect x="55" y="65" width="8" height="20" fill="url(#treeTrunkDark)"/>
<path d="M 59 35 L 85 70 L 33 70 Z" fill="url(#treeLeavesDark)"/>
<rect x="20" y="70" width="10" height="25" fill="url(#treeTrunkDark)"/>
<path d="M 25 25 L 60 75 L -10 75 Z" fill="url(#treeLeavesDark)"/>
<rect x="40" y="75" width="5" height="15" fill="url(#treeTrunkDark)" opacity="0.8"/>
<path d="M 42.5 50 L 60 80 L 25 80 Z" fill="url(#treeLeavesDark)" opacity="0.8"/>
</g>
<!-- Asset Forêt Enchantée -->
<g id="enchanted-forest-svg" viewBox="0 0 100 100">
<defs>
<linearGradient id="enchantedTrunk" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" style="stop-color:#5B21B6;"/><stop offset="100%" style="stop-color:#4C1D95;"/></linearGradient>
<linearGradient id="enchantedLeaves" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" style="stop-color:#A78BFA;"/><stop offset="100%" style="stop-color:#7C3AED;"/></linearGradient>
<radialGradient id="glowEffect"><stop offset="0%" stop-color="#FDE047" stop-opacity="0.8"/><stop offset="100%" stop-color="#FDE047" stop-opacity="0"/></radialGradient>
</defs>
<circle cx="25" cy="85" r="10" fill="url(#glowEffect)"/>
<circle cx="75" cy="80" r="12" fill="url(#glowEffect)"/>
<rect x="46" y="50" width="8" height="45" fill="url(#enchantedTrunk)"/>
<path d="M 50 10 C 20 50, 80 50, 50 10 Z" fill="url(#enchantedLeaves)" transform="rotate(-15 50 50)"/>
<path d="M 50 15 L 85 65 L 15 65 Z" fill="url(#enchantedLeaves)"/>
</g>
<!-- Asset Marais -->
<g id="swamp-svg" viewBox="0 0 100 100">
<defs>
<linearGradient id="swampWater" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" style="stop-color:#4A5568;"/><stop offset="100%" style="stop-color:#2D3748;"/></linearGradient>
<linearGradient id="deadWood" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" style="stop-color:#718096;"/><stop offset="100%" style="stop-color:#4A5568;"/></linearGradient>
</defs>
<path d="M 0 80 Q 50 70, 100 80 L 100 100 L 0 100 Z" fill="url(#swampWater)"/>
<path d="M 20 90 L 22 40 L 25 90 L 27 50 L 29 90" stroke="url(#deadWood)" stroke-width="2" fill="none"/>
<path d="M 70 95 L 68 30 L 72 35 L 75 95 L 73 40" stroke="url(#deadWood)" stroke-width="3" fill="none"/>
</g>
<!-- Asset Horde de Loups -->
<g id="wolf-pack-svg" viewBox="0 0 100 100">
<defs>
<linearGradient id="wolfFurGrey" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" style="stop-color:#A0AEC0;"/><stop offset="100%" style="stop-color:#718096;"/></linearGradient>
</defs>
<!-- Loup 1 (leader) -->
<path d="M 50 25 L 70 45 L 65 75 L 35 75 L 30 45 Z" fill="url(#wolfFurGrey)"/>
<path d="M 40 47 L 30 30 L 45 40 Z" fill="#A0AEC0" stroke="#2D3748" stroke-width="1"/>
<path d="M 60 47 L 70 30 L 55 40 Z" fill="#A0AEC0" stroke="#2D3748" stroke-width="1"/>
<!-- Loup 2 (gauche) -->
<path d="M 25 45 L 40 60 L 35 85 L 10 85 L 5 60 Z" fill="url(#wolfFurGrey)" opacity="0.9"/>
<!-- Loup 3 (droite) -->
<path d="M 75 45 L 95 60 L 90 85 L 65 85 L 60 60 Z" fill="url(#wolfFurGrey)" opacity="0.9"/>
</g>
<!-- Asset Sanglier -->
<g id="boar-svg" viewBox="0 0 100 100">
<defs>
<linearGradient id="boarFur" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" style="stop-color:#4A2E1A;"/><stop offset="100%" style="stop-color:#2D1C0F;"/></linearGradient>
</defs>
<path d="M 20 40 C 10 60, 15 85, 30 90 L 70 95 C 95 90, 90 50, 75 40 L 60 20 Z" fill="url(#boarFur)"/>
<path d="M 70 45 C 75 40, 85 45, 80 55" fill="#2D1C0F"/>
<path d="M 75 42 L 85 35" stroke="#F7FAFC" stroke-width="4" stroke-linecap="round"/>
<path d="M 72 43 L 80 38" stroke="#F7FAFC" stroke-width="3" stroke-linecap="round"/>
<circle cx="65" cy="35" r="3" fill="black"/>
</g>
<!-- Asset Ville -->
<g id="city-svg" viewBox="0 0 100 100">
<defs>
<linearGradient id="stoneGradient" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" style="stop-color:#A9A9A9;"/><stop offset="100%" style="stop-color:#696969;"/></linearGradient>
<linearGradient id="stoneShadowGradient" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" style="stop-color:#808080;"/><stop offset="100%" style="stop-color:#4A5568;"/></linearGradient>
</defs>
<path d="M 10 95 L 15 70 L 85 70 L 90 95 Z" fill="url(#stoneShadowGradient)" stroke="#1A202C" stroke-width="2"/>
<path d="M 15 70 L 15 65 L 25 65 L 25 70 L 35 70 L 35 65 L 45 65 L 45 70 L 55 70 L 55 65 L 65 65 L 65 70 L 75 70 L 75 65 L 85 65 L 85 70 Z" fill="url(#stoneShadowGradient)" stroke="#1A202C" stroke-width="1.5"/>
<rect x="20" y="30" width="20" height="40" fill="url(#stoneGradient)" stroke="#1A202C" stroke-width="2"/><rect x="18" y="25" width="24" height="5" fill="url(#stoneGradient)" stroke="#1A202C" stroke-width="2"/>
<rect x="60" y="30" width="20" height="40" fill="url(#stoneGradient)" stroke="#1A202C" stroke-width="2"/><rect x="58" y="25" width="24" height="5" fill="url(#stoneGradient)" stroke="#1A202C" stroke-width="2"/>
<rect x="40" y="15" width="20" height="55" fill="url(#stoneGradient)" stroke="#1A202C" stroke-width="2"/>
<path d="M 38 15 L 38 10 L 43 10 L 43 15 L 48 15 L 48 10 L 53 10 L 53 15 L 58 15 L 58 10 L 63 10 L 63 15 Z" fill="url(#stoneGradient)" stroke="#1A202C" stroke-width="1.5"/>
</g>
<!-- Asset Village -->
<g id="village-svg" viewBox="0 0 100 100">
<defs>
<linearGradient id="woodGradient" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" style="stop-color:#A0522D;"/><stop offset="100%" style="stop-color:#8B4513;"/></linearGradient>
<linearGradient id="thatchGradient" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" style="stop-color:#D4A373;"/><stop offset="100%" style="stop-color:#A0522D;"/></linearGradient>
</defs>
<rect x="20" y="50" width="60" height="45" fill="url(#woodGradient)" stroke="#1A202C" stroke-width="2"/>
<polygon points="15,50 85,50 50,20" fill="url(#thatchGradient)" stroke="#1A202C" stroke-width="2"/>
<rect x="65" y="60" width="25" height="35" fill="#8B4513" stroke="#1A202C" stroke-width="1.5"/><polygon points="62,60 93,60 77.5,40" fill="#A0522D" stroke="#1A202C" stroke-width="1.5"/>
<rect x="45" y="65" width="10" height="10" fill="#2D3748"/>
</g>
<!-- Asset Joueur (Loup) -->
<g id="player-svg" viewBox="0 0 100 100">
<defs>
<linearGradient id="wolfFurGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#A0AEC0;" />
<stop offset="100%" style="stop-color:#718096;" />
</linearGradient>
<linearGradient id="wolfShadowGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#4A5568;" />
<stop offset="100%" style="stop-color:#2D3748;" />
</linearGradient>
</defs>
<path d="M 50 20 L 90 50 L 80 95 L 20 95 L 10 50 Z" fill="url(#wolfFurGradient)" />
<path d="M 50 20 L 70 55 L 50 65 L 30 55 Z" fill="url(#wolfShadowGradient)" />
<path d="M 25 52 L 10 30 L 35 40 Z" fill="#A0AEC0" stroke="#2D3748" stroke-width="1.5"/>
<path d="M 75 52 L 90 30 L 65 40 Z" fill="#A0AEC0" stroke="#2D3748" stroke-width="1.5"/>
<path d="M 35 55 Q 40 52 45 55 Q 40 58 35 55 Z" fill="#FBBF24" />
<path d="M 65 55 Q 60 52 55 55 Q 60 58 65 55 Z" fill="#FBBF24" />
<circle cx="39" cy="55" r="1.5" fill="black" />
<circle cx="61" cy="55" r="1.5" fill="black" />
</g>
</defs>