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

premiere version

Browse source
This commit is contained in:
vesta 2025-08-30 00:18:53 +02:00
parent f001d8295c
commit 5dcb18fe66
2 changed files with 619 additions and 495 deletions
Download patch file Download diff file Expand all files Collapse all files

110
html/main.html Normal file
View file

@ -0,0 +1,110 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>defiance v0.12.1</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/simplex-noise/2.4.0/simplex-noise.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap" rel="stylesheet">
<style>
body { font-family: 'Inter', sans-serif; overflow: hidden; }
canvas { display: block; background-color: #1a202c; cursor: pointer; }
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #2d3748; }
::-webkit-scrollbar-thumb { background: #4a5568; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #718096; }
.control-btn {
background-color: rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.4);
color: white; font-size: 1.5rem; font-weight: bold; display: flex;
align-items: center; justify-content: center; user-select: none;
-webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
.control-btn:active { background-color: rgba(255, 255, 255, 0.5); }
.equip-btn, .menu-btn {
background-color: #3182ce; color: white; padding: 2px 6px; border-radius: 4px;
font-size: 0.75rem; cursor: pointer; margin-left: 8px; border: none;
}
.equip-btn:hover, .menu-btn:hover { background-color: #2b6cb0; }
.menu-btn { padding: 8px 12px; font-size: 1rem; width: 100%; text-align: left; }
.menu-btn:disabled { background-color: #4a5568; cursor: not-allowed; }
@media (min-width: 1024px) { #mobile-controls, #info-toggle-btn { display: none; } }
</style>
</head>
<body class="bg-gray-900 text-white flex h-screen">
<!-- 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>
<p class="text-sm text-gray-400 mb-6">ZQSD/Flèches: Bouger | E: Interagir | C: Camper</p>
<div class="space-y-4">
<h2 class="text-xl font-semibold border-b-2 border-gray-700 pb-2">Feuille de Personnage</h2>
<div id="player-info-desktop" class="bg-gray-700 p-4 rounded-lg text-sm space-y-3"></div>
<h2 class="text-xl font-semibold border-b-2 border-gray-700 pb-2 mt-4">Infos de la Tuile</h2>
<div id="tile-info-desktop" class="bg-gray-700 p-4 rounded-lg text-sm"></div>
</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>
<div id="loading" class="absolute inset-0 bg-black bg-opacity-75 flex items-center justify-center text-2xl z-50">Le monde prend vie...</div>
<!-- UI Temps et Saison -->
<div id="time-ui" class="absolute top-4 left-4 bg-black/50 p-2 rounded-lg text-sm font-semibold z-20">
<div id="time-display">Jour 1, 06:00</div>
<div id="season-display">Printemps</div>
</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">
<h2 class="text-xl font-semibold border-b-2 border-gray-700 pb-2">Feuille de Personnage</h2>
<div id="player-info-mobile" class="bg-gray-700 p-4 rounded-lg text-sm space-y-3"></div>
<h2 class="text-xl font-semibold border-b-2 border-gray-700 pb-2 mt-4">Infos de la Tuile</h2>
<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>
<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>
<div></div><button id="btn-down" class="control-btn rounded-b-lg">▼</button><div></div>
</div>
</div>
<!-- Écran de Combat -->
<div id="combat-screen" class="absolute inset-0 bg-black/80 flex-col items-center justify-center z-40 hidden">
<div class="text-center text-4xl mb-8 text-red-500 font-bold">COMBAT !</div>
<div class="flex justify-around w-full max-w-4xl">
<div class="text-center w-1/3">
<div class="text-8xl">🦸</div>
<h3 class="text-2xl font-bold text-cyan-400">Héros</h3>
<div class="w-full bg-gray-700 rounded-full h-6 mt-2 border-2 border-gray-600"><div id="combat-player-hp-bar" class="bg-green-500 h-full rounded-full text-center text-white font-bold transition-all duration-500"></div></div>
<div id="combat-player-hp-text" class="mt-1"></div>
</div>
<div class="text-4xl font-bold self-center">VS</div>
<div class="text-center w-1/3">
<div id="combat-opponent-icon" class="text-8xl"></div>
<h3 id="combat-opponent-name" class="text-2xl font-bold text-red-400"></h3>
<div class="w-full bg-gray-700 rounded-full h-6 mt-2 border-2 border-gray-600"><div id="combat-opponent-hp-bar" class="bg-red-500 h-full rounded-full text-center text-white font-bold transition-all duration-500"></div></div>
<div id="combat-opponent-hp-text" class="mt-1"></div>
</div>
</div>
<div class="mt-12 flex flex-col items-center">
<button id="attack-btn" class="bg-red-600 hover:bg-red-700 text-white font-bold py-4 px-8 rounded-lg text-2xl shadow-lg">⚔️ Attaquer</button>
<div id="combat-log" class="mt-4 h-24 text-center text-gray-300"></div>
</div>
</div>
</div>
<script src="../js/script.js"></script>
</body>
</html>

332
js/script.js
View file

@ -1,53 +1,55 @@
const Biome = { 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:-1,minElevation:-4 }, const Biome = {
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:-2 }, 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 },
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: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 },
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:-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 },
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:0 }, 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 },
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:0 }, 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:4,minElevation:3 }, MOUNTAIN: { acceptStructure:false, movements:['climb','fly'],affinities:[('rock',0.6),('wind',0.4)],name: 'Montagne', winterColor: '#F7F7F7', fallColor: '#A9A9A9', summerColor: '#A9A9A9', autumnColor: '#A9A9A9',maxElevation:4,minElevation:3 },
SNOWLAND: { 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:-1 }, SNOWLAND: { 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: { 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:4,minElevation:3 }, 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:4,minElevation:3 },
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:0 }, 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 }, 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: '#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_PREFIXES = ["Chêne", "Sombre", "Pierre", "Haut", "Val", "Mur", "Guet", "Clair"];
const NAME_SUFFIXES = ["bourg", "fort", "ville", "mont", "port", "bois", "rivage", "gard"]; 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 Affinities = ['water','fire','sand','rock','dark','life','ice','wood','wind','metal','time','space','lava','light','spirit'];
const RACE = { const RACE = {
HUMAN: {strength:1,vitality:1,dexterity:1,intelligence:1,wisdom:1,luck:1} 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 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}, const ItemType = {
heavyWeapon:{slot:('two-hands','backpack'),soul:true,enchant:true}, lightWeapon:{slot:['right-hand','left-hand','backpack'],soul:true,enchant:true},
heavyArmor:{slot:('body','backpack'),soul:true,enchant:true}, heavyWeapon:{slot:('two-hands','backpack'),soul:true,enchant:true},
lightArmor:{slot:('body','backpack'),soul:true,enchant:true}, heavyArmor:{slot:('body','backpack'),soul:true,enchant:true},
shield:{slot:('right-hand','left-hand','backpack'),soul:true,enchant:true}, lightArmor:{slot:('body','backpack'),soul:true,enchant:true},
shoes:{slot:('foot','backpack'),soul:true,enchant:true}, shield:{slot:('right-hand','left-hand','backpack'),soul:true,enchant:true},
pant:{slot:('leg','backpack'),soul:true,enchant:true}, shoes:{slot:('foot','backpack'),soul:true,enchant:true},
helmet:{slot:('leg','backpack'),soul:true,enchant:true}, pant:{slot:('leg','backpack'),soul:true,enchant:true},
potion:{slot:('heal','backpack'),soul:false,enchant:false}, helmet:{slot:('leg','backpack'),soul:true,enchant:true},
throwable:{slot:('belt','backpack'),soul:true,enchant:true}, potion:{slot:('heal','backpack'),soul:false,enchant:false},
craftMaterial:{slot:('backpack'),soul:false,enchant:false}, throwable:{slot:('belt','backpack'),soul:true,enchant:true},
ring:{slot:('finger1','finger2','backpack'),soul:true,enchant:true}, craftMaterial:{slot:('backpack'),soul:false,enchant:false},
amulet:{slot:('neck','backpack'),soul:true,enchant:true}, ring:{slot:('finger1','finger2','backpack'),soul:true,enchant:true},
currency:{slot:('purse'),soul:true,enchant:true}, amulet:{slot:('neck','backpack'),soul:true,enchant:true},
enchantMaterial:{slot:('backpack'),soul:false,enchant:false}, currency:{slot:('purse'),soul:true,enchant:true},
mercantMaterial:{slot:('backpack'),soul:false,enchant:false} enchantMaterial:{slot:('backpack'),soul:false,enchant:false},
} mercantMaterial:{slot:('backpack'),soul:false,enchant:false}
}
const Items = { const Items = {
'Épée en Bois': { name: 'Épée en Bois', itemType: 'lightWeapon', stats: { strength: 2 }, icon: '🗡️' ,enchantments:[] }, 'É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:[] }, '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'] ,soul:new soul('cleaver','test')}, 'Claymore': { name: 'Claymore', itemType: 'lightArmor', stats: { vitality: 2 }, icon: '🧥',enchantments:['primal'] },
'Bois': { name: 'Bois', itemType: 'craftMaterial', icon: '🌲',biome:['FOREST'],occurence:0.9}, 'Bois': { name: 'Bois', itemType: 'craftMaterial', icon: '🌲',biome:['FOREST'],occurence:0.9},
'stone': { name: 'Pierre', itemType: 'craftMaterial', icon: '🗿',biome:['MOUNTAIN'],occurence:0.4}, 'stone': { name: 'Pierre', itemType: 'craftMaterial', icon: '🗿',biome:['MOUNTAIN'],occurence:0.4},
'Herbes': { name: 'Herbes', itemType: 'craftMaterial', icon: '🌿',biome:['GRASSLAND'],occurence:0.4}, 'Herbes': { name: 'Herbes', itemType: 'craftMaterial', icon: '🌿',biome:['GRASSLAND'],occurence:0.4},
@ -55,42 +57,43 @@ const Items = {
'Fer': { name: 'Fer', itemType: 'craftMaterial', icon: '🔩',biome:['MOUNTAIN'],occurence:0.001}, 'Fer': { name: 'Fer', itemType: 'craftMaterial', icon: '🔩',biome:['MOUNTAIN'],occurence:0.001},
'Mushroom': { name: 'Champignons', itemType: 'craftMaterial', icon: '🍄',biome:['FOREST'],occurence:0.01}, 'Mushroom': { name: 'Champignons', itemType: 'craftMaterial', icon: '🍄',biome:['FOREST'],occurence:0.01},
'gold': { name: 'Champignons', itemType: 'mercantMaterial', icon: '💰',biome:['MOUNTAIN','RIVER'],occurence:0.001} 'gold': { name: 'Champignons', itemType: 'mercantMaterial', icon: '💰',biome:['MOUNTAIN','RIVER'],occurence:0.001}
}; };
const StructureType = { const StructureType = {
TOWN: { name: 'Ville', population:15, icon: '🗡️', occurence:0.001,design: `<svg width="0" height="0" style="position:absolute; display: none;"> <defs> <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> <!-- Muraille --> <path d="M 10 95 L 15 70 L 85 70 L 90 95 Z" fill="url(#stoneShadowGradient)" stroke="#1A202C" stroke-width="2" /> <!-- Crénaux muraille --> <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"/> <!-- Tour gauche --> <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"/> <!-- Tour droite --> <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"/> <!-- Donjon central --> <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> </defs> </svg>`}, TOWN: { name: 'Ville', population:15, icon: '🗡️', occurence:0.001,design: `<svg width="0" height="0" style="position:absolute; display: none;"> <defs> <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> <!-- Muraille --> <path d="M 10 95 L 15 70 L 85 70 L 90 95 Z" fill="url(#stoneShadowGradient)" stroke="#1A202C" stroke-width="2" /> <!-- Crénaux muraille --> <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"/> <!-- Tour gauche --> <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"/> <!-- Tour droite --> <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"/> <!-- Donjon central --> <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> </defs> </svg>`},
VILLAGE: { name: 'Village', population:5, icon: '🗡️',occurence:0.005, design: `<svg width="0" height="0" style="position:absolute; display: none;"> <defs> <!-- Définition du 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> <!-- Maison principale --> <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"/> <!-- Petite maison derrière --> <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"/> <!-- Fenêtre --> <rect x="45" y="65" width="10" height="10" fill="#2D3748"/> </g> </defs> </svg>`}, VILLAGE: { name: 'Village', population:5, icon: '🗡️',occurence:0.005, design: `<svg width="0" height="0" style="position:absolute; display: none;"> <defs> <!-- Définition du 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> <!-- Maison principale --> <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"/> <!-- Petite maison derrière --> <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"/> <!-- Fenêtre --> <rect x="45" y="65" width="10" height="10" fill="#2D3748"/> </g> </defs> </svg>`},
FARM: { name: 'Ferme', population:5, icon: '🗡️',occurence:0.010 }, FARM: { name: 'Ferme', population:5, icon: '🗡️',occurence:0.010 },
CAMP:{ name: 'Campement', population:2, icon: '⛺',occurence:0.002 }, CAMP:{ name: 'Campement', population:2, icon: '⛺',occurence:0.002 },
}; };
const MONSTER_TYPES = { const MONSTER_TYPES = {
GOBLIN: { name: 'Gobelin', icon: '👺', hp: 30, strength: 3, xp: 25, loot: { 'Or': 5 } }, 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 } }, ORC: { name: 'Orc', icon: '👹', hp: 60, strength: 6, xp: 50, loot: { 'Or': 15, 'Fer': 1 } },
}; };
const ANIMAL_TYPES = { 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>`}, 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 } }, BOAR: { name: 'Sanglier', icon: '🐗', hp: 25, strength: 5, xp: 20, loot: { 'Cuir': 2 } },
}; };
class position {
constructor(x,y,z) {
class Position{
constructor(x,y,h=0) {
this.x = x; this.x = x;
this.y = y; this.y = y;
this.h = h; this.h = h;
} }
setPosition(x, y, z) { setPosition(x, y, h=0) {
this.x = x; this.x = x;
this.y = y; this.y = y;
this.h = h; this.h = h;
} }
getPosition() { getPosition() {
return { x: this.x, y: this.y, z: this.z }; return { x: this.x, y: this.y, h: this.h };
} }
cartToIso() { cartToIso() {
@ -100,51 +103,48 @@ class position {
} }
} }
// Méthode de l'objet // Méthode de l'objet
} }
class tile { class Tile {
constructor(position,elevation) { constructor(position) {
this.position = position; this.position = position;
this.biome = this.setBiome(); this.biome = null;
this.elevation = this.setElevation(); this.structure = null;
this.structure = this.setStructure();
this.explored = false; this.explored = false;
this.design=null; this.design=null;
this.setBiome();
this.setElevation();
this.setStructure();
this.setDesign();
} }
// Méthode de l'objet // Méthode de l'objet
setBiome(biome) {
if (!Object.values(Biome).includes(biome)) {
throw new Error('Biome invalide !');
}
this.biome = biome;
}
setBiome() { setBiome() {
let scale = 0.05; let scale = 0.05;
let eRaw = (simplex.noise2D(x * scale, y * scale) + 1) / 2; let simplex = new SimplexNoise();
let tRaw = (simplex.noise2D(x * scale * 0.8, y * scale * 0.8) + 1) / 2; let eRaw = (simplex.noise2D(this.position.x * scale, this.position.y * scale) + 1) / 2;
let mRaw = (simplex.noise2D(x * scale * 1.5, y * scale * 1.5) + 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 = BIOMES.WATER_DEEP; if (eRaw < 0.25) this.biome = Biome.WATER_DEEP;
else if (eRaw < 0.3) this.biome = BIOMES.WATER_SHALLOW; else if (eRaw < 0.3) this.biome = Biome.WATER_SHALLOW;
else if (eRaw < 0.35) this.biome = BIOMES.SAND; else if (eRaw < 0.35) this.biome = Biome.BEACH;
else if (eRaw > 0.85) this.biome = BIOMES.SNOW; else if (eRaw > 0.85) this.biome = Biome.SNOWLAND;
else if (eRaw > 0.75) this.biome = BIOMES.MOUNTAIN; else if (eRaw > 0.75) this.biome = Biome.MOUNTAIN;
else { else {
if (tRaw < 0.3) this.biome = BIOMES.DESERT; if (tRaw < 0.3) this.biome = Biome.DESERT;
else if (tRaw > 0.6) this.biome = (mRaw > 0.7) ? BIOMES.ENCHANTED_FOREST : BIOMES.FOREST; else if (tRaw > 0.6) this.biome = (mRaw > 0.7) ? Biome.ENCHANTED_FOREST : Biome.FOREST;
else this.biome = BIOMES.GRASSLAND; else this.biome = Biome.GRASSLAND;
} }
} }
setDesign(ctx){ setDesign(){
if (!this.biome) return; if (!this.biome) return;
const screenPos = this.position.cartToIso(); const screenPos = this.position.cartToIso();
const elevationHeight = this.position.h * 8; const elevationHeight = this.position.h * 8;
ctx.save(); ctx.save();
ctx.translate(screenPos.x, screenPos.y - elevationHeight); ctx.translate(screenPos.x, screenPos.y - elevationHeight);
const baseColor = this.biome.color; const baseColor = this.biome.summerColor;
const shadowColor = shadeColor(baseColor, -30); const shadowColor = shadeColor(baseColor, -30);
ctx.fillStyle = shadowColor; ctx.fillStyle = shadowColor;
ctx.beginPath(); ctx.beginPath();
@ -161,7 +161,8 @@ class tile {
ctx.moveTo(0, 0); ctx.lineTo(32, 16); ctx.lineTo(0, 32); ctx.lineTo(-32, 16); ctx.moveTo(0, 0); ctx.lineTo(32, 16); ctx.lineTo(0, 32); ctx.lineTo(-32, 16);
ctx.closePath(); ctx.closePath();
ctx.fill(); ctx.fill();
if (this.structure.type === 'village') {
if (this.structure && this.structure.type === 'village') {
ctx.fillStyle = '#D4A373'; ctx.fillStyle = '#D4A373';
ctx.fillRect(-8, -12, 16, 12); ctx.fillRect(-8, -12, 16, 12);
ctx.fillStyle = '#8B4513'; ctx.fillStyle = '#8B4513';
@ -169,7 +170,7 @@ class tile {
ctx.moveTo(0, -22); ctx.lineTo(-10, -12); ctx.lineTo(10, -12); ctx.moveTo(0, -22); ctx.lineTo(-10, -12); ctx.lineTo(10, -12);
ctx.closePath(); ctx.closePath();
ctx.fill(); ctx.fill();
} else if (this.structure.type === 'city') { } else if (this.structure && this.structure.type === 'city') {
ctx.fillStyle = '#C0C0C0'; ctx.fillStyle = '#C0C0C0';
ctx.fillRect(-10, -20, 20, 20); ctx.fillRect(-10, -20, 20, 20);
ctx.fillStyle = '#808080'; ctx.fillStyle = '#808080';
@ -185,34 +186,43 @@ class tile {
this.explored=explored; this.explored=explored;
} }
setElevation(){ setElevation(){
this.elevation = Math.floor(Math.random() * (this.biome.maxElevation - this.biome.minElevation+ 1) + this.biome.minElevation); if (!this.biome) {
console.error("Impossible de définir l'élévation car le biome n'est pas défini pour la tuile", this.position);
return;
}
this.position.h = Math.floor(Math.random() * (this.biome.maxElevation - this.biome.minElevation+ 1) + this.biome.minElevation);
} }
setStructure(){ setStructure(){
var structureChance = rand(); if (!this.biome) {
if (structureChance < 0.005 && this.tile.biome.acceptStructure) { console.error("Impossible de définir une structure car le biome n'est pas défini pour la tuile", this.position);
this.structure = { type: 'city', name: NAME_PREFIXES[Math.floor(rand() * NAME_PREFIXES.length)] + NAME_SUFFIXES[Math.floor(rand() * NAME_SUFFIXES.length)], population: TOWN.population + Math.floor(rand() * 150), buildings: ['Remparts', 'Place Forte (Château)', 'Grand Marché', 'Forge', 'Alchimiste', 'Enchanteur', 'Écurie', 'Ferme', 'Ferme', 'Ferme', 'Ferme', 'Ferme', 'Lieu de Culte', 'Nombreuses Maisons'] }; return;
} else if (structureChance < 0.02 && this.tile.biome.acceptStructure) {
this.structure = { type: 'village', name: NAME_PREFIXES[Math.floor(rand() * NAME_PREFIXES.length)] + NAME_SUFFIXES[Math.floor(rand() * NAME_SUFFIXES.length)], population: VILLAGE.population + Math.floor(rand() * 20), buildings: ['Maison du Chef', 'Marchand', 'Lieu de Culte', 'Ferme', 'Ferme', 'Plusieurs Maisons'] };
} }
if (!this.tile && this.tile.biome === BIOMES.GRASSLAND && Math.random() < 0.2) { var rand = seededRandom(this.position.x * 13 + this.position.y * 59);
var structureChance = rand();
if (structureChance < 0.005 && this.biome.acceptStructure) {
this.structure = { type: 'city', name: NAME_PREFIXES[Math.floor(rand() * NAME_PREFIXES.length)] + NAME_SUFFIXES[Math.floor(rand() * NAME_SUFFIXES.length)], population: StructureType.TOWN.population + Math.floor(rand() * 150), buildings: ['Remparts', 'Place Forte (Château)', 'Grand Marché', 'Forge', 'Alchimiste', 'Enchanteur', 'Écurie', 'Ferme', 'Ferme', 'Ferme', 'Ferme', 'Ferme', 'Lieu de Culte', 'Nombreuses Maisons'] };
} else if (structureChance < 0.02 && this.biome.acceptStructure) {
this.structure = { type: 'village', name: NAME_PREFIXES[Math.floor(rand() * NAME_PREFIXES.length)] + NAME_SUFFIXES[Math.floor(rand() * NAME_SUFFIXES.length)], population: StructureType.VILLAGE.population + Math.floor(rand() * 20), buildings: ['Maison du Chef', 'Marchand', 'Lieu de Culte', 'Ferme', 'Ferme', 'Plusieurs Maisons'] };
}
if ( this.biome.acceptStructure && Math.random() < 0.2) {
this.structure={type:'farm', name: 'farm', population: 2, buildings: []} this.structure={type:'farm', name: 'farm', population: 2, buildings: []}
// npcs.push({ x: nx, y: ny, homeX: loc.x, homeY: loc.y, workX: nx, workY: ny, type: 'farmer', icon: '🧑‍🌾' }); // npcs.push({ x: nx, y: ny, homeX: loc.x, homeY: loc.y, workX: nx, workY: ny, type: 'farmer', icon: '🧑‍🌾' });
} }
} }
} }
class map { class Map {
constructor(size) { constructor(size) {
this.map_size = size; this.size = size;
this.tiles = initializeMap(); this.tiles = null
this.initializeMap();
} }
initializeMap(){ initializeMap(){
console.time('Map Generation'); console.time('Map Generation');
const simplex = new SimplexNoise(); this.tiles=Array(this.size).fill(null).map((_, y) => Array(this.size).fill(null).map((_, x) => new Tile(new Position(y, x))));
this.tiles = Array(size).fill(null).map((_, y) => Array(size).fill(null).map((_, x) => new Tile(new Position(x, y))));
} }
} }
class Time { class Time {
constructor() { constructor() {
this.year = 812; this.year = 812;
this.month = 1; this.month = 1;
@ -240,22 +250,22 @@ class Time {
} }
// Méthode de l'objet // Méthode de l'objet
} }
class attributes { class Attributes {
constructor(race) { constructor(race) {
this.strength = race.strength; this.strength = race.strength;
this.vitality = race.vitality; this.vitality = race.vitality;
this.dexterity = race.dexterity; this.dexterity = race.dexterity;
this.intelligence = race.intelligence; this.intelligence = race.intelligence;
this.wisdom = race.wisdom; this.wisdom = race.wisdom;
this.luck = rand(); this.luck = race.luck;
} }
// Méthode de l'objet // Méthode de l'objet
} }
class creature { class Creature {
constructor(name,attributes,level,affinities,alignments,tile,species,race,hp,items) { constructor(name,attributes,level,affinities,alignments,tile,species,race,hp,items) {
this.name = name; this.name = name;
this.attributes = attributes; this.attributes = attributes;
@ -275,8 +285,8 @@ class creature {
} }
// Méthode de l'objet // Méthode de l'objet
} }
class npc { class Npc {
constructor(name, creature, settlement, equipments) { constructor(name, creature, settlement, equipments) {
this.creature = creature; this.creature = creature;
this.settlement = settlement; this.settlement = settlement;
@ -296,19 +306,20 @@ class npc {
} }
// Méthode de l'objet // Méthode de l'objet
} }
class player { class Player {
constructor(creature,equipments) { constructor(creature,equipments) {
this.creature=creature; this.creature=creature;
this.equipments=equipments; this.equipments=equipments;
this.color = '#E53E3E'; this.color = '#E53E3E';
this.position=creature.tile.position
} }
draw(ctx) { draw(ctx) {
const tile = this.creature.tile const tile = this.creature.tile
if(!tile) return; if(!tile) return;
const screenPos = tile.cartToIso(); const screenPos = tile.position.cartToIso();
const elevationHeight = tile.position.h * 8; const elevationHeight = tile.position.h * 8;
ctx.save(); ctx.save();
@ -334,7 +345,7 @@ class player {
if (targetTile.biome && targetTile.biome.movements.includes('walk')) { if (targetTile.biome && targetTile.biome.movements.includes('walk')) {
this.position.x = newX; this.position.x = newX;
this.position.y = newY; this.position.y = newY;
centerCameraOnPlayer(); centerCameraOnPlayer(this.position);
} }
} }
} }
@ -347,9 +358,9 @@ class player {
equipment.equip(item,slot); equipment.equip(item,slot);
updateAttribute(); updateAttribute();
} }
} }
class settlement { class Settlement {
constructor(level, affinities, name, alignments, position, structures) { constructor(level, affinities, name, alignments, position, structures) {
this.level = level; this.level = level;
this.affinities = affinities; this.affinities = affinities;
@ -360,8 +371,8 @@ class settlement {
// Méthode de l'objet // Méthode de l'objet
} }
class resource { class Resource {
constructor(resourceType, position) { constructor(resourceType, position) {
this.resourceType = resourceType; this.resourceType = resourceType;
this.position = position; this.position = position;
@ -372,12 +383,12 @@ class resource {
collect(creature){ collect(creature){
// check if creature can collect // check if creature can collect
// transfer resulting items creature.items[]=this.resourceType.item // transfer resulting items creature.items[]=this.resourceType.item
this = null;//end object //end object
} }
// Méthode de l'objet // Méthode de l'objet
} }
class equipment { class Equipment {
constructor(item,slot) { constructor(item,slot) {
this.item = item; this.item = item;
@ -394,8 +405,8 @@ class equipment {
this.slot = null; this.slot = null;
} }
} }
class soul { class Soul {
constructor(name,description) { constructor(name,description) {
this.name = name; this.name = name;
@ -406,8 +417,8 @@ class soul {
// //
} }
} }
class item { class Item {
constructor(name,duration,itemType) { constructor(name,duration,itemType) {
this.name = name; this.name = name;
@ -427,7 +438,7 @@ class item {
// delete after x Tick // delete after x Tick
} }
destroy() { destroy() {
this = null;
} }
use(){ use(){
if (this.duration >1) { if (this.duration >1) {
@ -437,52 +448,56 @@ class item {
this.destroy(); this.destroy();
} }
} }
}
class Camera {
constructor(x=0,y=0) {
this.x = x;
this.y = y
}
// Méthode de l'objet
setPosition(positon) {
if (!isGameReady) return;
const screenPos = positon.cartToIso();
const elevationHeight = position.h * 8;
this.x = canvas.width / 2 - screenPos.x;
this.y = canvas.height / 2 - (screenPos.y - elevationHeight);
} }
}
class world { class World {
constructor(name) { constructor(name) {
this.name = name; this.name = name;
this.map = new map(1000) this.map = new Map(200)
let spawnX, spawnY; let spawnX, spawnY;
do { do {
spawnX = Math.floor(Math.random() * this.map.size); spawnX = Math.floor(Math.random() * this.map.size);
spawnY = 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') ); } 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(HUMAN),1,null,null,this.map.tiles[spawnY][spawnX],'human',HUMAN,10,null),null); 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.camera = new Camera(); centerCameraOnPlayer(this.player.position);
this.camera.setPosition(player.position);
} }
// Méthode de l'objet // Méthode de l'objet
save() { save() {
// delete after x Tick // delete after x Tick
} }
} }
const controls = { up: false, down: false, left: false, right: false }; const controls = { up: false, down: false, left: false, right: false };
let lastMoveTime = 0; const simplex = new SimplexNoise();
let isGameReady = false; let lastMoveTime = 0;
const canvas = document.getElementById('gameCanvas'); let isGameReady = false;
const ctx = canvas.getContext('2d'); const canvas = document.getElementById('gameCanvas');
const loadingScreen = document.getElementById('loading'); const ctx = canvas.getContext('2d');
const loadingScreen = document.getElementById('loading');
const TILE_WIDTH = 64;
const TILE_HEIGHT = 32;
const ELEVATION_STEP = TILE_HEIGHT / 4;
function handleMovement(player,currentTime) {
function seededRandom(seed) {
let s = seed;
return () => { s = (s * 9301 + 49297) % 233280; return s / 233280.0; };
}
function centerCameraOnPlayer(position) {
const camera = { x: 0, y: 0 };
const playerScreenPos = position.cartToIso();
const elevationHeight = position.h * ELEVATION_STEP;
camera.x = canvas.width / 2 - playerScreenPos.x;
camera.y = canvas.height / 2 - (playerScreenPos.y - elevationHeight);
}
function handleMovement(player,currentTime) {
if (currentTime - lastMoveTime < 150) return; if (currentTime - lastMoveTime < 150) return;
let moved = false; let moved = false;
if (controls.up) { player.move(0, -1); moved = true; } if (controls.up) { player.move(0, -1); moved = true; }
@ -490,13 +505,13 @@ function handleMovement(player,currentTime) {
if (controls.left) { player.move(-1, 0); moved = true; } if (controls.left) { player.move(-1, 0); moved = true; }
if (controls.right) { player.move(1, 0); moved = true; } if (controls.right) { player.move(1, 0); moved = true; }
if(moved) lastMoveTime = currentTime; if(moved) lastMoveTime = currentTime;
} }
function gameLoop(world,currentTime) { function gameLoop(world,currentTime) {
handleMovement(world.player,currentTime); handleMovement(world.player,currentTime);
draw(currentTime); //draw(currentTime);
requestAnimationFrame(gameLoop); requestAnimationFrame(gameLoop);
} }
function setupControls() { function setupControls() {
document.addEventListener('keydown', e => { document.addEventListener('keydown', e => {
const key = e.key.toLowerCase(); const key = e.key.toLowerCase();
if (key.startsWith('arrow')) { controls[key.replace('arrow', '')] = true; } if (key.startsWith('arrow')) { controls[key.replace('arrow', '')] = true; }
@ -519,24 +534,23 @@ function setupControls() {
btn.addEventListener('touchstart', e => { e.preventDefault(); controls[dir] = true; }, { passive: false }); btn.addEventListener('touchstart', e => { e.preventDefault(); controls[dir] = true; }, { passive: false });
btn.addEventListener('touchend', e => { e.preventDefault(); controls[dir] = false; }); btn.addEventListener('touchend', e => { e.preventDefault(); controls[dir] = false; });
} }
} }
function shadeColor(c, p) { 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; 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); return "#"+("0"+R.toString(16)).slice(-2)+("0"+G.toString(16)).slice(-2)+("0"+B.toString(16)).slice(-2);
} }
function resizeCanvas() {
function initializeGame() {
canvas.width = canvas.parentElement.clientWidth; canvas.width = canvas.parentElement.clientWidth;
canvas.height = canvas.parentElement.clientHeight; canvas.height = canvas.parentElement.clientHeight;
if (isGameReady) centerCameraOnPlayer();
}
function initializeGame() {
resizeCanvas();
setupControls(); setupControls();
let world=new world('1sttest'); let world=new World('1sttest');
isGameReady = true; isGameReady = true;
centerCameraOnPlayer(world.player); centerCameraOnPlayer(world.player.position)
loadingScreen.style.display = 'none'; loadingScreen.style.display = 'none';
gameLoop(world); gameLoop(world);
} }
initializeGame();
})