Fauzanbunz | Cyberpunk NFT Artist & Illustrator

[ CONNECTION_ESTABLISHED ]

SYS.STATUS: ONLINE
LATENCY: 12ms
ENCRYPTION: ACTIVE

>> Identity_Profile

Neural Architect

With a decade of dedicated practice in the digital grid, I specialize in bringing imagination to life. Bridging the gap between traditional art principles and modern Web3 protocols.

My expertise extends across high-tier NFT collections, immersive game assets, and responsive cyber-interfaces. Executing pixel-perfect precision on every node.

10+ YRS

System_Uptime

200+

Nodes_Created

>> Extra_Skills

NFT Generator

& Generate JSON File

Building Web

Frontend Protocols

Building Web3 Game

Interactive Experiences

>> Visual_Database

Asset Registry

>> Game (Playable)

Isometric Farmer

Click to Initialize Engine

>> NFT

Artwork 03

>> NFT

Concept 3

>> NFT

Vision 6

>> NFT

D-Series

>> NFT

Iced Out

>> NFT

Leon Animated

>> NFT

Meow Vol. 2

>> NFT

Meow Original

>> NFT

Monad Realm

>> NFT

Recycle Concept

>> NFT

Solana Beach

>> NFT

Test Series 1

>> NFT

Z-Dimension

>> NFT

Brown Copy

>> NFT

Concept 2

>> NFT

Artwork 04

>> NFT

So Dead

>> NFT

Bag Copy

>> NFT

Concept 4

>> NFT

Mongol Copy

>> NFT

Solana Beach GG

>> Illustration

Rival

>> Illustration

Where is the future

>> Illustration

Doberman

>> Illustration

Hellhound 22

>> Illustration

Hellhound 1

>> Illustration

Akuma

>> Illustration

Akuma 3

>> Illustration

Ambience 2

>> Illustration

Anthem

>> Illustration

Army of Toad

>> Illustration

Cilik

>> Illustration

Mermaid

>> Illustration

Reese

>> End_of_Line

Initialize
Collaboration

Signal is open for contract work, Web3 protocols, and NFT generation.

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Simulasi Peternak Isometrik - Extreme Hard Mode</title>
  <script src="https://cdn.tailwindcss.com"><\/script>
  <script src="https://unpkg.com/lucide@latest"><\/script>

