From 88d7c052e3e24be3682f97ebe5a55e29446eb22a Mon Sep 17 00:00:00 2001 From: "devloai[bot]" <168258904+devloai[bot]@users.noreply.github.com> Date: Tue, 22 Apr 2025 18:33:15 +0000 Subject: [PATCH] Add theme toggle feature with light and dark mode support --- README.md | 2 ++ game.js | 48 +++++++++++++++++++++++++++- index.html | 36 +++++++++++++-------- styles.css | 94 +++++++++++++++++++++++++++++++++++++++++++++++++++++- 4 files changed, 165 insertions(+), 15 deletions(-) diff --git a/README.md b/README.md index 735bdd9..4ffac3b 100644 --- a/README.md +++ b/README.md @@ -14,6 +14,7 @@ A browser-based space race game where players navigate a spaceship through space - Progressive difficulty that increases over time - Particle effects for collisions and explosions - Local storage for high score tracking +- Theme toggle between light and dark modes ## Game Mechanics @@ -27,6 +28,7 @@ A browser-based space race game where players navigate a spaceship through space ### Getting Started 1. Open `index.html` in a web browser 2. Click the "Start Game" button on the welcome screen +3. Use the theme toggle button in the top-right corner to switch between light and dark modes ### Controls - **Keyboard Controls:** diff --git a/game.js b/game.js index fdf54a2..e52140e 100644 --- a/game.js +++ b/game.js @@ -9,6 +9,12 @@ const GAME_CONFIG = { DIFFICULTY_INCREASE_RATE: 0.0001, // Per frame }; +// Theme configuration +const THEME_CONFIG = { + STORAGE_KEY: 'spaceRaceTheme', + DEFAULT_THEME: 'dark', +}; + // Game state let gameState = { isRunning: false, @@ -35,6 +41,11 @@ const restartBtn = document.getElementById('restartBtn'); const startModal = document.getElementById('startModal'); const startBtn = document.getElementById('startBtn'); +// Theme toggle elements +const themeToggle = document.getElementById('themeToggle'); +const sunIcon = document.getElementById('sunIcon'); +const moonIcon = document.getElementById('moonIcon'); + // Mobile controls const leftBtn = document.getElementById('leftBtn'); const rightBtn = document.getElementById('rightBtn'); @@ -53,11 +64,46 @@ function resizeCanvas() { } } +// Theme functions +function initTheme() { + // Get saved theme or use default + const savedTheme = localStorage.getItem(THEME_CONFIG.STORAGE_KEY) || THEME_CONFIG.DEFAULT_THEME; + setTheme(savedTheme); + + // Set up theme toggle event listener + themeToggle.addEventListener('click', toggleTheme); +} + +function setTheme(theme) { + // Apply theme to document + if (theme === 'light') { + document.documentElement.setAttribute('data-theme', 'light'); + sunIcon.classList.add('hidden'); + moonIcon.classList.remove('hidden'); + } else { + document.documentElement.removeAttribute('data-theme'); + moonIcon.classList.add('hidden'); + sunIcon.classList.remove('hidden'); + } + + // Save theme preference + localStorage.setItem(THEME_CONFIG.STORAGE_KEY, theme); +} + +function toggleTheme() { + const currentTheme = localStorage.getItem(THEME_CONFIG.STORAGE_KEY) || THEME_CONFIG.DEFAULT_THEME; + const newTheme = currentTheme === 'dark' ? 'light' : 'dark'; + setTheme(newTheme); +} + // Initialize the game function initGame() { resizeCanvas(); window.addEventListener('resize', resizeCanvas); + // Initialize theme + initTheme(); + // Set high score display highScoreDisplay.textContent = gameState.highScore; @@ -691,4 +737,4 @@ function gameLoop() { } // Initialize the game when the page loads -window.addEventListener('load', initGame); \ No newline at end of file +window.addEventListener('load', initGame); diff --git a/index.html b/index.html index 65225ee..ed113c2 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,17 @@ - + +
+ + + + + + +

Space Race

@@ -18,16 +28,16 @@

Space Race

- + -
- +
+
- - + +
- +
@@ -39,23 +49,23 @@

How to Play

-