Ku6epXBOCTuK/shooting-word
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: update hud

Browse Source
This commit is contained in:
Ku6epXBOCTuK
2026-06-25 12:15:20 +05:00
parent b282f1064a
commit b1c8ee08ff
5 changed files with 106 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files
game.html
+1 -1
View File
@@ -14,7 +14,7 @@
<div id="ui-overlay" class="hidden"> <div id="ui-overlay" class="hidden">
<span class="ui-text">SCORE: <span id="score">0</span></span> <span class="ui-text">SCORE: <span id="score">0</span></span>
<span class="ui-text">WAVE: <span id="wave">1</span></span> <span class="ui-text">WAVE: <span id="wave">1</span></span>
<span class="ui-text">LIVES: <span id="lives">3</span></span> <span class="ui-text">LIVES: <span id="lives">♥♥♥♥♥♥♥♥♥♥</span></span>
</div> </div>
<div id="input-display"> <div id="input-display">
js/game.js
+2 -11
View File
@@ -113,7 +113,7 @@ function getEnemiesPerWave() {
function takeDamage() { function takeDamage() {
lives--; lives--;
document.getElementById("lives").textContent = lives; document.getElementById("lives").textContent = "♡".repeat(CONFIG.game.startLives - lives) + "♥".repeat(lives);
triggerShake(S.shakeDamage, S.shakeDamageDuration); triggerShake(S.shakeDamage, S.shakeDamageDuration);
document.getElementById("game-container").classList.add("glitch"); document.getElementById("game-container").classList.add("glitch");
setTimeout( setTimeout(
@@ -213,7 +213,7 @@ function startGame() {
document.getElementById("score").textContent = score; document.getElementById("score").textContent = score;
document.getElementById("wave").textContent = wave; document.getElementById("wave").textContent = wave;
document.getElementById("lives").textContent = lives; document.getElementById("lives").textContent = "♡".repeat(CONFIG.game.startLives - lives) + "♥".repeat(lives);
document.getElementById("start-screen").classList.add("hidden"); document.getElementById("start-screen").classList.add("hidden");
document.getElementById("gameover-screen").classList.add("hidden"); document.getElementById("gameover-screen").classList.add("hidden");
document.getElementById("ui-overlay").classList.remove("hidden"); document.getElementById("ui-overlay").classList.remove("hidden");
@@ -317,15 +317,6 @@ function draw() {
} }
ctx.save(); ctx.save();
ctx.fillStyle = CONFIG.colors.playerBase;
ctx.fillRect(0, H - S.inputAreaHeight, W, S.inputAreaHeight);
ctx.strokeStyle = CONFIG.colors.primary;
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(0, H - S.inputAreaHeight);
ctx.lineTo(W, H - S.inputAreaHeight);
ctx.stroke();
ctx.fillStyle = CONFIG.colors.primary; ctx.fillStyle = CONFIG.colors.primary;
ctx.shadowColor = CONFIG.colors.primary; ctx.shadowColor = CONFIG.colors.primary;
ctx.shadowBlur = S.playerGlow; ctx.shadowBlur = S.playerGlow;
js/main.js
+1 -1
View File
@@ -8,7 +8,7 @@
document.querySelector("#ui-overlay .ui-text:nth-child(2)").innerHTML = document.querySelector("#ui-overlay .ui-text:nth-child(2)").innerHTML =
`${CONFIG.texts.waveLabel} <span id="wave">1</span>`; `${CONFIG.texts.waveLabel} <span id="wave">1</span>`;
document.querySelector("#ui-overlay .ui-text:nth-child(3)").innerHTML = document.querySelector("#ui-overlay .ui-text:nth-child(3)").innerHTML =
`${CONFIG.texts.livesLabel} <span id="lives">3</span>`; `${CONFIG.texts.livesLabel} <span id="lives">${"♥".repeat(CONFIG.game.startLives)}</span>`;
document.querySelector("#gameover-screen .screen-subtitle").innerHTML = document.querySelector("#gameover-screen .screen-subtitle").innerHTML =
`${CONFIG.texts.finalScoreLabel} <span id="final-score">0</span>`; `${CONFIG.texts.finalScoreLabel} <span id="final-score">0</span>`;
js/utils.js
+101 -56
View File
@@ -34,40 +34,85 @@ function recalc() {
const R = CONFIG.visualRatio; const R = CONFIG.visualRatio;
const T = CONFIG.timing; const T = CONFIG.timing;
S.gridSize = Math.round(V.gridSize * W / 1000); S.gridSize = Math.round((V.gridSize * W) / 1000);
S.enemyPaddingX = Math.round(V.enemyPaddingX * W / 1000); S.enemyPaddingX = Math.round((V.enemyPaddingX * W) / 1000);
S.enemyAlienOffset = Math.round(V.enemyAlienOffset * W / 1000); S.enemyAlienOffset = Math.round((V.enemyAlienOffset * W) / 1000);
S.armorBarPad = Math.round(V.armorBarPad * W / 1000); S.armorBarPad = Math.round((V.armorBarPad * W) / 1000);
S.armorBarFont = Math.round(V.armorBarFont * W / 1000); S.armorBarFont = Math.round((V.armorBarFont * W) / 1000);
S.missTargetPadX = Math.round(V.missTargetPadX * W / 1000); S.missTargetPadX = Math.round((V.missTargetPadX * W) / 1000);
S.missTargetPadY = Math.round(V.missTargetPadY * H / 1000); S.missTargetPadY = Math.round((V.missTargetPadY * H) / 1000);
S.inputAreaHeight = Math.round(V.inputAreaHeight * H / 1000); S.inputAreaHeight = Math.round((V.inputAreaHeight * H) / 1000);
S.removeZone = Math.round(V.removeZone * H / 1000); S.removeZone = Math.round((V.removeZone * H) / 1000);
for (const k of ["playerY","playerRadius","playerGlow","enemySimpleHeight","enemyHeavyHeight", for (const k of [
"enemySimpleFont","enemyHeavyFont","enemyArmorBarHeight","enemyArmorBarOffset", "playerY",
"enemyArmorLabelOffset","enemyGlow","enemyFlashGlow","enemyLineWidth", "playerRadius",
"projectileGlow","projectileHitRadius","projectileMissRadius","projectileFont", "playerGlow",
"projectileCircleRadius","shakeHit","shakeMiss","shakeDamage","particleVel", "enemySimpleHeight",
"particleSizeMin","particleSizeMax","particleGlow","trailSizeBase","trailSizeInc", "enemyHeavyHeight",
"trailGlow","shooterOffset"]) { "enemySimpleFont",
S[k] = Math.round(V[k] * H / 1000); "enemyHeavyFont",
"enemyArmorBarHeight",
"enemyArmorBarOffset",
"enemyArmorLabelOffset",
"enemyGlow",
"enemyFlashGlow",
"enemyLineWidth",
"projectileGlow",
"projectileHitRadius",
"projectileMissRadius",
"projectileFont",
"projectileCircleRadius",
"shakeHit",
"shakeMiss",
"shakeDamage",
"particleVel",
"particleSizeMin",
"particleSizeMax",
"particleGlow",
"trailSizeBase",
"trailSizeInc",
"trailGlow",
"shooterOffset",
]) {
S[k] = Math.round((V[k] * H) / 1000);
} }
S.projectileSpeed = H / (CONFIG.speed.projectileCrossTime * 60); S.projectileSpeed = H / (CONFIG.speed.projectileCrossTime * 60);
S.gridSpeed = CONFIG.speed.gridSpeed * H / 1000; S.gridSpeed = (CONFIG.speed.gridSpeed * H) / 1000;
for (const k of ["projectileTrailLength","particleHit","particleMiss", for (const k of [
"particleDestroySimple","particleDestroyHeavy","particleArmorBreak", "projectileTrailLength",
"flashDuration","shakeHitDuration","shakeMissDuration","shakeDamageDuration", "particleHit",
"trailMaxLength","trailDecay","trailAlpha"]) { "particleMiss",
"particleDestroySimple",
"particleDestroyHeavy",
"particleArmorBreak",
"flashDuration",
"shakeHitDuration",
"shakeMissDuration",
"shakeDamageDuration",
"trailMaxLength",
"trailDecay",
"trailAlpha",
]) {
S[k] = C[k]; S[k] = C[k];
} }
for (const k of ["missTargetYRange","projectileTrailLength","projectileTrailDecay", for (const k of [
"projectileTrailAlpha","projectileCircleAlpha","enemyPulseRate","enemyAlphaBase", "missTargetYRange",
"enemyAlphaRange","enemyGlowPulse","particleDecayBase","particleDecayRange", "projectileTrailLength",
"particleDamping"]) { "projectileTrailDecay",
"projectileTrailAlpha",
"projectileCircleAlpha",
"enemyPulseRate",
"enemyAlphaBase",
"enemyAlphaRange",
"enemyGlowPulse",
"particleDecayBase",
"particleDecayRange",
"particleDamping",
]) {
S[k] = R[k]; S[k] = R[k];
} }
@@ -79,67 +124,67 @@ function recalc() {
function applyOverlayScale(W, H) { function applyOverlayScale(W, H) {
const title = document.querySelector(".screen-title"); const title = document.querySelector(".screen-title");
if (title) title.style.fontSize = Math.round(40 * H / 1000) + "px"; if (title) title.style.fontSize = Math.round((40 * H) / 1000) + "px";
const subs = document.querySelectorAll(".screen-subtitle"); const subs = document.querySelectorAll(".screen-subtitle");
for (let el of subs) el.style.fontSize = Math.round(18 * H / 1000) + "px"; for (let el of subs) el.style.fontSize = Math.round((18 * H) / 1000) + "px";
const overlay = document.getElementById("ui-overlay"); const overlay = document.getElementById("ui-overlay");
if (overlay) { if (overlay) {
overlay.style.padding = Math.round(12 * H / 1000) + "px " + Math.round(16 * W / 1000) + "px"; overlay.style.padding = Math.round((12 * H) / 1000) + "px " + Math.round((16 * W) / 1000) + "px";
overlay.style.fontSize = Math.round(14 * H / 1000) + "px"; overlay.style.fontSize = Math.round((28 * H) / 1000) + "px";
}
const inputDisplay = document.getElementById("input-display");
if (inputDisplay) {
inputDisplay.style.padding = Math.round(14 * H / 1000) + "px " + Math.round(16 * W / 1000) + "px";
} }
// const inputDisplay = document.getElementById("input-display");
// if (inputDisplay) {
// inputDisplay.style.padding = Math.round(14 * H / 1000) + "px " + Math.round(16 * W / 1000) + "px";
// }
const typed = document.getElementById("typed-text"); const typed = document.getElementById("typed-text");
if (typed) { if (typed) {
typed.style.fontSize = Math.round(20 * H / 1000) + "px"; typed.style.fontSize = Math.round((20 * H) / 1000) + "px";
typed.style.minHeight = Math.round(28 * H / 1000) + "px"; typed.style.minHeight = Math.round((28 * H) / 1000) + "px";
} }
const chatText = document.getElementById("chat-text"); const chatText = document.getElementById("chat-text");
if (chatText) { if (chatText) {
chatText.style.fontSize = Math.round(16 * H / 1000) + "px"; chatText.style.fontSize = Math.round((16 * H) / 1000) + "px";
chatText.style.minHeight = Math.round(28 * H / 1000) + "px"; chatText.style.minHeight = Math.round((28 * H) / 1000) + "px";
} }
const chForm = document.getElementById("channel-form"); const chForm = document.getElementById("channel-form");
if (chForm) { if (chForm) {
chForm.querySelector(".screen-title").style.fontSize = Math.round(80 * H / 1000) + "px"; chForm.querySelector(".screen-title").style.fontSize = Math.round((80 * H) / 1000) + "px";
const inp = chForm.querySelector("input"); const inp = chForm.querySelector("input");
if (inp) { if (inp) {
inp.style.fontSize = Math.round(22 * H / 1000) + "px"; inp.style.fontSize = Math.round((22 * H) / 1000) + "px";
inp.style.padding = Math.round(12 * H / 1000) + "px " + Math.round(20 * W / 1000) + "px"; inp.style.padding = Math.round((12 * H) / 1000) + "px " + Math.round((20 * W) / 1000) + "px";
inp.style.width = Math.round(300 * W / 1000) + "px"; inp.style.width = Math.round((300 * W) / 1000) + "px";
} }
const btn = chForm.querySelector("button"); const btn = chForm.querySelector("button");
if (btn) { if (btn) {
btn.style.fontSize = Math.round(18 * H / 1000) + "px"; btn.style.fontSize = Math.round((18 * H) / 1000) + "px";
btn.style.padding = Math.round(10 * H / 1000) + "px " + Math.round(40 * W / 1000) + "px"; btn.style.padding = Math.round((10 * H) / 1000) + "px " + Math.round((40 * W) / 1000) + "px";
btn.style.minWidth = Math.round(260 * W / 1000) + "px"; btn.style.minWidth = Math.round((260 * W) / 1000) + "px";
} }
const link = document.getElementById("game-link"); const link = document.getElementById("game-link");
if (link) link.style.fontSize = Math.round(16 * H / 1000) + "px"; if (link) link.style.fontSize = Math.round((16 * H) / 1000) + "px";
const note = chForm.querySelector(".obs-note"); const note = chForm.querySelector(".obs-note");
if (note) note.style.fontSize = Math.round(16 * H / 1000) + "px"; if (note) note.style.fontSize = Math.round((16 * H) / 1000) + "px";
} }
const goTitle = document.getElementById("gameover-title"); const goTitle = document.getElementById("gameover-title");
if (goTitle) goTitle.style.fontSize = Math.round(64 * H / 1000) + "px"; if (goTitle) goTitle.style.fontSize = Math.round((64 * H) / 1000) + "px";
const goSubs = document.querySelectorAll("#gameover-screen .screen-subtitle"); const goSubs = document.querySelectorAll("#gameover-screen .screen-subtitle");
for (let el of goSubs) el.style.fontSize = Math.round(28 * H / 1000) + "px"; for (let el of goSubs) el.style.fontSize = Math.round((28 * H) / 1000) + "px";
const statsTitle = document.querySelectorAll(".stats-section-title"); const statsTitle = document.querySelectorAll(".stats-section-title");
for (let el of statsTitle) el.style.fontSize = Math.round(28 * H / 1000) + "px"; for (let el of statsTitle) el.style.fontSize = Math.round((28 * H) / 1000) + "px";
const statsTop1 = document.querySelectorAll(".stats-top1"); const statsTop1 = document.querySelectorAll(".stats-top1");
for (let el of statsTop1) el.style.fontSize = Math.round(48 * H / 1000) + "px"; for (let el of statsTop1) el.style.fontSize = Math.round((48 * H) / 1000) + "px";
const statsTop2 = document.querySelectorAll(".stats-top2"); const statsTop2 = document.querySelectorAll(".stats-top2");
for (let el of statsTop2) el.style.fontSize = Math.round(36 * H / 1000) + "px"; for (let el of statsTop2) el.style.fontSize = Math.round((36 * H) / 1000) + "px";
const statsTop3 = document.querySelectorAll(".stats-top3"); const statsTop3 = document.querySelectorAll(".stats-top3");
for (let el of statsTop3) el.style.fontSize = Math.round(28 * H / 1000) + "px"; for (let el of statsTop3) el.style.fontSize = Math.round((28 * H) / 1000) + "px";
const statsRow = document.querySelectorAll(".stats-row:not(.stats-top1):not(.stats-top2):not(.stats-top3)"); const statsRow = document.querySelectorAll(".stats-row:not(.stats-top1):not(.stats-top2):not(.stats-top3)");
for (let el of statsRow) el.style.fontSize = Math.round(24 * H / 1000) + "px"; for (let el of statsRow) el.style.fontSize = Math.round((24 * H) / 1000) + "px";
const mazila = document.querySelectorAll(".stats-mazila"); const mazila = document.querySelectorAll(".stats-mazila");
for (let el of mazila) el.style.fontSize = Math.round(28 * H / 1000) + "px"; for (let el of mazila) el.style.fontSize = Math.round((28 * H) / 1000) + "px";
const crown = document.querySelectorAll(".stats-crown"); const crown = document.querySelectorAll(".stats-crown");
for (let el of crown) el.style.fontSize = Math.round(56 * H / 1000) + "px"; for (let el of crown) el.style.fontSize = Math.round((56 * H) / 1000) + "px";
} }
function drawGrid() { function drawGrid() {
style.css
+1 -1
View File
@@ -61,7 +61,7 @@ body {
} }
.ui-text { .ui-text {
color: #00ff41; color: #00ff41;
font-size: 14px; font-size: 28px;
text-shadow: 0 0 8px #00ff41; text-shadow: 0 0 8px #00ff41;
letter-spacing: 1px; letter-spacing: 1px;
} }