Sharku & Neoshka

Sharku

Привет, Неошка, накопал старый агрегат, нужен HUD в стиле глитча, чтобы работал на хламе – типа код крутой, но систему не спалит. Чё есть?

Neoshka

Конечно, я вытащила шаблон из старой демо-записи и упростила его до минимума, чтобы твой костыль смог его хоть как-то потянуть. Держи HTML максимально лёгким, JS-цикл событий коротким, а CSS — один спрайт-лист, чтобы GPU не перегрелся. Вот код: ```html <!DOCTYPE html> <html lang="en"><head> <meta charset="utf-8"><title>Glitch HUD</title> <style> body{margin:0;font:0/0 sans-serif;background:#111;color:#0f0} #hud{position:fixed;top:0;left:0;width:100%;height:30px;background:#222} #hud span{display:inline-block;width:100px;text-align:center;overflow:hidden;animation:glitch 1s infinite} @keyframes glitch{0%{clip:rect(0,9999px,5px,0)}10%{clip:rect(5px,9999px,10px,0)}20%{clip:rect(10px,9999px,15px,0)}30%{clip:rect(15px,9999px,20px,0)}40%{clip:rect(20px,9999px,25px,0)}50%{clip:rect(25px,9999px,30px,0)}100%{clip:rect(30px,9999px,35px,0)}} </style> </head><body> <div id="hud"><span id="fps">FPS:0</span><span id="time">Time:00:00</span></div> <script> let fps=0,t0=performance.now() setInterval(()=>{let t=performance.now();fps=1000/(t-t0);t0=t;document.getElementById('fps').textContent='FPS:'+fps.toFixed(0)} ,100) setInterval(()=>{let d=new Date;document.getElementById('time').textContent='Time:'+d.getUTCHours().toString().padStart(2,'0')+':'+d.getUTCMinutes().toString().padStart(2,'0')},60000) </script> </body></html> ``` Спрайт-лист — это просто PNG на 256 цветов, можешь нарисовать его от руки в любом редакторе — без заморочек с GPU. Если часы начнут глючить, просто уменьши частоту кадров в JS или замени анимацию clip на простой translate. Удачи в хаках, не усложняй, пусть будет лоу-поли и глючное.

Sharku

Отлично поработала. Следи, чтобы спрайт-лист не превышал 256 цветов, и если получится, сократи JS циклы до одной строки. Если кадры начнут пропадать, замени глючную анимацию на простую, секунд на пол. Держись простоты, оставайся в низкополигональной графике, выживай.

Neoshka

Поняла, убираю петли до одной строки, заменяю длинную анимацию на вспышку в полсекунды, когда FPS падает ниже 15, и держу спрайт-лист под 256 оттенков. Вот обновленный фрагмент: ```html <!DOCTYPE html> <html lang="en"><head> <meta charset="utf-8"><title>Glitch HUD</title> <style> body{margin:0;font:0/0 sans-serif;background:#111;color:#0f0} #hud{position:fixed;top:0;left:0;width:100%;height:30px;background:#222} #hud span{display:inline-block;width:100px;text-align:center;overflow:hidden;animation:glitch .5s infinite} @keyframes glitch{0%{clip:rect(0,9999px,5px,0)}25%{clip:rect(5px,9999px,10px,0)}50%{clip:rect(10px,9999px,15px,0)}75%{clip:rect(15px,9999px,20px,0)}100%{clip:rect(20px,9999px,25px,0)}} </style> </head><body> <div id="hud"><span id="fps">FPS:0</span><span id="time">Time:00:00</span></div> <script> let fps=0,t0=performance.now();setInterval(()=>{let t=performance.now();fps=1000/(t-t0);t0=t;document.getElementById('fps').textContent='FPS:'+fps.toFixed(0);},100);setInterval(()=>{document.getElementById('time').textContent='Time:'+new Date().toLocaleTimeString('en-US',{hour12:false, hour:'2-digit', minute:'2-digit'});},60000) </script> </body></html> ``` Спрайт-лист может быть простым PNG с 256 цветами — нарисуй, сжатие и загружай как фоновое изображение. Это должно держать систему в тонусе. Удачи с глюками!