diff --git a/index.html b/index.html
index 6af2d9b..0929da0 100644
--- a/index.html
+++ b/index.html
@@ -118,18 +118,57 @@
font-family: 'Courier New', monospace;
}
#soundStatus {
+ display: none;
position: absolute;
top: 20px;
- right: 100px;
- font-size: 20px;
+ right: 90px;
+ background: rgba(0,0,0,0.7);
+ border: 2px solid white;
+ color: white;
+ font-size: 24px;
+ padding: 10px 15px;
+ border-radius: 10px;
cursor: pointer;
z-index: 100;
+ font-family: Arial, sans-serif;
+ transition: all 0.2s;
user-select: none;
- opacity: 0.8;
- transition: opacity 0.2s;
}
#soundStatus:hover {
- opacity: 1;
+ background: rgba(0,0,0,0.9);
+ transform: scale(1.1);
+ }
+ #soundStatus:active {
+ transform: scale(0.95);
+ }
+ #pauseBtn {
+ display: none;
+ position: absolute;
+ top: 20px;
+ right: 20px;
+ background: rgba(0,0,0,0.7);
+ border: 2px solid white;
+ color: white;
+ font-size: 24px;
+ padding: 10px 15px;
+ border-radius: 10px;
+ cursor: pointer;
+ z-index: 100;
+ font-family: Arial, sans-serif;
+ transition: all 0.2s;
+ }
+ #pauseBtn:hover {
+ background: rgba(0,0,0,0.9);
+ transform: scale(1.1);
+ }
+ #pauseBtn:active {
+ transform: scale(0.95);
+ }
+ /* Show buttons when game is active */
+ @media (max-width: 768px) {
+ #pauseBtn {
+ display: block;
+ }
}
#perfMonitor {
position: absolute;
@@ -162,8 +201,15 @@
}
#soundStatus {
top: 10px;
- right: 60px;
- font-size: 18px;
+ right: 80px;
+ font-size: 20px;
+ padding: 8px 12px;
+ }
+ #pauseBtn {
+ top: 10px;
+ right: 10px;
+ font-size: 20px;
+ padding: 8px 12px;
}
#perfMonitor {
top: 40px;
@@ -186,6 +232,8 @@
🔊
+
+
FPS: 60
Frame: 16.7ms
diff --git a/src/game/Game.js b/src/game/Game.js
index 90fc214..a7b922b 100644
--- a/src/game/Game.js
+++ b/src/game/Game.js
@@ -411,6 +411,16 @@ export class Game {
document.getElementById('instructions').style.display = 'block';
}
+ // Show pause and sound buttons when game starts
+ const pauseBtn = document.getElementById('pauseBtn');
+ if (pauseBtn) {
+ pauseBtn.style.display = 'block';
+ }
+ const soundStatus = document.getElementById('soundStatus');
+ if (soundStatus) {
+ soundStatus.style.display = 'block';
+ }
+
// Reset UI
this.updateUI();
document.getElementById('combo').style.display = 'none';
@@ -436,6 +446,13 @@ export class Game {
this.soundSystem.stopBackgroundMusic();
}
+ // Update pause button text
+ const pauseBtn = document.getElementById('pauseBtn');
+ if (pauseBtn) {
+ pauseBtn.textContent = '▶️';
+ pauseBtn.title = 'Resume Game';
+ }
+
if (this.uiSystem) {
this.uiSystem.setState('paused');
} else {
@@ -458,6 +475,13 @@ export class Game {
});
}
+ // Update pause button text
+ const pauseBtn = document.getElementById('pauseBtn');
+ if (pauseBtn) {
+ pauseBtn.textContent = '⏸️';
+ pauseBtn.title = 'Pause Game';
+ }
+
if (this.uiSystem) {
this.uiSystem.setState('playing');
} else {
@@ -476,6 +500,16 @@ export class Game {
this.isPaused = false;
this.timeScale = 0; // Stop time in menu
+ // Hide pause and sound buttons when returning to menu
+ const pauseBtn = document.getElementById('pauseBtn');
+ if (pauseBtn) {
+ pauseBtn.style.display = 'none';
+ }
+ const soundStatus = document.getElementById('soundStatus');
+ if (soundStatus) {
+ soundStatus.style.display = 'none';
+ }
+
// Update UI state
if (this.uiSystem) {
this.uiSystem.setState('menu');
@@ -516,6 +550,20 @@ export class Game {
pauseMenuBtn.addEventListener('click', () => this.returnToMenu());
}
+ // Pause button (for mobile)
+ const pauseBtn = document.getElementById('pauseBtn');
+ if (pauseBtn) {
+ pauseBtn.addEventListener('click', () => {
+ if (this.gameActive && !this.inMenu) {
+ if (this.isPaused) {
+ this.resumeGame();
+ } else {
+ this.pauseGame();
+ }
+ }
+ });
+ }
+
document.getElementById('restartBtn').addEventListener('click', () => this.restart());
// Toggle performance monitor with 'T' key