+
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