engine.js

/* =====================================================
   核心引擎：画布 / 输入 / 相机 / 渲染 / 主循环
   增加对远程分身（remote avatars）渲染支持
===================================================== */
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const VIEW_W = 960, VIEW_H = 540;
const WORLD_SIZE = 2400;

// ---- 输入 ----
const Input = { keys:{}, mouse:{x:0,y:0,down:false,clicked:false} };
window.addEventListener('keydown', e=>{
  Input.keys[e.code]=true;
  if(['ArrowUp','ArrowDown','ArrowLeft','ArrowRight','Space'].includes(e.code)) e.preventDefault();
});
window.addEventListener('keyup', e=>{ Input.keys[e.code]=false; });
canvas.addEventListener('mousemove', e=>{
  const r=canvas.getBoundingClientRect();
  Input.mouse.x=(e.clientX-r.left)*(VIEW_W/r.width);
  Input.mouse.y=(e.clientY-r.top)*(VIEW_H/r.height);
});
canvas.addEventListener('mousedown', ()=>{ Input.mouse.down=true; });
canvas.addEventListener('mouseup', ()=>{ Input.mouse.clicked=true; Input.mouse.down=false; });

// ---- 工具 ----
function rand(a,b){ return a+Math.random()*(b-a); }
function randInt(a,b){ return Math.floor(rand(a,b+1)); }
function dist(a,b){ return Math.hypot(a.x-b.x, a.y-b.y); }
function clamp(v,a,b){ return Math.max(a, Math.min(b,v)); }
function shade(hex,p){
  try{
    let n=parseInt(hex.slice(1),16);
    let r=(n>>16)&255, g=(n>>8)&255, b=n&255;
    r=clamp(Math.round(r+p),0,255); g=clamp(Math.round(g+p),0,255); b=clamp(Math.round(b+p),0,255);
    return '#'+((r<<16)|(g<<8)|b).toString(16).padStart(6,'0');
  }catch(e){ return hex; }
}

// ---- 相机 ----
const Camera = { x:0, y:0 };
function updateCamera(target){
  if(!target) return;
  Camera.x = clamp(target.x - VIEW_W/2, 0, WORLD_SIZE - VIEW_W);
  Camera.y = clamp(target.y - VIEW_H/2, 0, WORLD_SIZE - VIEW_H);
}
const sx = x => x - Camera.x;
const sy = y => y - Camera.y;
function toWorld(mx,my){ return { x: mx + Camera.x, y: my + Camera.y }; }

// ---- 主循环 ----
let lastTime = 0;
function loop(t){
  const dt = Math.min(0.05, (t-lastTime)/1000 || 0.016);
  lastTime = t;
  if(window.G && window.G.state==='running' && typeof window.update === 'function'){
    try{ window.update(dt); }catch(e){ console.error('update error', e); }
  }
  render();
  requestAnimationFrame(loop);
}
requestAnimationFrame(loop);

/* ================= 渲染 ================= */
function render(){
  ctx.clearRect(0,0,VIEW_W,VIEW_H);
  const G = window.G;
  if(!G) return;
  drawBackground(G);
  drawDrops(G);
  drawMonsters(G);
  drawRemoteAvatars(G);
  drawBots(G);
  drawAvatar(G);
  drawPlayer(G);
  drawEffects(G);
  drawMapEventOverlay(G);
  drawTargetReticle(G);
}

function drawBackground(G){
  if(!G) return;
  const g = ctx.createLinearGradient(0,0,0,VIEW_H);
  g.addColorStop(0, G.map.color);
  g.addColorStop(1, shade(G.map.color,-34));
  ctx.fillStyle=g; ctx.fillRect(0,0,VIEW_W,VIEW_H);
  // 网格
  ctx.strokeStyle='rgba(0,0,0,0.10)'; ctx.lineWidth=1;
  const gs=120;
  const x0=Math.floor(Camera.x/gs)*gs, y0=Math.floor(Camera.y/gs)*gs;
  for(let x=x0;x<Camera.x+VIEW_W;x+=gs){ ctx.beginPath(); ctx.moveTo(sx(x),0); ctx.lineTo(sx(x),VIEW_H); ctx.stroke(); }
  for(let y=y0;y<Camera.y+VIEW_H;y+=gs){ ctx.beginPath(); ctx.moveTo(0,sy(y)); ctx.lineTo(VIEW_W,sy(y)); ctx.stroke(); }
  // 地表装饰
  for(const d of G.decor||[]){ ctx.globalAlpha=0.35; ctx.fillStyle=d.c; ctx.beginPath(); ctx.arc(sx(d.x),sy(d.y),d.r,0,Math.PI*2); ctx.fill(); ctx.globalAlpha=1; }
}

