{status==='idle'&&
🟦
Tetris
← → ↓ mover · ↑ rotar · Espacio = caída
}
{status==='over'&&
💥
Game Over
{score} pts
}
{next&&
SIGUIENTE
{next.shape.flat().map((v,i)=>
)}
}
{isMobile&&status==='playing'&&(
)}
);
}
// ===================== PONG =====================
function PongGame() {
const canvasRef=React.useRef(null);
const stRef=React.useRef(null);
const rafRef=React.useRef(null);
const [playerScore,setPlayerScore]=React.useState(0);
const [aiScore,setAiScore]=React.useState(0);
const [status,setStatus]=React.useState('idle');
const W=400,H=280,PW=10,PH=60,BR=6;
const start=()=>{
stRef.current={
py:H/2-PH/2,ay:H/2-PH/2,
ball:{x:W/2,y:H/2,vx:4*(Math.random()>0.5?1:-1),vy:3*(Math.random()>0.5?1:-1)},
ps:0,as:0,running:true,
};
setPlayerScore(0);setAiScore(0);setStatus('playing');
};
React.useEffect(()=>{
if(status!=='playing') return;
const canvas=canvasRef.current;
const ctx=canvas.getContext('2d');
const s=stRef.current;
const draw=()=>{
ctx.fillStyle='#080818';ctx.fillRect(0,0,W,H);
ctx.setLineDash([8,8]);ctx.strokeStyle='rgba(255,255,255,0.08)';ctx.lineWidth=2;
ctx.beginPath();ctx.moveTo(W/2,0);ctx.lineTo(W/2,H);ctx.stroke();ctx.setLineDash([]);
// paddles
const grad1=ctx.createLinearGradient(0,s.py,0,s.py+PH);
grad1.addColorStop(0,'var(--cyan)');grad1.addColorStop(1,'var(--purple)');
ctx.fillStyle=grad1;ctx.shadowColor='var(--cyan)';ctx.shadowBlur=12;
ctx.beginPath();ctx.roundRect(12,s.py,PW,PH,PW/2);ctx.fill();
const grad2=ctx.createLinearGradient(0,s.ay,0,s.ay+PH);
grad2.addColorStop(0,'var(--orange)');grad2.addColorStop(1,'var(--pink)');
ctx.fillStyle=grad2;ctx.shadowColor='var(--orange)';ctx.shadowBlur=12;
ctx.beginPath();ctx.roundRect(W-PW-12,s.ay,PW,PH,PW/2);ctx.fill();
// ball
ctx.fillStyle='#fff';ctx.shadowColor='#fff';ctx.shadowBlur=16;
ctx.beginPath();ctx.arc(s.ball.x,s.ball.y,BR,0,Math.PI*2);ctx.fill();
ctx.shadowBlur=0;
// scores
ctx.font=`bold 28px 'Exo 2', sans-serif`;ctx.fillStyle='rgba(255,255,255,0.4)';ctx.textAlign='center';
ctx.fillText(s.ps,W/2-60,36);ctx.fillText(s.as,W/2+60,36);
};
const tick=()=>{
const b=s.ball;
b.x+=b.vx;b.y+=b.vy;
if(b.y<=BR||b.y>=H-BR) b.vy*=-1;
// player paddle
if(b.x<=12+PW+BR&&b.y>=s.py&&b.y<=s.py+PH&&b.vx<0){
b.vx=Math.abs(b.vx)*1.05;b.vy+=((b.y-(s.py+PH/2))/(PH/2))*2;
}
// ai paddle
if(b.x>=W-PW-12-BR&&b.y>=s.ay&&b.y<=s.ay+PH&&b.vx>0){
b.vx=-Math.abs(b.vx)*1.05;b.vy+=((b.y-(s.ay+PH/2))/(PH/2))*2;
}
// cap speed
const spd=Math.sqrt(b.vx**2+b.vy**2);if(spd>12){b.vx=b.vx/spd*12;b.vy=b.vy/spd*12;}
// AI movement
const aiCenter=s.ay+PH/2;const aiSpeed=3.2;
if(aiCenter
b.y+4) s.ay=Math.max(0,s.ay-aiSpeed);
// scoring
if(b.x<0){s.as++;setAiScore(s.as);if(s.as>=5){s.running=false;setStatus('over');window.dispatchEvent(new CustomEvent('ag_score',{detail:{game:'pong',score:s.ps*100}}));return;}b.x=W/2;b.y=H/2;b.vx=4;b.vy=3*(Math.random()>0.5?1:-1);}
if(b.x>W){s.ps++;setPlayerScore(s.ps);if(s.ps>=5){s.running=false;setStatus('won');window.dispatchEvent(new CustomEvent('ag_score',{detail:{game:'pong',score:500}}));return;}b.x=W/2;b.y=H/2;b.vx=-4;b.vy=3*(Math.random()>0.5?1:-1);}
draw();
rafRef.current=requestAnimationFrame(tick);
};
draw();
rafRef.current=requestAnimationFrame(tick);
return ()=>cancelAnimationFrame(rafRef.current);
},[status]);
React.useEffect(()=>{
const onMove=e=>{
if(!stRef.current) return;
const rect=canvasRef.current?.getBoundingClientRect();if(!rect) return;
stRef.current.py=Math.max(0,Math.min(H-PH,(e.clientY-rect.top)-PH/2));
};
const onTouch=e=>{
if(!stRef.current) return;
const rect=canvasRef.current?.getBoundingClientRect();if(!rect) return;
const t=e.touches[0];
stRef.current.py=Math.max(0,Math.min(H-PH,(t.clientY-rect.top)-PH/2));
};
window.addEventListener('mousemove',onMove);
window.addEventListener('touchmove',onTouch,{passive:true});
return ()=>{window.removeEventListener('mousemove',onMove);window.removeEventListener('touchmove',onTouch);};
},[]);
return (
TÚ: {playerScore}
vs
IA: {aiScore}
{status==='idle'&&
🏓
Pong
Mueve el ratón para controlar la paleta izquierda
}
{status==='over'&&
}
{status==='won'&&
}
Mueve el ratón (o toca la pantalla) para controlar tu paleta · Primero en llegar a 5 gana
);
}
// ===================== SPACE INVADERS =====================
function SpaceInvaders() {
const canvasRef=React.useRef(null);
const stRef=React.useRef(null);
const rafRef=React.useRef(null);
const [score,setScore]=React.useState(0);
const [lives,setLives]=React.useState(3);
const [status,setStatus]=React.useState('idle');
const W=400,H=340;
const mkInvaders=()=>{
const inv=[];
for(let r=0;r<4;r++) for(let c=0;c<9;c++){
inv.push({x:40+c*38,y:40+r*36,alive:true,row:r,pts:[30,20,20,10][r]});
}
return inv;
};
const start=()=>{
stRef.current={
px:W/2,bullets:[],eBullets:[],
inv:mkInvaders(),invDir:1,invSpeed:0.4,invTimer:0,
score:0,lives:3,running:true,
shootCooldown:0,eShootTimer:60,
};
setScore(0);setLives(3);setStatus('playing');
};
const INVADER_EMOJIS=['👾','👾','🤖','🤖'];
React.useEffect(()=>{
if(status!=='playing') return;
const canvas=canvasRef.current;
const ctx=canvas.getContext('2d');
const s=stRef.current;
const draw=()=>{
ctx.fillStyle='#080818';ctx.fillRect(0,0,W,H);
// stars
ctx.fillStyle='rgba(255,255,255,0.4)';
[[20,30],[80,60],[150,20],[220,80],[300,40],[370,70],[50,120],[280,110],[340,130]].forEach(([x,y])=>{
ctx.beginPath();ctx.arc(x,y,1,0,Math.PI*2);ctx.fill();
});
// invaders
s.inv.forEach(inv=>{
if(!inv.alive) return;
ctx.font='20px serif';ctx.textAlign='center';
ctx.fillText(INVADER_EMOJIS[inv.row],inv.x,inv.y+16);
});
// player
ctx.shadowColor='var(--cyan)';ctx.shadowBlur=10;
ctx.fillStyle='var(--cyan)';
ctx.beginPath();ctx.moveTo(s.px,H-30);ctx.lineTo(s.px-16,H-14);ctx.lineTo(s.px+16,H-14);ctx.closePath();ctx.fill();
ctx.fillRect(s.px-4,H-38,8,10);
ctx.shadowBlur=0;
// bullets
s.bullets.forEach(b=>{
ctx.fillStyle='var(--cyan)';ctx.shadowColor='var(--cyan)';ctx.shadowBlur=8;
ctx.beginPath();ctx.roundRect(b.x-2,b.y-8,4,12,2);ctx.fill();
});
// enemy bullets
s.eBullets.forEach(b=>{
ctx.fillStyle='var(--orange)';ctx.shadowColor='var(--orange)';ctx.shadowBlur=8;
ctx.beginPath();ctx.roundRect(b.x-2,b.y,4,10,2);ctx.fill();
});
ctx.shadowBlur=0;
// HUD
ctx.font="bold 13px 'Nunito', sans-serif";ctx.fillStyle='rgba(255,255,255,0.5)';ctx.textAlign='left';
ctx.fillText(`❤️ ${s.lives}`,10,H-6);
ctx.textAlign='right';ctx.fillText(`${s.score} pts`,W-10,H-6);
};
const tick=()=>{
if(!s.running) return;
s.shootCooldown=Math.max(0,s.shootCooldown-1);
// move bullets
s.bullets=s.bullets.filter(b=>b.y>-10);
s.bullets.forEach(b=>b.y-=7);
s.eBullets=s.eBullets.filter(b=>b.yb.y+=4);
// move invaders
s.invTimer++;
const alive=s.inv.filter(i=>i.alive);
const speed=Math.max(8,40-Math.floor((36-alive.length)/4)*3);
if(s.invTimer>=speed){
s.invTimer=0;
const minX=Math.min(...alive.map(i=>i.x));
const maxX=Math.max(...alive.map(i=>i.x));
if((s.invDir>0&&maxX>W-30)||(s.invDir<0&&minX<30)){
s.inv.forEach(i=>i.y+=18);s.invDir*=-1;
} else s.inv.forEach(i=>i.x+=s.invDir*18);
}
// check if invaders reached player
if(alive.some(i=>i.y>H-60)){s.running=false;setStatus('over');window.dispatchEvent(new CustomEvent('ag_score',{detail:{game:'space',score:s.score}}));return;}
// bullet-invader collision
s.bullets.forEach(b=>{
s.inv.forEach(inv=>{
if(inv.alive&&Math.abs(b.x-inv.x)<16&&Math.abs(b.y-inv.y)<16){
inv.alive=false;b.y=-100;s.score+=inv.pts;setScore(s.score);
}
});
});
// enemy bullet-player collision
s.eBullets.forEach(b=>{
if(Math.abs(b.x-s.px)<14&&b.y>H-44){
b.y=H+100;s.lives--;setLives(s.lives);
if(s.lives<=0){s.running=false;setStatus('over');window.dispatchEvent(new CustomEvent('ag_score',{detail:{game:'space',score:s.score}}));return;}
}
});
// enemy shooting
s.eShootTimer--;
if(s.eShootTimer<=0){
s.eShootTimer=30+Math.random()*50;
if(alive.length){const shooter=alive[Math.floor(Math.random()*alive.length)];s.eBullets.push({x:shooter.x,y:shooter.y+16});}
}
// win
if(!alive.length){s.running=false;setStatus('won');window.dispatchEvent(new CustomEvent('ag_score',{detail:{game:'space',score:s.score+s.lives*100}}));return;}
draw();
rafRef.current=requestAnimationFrame(tick);
};
draw();
rafRef.current=requestAnimationFrame(tick);
return ()=>cancelAnimationFrame(rafRef.current);
},[status]);
React.useEffect(()=>{
const keys={};
const kd=e=>{ keys[e.key]=true; if(e.key===' '){e.preventDefault();shoot();} };
const ku=e=>{ keys[e.key]=false; };
const move=()=>{
if(!stRef.current?.running) return;
if(keys['ArrowLeft']||keys['a']) stRef.current.px=Math.max(18,stRef.current.px-5);
if(keys['ArrowRight']||keys['d']) stRef.current.px=Math.min(W-18,stRef.current.px+5);
};
const iv=setInterval(move,16);
window.addEventListener('keydown',kd);window.addEventListener('keyup',ku);
return ()=>{window.removeEventListener('keydown',kd);window.removeEventListener('keyup',ku);clearInterval(iv);};
},[status]);
const shoot=()=>{
const s=stRef.current;if(!s?.running||s.shootCooldown>0) return;
s.bullets.push({x:s.px,y:W-40});s.shootCooldown=12;
};
const moveLeft=()=>{ if(stRef.current?.running) stRef.current.px=Math.max(18,stRef.current.px-16); };
const moveRight=()=>{ if(stRef.current?.running) stRef.current.px=Math.min(W-18,stRef.current.px+16); };
const isMobile=window.innerWidth<600;
return (
Puntos: {score}
Vidas: {'❤️'.repeat(Math.max(0,lives))}
{status==='idle'&&
👾
Space Invaders
← → mover · Espacio = disparar
}
{status==='over'&&
🚀💥
Game Over
{score} pts
}
{status==='won'&&
🌟
¡Galaxia salvada!
{score} pts
}
{(isMobile||true)&&status==='playing'&&(
)}
← → mover · Espacio para disparar
);
}
Object.assign(window, { TetrisGame, PongGame, SpaceInvaders, TouchDPad });