.night-mode { background-color: #1e293b !important; }
    .rain-mode { background-color: #64748b !important; }
    .night-mode.rain-mode { background-color: #0f172a !important; }

@keyframes float-up {
      0% { transform: translateY(0); opacity: 1; }
      100% { transform: translateY(-60px); opacity: 0; }
    }
    
    .float-msg {
      animation: float-up 1.2s ease-out forwards;
      text-shadow: 0 2px 4px rgba(0,0,0,0.3);
    }

.ui-panel {
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(8px);
      border: 3px solid #e2e8f0;
    }

canvas { image-rendering: pixelated; }

@keyframes pop-in {
      0% { transform: scale(0.9); opacity: 0; }
      100% { transform: scale(1); opacity: 1; }
    }
    .modal-content { animation: pop-in 0.2s ease-out forwards; }

#levelup-splash h2 {
      text-shadow: 0 0 20px rgba(255, 215, 0, 0.8), 0 5px 15px rgba(0,0,0,0.5);
    }
  </style>
</head>
<body class="relative w-full h-screen overflow-hidden select-none">

<div id="levelup-splash" class="fixed inset-0 flex flex-col items-center justify-center z-[200] pointer-events-none hidden opacity-0 transition-opacity duration-700">
    <img src="https://raw.githubusercontent.com/fauzanbunz/farmer/main/viaductk-particle-18611.gif" class="absolute w-full h-full object-cover mix-blend-screen opacity-70" alt="Partikel Naik Level" />
    <div class="relative flex flex-col items-center text-center px-4">
      <h2 class="text-7xl md:text-9xl font-black text-white animate-bounce tracking-tighter">LEVEL UP!</h2>
      <p id="levelup-detail" class="text-3xl md:text-5xl font-black text-yellow-300 drop-shadow-lg -mt-4 uppercase italic">SEKARANG LEVEL 2</p>
      <div class="mt-4 bg-white/20 backdrop-blur-md px-6 py-2 rounded-full border-2 border-white/50">
        <p id="levelup-title-text" class="text-white font-bold text-xl md:text-2xl">Peternak Magang</p>
      </div>
    </div>
  </div>

<div class="absolute top-0 left-0 w-full pointer-events-none z-10 p-4 flex flex-wrap md:flex-nowrap justify-between items-start gap-4">
    
    <div class="pointer-events-auto ui-panel rounded-2xl p-2.5 shadow-lg flex items-center gap-3 w-full md:w-auto">
      <div class="relative">
        <div class="bg-amber-100 w-12 h-12 rounded-xl flex items-center justify-center border-2 border-amber-400 text-2xl shadow-sm">👨‍🌾</div>
        <div id="level-badge" class="absolute -bottom-1 -right-2 bg-green-500 text-white text-[10px] font-bold px-1.5 py-0.5 rounded-full border border-white">LV 1</div>
      </div>
      <div class="w-44">
        <h1 id="player-title" class="font-bold text-slate-800 text-sm truncate">Peternak Pemula</h1>
        <div class="mt-1 w-full bg-slate-200 rounded-full h-2 overflow-hidden shadow-inner">
          <div id="xp-bar" class="bg-blue-500 h-full transition-all duration-500" style="width: 0%"></div>
        </div>
        <div class="flex justify-between items-center mt-0.5">
          <p class="text-[9px] text-slate-500 font-bold"><span id="xp-text">0/1000</span> XP</p>
          <p class="text-[9px] text-blue-600 font-bold flex items-center gap-1">
            <i data-lucide="paw-print" class="w-2 h-2"></i> <span id="animal-count">0</span> Hewan
          </p>
        </div>
      </div>
    </div>

<div class="pointer-events-auto flex gap-2 w-full md:w-auto justify-center">
      <button onclick="openModal('shop-modal')" class="ui-panel hover:bg-white text-blue-600 font-bold py-2.5 px-4 rounded-2xl shadow-lg flex items-center gap-2 transition-transform active:scale-95">
        <i data-lucide="store" class="w-5 h-5"></i> <span class="hidden sm:inline">Shop</span>
      </button>
      <button onclick="openModal('market-modal')" class="ui-panel hover:bg-white text-amber-600 font-bold py-2.5 px-4 rounded-2xl shadow-lg flex items-center gap-2 transition-transform active:scale-95">
        <i data-lucide="badge-dollar-sign" class="w-5 h-5"></i> <span class="hidden sm:inline">Market</span>
      </button>
      <button onclick="openModal('storage-modal')" class="ui-panel hover:bg-white text-slate-600 font-bold py-2.5 px-4 rounded-2xl shadow-lg flex items-center gap-2 transition-transform active:scale-95">
        <i data-lucide="package" class="w-5 h-5"></i> <span class="hidden sm:inline">Storage</span>
      </button>
    </div>

<div class="pointer-events-auto flex gap-2 w-full md:w-auto justify-end">
      <div class="ui-panel rounded-2xl py-1 px-3 shadow-lg flex items-center gap-2">
        <span class="text-xl">🌾</span>
        <div class="text-center">
          <p class="text-[9px] font-bold text-slate-400 uppercase leading-none">Pakan</p>
          <p class="font-bold text-slate-800 leading-tight"><span id="feed-count">10</span></p>
        </div>
        <button onclick="feedAll()" class="bg-amber-500 hover:bg-amber-600 text-white p-1.5 rounded-lg transition-transform active:scale-90 ml-1 shadow">
          <i data-lucide="heart" class="w-4 h-4"></i>
        </button>
      </div>

<div id="modal-backdrop" class="fixed inset-0 bg-slate-900/40 backdrop-blur-sm hidden z-50 flex items-center justify-center pointer-events-auto opacity-0 transition-opacity duration-300">
    <div id="shop-modal" class="hidden bg-white w-full max-w-sm rounded-[2rem] shadow-2xl overflow-hidden border-4 border-slate-100 modal-content">
      <div class="bg-blue-500 p-4 flex justify-between items-center text-white">
        <h2 class="font-bold text-lg flex items-center gap-2"><i data-lucide="store"></i> Beli Hewan Ternak</h2>
        <button onclick="closeModal()" class="hover:bg-white/20 p-1 rounded-full"><i data-lucide="x"></i></button>
      </div>
      <div id="shop-content" class="p-4 space-y-3 max-h-[60vh] overflow-y-auto"></div>
    </div>
    <div id="market-modal" class="hidden bg-white w-full max-w-sm rounded-[2rem] shadow-2xl overflow-hidden border-4 border-slate-100 modal-content">
      <div class="bg-amber-500 p-4 flex justify-between items-center text-white">
        <h2 class="font-bold text-lg flex items-center gap-2"><i data-lucide="badge-dollar-sign"></i> Pasar</h2>
        <button onclick="closeModal()" class="hover:bg-white/20 p-1 rounded-full"><i data-lucide="x"></i></button>
      </div>
      <div id="market-content" class="p-4 space-y-3 max-h-[60vh] overflow-y-auto"></div>
    </div>
    <div id="storage-modal" class="hidden bg-white w-full max-w-sm rounded-[2rem] shadow-2xl overflow-hidden border-4 border-slate-100 modal-content">
      <div class="bg-slate-600 p-4 flex justify-between items-center text-white">
        <h2 class="font-bold text-lg flex items-center gap-2"><i data-lucide="package"></i> Gudang</h2>
        <button onclick="closeModal()" class="hover:bg-white/20 p-1 rounded-full"><i data-lucide="x"></i></button>
      </div>
      <div class="p-4 grid grid-cols-3 gap-3">
        <div class="bg-slate-50 border border-slate-200 rounded-2xl p-3 text-center">
          <span class="text-3xl">🍼</span>
          <p id="store-milk" class="text-lg font-black text-slate-700">0</p>
        </div>
        <div class="bg-slate-50 border border-slate-200 rounded-2xl p-3 text-center">
          <span class="text-3xl">🥚</span>
          <p id="store-egg" class="text-lg font-black text-slate-700">0</p>
        </div>
        <div class="bg-slate-50 border border-slate-200 rounded-2xl p-3 text-center">
          <span class="text-3xl">🧶</span>
          <p id="store-wool" class="text-lg font-black text-slate-700">0</p>
        </div>
      </div>
      <div class="p-4 pt-0">
        <button onclick="buyFeed()" class="w-full bg-green-500 text-white py-3 rounded-xl font-bold flex items-center justify-center gap-2">
           Beli Pakan (5 Koin)
        </button>
      </div>
    </div>
  </div>

// EXTREME MODE UPDATED: Produksi tiap 60 detik (1 menit)
    const ITEMS = {
      chicken: { price: 100, prod: 'egg', rate: 60000, color: '#ffffff', label: 'Ayam' },
      cow: { price: 250, prod: 'milk', rate: 60000, color: '#f3f4f6', label: 'Sapi' },
      sheep: { price: 400, prod: 'wool', rate: 60000, color: '#e5e7eb', label: 'Domba' }
    };

const MARKET = { egg: 15, milk: 40, wool: 100, feed: 5 };

const TITLES = [
      "Peternak Pemula", "Peternak Magang", "Pekerja Keras", "Peternak Ahli", 
      "Juragan Muda", "Juragan Ternak", "Sultan Ladang", "Dewa Pertanian",
      "Raja Panen", "Miliarder Desa", "Raja Peternakan", "Penguasa Agrikultur", "Legenda Peternak"
    ];

const BARN_FILES = ['1.png', '2.png', '3.png', '4.png', '5.png', '6.png', '7.png', '8.png', '9.png', '10.png', '11.png', '12.png', '13.png'];

const ASSETS = {
      grass: 'https://raw.githubusercontent.com/fauzanbunz/farmer/main/grasskecil.png',
      river: 'https://raw.githubusercontent.com/fauzanbunz/farmer/main/sungai.png',
      cowIdle: 'https://raw.githubusercontent.com/fauzanbunz/farmer/main/sapi.png',
      cowWalk: 'https://raw.githubusercontent.com/fauzanbunz/farmer/main/sapi%20walk.png',
      milk: 'https://raw.githubusercontent.com/fauzanbunz/farmer/main/kotak.png',
      skull: 'https://raw.githubusercontent.com/fauzanbunz/farmer/main/skull.png',
      fence: 'https://raw.githubusercontent.com/fauzanbunz/farmer/main/pagar.png',
      henIdle: 'https://raw.githubusercontent.com/fauzanbunz/farmer/main/hen_idle.png',
      henWalk: 'https://raw.githubusercontent.com/fauzanbunz/farmer/main/hen_walk.png',
      egg: 'https://raw.githubusercontent.com/fauzanbunz/farmer/main/telur.png',
      sheepIdle: 'https://raw.githubusercontent.com/fauzanbunz/farmer/main/dombaidle.png',
      sheepWalk: 'https://raw.githubusercontent.com/fauzanbunz/farmer/main/domba_walk.png',
      wool: 'https://raw.githubusercontent.com/fauzanbunz/farmer/main/wol.png'
    };

const IMAGES = { barns: [] };

const state = {
      coins: 500, xp: 0, level: 1, feed: 10,
      inventory: { egg: 0, milk: 0, wool: 0 },
      animals: [], drops: [], clouds: [], stars: [], rainDrops: [],
      lastTime: 0, timeOfDay: 0, weather: 'clear', lastWeatherChange: 0, lightningFlash: 0,
      comet: { active: false, x: 0, y: 0, vx: 0, vy: 0 },
      shake: 0, disasterCooldown: performance.now() + 60000, meteorFlash: 0
    };

const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');

function init() {
      lucide.createIcons();
      window.addEventListener('resize', resize);
      resize();
      state.lastWeatherChange = performance.now();
      generateEnvironment();

let loadedCount = 0;
      const keys = Object.keys(ASSETS);
      const totalImages = keys.length + BARN_FILES.length;

const onLoadComplete = () => {
        loadedCount++;
        if (loadedCount === totalImages) startGame();
      };

keys.forEach(key => {
        IMAGES[key] = new Image();
        IMAGES[key].onload = onLoadComplete;
        IMAGES[key].onerror = onLoadComplete;
        IMAGES[key].src = ASSETS[key];
      });

BARN_FILES.forEach((file, idx) => {
        IMAGES.barns[idx] = new Image();
        IMAGES.barns[idx].onload = onLoadComplete;
        IMAGES.barns[idx].onerror = onLoadComplete;
        IMAGES.barns[idx].src = `https://raw.githubusercontent.com/fauzanbunz/farmer/main/${file}`;
      });
    }

function startGame() {
      spawnAnimal('cow', 5, 5); 
      updateUI();
      requestAnimationFrame(gameLoop);
    }

function resize() {
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
      generateEnvironment();
    }

function openModal(id) {
      updateUI();
      const backdrop = document.getElementById('modal-backdrop');
      backdrop.classList.remove('hidden');
      setTimeout(() => backdrop.classList.remove('opacity-0'), 10);
      ['shop-modal', 'market-modal', 'storage-modal'].forEach(m => {
        const modal = document.getElementById(m);
        if (modal) modal.classList.add('hidden');
      });
      const targetModal = document.getElementById(id);
      if (targetModal) targetModal.classList.remove('hidden');
    }

function closeModal() {
      const backdrop = document.getElementById('modal-backdrop');
      backdrop.classList.add('opacity-0');
      setTimeout(() => backdrop.classList.add('hidden'), 300);
    }

/**
     * Menambahkan teks animasi melayang saat memanen item
     */
    function addFloatingText(text, x, y, color = '#ffffff') {
      const div = document.createElement('div');
      div.className = 'absolute font-black text-xl pointer-events-none float-msg z-[200]';
      div.style.left = `${x}px`;
      div.style.top = `${y}px`;
      div.style.color = color;
      div.innerText = text;
      document.body.appendChild(div);
      // Hapus elemen setelah animasi selesai (1.2 detik)
      setTimeout(() => div.remove(), 1200);
    }

// Bencana Alam: Earthquake & Meteor
    function triggerDisaster(type) {
      state.shake = 100; // Mulai guncangan layar
      const aliveAnimals = state.animals.filter(a => !a.isDead);
      if (aliveAnimals.length > 0) {
        const killCount = Math.floor(Math.random() * 3) + 1; // 1-3 hewan mati
        for (let i = 0; i < Math.min(killCount, aliveAnimals.length); i++) {
          const target = aliveAnimals[Math.floor(Math.random() * aliveAnimals.length)];
          target.isDead = true;
          target.deathTime = performance.now();
        }
      }

if (type === 'quake') {
        notify("Bencana! GEMPA BUMI melanda peternakan!", "error");
      } else {
        state.meteorFlash = 1.0;
        notify("Bencana! METEOR jatuh di peternakan!", "error");
      }
      updateUI();
    }

function spawnAnimal(type, x, y) {
      state.animals.push({
        type, x, y, targetX: x, targetY: y, idleUntil: 0, hunger: 1.0,
        lastProd: performance.now(), hop: 0, id: Math.random(), isDead: false, deathTime: 0
      });
      updateUI();
    }

function sellItem(key) {
      if (state.inventory[key] > 0) {
        state.inventory[key]--;
        state.coins += MARKET[key];
        addXP(3); // XP diperkecil
        updateUI();
      }
    }

const shop = document.getElementById('shop-content');
      if (shop) shop.innerHTML = Object.entries(ITEMS).map(([key, item]) => `
        <div class="flex items-center justify-between p-3 bg-slate-50 rounded-2xl border border-slate-100">
          <div class="flex items-center gap-3">
            <div class="w-12 h-12 rounded-xl bg-white flex items-center justify-center text-2xl">${key==='chicken'?'🐔':key==='cow'?'🐄':'🐑'}</div>
            <div><p class="font-bold text-slate-800">${item.label}</p><p class="text-xs font-bold text-amber-600">${item.price} Koin</p></div>
          </div>
          <button onclick="buyAnimal('${key}')" class="bg-blue-500 text-white p-2.5 rounded-xl"><i data-lucide="plus" class="w-5 h-5"></i></button>
        </div>`).join('');

const market = document.getElementById('market-content');
      if (market) market.innerHTML = Object.entries(state.inventory).map(([key, count]) => `
        <div class="flex items-center justify-between p-3 bg-slate-50 rounded-2xl border ${count > 0 ? 'border-amber-200' : 'border-slate-100'}">
          <div class="flex items-center gap-3">
            <div class="w-12 h-12 rounded-xl bg-white flex items-center justify-center text-2xl">${key==='egg'?'🥚':key==='milk'?'🍼':'🧶'}</div>
            <div><p class="font-bold text-slate-800 capitalize">${key}</p><p class="text-xs">Stok: ${count}</p></div>
          </div>
          <button onclick="sellItem('${key}')" ${count <= 0 ? 'disabled' : ''} class="bg-amber-500 text-white px-4 py-2.5 rounded-xl font-bold text-xs disabled:opacity-30">Jual +$${MARKET[key]}</button>
        </div>`).join('');

safeEl('store-milk', state.inventory.milk); safeEl('store-egg', state.inventory.egg); safeEl('store-wool', state.inventory.wool);
      lucide.createIcons();
    }

function isoToScreen(x, y, z) {
      const ox = canvas.width / 2, oy = canvas.height / 2 - (GRID * TILE_H) / 2 + 100;
      return { x: (x - y) * (TILE_W / 2) + ox, y: (x + y) * (TILE_H / 2) - z + oy };
    }

function gameLoop(time) {
      const dt = time - state.lastTime;
      state.lastTime = time;

// Disaster Logic
      if (time > state.disasterCooldown) {
        if (Math.random() < 0.0001) {
          triggerDisaster(Math.random() > 0.5 ? 'quake' : 'meteor');
          state.disasterCooldown = time + 60000; // Minimal 1 menit jeda antar bencana
        }
      }

state.timeOfDay = (time / 120000) % 1; 
      const isNight = state.timeOfDay > 0.6;
      document.body.classList.toggle('night-mode', isNight);

if (time - state.lastWeatherChange > 30000) {
        state.lastWeatherChange = time;
        state.weather = state.weather === 'rain' ? 'clear' : 'rain';
      }
      document.body.classList.toggle('rain-mode', state.weather === 'rain');

if (state.weather === 'rain' && Math.random() < 0.005) state.lightningFlash = 0.8;
      state.lightningFlash = Math.max(0, state.lightningFlash - 0.05);
      state.meteorFlash = Math.max(0, state.meteorFlash - 0.02);

ctx.save();
      if (state.shake > 0) {
        ctx.translate((Math.random()-0.5) * 10, (Math.random()-0.5) * 10);
        state.shake--;
      }

ctx.clearRect(0, 0, canvas.width, canvas.height);

if (isNight) {
        state.stars.forEach(s => {
          ctx.globalAlpha = 0.1 + Math.abs(Math.sin(time * s.speed + s.phase)) * 0.9 * (state.weather === 'rain' ? 0.2 : 1);
          ctx.fillStyle = '#fff'; ctx.beginPath(); ctx.arc(s.x, s.y, s.size, 0, Math.PI*2); ctx.fill();
        });
        ctx.globalAlpha = 1;
        if (!state.comet.active && Math.random() < 0.002) {
          state.comet = { active: true, x: canvas.width+50, y: Math.random()*canvas.height/3, vx: -5, vy: 3 };
        }
        if (state.comet.active) {
          state.comet.x += state.comet.vx; state.comet.y += state.comet.vy;
          ctx.strokeStyle = '#fff'; ctx.lineWidth = 2; ctx.beginPath(); ctx.moveTo(state.comet.x, state.comet.y);
          ctx.lineTo(state.comet.x - state.comet.vx*10, state.comet.y - state.comet.vy*10); ctx.stroke();
          if(state.comet.x < -200) state.comet.active = false;
        }
      }

ctx.fillStyle = state.weather === 'rain' ? 'rgba(112,128,144,0.5)' : 'rgba(255,255,255,0.3)';
      state.clouds.forEach(c => {
        c.x = (c.x + c.speed) % (canvas.width + 200);
        ctx.beginPath(); ctx.arc(c.x-100, c.y, 40*c.scale, 0, Math.PI*2); ctx.fill();
      });

for (let sum = 0; sum <= GRID * 2; sum++) {
        for (let i = 0; i <= GRID; i++) {
          let j = sum - i;
          if (j >= 0 && j <= GRID) {
            const isGrass = (i < GRID && j < GRID);
            const img = isGrass ? IMAGES.grass : IMAGES.river;
            if (img && img.width > 0) {
              const screen = isoToScreen(i, j, 0);
              ctx.drawImage(img, screen.x - TILE_W/2, screen.y - TILE_H/2, TILE_W, TILE_W * (img.height/img.width));
            }
          }
        }
      }

const renderList = [];
      renderList.push({ type: 'barn', x: 1.5, y: 1.5, depth: 4.5 });

state.animals.forEach(a => {
        if (!a.isDead) {
          const dx = a.targetX - a.x, dy = a.targetY - a.y, dist = Math.sqrt(dx*dx + dy*dy);
          if (dist < 0.1) {
            if (time > a.idleUntil) {
              a.targetX = Math.random() * 4 + 3.5; a.targetY = Math.random() * 4 + 3.5;
              a.idleUntil = time + 5000 + Math.random() * 8000;
            } else { a.x = a.targetX; a.y = a.targetY; }
          } else {
            a.x += (dx/dist) * 0.008; a.y += (dy/dist) * 0.008;
          }
          a.hop = (dist >= 0.1) ? Math.abs(Math.sin(time/200)) * 0.2 : 0;
          const hungerRate = (state.weather === 'rain') ? 90000 : 180000;
          a.hunger = Math.max(0, a.hunger - (dt / hungerRate));

if (a.hunger <= 0) {
            a.isDead = true; a.deathTime = time; updateUI();
            notify(`${ITEMS[a.type].label} mati kelaparan!`, 'error');
          } else if (time - a.lastProd > ITEMS[a.type].rate) {
            a.lastProd = time;
            state.drops.push({ type: ITEMS[a.type].prod, x: a.x, y: a.y, bounce: 0, spawnTime: time });
          }
        }
        renderList.push({ type: 'animal', data: a, depth: a.x + a.y });
      });

// Produksi Hilang dalam 1 Menit
      state.drops = state.drops.filter(d => time - d.spawnTime < 60000);
      state.drops.forEach(d => {
        d.bounce = Math.sin(time/300) * 2;
        renderList.push({ type: 'drop', data: d, depth: d.x + d.y });
      });

renderList.sort((a,b) => a.depth - b.depth);

renderList.forEach(obj => {
        if (obj.type === 'barn') {
          const bIdx = Math.min(state.level - 1, 12);
          const bImg = IMAGES.barns[bIdx];
          if (bImg && bImg.width > 0) {
            const s = isoToScreen(obj.x, obj.y, 0);
            ctx.drawImage(bImg, s.x - 90, s.y - 140, 180, 180);
          }
        } else if (obj.type === 'animal') {
          const a = obj.data;
          const sG = isoToScreen(a.x, a.y, 0);
          ctx.fillStyle = 'rgba(0,0,0,0.2)'; ctx.beginPath(); ctx.ellipse(sG.x, sG.y, a.type === 'cow' ? 22 : 8, a.type === 'cow' ? 11 : 4, 0, 0, Math.PI*2); ctx.fill();

if (a.isDead) {
            const fade = Math.max(0, 1 - (time - a.deathTime - 60000)/5000);
            ctx.globalAlpha = Math.min(1, fade);
            if(IMAGES.skull) ctx.drawImage(IMAGES.skull, sG.x - 15, sG.y - 25, 30, 30);
            ctx.globalAlpha = 1;
          } else {
            const s = isoToScreen(a.x, a.y, a.hop * 10);
            const isWalk = Math.abs(a.targetX - a.x) > 0.01;
            let img, fSz = 300, frames = 2, drawSz = 50;

if (a.type === 'cow') { img = isWalk ? IMAGES.cowWalk : IMAGES.cowIdle; fSz = 500; frames = isWalk ? 2 : 4; drawSz = 80; }
            else if (a.type === 'chicken') { img = isWalk ? IMAGES.henWalk : IMAGES.henIdle; drawSz = 25; } 
            else { img = isWalk ? IMAGES.sheepWalk : IMAGES.sheepIdle; drawSz = 52; } // Ukuran Domba diperbesar 0.5x

if (img && img.width > 0) {
              const fIdx = Math.floor(time / 150) % frames;
              ctx.save();
              if (a.targetX > a.x) { ctx.translate(s.x, s.y); ctx.scale(-1, 1); ctx.drawImage(img, fIdx*fSz, 0, fSz, fSz, -drawSz/2, -drawSz*0.75, drawSz, drawSz); }
              else { ctx.drawImage(img, fIdx*fSz, 0, fSz, fSz, s.x - drawSz/2, s.y - drawSz*0.75, drawSz, drawSz); }
              ctx.restore();
            }
            ctx.fillStyle = 'rgba(0,0,0,0.3)'; ctx.fillRect(s.x - 10, s.y - drawSz*0.8, 20, 3);
            ctx.fillStyle = a.hunger > 0.3 ? '#22c55e' : '#ef4444'; ctx.fillRect(s.x - 10, s.y - drawSz*0.8, 20*a.hunger, 3);
          }
        } else if (obj.type === 'drop') {
          const d = obj.data, sG = isoToScreen(d.x, d.y, 0), s = isoToScreen(d.x, d.y, d.bounce+5);
          ctx.fillStyle = 'rgba(0,0,0,0.15)'; ctx.beginPath(); ctx.ellipse(sG.x, sG.y, 10, 5, 0, 0, Math.PI*2); ctx.fill();
          const img = d.type === 'milk' ? IMAGES.milk : (d.type === 'egg' ? IMAGES.egg : IMAGES.wool);
          if(img) ctx.drawImage(img, s.x - 12, s.y - 15, 24, 24);
        }
      });

if (state.weather === 'rain') {
        ctx.strokeStyle = 'rgba(173,216,230,0.4)'; ctx.lineWidth = 1; ctx.beginPath();
        state.rainDrops.forEach(r => {
          r.x += r.xs; r.y += r.ys; if(r.y > canvas.height) { r.y = -20; r.x = Math.random()*canvas.width; }
          ctx.moveTo(r.x, r.y); ctx.lineTo(r.x+r.xs, r.y+r.l);
        });
        ctx.stroke();
      }
      if (state.lightningFlash > 0) { ctx.fillStyle = `rgba(255,255,255,${state.lightningFlash})`; ctx.fillRect(0,0,canvas.width,canvas.height); }
      if (state.meteorFlash > 0) { ctx.fillStyle = `rgba(255,0,0,${state.meteorFlash * 0.3})`; ctx.fillRect(0,0,canvas.width,canvas.height); }

ctx.restore();
      requestAnimationFrame(gameLoop);
    }

canvas.addEventListener('click', (e) => {
      if (!document.getElementById('modal-backdrop').classList.contains('hidden')) return;
      const rect = canvas.getBoundingClientRect(), mx = e.clientX - rect.left, my = e.clientY - rect.top;
      let col = false;
      state.drops = state.drops.filter(d => {
        const s = isoToScreen(d.x, d.y, 10);
        if (Math.sqrt((mx-s.x)**2 + (my-s.y)**2) < 30 && !col) {
          col = true; state.inventory[d.type]++; addXP(1); // Panen dapat 1 XP
          addFloatingText(`+1 ${d.type}`, mx, my, '#3b82f6');
          return false;
        }
        return true;
      });
    });

window.onload = init;
  <\/script>
</body>
</html>

Neural Architect

10+ YRS

200+

NFT Generator

Building Web

Building Web3 Game

Asset Registry

Isometric Farmer

Artwork 03

Concept 3

Vision 6

D-Series

Iced Out

Leon Animated

Meow Vol. 2

Meow Original

Monad Realm

Recycle Concept

Solana Beach

Test Series 1

Z-Dimension

Brown Copy

Concept 2

Artwork 04

So Dead

Bag Copy

Concept 4

Mongol Copy

Solana Beach GG

Rival

Where is the future

Doberman

Hellhound 22

Hellhound 1

Akuma

Akuma 3

Ambience 2

Anthem

Army of Toad

Cilik

Mermaid

Reese

Initialize Collaboration

Secure Transmission

Initialize
Collaboration