<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Neon Orb</title>
<style>
html,body{
margin:0;
background:#050505;
overflow:hidden;
font-family:Arial,Helvetica,sans-serif;
}
#ui{
position:fixed;
top:15px;
width:100%;
text-align:center;
color:#fff;
font-size:14px;
letter-spacing:1px;
opacity:.8;
}
#game{
position:fixed;
inset:0;
}
.orb{
width:18px;
height:18px;
position:absolute;
border-radius:50%;
background:radial-gradient(circle at 30% 30%, #fff, #00e5ff);
box-shadow:
0 0 15px #00e5ff,
0 0 30px #00e5ff;
}
</style>
</head>
<body>
<div id="ui">CLICK ANYWHERE • ORBS MULTIPLY</div>
<div id="game"></div>
<script>
const game = document.getElementById("game");
let orbs = [];
function createOrb(x,y){
const el=document.createElement("div");
el.className="orb";
game.appendChild(el);
return{
el,
x,y,
vx:(Math.random()*3+1)*(Math.random()<.5?-1:1),
vy:(Math.random()*3+1)*(Math.random()<.5?-1:1)
};
}
function animate(){
orbs.forEach(o=>{
o.x+=o.vx;
o.y+=o.vy;
if(o.x<=0||o.x>=innerWidth-18) o.vx*=-1;
if(o.y<=0||o.y>=innerHeight-18) o.vy*=-1;
o.el.style.transform=
`translate(${o.x}px,${o.y}px)`;
});
requestAnimationFrame(animate);
}
function multiply(){
let newOrbs=[];
orbs.forEach(o=>{
newOrbs.push(createOrb(o.x,o.y));
newOrbs.push(createOrb(o.x,o.y));
});
orbs.forEach(o=>o.el.remove());
orbs=newOrbs;
}
document.addEventListener("click",multiply);
orbs=[createOrb(innerWidth/2,innerHeight/2)];
animate();
</script>
</body>
</html>
Comments
Post a Comment