COPY CODE

SNIPER REAL 3D

COPIED! Now make NEW html.cafe and paste it
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<title>SNIPER REAL 3D</title>
<style>
html,body{margin:0;padding:0;width:100%;height:100%;background:#2a3a52;overflow:hidden;touch-action:none}
canvas{position:absolute;left:0;top:0;width:100%;height:100%;background:#3a4f6e}
#ui{position:absolute;top:0;left:0;right:0;padding:12px;color:#fff;display:flex;justify-content:space-between;z-index:5;font-family:sans-serif;font-weight:bold;background:rgba(0,0,0,0.5)}
#hint{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);background:#000;color:#fff;padding:10px 15px;border-radius:20px;font-family:sans-serif;font-size:12px;z-index:5;white-space:nowrap}
#scope{position:absolute;left:0;top:0;width:100%;height:100%;display:none;z-index:10;pointer-events:none}
#scopeInner{position:absolute;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 9999px rgba(0,0,0,0.8)}
#dot{position:absolute;left:50%;top:50%;width:6px;height:6px;background:red;border-radius:50%;transform:translate(-50%,-50%)}
#win{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#fff;padding:20px;border-radius:12px;display:none;z-index:20;text-align:center;font-family:sans-serif}
#win button{padding:10px 20px;background:#000;color:#fff;border:0;border-radius:8px;margin-top:10px}
</style>
</head>
<body>
<canvas id="c"></canvas>
<div id="ui"><span id="lvl">LEVEL 1/5</span><span id="left">ZOMBIES: 5</span></div>
<div id="hint">HOLD = SCOPE - DRAG = AIM - RELEASE = SHOOT</div>
<div id="scope"><div id="scopeInner"><div id="dot"></div></div></div>
<div id="win"><h2 id="winT"></h2><button onclick="nextLvl()">NEXT</button></div>
<script>
var c=document.getElementById('c'); var ctx=c.getContext('2d'); var W=360,H=640;
function resize(){W=window.innerWidth||360; H=window.innerHeight||640; c.width=W; c.height=H;} resize(); window.onresize=resize;
var level=1, zombies=[], buildings=[], scoping=false, sx=W/2, sy=H/2, zoom=1;
function newLevel(){
 buildings=[]; zombies=[]; var count=3+level*2;
 for(var i=0;i<18;i++){buildings.push({x:10+(i%6)*(W/6.5),y:H*0.22+Math.floor(i/6)*(H*0.22),w:W/8,h:H/10});}
 for(var i=0;i<count;i++){zombies.push({x:20+Math.random()*(W-40),y:H*0.3+Math.random()*(H*0.6),vx:(Math.random()-0.5)*1,vy:(Math.random()-0.5)*0.6,alive:true});}
 document.getElementById('lvl').innerText='LEVEL '+level+'/5'; document.getElementById('left').innerText='ZOMBIES: '+count; document.getElementById('win').style.display='none';
} newLevel();
function draw(){
 requestAnimationFrame(draw);
 ctx.fillStyle='#4a648a'; ctx.fillRect(0,0,W,H); ctx.fillStyle='#3a5070'; ctx.fillRect(0,H*0.2,W,H);
 ctx.fillStyle='#2a3a52'; ctx.fillRect(0,H*0.48,W,12); ctx.fillRect(W*0.5-6,0,12,H);
 for(var i=0;i<buildings.length;i++){
  var b=buildings[i]; var bx=(b.x-W/2)*zoom+W/2+(scoping?(W/2-sx)*0.15:0); var by=(b.y-H/2)*zoom+H/2+(scoping?(H/2-sy)*0.15:0); var bw=b.w*zoom; var bh=b.h*zoom;
  ctx.fillStyle='rgba(0,0,0,0.35)'; ctx.fillRect(bx+8*zoom,by+8*zoom,bw,bh);
  ctx.fillStyle='#8aa0c0'; ctx.fillRect(bx,by,bw,bh);
  ctx.fillStyle='#6a7f9e'; ctx.fillRect(bx,by+bh-6*zoom,bw,6*zoom); ctx.fillRect(bx+bw-6*zoom,by,6*zoom,bh);
  ctx.fillStyle='#ffe98a'; ctx.fillRect(bx+6*zoom,by+6*zoom,6*zoom,6*zoom);
 }
 for(var i=0;i<zombies.length;i++){
  var z=zombies[i]; if(!z.alive) continue; z.x+=z.vx; z.y+=z.vy;
  if(z.x<10){z.x=10; z.vx*=-1;} if(z.x>W-10){z.x=W-10; z.vx*=-1;} if(z.y<H*0.25){z.y=H*0.25; z.vy*=-1;} if(z.y>H-15){z.y=H-15; z.vy*=-1;}
  var tx=(z.x-W/2)*zoom+W/2+(scoping?(W/2-sx)*0.15:0); var ty=(z.y-H/2)*zoom+H/2+(scoping?(H/2-sy)*0.15:0);
  ctx.fillStyle='#00ff66'; ctx.beginPath(); ctx.arc(tx,ty,12*zoom,0,6.28); ctx.fill();
  ctx.fillStyle='#003300'; ctx.beginPath(); ctx.arc(tx,ty-8*zoom,6*zoom,0,6.28); ctx.fill();
  ctx.fillStyle='red'; ctx.beginPath(); ctx.arc(tx-2*zoom,ty-9*zoom,1.5*zoom,0,6.28); ctx.arc(tx+2*zoom,ty-9*zoom,1.5*zoom,0,6.28); ctx.fill();
 }
} draw();
function start(e){if(e.touches) e=e.touches[0]; sx=e.clientX; sy=e.clientY; scoping=true; zoom=2.5; var s=document.getElementById('scope'); var si=document.getElementById('scopeInner'); s.style.display='block'; var sz=Math.min(W,H)*0.7; si.style.width=sz+'px'; si.style.height=sz+'px'; si.style.left=(sx-sz/2)+'px'; si.style.top=(sy-sz/2)+'px'; if(e.preventDefault) e.preventDefault();}
function move(e){if(!scoping) return; if(e.touches) e=e.touches[0]; sx=e.clientX; sy=e.clientY; var si=document.getElementById('scopeInner'); var sz=parseInt(si.style.width)||200; si.style.left=(sx-sz/2)+'px'; si.style.top=(sy-sz/2)+'px'; if(e.preventDefault) e.preventDefault();}
function end(e){
 if(!scoping) return;
 for(var i=0;i<zombies.length;i++){var z=zombies[i]; if(!z.alive) continue; var tx=(z.x-W/2)*zoom+W/2+(W/2-sx)*0.15; var ty=(z.y-H/2)*zoom+H/2+(H/2-sy)*0.15; var d=Math.sqrt((tx-sx)*(tx-sx)+(ty-sy)*(ty-sy)); if(d<30*zoom){z.alive=false; ctx.fillStyle='#990000'; ctx.beginPath(); ctx.arc(tx,ty,15*zoom,0,6.28); ctx.fill();}}
 var left=0; for(var i=0;i<zombies.length;i++) if(zombies[i].alive) left++; document.getElementById('left').innerText='ZOMBIES: '+left;
 if(left==0){document.getElementById('winT').innerText= level>=5? 'YOU WIN!' : 'LEVEL '+level+' DONE'; document.getElementById('win').style.display='block';}
 scoping=false; zoom=1; document.getElementById('scope').style.display='none'; if(e&&e.preventDefault) e.preventDefault();
}
c.addEventListener('touchstart',function(e){start(e);},{passive:false}); c.addEventListener('touchmove',function(e){move(e);},{passive:false}); c.addEventListener('touchend',function(e){end(e);},{passive:false});
c.addEventListener('mousedown',start); c.addEventListener('mousemove',move); c.addEventListener('mouseup',end);
window.nextLvl=function(){if(level>=5) level=1; else level++; newLevel();};
<\/script>
</body>
</html>