Titan Heroes

!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Titan Heroes</title>
<style>
body {
 margin:0;
 background:#11152c;
 color:white;
 text-align:center;
 font-family:Arial;
}
h2 {color:#00eaff}
canvas {
 width:100%;
 height:65vh;
 background:#25234c;
 touch-action:none;
}
button {
 padding:13px;
 margin:4px;
 border:0;
 border-radius:12px;
 background:#00bfff;
 color:white;
 font-weight:bold;
}
</style>
</head>
<body>

<h2>⚡ TITAN HEROES ⚡</h2>
<div id="info">❤️ Health: 100 | Score: 0</div>

<canvas id="game" width="800" height="500"></canvas>

<div>
<button onclick="move(-1)">⬅️</button>
<button onclick="move(1)">➡️</button>
<button onclick="attack()">⚡ ATTACK</button>
<button onclick="special()">🔥 POWER</button>
<button onclick="shield()">🛡️ SHIELD</button>
</div>

<script>
const c=document.getElementById("game");
const ctx=c.getContext("2d");

let hero={x:120,y:350,hp:100};
let enemies=[];
let shots=[];
let score=0;
let power=100;
let protectedTime=0;
let over=false;

for(let i=0;i<5;i++){
 enemies.push({
  x:450+i*65,
  y:350,
  hp:3,
  speed:0.5+Math.random()*0.5
 });
}

function move(d){
 if(!over) hero.x=Math.max(30,Math.min(770,hero.x+d*25));
}

function attack(){
 if(over)return;
 shots.push({x:hero.x+20,y:hero.y,v:8});
}

function special(){
 if(over || power<30)return;
 power-=30;
 enemies.forEach(e=>e.hp-=2);
 enemies=enemies.filter(e=>e.hp>0);
 score+=100;
}

function shield(){
 if(over || power<20)return;
 power-=20;
 protectedTime=180;
}

function drawHero(){
 ctx.fillStyle="#00d9ff";
 ctx.fillRect(hero.x-15,hero.y-30,30,45);
 ctx.fillStyle="white";
 ctx.beginPath();
 ctx.arc(hero.x,hero.y-40,15,0,7);
 ctx.fill();
 ctx.fillStyle="#ffdd00";
 ctx.fillRect(hero.x-10,hero.y-42,20,5);
}

function drawEnemies(){
 enemies.forEach(e=>{
  ctx.fillStyle="#e53958";
  ctx.fillRect(e.x-15,e.y-25,30,40);
  ctx.fillStyle="yellow";
  ctx.fillRect(e.x-12,e.y-35,24,5);
 });
}

function draw(){
 ctx.clearRect(0,0,800,500);

 ctx.fillStyle="#34335b";
 ctx.fillRect(0,400,800,100);

 for(let i=0;i<8;i++){
  ctx.fillStyle="#48466d";
  ctx.fillRect(i*110,280,70,120);
 }

 if(!over){

  enemies.forEach(e=>{
   e.x-=e.speed;
   if(e.x<hero.x+20){
    if(protectedTime<=0)hero.hp-=0.12;
    e.x=790;
   }
  });

  shots.forEach((s,i)=>{
   s.x+=s.v;
   ctx.fillStyle="#ffff00";
   ctx.beginPath();
   ctx.arc(s.x,s.y,7,0,7);
   ctx.fill();

   enemies.forEach(e=>{
    if(Math.hypot(s.x-e.x,s.y-e.y)<25){
     e.hp--;
     s.x=900;
     if(e.hp<=0)score+=100;
    }
   });
  });

  shots=shots.filter(s=>s.x<850);
  enemies=enemies.filter(e=>e.hp>0);

  if(protectedTime>0){
   protectedTime--;
   ctx.strokeStyle="#00ffff";
   ctx.lineWidth=5;
   ctx.beginPath();
   ctx.arc(hero.x,hero.y-15,45,0,7);
   ctx.stroke();
  }

  drawHero();
  drawEnemies();

  if(hero.hp<=0 || enemies.length===0){
   over=true;
  }
 }

 if(over){
  ctx.fillStyle="white";
  ctx.font="40px Arial";
  ctx.textAlign="center";
  ctx.fillText(hero.hp<=0?"GAME OVER":"TITAN VICTORY!",400,240);
 }

 document.getElementById("info").innerText=
 "❤️ Health: "+Math.max(0,Math.floor(hero.hp))+
 " | ⚡ Power: "+power+" | Score: "+score;

 requestAnimationFrame(draw);
}

draw();
</script>
</body>
</html>