function drawDrops(G){
  if(!G) return;
  for(const d of G.drops||[]){
    const x=sx(d.x), y=sy(d.y);
    const p=0.5+0.5*Math.sin((d.pulse||0)*6);
    if(d.item){
      const qual = (QUALITIES && d.item.quality && QUALITIES[d.item.quality]) ? QUALITIES[d.item.quality].color : '#fff';
      ctx.shadowColor=qual; ctx.shadowBlur=12*p+4;
      ctx.fillStyle=qual; ctx.fillRect(x-10,y-10,20,20);
      ctx.shadowBlur=0;
      ctx.strokeStyle='rgba(0,0,0,0.7)'; ctx.strokeRect(x-10,y-10,20,20);
      ctx.fillStyle='#000'; ctx.font='12px sans-serif'; ctx.textAlign='center';
      ctx.fillText(d.item.icon||'🔹', x, y+4);
    } else {
      ctx.fillStyle='#ffd700'; ctx.beginPath(); ctx.arc(x,y,6*p+3,0,Math.PI*2); ctx.fill();
    }
  }
}

function drawEntityBody(e, ring, fill, label, nameColor){
  if(!e) return;
  const x=sx(e.x), y=sy(e.y), r=e.size||16;
  ctx.save(); ctx.beginPath(); ctx.arc(x,y,r,0,Math.PI*2); ctx.fillStyle=fill; ctx.fill(); ctx.lineWidth=2.5; ctx.strokeStyle=ring; ctx.stroke(); ctx.font=(r+4)+'px serif'; ctx.textAlign='center'; ctx.textBaseline='middle'; ctx.fillText(e.emoji||'?', x, y+1); ctx.restore();
  if(label){ ctx.font='bold 12px sans-serif'; ctx.textAlign='center'; ctx.lineWidth=3; ctx.strokeStyle='rgba(0,0,0,0.85)'; ctx.strokeText(label, x, y-r-8); ctx.fillStyle=nameColor||'#fff'; ctx.fillText(label, x, y-r-8); }
  if(e.hp < e.maxHp){ const w=Math.max(32, r*2.4), hx=x-w/2, hy=y-r-20; ctx.fillStyle='rgba(0,0,0,0.65)'; ctx.fillRect(hx,hy,w,6); const ratio=clamp(e.hp/e.maxHp,0,1); ctx.fillStyle = ratio>0.5?'#4caf50':(ratio>0.25?'#ff9800':'#f44336'); ctx.fillRect(hx,hy,w*ratio,6); ctx.strokeStyle='rgba(255,255,255,0.35)'; ctx.strokeRect(hx,hy,w,6); }
}

function drawMonsters(G){ if(!G) return; for(const m of G.monsters||[]){ if(!m.alive) continue; const ring = m.type==='elite' ? '#ff1744' : (m.type==='boss' ? '#ffd600' : '#5d4037'); const fill = m.type==='elite' ? '#7f1d1d' : (m.type==='boss' ? '#b71c1c' : '#4e342e'); drawEntityBody(m, ring, fill, m.type==='boss'?m.name:null, m.type==='boss'?'#ffd600':'#fff'); } }

function drawRemoteAvatars(G){ if(!G) return; for(const ra of G.remoteAvatars||[]){ if(ra.dead) { ctx.globalAlpha=0.35; drawEntityBody(ra, '#ffb74d', '#bf360c', ra.name, '#ffe0b2'); ctx.globalAlpha=1; } else drawEntityBody(ra, '#ffb74d', '#ffcc80', ra.name, '#5d4037'); } }

