gatomalos

📅 2026-01-06T17:05:15.042Z
👁️ 66 katselukertaa
🔓 Julkinen
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ataque al Gato Malo</title>
<style>
body{margin:0;overflow:hidden;background:#87ceeb;font-family:Arial}
#ui{position:fixed;top:10px;left:10px;color:#fff;font-size:18px}
canvas{display:block}
</style>
</head>
<body>

<div id="ui">
❤️ Apolo: <span id="vidaA">100</span><br>
🔴 Gato Malo: <span id="vidaM">150</span>
</div>

<canvas id="game"></canvas>

<script>
const c=document.getElementById("game");
const ctx=c.getContext("2d");
function resize(){c.width=innerWidth;c.height=innerHeight}
addEventListener("resize",resize); resize();

const keys={};
addEventListener("keydown",e=>keys[e.key]=true);
addEventListener("keyup",e=>keys[e.key]=false);

const GRAV=0.7, GROUND=innerHeight-80;

const apolo={x:200,y:GROUND-50,w:40,h:50,vx:0,vy:0,vida:100};
const malo={x:600,y:GROUND-50,w:50,h:60,vida:150,dir:-1};

c.addEventListener("click",()=>{
  // ataque si está cerca
  const dx=Math.abs(apolo.x-malo.x);
  if(dx<70 && malo.vida>0){
    malo.vida-=10;
    document.getElementById("vidaM").innerText=malo.vida;
  }
});

function update(){
  apolo.vx=0;
  if(keys["ArrowLeft"]) apolo.vx=-4;
  if(keys["ArrowRight"]) apolo.vx=4;
  if(keys["ArrowUp"] && apolo.y>=GROUND-apolo.h) apolo.vy=-14;

  apolo.vy+=GRAV;
  apolo.x+=apolo.vx;
  apolo.y+=apolo.vy;
  if(apolo.y>GROUND-apolo.h){apolo.y=GROUND-apolo.h;apolo.vy=0}

  // Gato Malo se mueve y daña
  if(malo.vida>0){
    malo.x+=malo.dir*2;
    if(malo.x<100||malo.x>c.width-100) malo.dir*=-1;

    if(Math.abs(apolo.x-malo.x)<40){
      apolo.vida-=0.3;
      document.getElementById("vidaA").innerText=Math.floor(apolo.vida);
    }
  }
}

function drawApolo(){
  ctx.fillStyle="#fff";
  ctx.fillRect(apolo.x,apolo.y,apolo.w,apolo.h);
  // orejas
  ctx.fillRect(apolo.x-5,apolo.y-10,10,10);
  ctx.fillRect(apolo.x+apolo.w-5,apolo.y-10,10,10);
  // ojos
  ctx.fillStyle="#3fa9f5";
  ctx.fillRect(apolo.x+8,apolo.y+18,6,6);
  ctx.fillRect(apolo.x+apolo.w-14,apolo.y+18,6,6);
}

function drawMalo(){
  if(malo.vida<=0) return;
  ctx.fillStyle="#000";
  ctx.fillRect(malo.x,malo.y,malo.w,malo.h);
  // ojos rojos
  ctx.fillStyle="red";
  ctx.fillRect(malo.x+8,malo.y+20,6,6);
  ctx.fillRect(malo.x+malo.w-14,malo.y+20,6,6);
}

function draw(){
  ctx.clearRect(0,0,c.width,c.height);
  // suelo
  ctx.fillStyle="#4caf50";
  ctx.fillRect(0,GROUND,c.width,80);

  drawApolo();
  drawMalo();

  if(malo.vida<=0){
    ctx.fillStyle="#fff";
    ctx.font="40px Arial";
    ctx.fillText("¡GANASTE! 🎉",c.width/2-120,c.height/2);
  }
  if(apolo.vida<=0){
    ctx.fillStyle="#fff";
    ctx.font="40px Arial";
    ctx.fillText("PERDISTE 😿",c.width/2-120,c.height/2);
  }
}

function loop(){
  update();
  draw();
  requestAnimationFrame(loop);
}
loop();
</script>

</body>
</html>