CATTO CHAOS

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CATTO CHAOS</title>
<style>
body {
 margin:0;
 background:#17102f;
 color:white;
 text-align:center;
 font-family:Arial;
 overflow:hidden;
}
h1 {color:#ff69c8}
canvas {
 display:block;
 width:100%;
 touch-action:none;
}
button {
 background:#ff49b8;
 color:white;
 border:0;
 padding:15px 22px;
 border-radius:15px;
 font-size:18px;
 margin:5px;
}
</style>
</head>
<body>
<h1>🐱 CATTO CHAOS 💥</h1>
<div>Score: <span id="score">0</span> |
❤️ <span id="lives">3</span></div>
<canvas id="game"></canvas>
<button onclick="shoot()">💥 PEW!</button>
<button onclick="restart()">🔄 RESTART</button>

<script>
const c=document.getElementById("game");
const ctx=c.getContext("2d");
let w,h,score=0,lives=3,over=false;
let cat={x:180,y:400};
let shots=[],enemies=[];
function resize(){
 w=c.width=innerWidth;
 h=c.height=innerHeight-170;
 cat.y=h-60;
 cat.x=Math.min(cat.x,w-25);
}
window.onresize=resize;
resize();

function shoot(){
 if(!over)shots.push({x:cat.x,y:cat.y});
}
function restart(){
 score=0;lives=3;over=false;
 shots=[];enemies=[];
 update();
}
function update(){
 document.getElementById("score").textContent=score;
 document.getElementById("lives").textContent=lives;
}
setInterval(()=>{
 if(!over)enemies.push({
 x:Math.random()*(w-40)+20,y:0,
 speed:2+Math.random()*3
 });
},750);

function draw(){
 ctx.clearRect(0,0,w,h);
 if(over){
 ctx.font="35px Arial";
 ctx.fillStyle="white";
 ctx.textAlign="center";
 ctx.fillText("CATTO DOWN!",w/2,h/2);
 requestAnimationFrame(draw);return;
 }

 ctx.font="45px Arial";
 ctx.textAlign="center";
 ctx.fillText("🐱",cat.x,cat.y);

 shots.forEach(s=>{
 s.y-=9;
 ctx.font="25px Arial";
 ctx.fillText("💖",s.x,s.y);
 });

 enemies.forEach(e=>{
 e.y+=e.speed;
 ctx.font="35px Arial";
 ctx.fillText("👾",e.x,e.y);
 });

 for(let i=enemies.length-1;i>=0;i--){
 let e=enemies[i];
 let hit=false;
 for(let j=shots.length-1;j>=0;j--){
 let s=shots[j];
 if(Math.abs(e.x-s.x)<30&&Math.abs(e.y-s.y)<30){
 shots.splice(j,1);
 hit=true;score++;update();break;
 }
 }
 if(hit){enemies.splice(i,1);continue;}
 if(e.y>cat.y){
 enemies.splice(i,1);
 lives--;update();
 if(lives<=0)over=true;
 }
 }

 shots=shots.filter(s=>s.y>0);
 requestAnimationFrame(draw);
}

c.addEventListener("pointermove",e=>{
 if(e.buttons || e.pointerType==="touch"){
 cat.x=Math.max(25,Math.min(w-25,e.offsetX));
 }
});
c.addEventListener("pointerdown",e=>{
 cat.x=e.offsetX;
 shoot();
});
draw();
</script>
</body>
</html>