diff --git a/html/main.html b/html/main.html index 1a104b6..47c27a4 100644 --- a/html/main.html +++ b/html/main.html @@ -32,146 +32,7 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +

Généré par Gemini

- +
@@ -197,7 +58,7 @@
- + - +
- - + +
@@ -243,7 +104,7 @@
- - - + + + \ No newline at end of file diff --git a/js/script.js b/js/script.js index f9743a6..7056cb3 100644 --- a/js/script.js +++ b/js/script.js @@ -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: { 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 }, + 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:5,minElevation:3 }, @@ -11,13 +11,9 @@ 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: '#15521eff', fallColor: '#15521eff', summerColor: '#15521eff', autumnColor: '#15521eff',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 } + } - - 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"]; @@ -77,8 +73,8 @@ document.addEventListener('DOMContentLoaded', () => { }; const ANIMAL_TYPES = { - 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 }, + WOLF: { name: 'Loup', icon: '🐺', hp: 20, strength: 4, xp: 15, loot: { 'Cuir': 1, 'Os': 1 }, design: ``}, + BOAR: { name: 'Sanglier', icon: '🐗', hp: 25, strength: 5, xp: 20, loot: { 'Cuir': 2 } }, }; @@ -119,8 +115,6 @@ document.addEventListener('DOMContentLoaded', () => { this.setElevation(); this.setStructure(); //this.setDesign(ctx); - //this.forestSvg=null; - //this.setSvg(); } // Méthode de l'objet @@ -131,7 +125,6 @@ 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; @@ -141,52 +134,47 @@ document.addEventListener('DOMContentLoaded', () => { else this.biome = Biome.GRASSLAND; } } - setDesign(ctx,currentTime){ + setDesign(ctx){ 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); - 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 baseColor = this.biome.summerColor; 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.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); - } + + 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(); } ctx.restore(); } @@ -297,54 +285,7 @@ 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; @@ -389,17 +330,14 @@ document.addEventListener('DOMContentLoaded', () => { } class Player { - constructor(creature,equipments,playerImage) { + constructor(creature,equipments) { 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; @@ -409,12 +347,9 @@ document.addEventListener('DOMContentLoaded', () => { ctx.save(); ctx.translate(screenPos.x, screenPos.y - elevationHeight); - - 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.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(); ctx.restore(); } move(dx, dy, gameMap) { @@ -534,32 +469,18 @@ 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 { @@ -585,30 +506,14 @@ 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.player.position); + this.camera.setCamera(this.world.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(); @@ -639,9 +544,8 @@ 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.currentTime); - this.world.animals.forEach(animal => animal.setDesign(ctx)); - this.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.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; @@ -653,10 +557,10 @@ document.addEventListener('DOMContentLoaded', () => { 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 (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(moved) lastMoveTime = currentTime; } } @@ -673,90 +577,28 @@ 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 element not found.")); - } - - const viewBox = gElement.getAttribute('viewBox') || '0 0 100 100'; - - // Create a new, standalone 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 element into the new - 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); } - async function initializeGame() { + + function initializeGame() { canvas.width = canvas.parentElement.clientWidth; canvas.height = canvas.parentElement.clientHeight; - - 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."; - } + let session=new Session(); + isGameReady = true; + loadingScreen.style.display = 'none'; + session.loop(); } - - initializeGame(); }) \ No newline at end of file diff --git a/js/scriptalpha.js b/js/scriptalpha.js deleted file mode 100644 index 087ccac..0000000 --- a/js/scriptalpha.js +++ /dev/null @@ -1,804 +0,0 @@ -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 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(); -}); - diff --git a/svg/svg.html b/svg/svg.html deleted file mode 100644 index ba391ed..0000000 --- a/svg/svg.html +++ /dev/null @@ -1,117 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -