OP Sky Fighter

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>OP Sky Fighter</title>
<style>
body{margin:0;background:#061426;color:white;font-family:Arial;text-align:center;overflow:hidden}
canvas{display:block;width:100vw;height:75vh;background:linear-gradient(#061a45,#13a5d5,#061426)}
h2{margin:8px}
button{padding:16px;margin:4px;border-radius:15px;border:2px solid #38eaff;background:#073e68;color:white;font-weight:bold;font-size:17px}
#fire{background:#c21d35}
</style>
</head>
<body>
<h2>✈️ OP SKY FIGHTER</h2>
<div>❤️ HP: <span id="hp">100</span> |
⭐ Score: <span id="score">0</span></div>
<canvas id="c"></canvas>
<div>
<button onclick="move(-25,0)">◀</button>
<button onclick="move(0,-25)">▲</button>
<button onclick="move(0,25)">▼</button>
<button onclick="move(25,0)">▶</button>
<button id="fire" onclick="shoot()">🔥 FIRE</button>
<button onclick="missile()">🚀 MISSILE</button>
</div>
<script>
const c=document.getElementById("c");
const ctx=c.getContext("2d");
let w,h,x,y,hp=100,score=0;
let bullets=[],enemies=[],boom=[];
function resize(){
 c.width=innerWidth*devicePixelRatio;
 c.height=innerHeight*.75*devicePixelRatio;
 ctx.setTransform(devicePixelRatio,0,0,devicePixelRatio,0,0);
 w=innerWidth;h=innerHeight*.75;
 if(x===undefined){x=w/2;y=h*.75}
}
onresize=resize;resize();

function plane(x,y,size,color){
 ctx.fillStyle=color;
 ctx.beginPath();
 ctx.moveTo(x,y-size);
 ctx.lineTo(x+size*.35,y);
 ctx.lineTo(x+size,y+size*.5);
 ctx.lineTo(x+size*.2,y+size*.3);
 ctx.lineTo(x,y+size);
 ctx.lineTo(x-size*.2,y+size*.3);
 ctx.lineTo(x-size,y+size*.5);
 ctx.lineTo(x-size*.35,y);
 ctx.closePath();ctx.fill();
}
function move(dx,dy){
 x=Math.max(20,Math.min(w-20,x+dx));
 y=Math.max(25,Math.min(h-25,y+dy));
}
function shoot(){
 bullets.push({x,y:y-25,v:-9,damage:1});
}
function missile(){
 for(let i=0;i<5;i++)
 bullets.push({x:x+(i-2)*9,y:y-25,v:-12,damage:4});
}
function spawn(){
 enemies.push({x:20+Math.random()*(w-40),y:-30,hp:2});
}
function update(){
 ctx.clearRect(0,0,w,h);

 // Stars
 for(let i=0;i<45;i++){
 let sx=(i*97)%w;
 let sy=(i*71+Date.now()*.06)%h;
 ctx.fillStyle="white";ctx.fillRect(sx,sy,2,2);
 }

 // Player
 plane(x,y,20,"#20eaff");

 // Enemy planes
 if(Math.random()<.025)spawn();
 enemies.forEach(e=>{
 e.y+=2.5;
 plane(e.x,e.y,16,"#ff334f");
 bullets.forEach(b=>{
 if(!b.dead&&Math.abs(b.x-e.x)<20&&Math.abs(b.y-e.y)<20){
 b.dead=true;e.hp-=b.damage;
 }
 });
 if(Math.hypot(x-e.x,y-e.y)<25){
 hp-=1;e.y=h+100;
 }
 if(e.hp<=0){
 score+=100;e.y=h+100;
 }
 });
 enemies=enemies.filter(e=>e.y<h+30&&e.hp>0);

 // Bullets
 bullets.forEach(b=>{
 b.y+=b.v;
 ctx.fillStyle="#ffff60";
 ctx.fillRect(b.x-3,b.y,6,15);
 });
 bullets=bullets.filter(b=>b.y>-20&&!b.dead);

 // HUD
 document.getElementById("hp").textContent=Math.max(0,hp);
 document.getElementById("score").textContent=score;

 if(hp<=0){
 ctx.fillStyle="white";
 ctx.font="bold 38px Arial";
 ctx.textAlign="center";
 ctx.fillText("GAME OVER",w/2,h/2);
 ctx.font="20px Arial";
 ctx.fillText("Refresh to play again",w/2,h/2+35);
 return;
 }
 requestAnimationFrame(update);
}
update();

// Keyboard controls
onkeydown=e=>{
 if(e.key==="ArrowLeft")move(-20,0);
 if(e.key==="ArrowRight")move(20,0);
 if(e.key==="ArrowUp")move(0,-20);
 if(e.key==="ArrowDown")move(0,20);
 if(e.key===" ")shoot();
 if(e.key==="x")missile();
};
</script>
</body>
</html>