function drawBots(G){ if(!G) return; for(const b of G.bots||[]){ drawEntityBody(b, '#ff5252', '#7f1d1d', b.name, '#ff8a80'); } }

function drawAvatar(G){ if(!G) return; const av=G.avatar; if(!av) return; if(av.dead){ ctx.globalAlpha=0.35; drawEntityBody(av, '#4caf50', '#1b5e20', '复活中…', '#a5d6a7'); ctx.globalAlpha=1; return; } drawEntityBody(av, '#00e676', '#1b5e20', '分身', '#a5d6a7'); }

function drawPlayer(G){ if(!G) return; const p=G.player; if(!p) return; drawEntityBody(p, '#40c4ff', '#0d47a1', p.name, '#b3e5fc'); ctx.strokeStyle='rgba(64,196,255,0.5)'; ctx.lineWidth=2; ctx.beginPath(); ctx.arc(sx(p.x),sy(p.y),(p.size||16)+8,0,Math.PI*2); ctx.stroke(); }

function drawEffects(G){ if(!G) return; for(let i=G.floats.length-1;i>=0;i--){ const f=G.floats[i]; ctx.globalAlpha=Math.max(0,clamp(f.life,0,1)); ctx.font='bold 14px sans-serif'; ctx.textAlign='center'; ctx.fillStyle=f.color; ctx.fillText(f.text, sx(f.x), sy(f.y)); ctx.globalAlpha=1; } for(const p of G.particles||[]){ ctx.globalAlpha=Math.max(0,clamp(p.life,0,1)); ctx.fillStyle=p.color; ctx.beginPath(); ctx.arc(sx(p.x),sy(p.y),p.size*Math.max(0.2,p.life),0,Math.PI*2); ctx.fill(); ctx.globalAlpha=1; } if(G.evt && G.evt.bolt){ const b=G.evt.bolt, x=sx(b.x), y=sy(b.y); ctx.strokeStyle='rgba(255,255,255,0.95)'; ctx.lineWidth=3; ctx.beginPath(); ctx.moveTo(x, y-420); let cx=x, cy=y-420; const seg=9; for(let i=0;i<seg;i++){ cx=x+rand(-26,26); cy=y-420+((i+1)/seg)*420; ctx.lineTo(cx,cy); } ctx.lineTo(x,y); ctx.stroke(); ctx.fillStyle='#fff8e1'; ctx.beginPath(); ctx.arc(x,y,16,0,Math.PI*2); ctx.fill(); } if(G.evt && G.evt.flash>0){ ctx.fillStyle='rgba(255,255,255,'+Math.min(0.45,G.evt.flash)+')'; ctx.fillRect(0,0,VIEW_W,VIEW_H); } }

function drawMapEventOverlay(G){ if(!G || !G.map) return; if(G.map.event==='fog'){ const x=sx(G.player.x), y=sy(G.player.y); ctx.fillStyle='rgba(3,12,6,0.92)'; ctx.fillRect(0,0,VIEW_W,VIEW_H); ctx.globalCompositeOperation='destination-out'; const g=ctx.createRadialGradient(x,y,30,x,y,175); g.addColorStop(0,'rgba(0,0,0,1)'); g.addColorStop(1,'rgba(0,0,0,0)'); ctx.fillStyle=g; ctx.fillRect(0,0,VIEW_W,VIEW_H); ctx.globalCompositeOperation='source-over'; } }

function drawTargetReticle(G){ if(!G || G.battle || G.modalOpen) return; const w=toWorld(Input.mouse.x, Input.mouse.y); for(const b of G.bots||[]){ if(dist(b,w)<36){ const x=sx(b.x), y=sy(b.y); ctx.strokeStyle='rgba(255,255,255,0.85)'; ctx.lineWidth=2; ctx.setLineDash([6,4]); ctx.beginPath(); ctx.arc(x,y,(b.size||16)+10,0,Math.PI*2); ctx.stroke(); ctx.setLineDash([]); ctx.font='bold 12px sans-serif'; ctx.textAlign='center'; ctx.fillStyle='#ffeb3b'; ctx.fillText('⚔ 点击挑战', x, y-(b.size||16)-28); } } }