premiere version
This commit is contained in:
parent
f001d8295c
commit
5dcb18fe66
2 changed files with 619 additions and 495 deletions
110
html/main.html
Normal file
110
html/main.html
Normal 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>
|
||||
208
js/script.js
208
js/script.js
|
|
@ -1,16 +1,17 @@
|
|||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const Biome = {
|
||||
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 },
|
||||
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 },
|
||||
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 },
|
||||
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 },
|
||||
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 },
|
||||
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 },
|
||||
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 },
|
||||
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 },
|
||||
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 },
|
||||
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 },
|
||||
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 }
|
||||
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 }
|
||||
|
||||
}
|
||||
const NAME_PREFIXES = ["Chêne", "Sombre", "Pierre", "Haut", "Val", "Mur", "Guet", "Clair"];
|
||||
|
|
@ -26,7 +27,8 @@ const RACE = {
|
|||
|
||||
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 = {
|
||||
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},
|
||||
|
|
@ -47,7 +49,7 @@ 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'] ,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},
|
||||
'stone': { name: 'Pierre', itemType: 'craftMaterial', icon: '🗿',biome:['MOUNTAIN'],occurence:0.4},
|
||||
'Herbes': { name: 'Herbes', itemType: 'craftMaterial', icon: '🌿',biome:['GRASSLAND'],occurence:0.4},
|
||||
|
|
@ -76,21 +78,22 @@ const ANIMAL_TYPES = {
|
|||
};
|
||||
|
||||
|
||||
class position {
|
||||
|
||||
constructor(x,y,z) {
|
||||
|
||||
class Position{
|
||||
constructor(x,y,h=0) {
|
||||
this.x = x;
|
||||
this.y = y;
|
||||
this.h = h;
|
||||
}
|
||||
setPosition(x, y, z) {
|
||||
setPosition(x, y, h=0) {
|
||||
this.x = x;
|
||||
this.y = y;
|
||||
this.h = h;
|
||||
}
|
||||
|
||||
getPosition() {
|
||||
return { x: this.x, y: this.y, z: this.z };
|
||||
return { x: this.x, y: this.y, h: this.h };
|
||||
}
|
||||
|
||||
cartToIso() {
|
||||
|
|
@ -102,49 +105,46 @@ class position {
|
|||
// Méthode de l'objet
|
||||
}
|
||||
|
||||
class tile {
|
||||
class Tile {
|
||||
|
||||
constructor(position,elevation) {
|
||||
constructor(position) {
|
||||
this.position = position;
|
||||
this.biome = this.setBiome();
|
||||
this.elevation = this.setElevation();
|
||||
this.structure = this.setStructure();
|
||||
this.biome = null;
|
||||
this.structure = null;
|
||||
this.explored = false;
|
||||
this.design=null;
|
||||
this.setBiome();
|
||||
this.setElevation();
|
||||
this.setStructure();
|
||||
this.setDesign();
|
||||
}
|
||||
|
||||
// Méthode de l'objet
|
||||
setBiome(biome) {
|
||||
if (!Object.values(Biome).includes(biome)) {
|
||||
throw new Error('Biome invalide !');
|
||||
}
|
||||
this.biome = biome;
|
||||
}
|
||||
setBiome() {
|
||||
let scale = 0.05;
|
||||
let eRaw = (simplex.noise2D(x * scale, y * scale) + 1) / 2;
|
||||
let tRaw = (simplex.noise2D(x * scale * 0.8, y * scale * 0.8) + 1) / 2;
|
||||
let mRaw = (simplex.noise2D(x * scale * 1.5, y * scale * 1.5) + 1) / 2;
|
||||
|
||||
if (eRaw < 0.25) this.biome = BIOMES.WATER_DEEP;
|
||||
else if (eRaw < 0.3) this.biome = BIOMES.WATER_SHALLOW;
|
||||
else if (eRaw < 0.35) this.biome = BIOMES.SAND;
|
||||
else if (eRaw > 0.85) this.biome = BIOMES.SNOW;
|
||||
else if (eRaw > 0.75) this.biome = BIOMES.MOUNTAIN;
|
||||
let simplex = new SimplexNoise();
|
||||
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.35) this.biome = Biome.BEACH;
|
||||
else if (eRaw > 0.85) this.biome = Biome.SNOWLAND;
|
||||
else if (eRaw > 0.75) this.biome = Biome.MOUNTAIN;
|
||||
else {
|
||||
if (tRaw < 0.3) this.biome = BIOMES.DESERT;
|
||||
else if (tRaw > 0.6) this.biome = (mRaw > 0.7) ? BIOMES.ENCHANTED_FOREST : BIOMES.FOREST;
|
||||
else this.biome = BIOMES.GRASSLAND;
|
||||
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){
|
||||
setDesign(){
|
||||
if (!this.biome) return;
|
||||
const screenPos = this.position.cartToIso();
|
||||
const elevationHeight = this.position.h * 8;
|
||||
|
||||
ctx.save();
|
||||
ctx.translate(screenPos.x, screenPos.y - elevationHeight);
|
||||
const baseColor = this.biome.color;
|
||||
const baseColor = this.biome.summerColor;
|
||||
const shadowColor = shadeColor(baseColor, -30);
|
||||
ctx.fillStyle = shadowColor;
|
||||
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.closePath();
|
||||
ctx.fill();
|
||||
if (this.structure.type === 'village') {
|
||||
|
||||
if (this.structure && this.structure.type === 'village') {
|
||||
ctx.fillStyle = '#D4A373';
|
||||
ctx.fillRect(-8, -12, 16, 12);
|
||||
ctx.fillStyle = '#8B4513';
|
||||
|
|
@ -169,7 +170,7 @@ class tile {
|
|||
ctx.moveTo(0, -22); ctx.lineTo(-10, -12); ctx.lineTo(10, -12);
|
||||
ctx.closePath();
|
||||
ctx.fill();
|
||||
} else if (this.structure.type === 'city') {
|
||||
} else if (this.structure && this.structure.type === 'city') {
|
||||
ctx.fillStyle = '#C0C0C0';
|
||||
ctx.fillRect(-10, -20, 20, 20);
|
||||
ctx.fillStyle = '#808080';
|
||||
|
|
@ -185,31 +186,40 @@ class tile {
|
|||
this.explored=explored;
|
||||
}
|
||||
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(){
|
||||
var structureChance = rand();
|
||||
if (structureChance < 0.005 && this.tile.biome.acceptStructure) {
|
||||
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'] };
|
||||
} 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.biome) {
|
||||
console.error("Impossible de définir une structure car le biome n'est pas défini pour la tuile", this.position);
|
||||
return;
|
||||
}
|
||||
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: []}
|
||||
// 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) {
|
||||
this.map_size = size;
|
||||
this.tiles = initializeMap();
|
||||
this.size = size;
|
||||
this.tiles = null
|
||||
this.initializeMap();
|
||||
}
|
||||
|
||||
initializeMap(){
|
||||
console.time('Map Generation');
|
||||
const simplex = new SimplexNoise();
|
||||
this.tiles = Array(size).fill(null).map((_, y) => Array(size).fill(null).map((_, x) => new Tile(new Position(x, y))));
|
||||
this.tiles=Array(this.size).fill(null).map((_, y) => Array(this.size).fill(null).map((_, x) => new Tile(new Position(y, x))));
|
||||
}
|
||||
}
|
||||
class Time {
|
||||
|
|
@ -241,21 +251,21 @@ class Time {
|
|||
// Méthode de l'objet
|
||||
|
||||
}
|
||||
class attributes {
|
||||
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 = rand();
|
||||
this.luck = race.luck;
|
||||
}
|
||||
|
||||
// Méthode de l'objet
|
||||
|
||||
}
|
||||
|
||||
class creature {
|
||||
class Creature {
|
||||
constructor(name,attributes,level,affinities,alignments,tile,species,race,hp,items) {
|
||||
this.name = name;
|
||||
this.attributes = attributes;
|
||||
|
|
@ -276,7 +286,7 @@ class creature {
|
|||
// Méthode de l'objet
|
||||
|
||||
}
|
||||
class npc {
|
||||
class Npc {
|
||||
constructor(name, creature, settlement, equipments) {
|
||||
this.creature = creature;
|
||||
this.settlement = settlement;
|
||||
|
|
@ -298,17 +308,18 @@ class npc {
|
|||
|
||||
}
|
||||
|
||||
class player {
|
||||
class Player {
|
||||
constructor(creature,equipments) {
|
||||
this.creature=creature;
|
||||
this.equipments=equipments;
|
||||
this.color = '#E53E3E';
|
||||
this.position=creature.tile.position
|
||||
}
|
||||
draw(ctx) {
|
||||
const tile = this.creature.tile
|
||||
if(!tile) return;
|
||||
|
||||
const screenPos = tile.cartToIso();
|
||||
const screenPos = tile.position.cartToIso();
|
||||
const elevationHeight = tile.position.h * 8;
|
||||
|
||||
ctx.save();
|
||||
|
|
@ -334,7 +345,7 @@ class player {
|
|||
if (targetTile.biome && targetTile.biome.movements.includes('walk')) {
|
||||
this.position.x = newX;
|
||||
this.position.y = newY;
|
||||
centerCameraOnPlayer();
|
||||
centerCameraOnPlayer(this.position);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -349,7 +360,7 @@ class player {
|
|||
}
|
||||
}
|
||||
|
||||
class settlement {
|
||||
class Settlement {
|
||||
constructor(level, affinities, name, alignments, position, structures) {
|
||||
this.level = level;
|
||||
this.affinities = affinities;
|
||||
|
|
@ -361,7 +372,7 @@ class settlement {
|
|||
// Méthode de l'objet
|
||||
|
||||
}
|
||||
class resource {
|
||||
class Resource {
|
||||
constructor(resourceType, position) {
|
||||
this.resourceType = resourceType;
|
||||
this.position = position;
|
||||
|
|
@ -372,12 +383,12 @@ class resource {
|
|||
collect(creature){
|
||||
// check if creature can collect
|
||||
// transfer resulting items creature.items[]=this.resourceType.item
|
||||
this = null;//end object
|
||||
//end object
|
||||
}
|
||||
// Méthode de l'objet
|
||||
|
||||
}
|
||||
class equipment {
|
||||
class Equipment {
|
||||
|
||||
constructor(item,slot) {
|
||||
this.item = item;
|
||||
|
|
@ -395,7 +406,7 @@ class equipment {
|
|||
|
||||
}
|
||||
}
|
||||
class soul {
|
||||
class Soul {
|
||||
|
||||
constructor(name,description) {
|
||||
this.name = name;
|
||||
|
|
@ -407,7 +418,7 @@ class soul {
|
|||
|
||||
}
|
||||
}
|
||||
class item {
|
||||
class Item {
|
||||
|
||||
constructor(name,duration,itemType) {
|
||||
this.name = name;
|
||||
|
|
@ -427,7 +438,7 @@ class item {
|
|||
// delete after x Tick
|
||||
}
|
||||
destroy() {
|
||||
this = null;
|
||||
|
||||
}
|
||||
use(){
|
||||
if (this.duration >1) {
|
||||
|
|
@ -438,35 +449,20 @@ class item {
|
|||
}
|
||||
}
|
||||
}
|
||||
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) {
|
||||
this.name = name;
|
||||
this.map = new map(1000)
|
||||
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(HUMAN),1,null,null,this.map.tiles[spawnY][spawnX],'human',HUMAN,10,null),null);
|
||||
this.camera = new Camera();
|
||||
this.camera.setPosition(player.position);
|
||||
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);
|
||||
centerCameraOnPlayer(this.player.position);
|
||||
}
|
||||
// Méthode de l'objet
|
||||
save() {
|
||||
|
|
@ -476,11 +472,30 @@ class world {
|
|||
}
|
||||
|
||||
const controls = { up: false, down: false, left: false, right: false };
|
||||
const simplex = new SimplexNoise();
|
||||
let lastMoveTime = 0;
|
||||
let isGameReady = false;
|
||||
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;
|
||||
|
||||
|
||||
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;
|
||||
|
|
@ -493,7 +508,7 @@ function handleMovement(player,currentTime) {
|
|||
}
|
||||
function gameLoop(world,currentTime) {
|
||||
handleMovement(world.player,currentTime);
|
||||
draw(currentTime);
|
||||
//draw(currentTime);
|
||||
requestAnimationFrame(gameLoop);
|
||||
}
|
||||
function setupControls() {
|
||||
|
|
@ -525,18 +540,17 @@ 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 resizeCanvas() {
|
||||
canvas.width = canvas.parentElement.clientWidth;
|
||||
canvas.height = canvas.parentElement.clientHeight;
|
||||
if (isGameReady) centerCameraOnPlayer();
|
||||
}
|
||||
|
||||
|
||||
function initializeGame() {
|
||||
resizeCanvas();
|
||||
canvas.width = canvas.parentElement.clientWidth;
|
||||
canvas.height = canvas.parentElement.clientHeight;
|
||||
setupControls();
|
||||
let world=new world('1sttest');
|
||||
let world=new World('1sttest');
|
||||
isGameReady = true;
|
||||
centerCameraOnPlayer(world.player);
|
||||
centerCameraOnPlayer(world.player.position)
|
||||
loadingScreen.style.display = 'none';
|
||||
gameLoop(world);
|
||||
}
|
||||
initializeGame();
|
||||
})
|
||||
Loading…
Add table
Add a link
Reference in a new issue