diff --git a/Index.html b/Index.html index c68a28a..236f1dc 100644 --- a/Index.html +++ b/Index.html @@ -42,6 +42,9 @@
+
Score: 0 diff --git a/script.js b/script.js index 84de7fd..7c9736b 100644 --- a/script.js +++ b/script.js @@ -397,6 +397,18 @@ function resetGame() { const startBtn = document.getElementById('startBtn'); const pauseBtn = document.getElementById('pauseBtn'); const resetBtn = document.getElementById('resetBtn'); +const pauseOverlay = document.getElementById('pause-overlay'); + +function setPauseOverlay(visible) { + if (!pauseOverlay) return; + if (visible) { + pauseOverlay.classList.add('show'); + pauseOverlay.setAttribute('aria-hidden', 'false'); + } else { + pauseOverlay.classList.remove('show'); + pauseOverlay.setAttribute('aria-hidden', 'true'); + } +} startBtn.onclick = () => { @@ -404,6 +416,8 @@ startBtn.onclick = () => { if (snake.length > 1 || score > 0 || direction.x !== 0 || direction.y !== 0) { resetGame(); } + // Ensure overlay is hidden when starting/resuming play + setPauseOverlay(false); gameRunning = true; pauseBtn.textContent = 'Pause'; pauseBtn.disabled = false; @@ -417,10 +431,14 @@ pauseBtn.onclick = () => { gameRunning = false; pauseBtn.textContent = 'Resume'; document.body.classList.remove('game-active'); + // Show overlay immediately when paused + setPauseOverlay(true); } else { gameRunning = true; pauseBtn.textContent = 'Pause'; document.body.classList.add('game-active'); + // Hide overlay when resuming + setPauseOverlay(false); if (!animationId) loop(); } }; @@ -429,6 +447,7 @@ resetBtn.onclick = () => { pauseBtn.textContent = 'Pause'; pauseBtn.disabled = true; resetBtn.disabled = true; + setPauseOverlay(false); resetGame(); }; @@ -442,4 +461,6 @@ window.onload = function () { loadBestScore(); initGameVars(); draw(); + // Ensure pause overlay hidden on load + setPauseOverlay(false); }; diff --git a/style.css b/style.css index 18d043d..73af85f 100644 --- a/style.css +++ b/style.css @@ -292,4 +292,45 @@ footer { max-width: 95vw; max-height: 89vw; } +} + +/* Pause overlay that appears above the game canvas when paused */ +#pause-overlay { + position: absolute; + /* Place overlay directly over the canvas (canvas is centered) */ + top: 22px; /* matches #game-area padding-top */ + left: 50%; + transform: translateX(-50%); + width: 400px; + height: 400px; + max-width: 96vw; + max-height: 70vw; + border-radius: 11px; + display: flex; + align-items: center; + justify-content: center; + background: rgba(0, 0, 0, 0.6); + color: var(--white); + font-size: 34px; + font-weight: 800; + text-align: center; + letter-spacing: 1px; + z-index: 200; + opacity: 0; + pointer-events: none; + transition: opacity .18s ease; +} + +#pause-overlay.show { + opacity: 1; + pointer-events: auto; /* block interactions when paused */ +} + +#pause-overlay .pause-text { + text-shadow: 0 4px 18px rgba(0,0,0,0.6); + font-family: 'Inter', Arial, sans-serif; +} + +@media (max-width:520px) { + #pause-overlay { top: 16px; } } \ No newline at end of file