Live Preview
Tag didn’t load? Click here and let us know!Share this result
Previews are deleted daily. Get a permanent share link sent to your inbox:
Script
<!DOCTYPE html><html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Capa Shooter 👀🗿 v2</title>
<style>
*{margin:0;padding:0;box-sizing:border-box;}
body{overflow:hidden;background:#0f0f0f;font-family:Arial;}
canvas{display:block;background:linear-gradient(#1a1a1a,#0b0b0b);}
#ui{position:absolute;top:10px;left:10px;color:#fff;font-size:22px;font-weight:bold;z-index:10;}
#shop{
position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
background:#222;padding:20px;border-radius:12px;
color:white;display:none;text-align:center;
}
button{margin:10px;padding:10px 15px;border:none;border-radius:10px;cursor:pointer;}
#gameOver{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:white;display:none;text-align:center;}
</style>
</head>
<body><div id="ui"></div><div id="shop">
<h2>🛒 SHOP</h2>
<button onclick="buySpeed()">+ Velocidad balas (10💰)</button>
<button onclick="buyDamage()">+ Daño (15💰)</button>
<br><small>Presiona B para cerrar</small>
</div><div id="gameOver">
<h1>💀 GAME OVER</h1>
<button onclick="location.reload()">Reiniciar</button>
</div><canvas id="game"></canvas>
<script>
const c=document.getElementById('game');
const ctx=c.getContext('2d');
c.width=innerWidth;c.height=innerHeight;
let shopOpen=false;
let score=0;
let coins=0;
let bulletSpeed=8;
let damage=1;
const ui=document.getElementById('ui');
const shop=document.getElementById('shop');
const gameOverUI=document.getElementById('gameOver');
const keys={};
const bullets=[];
const enemies=[];
let gameOver=false;
const capa={x:c.width/2,y:c.height/2,r:30,lives:3,speed:5};
addEventListener('keydown',e=>{
keys[e.key.toLowerCase()]=true;
if(e.key.toLowerCase()==='b') toggleShop();
});
addEventListener('keyup',e=>keys[e.key.toLowerCase()]=false);
addEventListener('click',e=>{
if(gameOver||shopOpen)return;
const a=Math.atan2(e.clientY-capa.y,e.clientX-capa.x);
bullets.push({x:capa.x,y:capa.y,dx:Math.cos(a)*bulletSpeed,dy:Math.sin(a)*bulletSpeed});
});
function toggleShop(){shopOpen=!shopOpen;shop.style.display=shopOpen?'block':'none';}
function buySpeed(){if(coins>=10){coins-=10;bulletSpeed+=2;}}
function buyDamage(){if(coins>=15){coins-=15;damage+=1;}}
function spawnEnemy(){
let x,y;
const s=Math.random()*4|0;
if(s==0){x=0;y=Math.random()*c.height;}
if(s==1){x=c.width;y=Math.random()*c.height;}
if(s==2){x=Math.random()*c.width;y=0;}
if(s==3){x=Math.random()*c.width;y=c.height;}
enemies.push({x,y,r:20,hp:2});
}
setInterval(()=>{if(!gameOver)spawnEnemy();},800);
function update(){
if(gameOver)return;
if(keys['w'])capa.y-=capa.speed;
if(keys['s'])capa.y+=capa.speed;
if(keys['a'])capa.x-=capa.speed;
if(keys['d'])capa.x+=capa.speed;
bullets.forEach((b,i)=>{
b.x+=b.dx;b.y+=b.dy;
if(b.x<0||b.x>c.width||b.y<0||b.y>c.height)bullets.splice(i,1);
});
enemies.forEach((e,ei)=>{
const a=Math.atan2(capa.y-e.y,capa.x-e.x);
e.x+=Math.cos(a)*1.5;
e.y+=Math.sin(a)*1.5;
const d=Math.hypot(capa.x-e.x,capa.y-e.y);
if(d<capa.r){
capa.lives--;enemies.splice(ei,1);
if(capa.lives<=0){gameOver=true;gameOverUI.style.display='block';}
}
bullets.forEach((b,bi)=>{
const dd=Math.hypot(b.x-e.x,b.y-e.y);
if(dd<e.r){
e.hp-=damage;
bullets.splice(bi,1);
if(e.hp<=0){enemies.splice(ei,1);score++;coins++;}
}
});
});
ui.innerHTML=`❤️ ${capa.lives} | 💰 ${coins} | ⭐ ${score}`;
}
function draw(){ctx.clearRect(0,0,c.width,c.height);
ctx.fillStyle='cyan';ctx.beginPath();ctx.arc(capa.x,capa.y,capa.r,0,Math.PI*2);ctx.fill();
ctx.fillStyle='#fff';ctx.fillText('🗿',capa.x-10,capa.y+5);
ctx.fillStyle='yellow';bullets.forEach(b=>{ctx.beginPath();ctx.arc(b.x,b.y,4,0,Math.PI*2);ctx.fill();});
ctx.fillStyle='red';enemies.forEach(e=>{ctx.beginPath();ctx.arc(e.x,e.y,e.r,0,Math.PI*2);ctx.fill();ctx.fillStyle='#fff';ctx.fillText('🙂',e.x-8,e.y+4);ctx.fillStyle='red';});
}
function loop(){ctx.clearRect(0,0,c.width,c.height);update();draw();requestAnimationFrame(loop);}
loop();
</script></body>
</html>Landing Page
This ad does not have a landing page available
Network Timeline
Performance Summary
1
Requests
1
Domains
4KB
Transfer Size
4KB
Content Size
198.0ms
Dom Content Loaded
288.0ms
First Paint
199.0ms
Load Time
Domain Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...
Timings (ms)
Loading...
Total Time
Loading...
Content Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...