HUD (헤드업 디스플레이)

<div class="hw"><div class="world"></div>
<div class="tl"><div class="bar"><div class="f hp" id="hp"></div></div><div class="bar"><div class="f mp" id="mp"></div></div></div>
<div class="tr"><div class="mm"><div class="b me"></div><div class="b en" id="e1"></div><div class="b en" id="e2"></div></div></div>
<div class="bc"><div class="sk"><div class="cd" id="c1"></div></div><div class="sk"><div class="cd" id="c2"></div></div><div class="sk"><div class="cd" id="c3"></div></div></div>
<div class="br">SCORE <span id="sc">0</span></div></div>

.hw{position:relative;width:100%;height:100%;background:var(--bg);overflow:hidden}
.world{position:absolute;inset:-10%;background-image:radial-gradient(circle,var(--line) 1.5px,transparent 1.5px);background-size:24px 24px;animation:scr 5s linear infinite}
@keyframes scr{to{background-position:-24px -24px}}
.tl{position:absolute;top:7%;left:4%;display:flex;flex-direction:column;gap:4px;width:32%}
.bar{height:clamp(6px,2.6vmin,10px);border-radius:5px;background:color-mix(in srgb,var(--fg) 14%,transparent);overflow:hidden;border:1px solid var(--line)}
.f{height:100%;border-radius:5px;transition:transform .3s ease-out;transform-origin:left}
.hp{background:var(--accent-2)}
.mp{background:var(--accent)}
.tr{position:absolute;top:7%;right:4%;width:20%;aspect-ratio:1}
.mm{position:relative;width:100%;height:100%;border-radius:50%;background:var(--surface);border:2px solid var(--line)}
.b{position:absolute;width:16%;height:16%;border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%)}
.me{background:var(--accent)}
.en{background:var(--accent-2)}
.bc{position:absolute;bottom:8%;left:50%;transform:translateX(-50%);display:flex;gap:clamp(4px,1.6vmin,8px)}
.sk{position:relative;width:clamp(18px,8vmin,34px);height:clamp(18px,8vmin,34px);border-radius:6px;background:var(--surface);border:1px solid var(--line);overflow:hidden}
.cd{position:absolute;inset:0;background:conic-gradient(rgba(0,0,0,.55) var(--p,0%),transparent 0)}
.br{position:absolute;bottom:8%;right:4%;font:700 clamp(9px,2.8vmin,12px) monospace;color:var(--fg);background:color-mix(in srgb,var(--surface) 80%,transparent);padding:2px 6px;border-radius:5px;border:1px solid var(--line)}

const hp=document.getElementById('hp'), mp=document.getElementById('mp');
const e1=document.getElementById('e1'), e2=document.getElementById('e2');
const cds=[document.getElementById('c1'),document.getElementById('c2'),document.getElementById('c3')];
const sc=document.getElementById('sc');
let t=0, score=0, lastScore=0;
hp.style.transform='scaleX(0.72)';
mp.style.transform='scaleX(0.5)';
function loop(){
  t+=0.02;
  e1.style.transform='translate(calc(-50% + '+(Math.cos(t)*30)+'%), calc(-50% + '+(Math.sin(t)*30)+'%))';
  e2.style.transform='translate(calc(-50% + '+(Math.cos(t*1.4+2)*22)+'%), calc(-50% + '+(Math.sin(t*1.4+2)*22)+'%))';
  cds.forEach(function(cd,i){ cd.style.setProperty('--p', ((t*18+i*33)%100)+'%'); });
  mp.style.transform='scaleX('+(0.4+Math.sin(t*0.6)*0.15+0.15)+')';
  if(t-lastScore>1.1){ lastScore=t; score+=Math.floor(Math.random()*40+10); sc.textContent=score; }
  requestAnimationFrame(loop);
}
requestAnimationFrame(loop);