Angel coding

Arcade - Varios juegos

🎮 Arcade (6 juegos)

Previews con proporción fija (no se aplastan). Abre cualquier juego en grande (modal).

⚔ Dragon Realm RPG Canvas RPG

🚀 Astro Dodger Dodge / Score

🟣 Neon Breakout Paddle / Bricks

🌀 Mini Maze Arrow keys

✨ Star Painter Relax / Paint

🐍 Snake Zen Classic / Smooth

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Dragon Realm RPG</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
*{margin:0;padding:0;box-sizing:border-box;}
body{background:#000;overflow:hidden;font-family:'Press Start 2P',monospace;touch-action:none;user-select:none;}
canvas{display:block;image-rendering:pixelated;image-rendering:crisp-edges;}
#c{position:fixed;top:0;left:0;}
#hud{position:fixed;top:0;left:0;right:0;height:44px;background:rgba(0,0,0,0.85);border-bottom:3px solid #1a1a3a;display:flex;align-items:center;padding:0 10px;gap:12px;z-index:5;pointer-events:none;}
.hb{display:flex;align-items:center;gap:4px;}
.bl{font-size:6px;color:#ffd700;white-space:nowrap;}
.bar{width:80px;height:8px;background:#1a0a0a;border:2px solid #333;overflow:hidden;}
.bar div{height:100%;}
.bhp{background:linear-gradient(90deg,#c0392b,#e74c3c);}
.bxp{background:linear-gradient(90deg,#1a5276,#5b8cff);}
.bbs{background:linear-gradient(90deg,#7b241c,#ff0000);}
#cname{font-size:8px;color:#ffd700;flex:1;text-align:center;text-shadow:2px 2px 0 #8b6914;}
#blvl{font-size:6px;color:#00ff87;white-space:nowrap;}
#bmsg{position:fixed;top:52px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,0.9);border:3px solid #ffd700;padding:6px 14px;font-size:8px;color:#ffd700;opacity:0;transition:opacity .3s;z-index:10;white-space:nowrap;pointer-events:none;}
#bossbar{position:fixed;top:50px;left:50%;transform:translateX(-50%);width:260px;display:none;text-align:center;z-index:6;pointer-events:none;}
#bossname{font-size:7px;color:#ff4444;margin-bottom:3px;}
#bossbar .bar{width:100%;height:10px;}
.ov{position:fixed;inset:0;background:rgba(0,0,0,0.94);display:none;flex-direction:column;align-items:center;justify-content:center;z-index:20;text-align:center;padding:20px;}
.ov.show{display:flex;}
.ot{font-size:clamp(14px,4vw,30px);margin-bottom:18px;line-height:1.6;}
.os{font-size:8px;color:#aaa;line-height:2.4;}
.obtn{margin-top:24px;padding:12px 22px;border:4px solid #ffd700;background:#0a0a1a;color:#ffd700;font-family:'Press Start 2P',monospace;font-size:9px;cursor:pointer;}
.obtn:hover{background:#ffd700;color:#000;}
#ctrl{position:fixed;bottom:0;left:0;right:0;height:130px;display:flex;justify-content:space-between;align-items:flex-end;padding:0 14px 12px;z-index:5;pointer-events:none;}
.dpad{display:grid;grid-template-columns:repeat(3,46px);grid-template-rows:repeat(3,46px);gap:2px;pointer-events:all;}
.db{width:46px;height:46px;background:rgba(255,255,255,0.07);border:3px solid rgba(255,255,255,0.18);display:flex;align-items:center;justify-content:center;font-size:16px;cursor:pointer;border-radius:4px;}
.db:active{background:rgba(255,215,0,0.25);border-color:#ffd700;}
.de{width:46px;height:46px;}
.abts{display:flex;gap:10px;pointer-events:all;align-items:flex-end;}
.ab{width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;cursor:pointer;border:3px solid;}
.ab:active{opacity:.6;}
#baA{background:rgba(220,50,50,.25);border-color:#e94560;}
#baS{background:rgba(60,120,255,.25);border-color:#5b8cff;}
</style>
</head>
<body>
<canvas id="c"></canvas>
<div id="hud">
  <div class="hb"><span class="bl">HP</span><div class="bar"><div class="bhp" id="bHp" style="width:100%"></div></div><span id="bHpN" style="font-size:6px;color:#e74c3c">100</span></div>
  <div class="hb"><span class="bl">XP</span><div class="bar"><div class="bxp" id="bXp" style="width:0%"></div></div></div>
  <span id="cname">⚔ DRAGON REALM</span>
  <span id="blvl">LV1·💰0</span>
  <div class="hb" style="font-size:6px;color:#aaa">SK:<span id="bSkl" style="color:#00ff87">OK</span></div>
  <div class="hb" style="font-size:6px;color:#aaa">K:<span id="bK" style="color:#ffd700">0</span></div>
</div>
<div id="bossbar"><div id="bossname"></div><div class="bar"><div class="bbs" id="bBoss" style="width:100%"></div></div></div>
<div id="bmsg"></div>
<div class="ov show" id="ovI">
  <div class="ot" style="color:#ffd700;text-shadow:4px 4px 0 #8b6914">⚔ DRAGON REALM RPG</div>
  <div class="os">PIXEL EDITION · 5 ZONAS · 5 JEFES<br><br>WASD / FLECHAS = MOVER<br>Z = ATACAR · X = SKILL</div>
  <button class="obtn" id="btnS">▶ JUGAR</button>
</div>
<div class="ov" id="ovD">
  <div class="ot" style="color:#e94560">💀 GAME OVER</div>
  <div class="os" id="osD"></div>
  <button class="obtn" onclick="doR()">▶ REINTENTAR</button>
</div>
<div class="ov" id="ovW">
  <div class="ot" style="color:#ffd700">👑 ¡VICTORIA!</div>
  <div class="os" id="osW"></div>
  <button class="obtn" onclick="doR()">▶ DE NUEVO</button>
</div>
<div id="ctrl">
  <div class="dpad">
    <div class="de"></div><div class="db" id="dU">▲</div><div class="de"></div>
    <div class="db" id="dL">◀</div><div class="de"></div><div class="db" id="dR2">▶</div>
    <div class="de"></div><div class="db" id="dD">▼</div><div class="de"></div>
  </div>
  <div class="abts">
    <div class="ab" id="baA">⚔</div>
    <div class="ab" id="baS">✨</div>
  </div>
</div>
<script>
'use strict';
const cv=document.getElementById('c'),cx=cv.getContext('2d');
cx.imageSmoothingEnabled=false;
let W=0,H=0;
function rsz(){W=cv.width=innerWidth;H=cv.height=innerHeight;}
rsz(); window.addEventListener('resize',rsz);

// ── INPUT ──
const K={}, T={u:0,d:0,l:0,r:0,a:0,s:0};
window.addEventListener('keydown',e=>{K[e.key]=1;if('ArrowUp ArrowDown ArrowLeft ArrowRight'.includes(e.key))e.preventDefault();});
window.addEventListener('keyup',e=>{K[e.key]=0;});
function bindBtn(id,prop){
  const el=document.getElementById(id); if(!el)return;
  const on=e=>{e.preventDefault();T[prop]=1;};
  const off=e=>{e.preventDefault();T[prop]=0;};
  el.addEventListener('touchstart',on,{passive:false}); el.addEventListener('touchend',off,{passive:false});
  el.addEventListener('touchcancel',off,{passive:false});
  el.addEventListener('mousedown',on); el.addEventListener('mouseup',off); el.addEventListener('mouseleave',off);
}
bindBtn('dU','u');bindBtn('dD','d');bindBtn('dL','l');bindBtn('dR2','r');
bindBtn('baA','a');bindBtn('baS','s');

// ── PIXEL SPRITE SYSTEM ──
const PS=4; // dot size in px
function mkSpr(frames,dW,dH){
  return frames.map(px=>{
    const oc=document.createElement('canvas');
    oc.width=dW*PS; oc.height=dH*PS;
    const c2=oc.getContext('2d'); c2.imageSmoothingEnabled=false;
    px.forEach(([x,y,c])=>{c2.fillStyle=c;c2.fillRect(x*PS,y*PS,PS,PS);});
    return oc;
  });
}

// ── HERO SPRITES (9w × 10h dots) ──
const SK='#f5c87a',HR='#3a1a00',EY='#2244cc',SH='#c0392b',BL='#ffd700',PN='#2255aa',BT='#1a3a66',SW='#c8c8d8',SG='#ffd700';
const HEAD=[[2,0,HR],[3,0,HR],[4,0,HR],[5,0,HR],[6,0,HR],
  [1,1,SK],[2,1,SK],[3,1,SK],[4,1,SK],[5,1,SK],[6,1,SK],[7,1,SK],
  [1,2,SK],[2,2,EY],[3,2,SK],[4,2,SK],[5,2,SK],[6,2,EY],[7,2,SK],
  [1,3,SK],[2,3,SK],[3,3,SK],[4,3,SK],[5,3,SK],[6,3,SK],[7,3,SK]];
const BODY=[[1,4,SH],[2,4,SH],[3,4,SH],[4,4,SH],[5,4,SH],[6,4,SH],[7,4,SH],
  [0,5,SH],[1,5,BL],[2,5,BL],[3,5,BL],[4,5,BL],[5,5,BL],[6,5,BL],[7,5,BL],[8,5,SH],
  [1,6,SH],[2,6,SH],[3,6,SH],[4,6,SH],[5,6,SH],[6,6,SH],[7,6,SH]];
// idle legs
const L_IDLE=[[2,7,PN],[3,7,PN],[4,7,PN],[5,7,PN],[6,7,PN],
  [2,8,BT],[3,8,BT],[4,8,BT],[5,8,BT],[6,8,BT]];
// walk A legs
const L_WA=[[1,7,PN],[2,7,PN],[3,7,PN],[5,7,PN],[6,7,PN],[7,7,PN],
  [1,8,BT],[2,8,BT],[3,8,BT],[5,8,BT],[6,8,BT],[7,8,BT],
  [1,9,BT]];
// walk B legs
const L_WB=[[1,7,PN],[2,7,PN],[3,7,PN],[5,7,PN],[6,7,PN],[7,7,PN],
  [1,8,BT],[2,8,BT],[3,8,BT],[5,8,BT],[6,8,BT],[7,8,BT],
  [7,9,BT]];
// attack arm/sword
const ATK_ARM=[[8,3,SW],[9,3,SG],[10,3,SW],[11,3,SW],[12,3,SG],[12,2,SG],[8,4,SG]];

const HERO_SPRS=mkSpr([
  [...HEAD,...BODY,...L_IDLE],         // 0 idle
  [...HEAD,...BODY,...L_WA],           // 1 walk A
  [...HEAD,...BODY,...L_WB],           // 2 walk B
  [...HEAD,...BODY,...L_IDLE,...ATK_ARM] // 3 attack
],13,10);

// ── ENEMY SPRITE FACTORY (6w × 9h) ──
function mkEnemySpr(col){
  const dk='#111',ey='#ff2222',fn='#fffaaa';
  const idle=[[1,0,col],[2,0,col],[3,0,col],[4,0,col],
    [0,1,col],[1,1,ey],[2,1,col],[3,1,col],[4,1,ey],[5,1,col],
    [0,2,col],[2,2,fn],[3,2,fn],[5,2,col],
    [1,3,col],[2,3,col],[3,3,col],[4,3,col],
    [0,4,dk],[1,4,col],[2,4,col],[3,4,col],[4,4,col],[5,4,dk],
    [1,5,col],[2,5,col],[3,5,col],[4,5,col],
    [1,6,dk],[2,6,dk],[3,6,dk],[4,6,dk],
    [1,7,dk],[4,7,dk]];
  const wA=[[1,0,col],[2,0,col],[3,0,col],[4,0,col],
    [0,1,col],[1,1,ey],[2,1,col],[3,1,col],[4,1,ey],[5,1,col],
    [0,2,col],[2,2,fn],[3,2,fn],[5,2,col],
    [1,3,col],[2,3,col],[3,3,col],[4,3,col],
    [0,4,dk],[1,4,col],[2,4,col],[3,4,col],[4,4,col],[5,4,dk],
    [1,5,col],[2,5,col],[3,5,col],[4,5,col],
    [0,6,dk],[1,6,dk],[3,6,dk],[4,6,dk],[0,7,dk],[4,7,dk]];
  const wB=[[1,0,col],[2,0,col],[3,0,col],[4,0,col],
    [0,1,col],[1,1,ey],[2,1,col],[3,1,col],[4,1,ey],[5,1,col],
    [0,2,col],[2,2,fn],[3,2,fn],[5,2,col],
    [1,3,col],[2,3,col],[3,3,col],[4,3,col],
    [0,4,dk],[1,4,col],[2,4,col],[3,4,col],[4,4,col],[5,4,dk],
    [1,5,col],[2,5,col],[3,5,col],[4,5,col],
    [1,6,dk],[2,6,dk],[4,6,dk],[5,6,dk],[1,7,dk],[5,7,dk]];
  return mkSpr([idle,wA,wB],6,8);
}

// ── BOSS SPRITE FACTORY (12w × 15h) ──
function mkBossSpr(col,phase){
  const dk='#111';
  const c2=phase>=2?'#ff2200':col;
  const ey=phase>=3?'#ffffff':'#ffff00';
  const au=phase>=3?'#ffaa00':'#880000';
  const crown=phase>=3?[[3,-2,'#ffd700'],[5,-2,'#ffd700'],[7,-2,'#ffd700'],
    [2,-1,'#ffd700'],[4,-1,'#ffd700'],[6,-1,'#ffd700'],[8,-1,'#ffd700']]:[];
  const base=(lg1,lg2)=>[
    ...crown,
    [2,0,col],[3,0,col],[4,0,col],[5,0,col],[6,0,col],[7,0,col],[8,0,col],[9,0,col],
    [1,1,col],[2,1,c2],[3,1,c2],[5,1,col],[6,1,c2],[7,1,c2],[9,1,col],[10,1,col],
    [1,2,col],[2,2,ey],[4,2,col],[7,2,ey],[9,2,col],[10,2,col],
    [2,3,col],[3,3,dk],[4,3,col],[5,3,col],[6,3,dk],[7,3,col],[8,3,col],
    [2,4,col],[3,4,col],[4,4,col],[5,4,col],[6,4,col],[7,4,col],[8,4,col],[9,4,col],
    [1,5,c2],[2,5,c2],[3,5,c2],[4,5,c2],[5,5,c2],[6,5,c2],[7,5,c2],[8,5,c2],[9,5,c2],[10,5,c2],
    [0,6,c2],[1,6,c2],[2,6,c2],[3,6,c2],[4,6,c2],[5,6,c2],[6,6,c2],[7,6,c2],[8,6,c2],[9,6,c2],[10,6,c2],[11,6,c2],
    [0,7,au],[1,7,c2],[2,7,c2],[3,7,c2],[4,7,c2],[5,7,c2],[6,7,c2],[7,7,c2],[8,7,c2],[9,7,c2],[10,7,c2],[11,7,au],
    [1,8,c2],[2,8,c2],[3,8,c2],[4,8,c2],[5,8,c2],[6,8,c2],[7,8,c2],[8,8,c2],[9,8,c2],[10,8,c2],
    [2,9,col],[3,9,col],[4,9,col],[5,9,col],[6,9,col],[7,9,col],[8,9,col],[9,9,col],
    ...(lg1||[]),...(lg2||[])
  ];
  const legs0=[[2,10,col],[3,10,col],[5,10,dk],[6,10,dk],[7,10,dk],[8,10,dk],[9,10,col],[10,10,col],
    [2,11,dk],[3,11,dk],[9,11,dk],[10,11,dk],[2,12,dk],[3,12,dk],[9,12,dk],[10,12,dk]];
  const legs1=[[1,10,col],[2,10,col],[4,10,dk],[5,10,dk],[6,10,dk],[7,10,dk],[10,10,col],[11,10,col],
    [1,11,dk],[2,11,dk],[10,11,dk],[11,11,dk],[1,12,dk],[2,12,dk],[10,12,dk],[11,12,dk]];
  return mkSpr([base(legs0),base(legs1)],12,15);
}

const ZONES=[
  {name:'🌿 BOSQUE',   bg:'#0d1a0d',t1:'#1a3a1a',t2:'#0d2a0d',wall:'#2a6a2a',
   en:{n:4,hp:45,dmg:8,xp:20,sp:1.1,col:'#3a7a2a',nm:'GOBLIN'},
   boss:{nm:'🪨 GOLEM',   hp:280,dmg:16,sp:0.8,col:'#778899',rw:'ESPADA +5'}},
  {name:'🌊 CAVERNAS', bg:'#0a0a1a',t1:'#1a1a3a',t2:'#0a0a28',wall:'#2a2a8a',
   en:{n:5,hp:80,dmg:14,xp:35,sp:1.4,col:'#2a5ab0',nm:'KRAKEN JR'},
   boss:{nm:'🦑 KRAKEN',  hp:560,dmg:26,sp:1.0,col:'#004488',rw:'TRIDENTE'}},
  {name:'🌋 VOLCÁN',   bg:'#1a0800',t1:'#3a1400',t2:'#280e00',wall:'#aa3300',
   en:{n:6,hp:130,dmg:22,xp:55,sp:1.7,col:'#cc4400',nm:'LAVA IMP'},
   boss:{nm:'🐉 DRAGÓN',  hp:980,dmg:38,sp:1.2,col:'#cc0000',rw:'HACHA INFERNAL'}},
  {name:'🌑 ABISMO',   bg:'#060010',t1:'#12001a',t2:'#0a000e',wall:'#5a0888',
   en:{n:7,hp:180,dmg:28,xp:80,sp:1.9,col:'#6600aa',nm:'SHADOW'},
   boss:{nm:'👤 REY SOMBRA',hp:1500,dmg:52,sp:1.5,col:'#440088',rw:'ESPADA VACÍO'}},
  {name:'⚡ TRONO',    bg:'#0f0a00',t1:'#1e1300',t2:'#140d00',wall:'#aa8800',
   en:{n:8,hp:240,dmg:35,xp:120,sp:2.1,col:'#aa6600',nm:'GUARDIAN'},
   boss:{nm:'⚡ DRAKARIS',hp:2800,dmg:70,sp:1.7,col:'#ff4400',rw:'CORONA DRAGÓN 👑'}},
];

// Cache enemy/boss sprites
const EN_SPRS=ZONES.map(z=>mkEnemySpr(z.en.col));
let BOSS_SPRS={};
function getBSpr(zone,phase){
  const k=zone+'_'+phase;
  if(!BOSS_SPRS[k]) BOSS_SPRS[k]=mkBossSpr(ZONES[zone].boss.col,phase);
  return BOSS_SPRS[k];
}

// ── MAP ──
const MW=42,MH=28,TILE=32;
let G={},PTCL=[],FLTS=[],SCR='intro',TICK=0;

function spawnBoss(){
  const z=ZONES[G.zone].boss;
  G.boss={x:(MW-7)*TILE,y:~~(MH/2)*TILE,w:48,h:60,
    hp:z.hp,mhp:z.hp,dmg:z.dmg,sp:z.sp,
    atkcd:0,ifr:0,ph:1,tmr:0,buls:[],an:0,ant:0};
  G.bossActive=true;
  G.p.x=(MW-13)*TILE; G.p.y=~~(MH/2)*TILE;
  msg('⚠ '+z.nm+' APARECE!',3000);
  document.getElementById('bossbar').style.display='block';
  document.getElementById('bossname').textContent=z.nm;
}

// ── FX ──
function burst(x,y,col,n=10){
  for(let i=0;i<n;i++){const a=Math.random()*Math.PI*2,sp=1+Math.random()*3;
    PTCL.push({x,y,vx:Math.cos(a)*sp,vy:Math.sin(a)*sp,life:20+~~(Math.random()*20),col,sz:2+Math.random()*3});}
}
function flt(txt,x,y,col){FLTS.push({txt,x,y,life:55,col});}

function upHud(){
  const p=G.p;
  document.getElementById('bHp').style.width=(Math.max(0,p.hp)/p.mhp*100)+'%';
  document.getElementById('bHpN').textContent=Math.max(0,~~p.hp)+'/'+p.mhp;
  document.getElementById('bXp').style.width=(p.xp/p.xpn*100)+'%';
  document.getElementById('blvl').textContent='LV'+p.lv+'·💰'+G.gold;
  document.getElementById('bK').textContent=G.kills;
  if(G.boss) document.getElementById('bBoss').style.width=(Math.max(0,G.boss.hp)/G.boss.mhp*100)+'%';
}
let msgT=null;
function msg(txt,dur=2200){
  const el=document.getElementById('bmsg');el.textContent=txt;el.style.opacity=1;
  clearTimeout(msgT);msgT=setTimeout(()=>el.style.opacity=0,dur);
}

function lvlUp(){
  const p=G.p;
  while(p.xp>=p.xpn){
    p.xp-=p.xpn;p.lv++;p.xpn=~~(p.xpn*1.45);
    p.mhp+=22;p.hp=Math.min(p.hp+50,p.mhp);p.atk+=4;p.def+=2;
    msg('⬆ NIVEL '+p.lv+'! HP+22 ATK+4',2000);
    burst(p.x+p.w/2,p.y+p.h/2,'#ffd700',18);
  }
}

// ── INIT ──
function initG(){
  PTCL=[];FLTS=[];BOSS_SPRS={};
  G={zone:0,kills:0,gold:0,bossActive:false,boss:null,
    p:{x:3*TILE,y:3*TILE,w:28,h:36,hp:100,mhp:100,atk:18,def:5,sp:3,
       xp:0,xpn:100,lv:1,atkcd:0,sklcd:0,ifr:0,face:1,an:0,ant:0,mov:false},
    cam:{x:0,y:0},enemies:[],map:[],gate:{}};
  buildMap();spawnEn();
  document.getElementById('cname').textContent=ZONES[0].name;
  document.getElementById('bossbar').style.display='none';
  upHud();
  msg('🌿 ZONA 1 — ¡MATA A TODOS LOS ENEMIGOS!',3000);
}

// ── ATTACK ──
function doAtk(){
  const p=G.p;if(p.atkcd>0)return;p.atkcd=18;
  const reach=TILE*2,ax=p.face>0?p.x+p.w:p.x-reach,ay=p.y-8,aw=reach+p.w,ah=p.h+16;
  G.enemies.forEach(e=>{
    if(e.ifr>0)return;
    if(ax<e.x+e.w&&ax+aw>e.x&&ay<e.y+e.h&&ay+ah>e.y){
      const d=p.atk+~~(Math.random()*8);e.hp-=d;e.ifr=14;
      flt('-'+d,e.x+e.w/2,e.y,'#ff5555');burst(e.x+e.w/2,e.y+e.h/2,'#ff8888',6);
    }
  });
  if(G.boss&&G.boss.ifr<=0){
    const b=G.boss;
    if(ax<b.x+b.w&&ax+aw>b.x&&ay<b.y+b.h&&ay+ah>b.y){
      const d=p.atk+~~(Math.random()*12);b.hp-=d;b.ifr=8;
      flt('-'+d,b.x+b.w/2,b.y,'#ff4444');burst(b.x+b.w/2,b.y+b.h/2,'#ff6600',10);upHud();
    }
  }
  burst(p.face>0?p.x+p.w+8:p.x-12,p.y+p.h/2,'#ffd700',5);
}

// ── UPDATE ──
function update(){
  if(SCR!=='play')return;
  TICK++;
  const p=G.p;

// cooldowns
  if(p.atkcd>0)p.atkcd--;if(p.sklcd>0)p.sklcd--;if(p.ifr>0)p.ifr--;
  const sEl=document.getElementById('bSkl');
  sEl.textContent=p.sklcd>0?Math.ceil(p.sklcd/60)+'s':'OK';
  sEl.style.color=p.sklcd>0?'#e74c3c':'#00ff87';

// player movement
  let dx=0,dy=0;
  if(K['ArrowLeft']||K['a']||K['A']||T.l)dx=-p.sp;
  if(K['ArrowRight']||K['d']||K['D']||T.r)dx=p.sp;
  if(K['ArrowUp']||K['w']||K['W']||T.u)dy=-p.sp;
  if(K['ArrowDown']||K['s']||K['S']||T.d)dy=p.sp;
  if(dx&&dy){dx*=.707;dy*=.707;}
  if(dx>0)p.face=1;else if(dx<0)p.face=-1;
  p.mov=(dx!==0||dy!==0);
  mv(p,dx,dy);
  p.x=Math.max(TILE,Math.min(p.x,(MW-2)*TILE-p.w));
  p.y=Math.max(TILE,Math.min(p.y,(MH-2)*TILE-p.h));

// player sprite animation
  p.ant++;
  if(p.mov){if(p.ant%9===0)p.an=p.an===1?2:1;}
  else p.an=0;

// inputs
  if((K['z']||K['Z']||T.a)&&p.atkcd<=0)doAtk();
  if((K['x']||K['X']||T.s)&&p.sklcd<=0)doSkl();

// gate enter
  if(G.gate.open&&!G.bossActive&&!G.boss){
    const g=G.gate;
    if(p.x+p.w>g.x-TILE&&p.x<g.x+TILE*4&&p.y+p.h>g.y-TILE*2&&p.y<g.y+TILE*6)
      spawnBoss();
  }

// camera smooth follow
  const tx=p.x+p.w/2-W/2,ty=p.y+p.h/2-H/2;
  G.cam.x+=(tx-G.cam.x)*.13;G.cam.y+=(ty-G.cam.y)*.13;
  G.cam.x=Math.max(0,Math.min(G.cam.x,MW*TILE-W));
  G.cam.y=Math.max(0,Math.min(G.cam.y,MH*TILE-H));

// enemies
  G.enemies=G.enemies.filter(e=>{
    if(e.hp<=0){
      G.kills++;G.gold+=10+~~(Math.random()*12);p.xp+=e.xp;
      burst(e.x+e.w/2,e.y+e.h/2,ZONES[G.zone].en.col,12);
      flt('+'+e.xp+'xp',e.x+e.w/2,e.y,'#5b8cff');
      lvlUp();upHud();return false;
    }
    if(e.ifr>0)e.ifr--;if(e.atkcd>0)e.atkcd--;
    const d=dst(e,p);
    if(d<TILE*9){
      const ex=p.x-e.x,ey=p.y-e.y,el=Math.hypot(ex,ey)||1;
      mv(e,(ex/el)*e.sp,0);mv(e,0,(ey/el)*e.sp);e.mv=true;
      if(d<TILE*1.4&&e.atkcd<=0&&p.ifr<=0){
        const dmg=Math.max(1,e.dmg-p.def);p.hp-=dmg;p.ifr=38;e.atkcd=55;
        flt('-'+dmg,p.x+p.w/2,p.y,'#e94560');upHud();
        if(p.hp<=0)pDead();
      }
    } else {
      e.mv=false;e.wt--;
      if(e.wt<=0){e.wt=50+~~(Math.random()*70);const a=Math.random()*Math.PI*2;e.wx=Math.cos(a)*e.sp*.4;e.wy=Math.sin(a)*e.sp*.4;}
      mv(e,e.wx,e.wy);
    }
    e.ant++;
    if(e.mv){if(e.ant%9===0)e.an=e.an===1?2:1;}else e.an=0;
    return true;
  });

// open gate
  if(G.enemies.length===0&&!G.bossActive&&!G.boss&&!G.gate.open){
    G.gate.open=true;burst(G.gate.x,G.gate.y,'#ff0000',25);
    msg('🔴 PORTAL ABIERTO → VE A LA DERECHA',3500);
  }

// boss
  if(G.bossActive&&G.boss){
    const b=G.boss;
    if(b.ifr>0)b.ifr--;if(b.atkcd>0)b.atkcd--;b.tmr++;
    // phase
    if(b.hp<b.mhp*.66&&b.ph===1){b.ph=2;b.sp*=1.3;BOSS_SPRS={};burst(b.x+b.w/2,b.y+b.h/2,'#ff0000',25);msg('💥 FASE 2!',2000);}
    if(b.hp<b.mhp*.33&&b.ph===2){b.ph=3;b.sp*=1.2;BOSS_SPRS={};burst(b.x+b.w/2,b.y+b.h/2,'#ffff00',35);msg('⚡ FASE 3! PODER MÁXIMO',2000);}
    // move
    const bex=p.x-b.x,bey=p.y-b.y,bel=Math.hypot(bex,bey)||1;
    mv(b,(bex/bel)*b.sp,0);mv(b,0,(bey/bel)*b.sp);
    b.ant++;if(b.ant%12===0)b.an=b.an===0?1:0;
    // bullets
    if(b.ph>=2&&b.tmr%45===0)
      b.buls.push({x:b.x+b.w/2,y:b.y+b.h/2,vx:(bex/bel)*4.5,vy:(bey/bel)*4.5,life:90});
    if(b.ph>=3&&b.tmr%30===0)
      [-0.45,0,0.45].forEach(a=>{
        const ca=Math.cos(a),sa=Math.sin(a);
        b.buls.push({x:b.x+b.w/2,y:b.y+b.h/2,
          vx:(ca*(bex/bel)-sa*(bey/bel))*4,vy:(sa*(bex/bel)+ca*(bey/bel))*4,life:110});
      });
    b.buls=b.buls.filter(bl=>{
      bl.x+=bl.vx;bl.y+=bl.vy;bl.life--;
      if(bl.life<=0||solid(~~(bl.x/TILE),~~(bl.y/TILE)))return false;
      if(p.ifr<=0&&bl.x>p.x&&bl.x<p.x+p.w&&bl.y>p.y&&bl.y<p.y+p.h){
        const dmg=Math.max(1,~~(b.dmg*.55)-p.def);p.hp-=dmg;p.ifr=28;
        flt('-'+dmg,p.x,p.y,'#ff6060');upHud();if(p.hp<=0)pDead();return false;
      }
      return true;
    });
    // melee
    if(dst(b,p)<TILE*1.6&&b.atkcd<=0&&p.ifr<=0){
      const dmg=Math.max(1,b.dmg-p.def);p.hp-=dmg;p.ifr=45;b.atkcd=65;
      flt('-'+dmg,p.x,p.y,'#e94560');upHud();if(p.hp<=0)pDead();
    }
    // boss dead
    if(b.hp<=0){
      G.gold+=200+G.zone*100;burst(b.x+b.w/2,b.y+b.h/2,'#ffd700',60);
      const bz=ZONES[G.zone].boss;
      msg('🏆 '+bz.nm+' DERROTADO! +'+bz.rw,4500);
      G.boss=null;G.bossActive=false;
      document.getElementById('bossbar').style.display='none';upHud();
      if(G.zone<ZONES.length-1)setTimeout(nextZ,4000);
      else setTimeout(()=>{
        SCR='win';showOv('ovW');
        document.getElementById('osW').innerHTML='¡COMPLETASTE EL JUEGO!<br><br>NIVEL: '+p.lv+'<br>KILLS: '+G.kills+'<br>ORO: '+G.gold+'<br><br>👑 CAMPEÓN DEL DRAGON REALM 👑';
      },3500);
    }
  }
  upHud();
}

// ── DRAW ──
function drSpr(sprs,frame,x,y,flip,alpha){
  const img=sprs[Math.min(frame,sprs.length-1)];if(!img)return;
  cx.save();if(alpha!==undefined)cx.globalAlpha=alpha;
  if(flip){cx.translate(~~x+img.width,~~y);cx.scale(-1,1);cx.drawImage(img,0,0);}
  else cx.drawImage(img,~~x,~~y);
  cx.restore();
}

function drawPlayer(){
  const p=G.p,sx=~~(p.x-G.cam.x),sy=~~(p.y-G.cam.y);
  const fr=p.atkcd>10?3:p.an;
  const al=(p.ifr>0&&~~(p.ifr/5)%2===0)?.3:1;
  drSpr(HERO_SPRS,fr,sx-PS,sy-PS,p.face<0,al);
  if(p.hp<p.mhp){cx.fillStyle='#300';cx.fillRect(sx,sy-6,p.w,3);cx.fillStyle='#e74c3c';cx.fillRect(sx,sy-6,~~(p.w*(p.hp/p.mhp)),3);}
}

function drawEn(){
  const sprs=EN_SPRS[G.zone];
  G.enemies.forEach(e=>{
    const sx=~~(e.x-G.cam.x),sy=~~(e.y-G.cam.y);
    if(sx>W+60||sx<-60||sy>H+60||sy<-60)return;
    const al=(e.ifr>0&&~~(e.ifr/4)%2===0)?.3:1;
    drSpr(sprs,e.an,sx-PS,sy-PS,false,al);
    cx.fillStyle='#300';cx.fillRect(sx,sy-7,e.w,3);
    cx.fillStyle='#e74c3c';cx.fillRect(sx,sy-7,~~(e.w*(e.hp/e.mhp)),3);
  });
}

// ── INTRO DRAW ──
let introT=0;
const ISTAR=Array.from({length:80},()=>({x:Math.random()*3000,y:Math.random()*2000,r:Math.random()<.3?3:2,t:Math.random()*Math.PI*2,c:Math.random()<.2?'#ffd700':Math.random()<.1?'#00b4d8':'#fff'}));
const IDRAGON=[[2,0,'#ffff00'],[3,0,'#ffd700'],[4,0,'#ffff00'],
  [1,1,'#ff8800'],[2,1,'#ffcc00'],[3,1,'#fff'],[4,1,'#ffcc00'],[5,1,'#ff8800'],
  [0,2,'#cc4400'],[1,2,'#ff6600'],[2,2,'#ff4400'],[3,2,'#ffff00'],[4,2,'#ff4400'],[5,2,'#ff6600'],[6,2,'#cc4400'],
  [1,3,'#ff2200'],[2,3,'#ff6600'],[3,3,'#fff'],[4,3,'#ff6600'],[5,3,'#ff2200'],
  [2,4,'#cc0000'],[3,4,'#ff4400'],[4,4,'#cc0000'],
  [0,1,'#ff4400'],[6,1,'#ff4400'],
  [2,-1,'#ffd700'],[3,-1,'#ffd700'],[4,-1,'#ffd700'],
  [1,-2,'#ffd700'],[2,-2,'#ffd700'],[3,-2,'#ffd700'],[4,-2,'#ffd700'],[5,-2,'#ffd700'],
  [7,2,'#ff8800'],[8,2,'#ffaa00'],[9,2,'#ffcc00'],[7,3,'#ff6600'],[8,3,'#ff8800']];
function drawIntro(){
  introT+=.025;
  cx.fillStyle='#000';cx.fillRect(0,0,W,H);
  ISTAR.forEach(s=>{cx.globalAlpha=.3+.7*Math.abs(Math.sin(s.t+introT*.8));cx.fillStyle=s.c;cx.fillRect(s.x%W,s.y%H,s.r,s.r);});
  cx.globalAlpha=1;
  const IS=5,off=Math.sin(introT*1.8)*5,ox=W/2-28,oy=H/2-50+off;
  const bright=Math.sin(introT*4)>.5;
  IDRAGON.forEach(([x,y,c,c2])=>{cx.fillStyle=c;cx.fillRect(~~(ox+x*IS),~~(oy+y*IS),IS,IS);});
  if(bright){cx.globalAlpha=.4;cx.fillStyle='#ffff00';IDRAGON.forEach(([x,y])=>cx.fillRect(~~(ox+x*IS),~~(oy+y*IS),IS,IS));cx.globalAlpha=1;}
  cx.fillStyle='#ffd700';cx.font=`bold ${Math.min(26,~~(W*.04))}px 'Press Start 2P'`;cx.textAlign='center';
  cx.shadowColor='#ff8800';cx.shadowBlur=22;cx.fillText('⚔ DRAGON REALM RPG',W/2,H*.72);cx.shadowBlur=0;
  cx.fillStyle='#555';cx.font="8px 'Press Start 2P'";cx.fillText('PIXEL EDITION — 5 ZONAS',W/2,H*.79);
  cx.fillStyle=Math.sin(introT*4)>.2?'#00ff87':'transparent';cx.font="9px 'Press Start 2P'";cx.fillText('▶ CLICK / TAP PARA JUGAR',W/2,H*.88);
  cx.fillStyle='#333';cx.font="6px 'Press Start 2P'";cx.fillText('WASD=MOVER · Z=ATACAR · X=SKILL',W/2,H*.94);
  cx.textAlign='left';
}

// ═══════════════════════════════════════════
//  GAME LOOP — requestAnimationFrame NEVER STOPS
// ═══════════════════════════════════════════
function loop(){
  requestAnimationFrame(loop); // always re-queue FIRST
  cx.fillStyle='#000';cx.fillRect(0,0,W,H);
  if(SCR==='intro'){drawIntro();return;}
  if(SCR==='dead'||SCR==='win'){return;}
  update();
  const z=ZONES[G.zone];
  cx.fillStyle=z.bg;cx.fillRect(0,0,W,H);
  drawMap();drawGate();drawEn();drawBoss();drawPlayer();drawFX();
}
loop();

// ── EVENTS ──
document.getElementById('btnS').addEventListener('click',()=>{
  SCR='play';showOv(null);initG();
});
function doR(){
  SCR='play';PTCL=[];FLTS=[];showOv(null);initG();
}
</script>
</body>
</html>

IAGO: STABLE

RENDIMIENTO MEJORADO ⚡

NIVEL 1

⬅

➡

⚔

⬆

💰 0 🍗 0 🎖️ 0

Base de Operaciones

👤 General (¡Baja para ver más!)

⚔️ Arma +0

Espada

🛡️ Armadura +0

Cuero

👟 Botas

Común

📿 Amuleto

Vacío

💍 Anillo

Vacío

⚒️ Herrería

🏰 Gestión

📜 Historial

Registro de batallas recientes...

- Sin actividad

🗺️ Mapa de Guerra (Side Scroller)

🛡️ Reclutamiento

JUGADOR 100/100

CONTROLES:
[A] Izq / [D] Der
[W] Fondo / [S] Frente
[ESPACIO] Atacar

VICTORIA

RIVALS STORE

KEYS: 0

🦝 Wedding Crasher

¿Listo para el pastel?

Usa A y D para mantener el equilibrio.
Esquiva las notas del ganso pianista.

🦝 🍰

⚖️ EQUILIBRIO

🕵️ SOSPECHA

SCORE: 00000

COMBO: 0

ESTADO DEL NÚCLEO

FORSAKEN

PROTOCOL: BLAH BLAH BLAH BLAH

JOYFUL DANCE OFF