From ad298bbd1e55c76b4a01d75b639b50f6daf67995 Mon Sep 17 00:00:00 2001 From: harsha Date: Sun, 26 Oct 2025 02:13:14 +0530 Subject: [PATCH] Added 3*3 and 5*5 grid matrix --- index.html | 13 +++-- script.js | 144 ++++++++++++++++++++++++++++++++++++++++++++++++----- style.css | 121 ++++++++++++++++++++++++++++++++++++-------- 3 files changed, 242 insertions(+), 36 deletions(-) diff --git a/index.html b/index.html index 651a47a..1c4232d 100644 --- a/index.html +++ b/index.html @@ -10,6 +10,16 @@

2048

+
+
+ + + +
+ + + +
Score
0
@@ -18,9 +28,6 @@

2048

Best
0
- - -
diff --git a/script.js b/script.js index 3cd983c..1f358e9 100644 --- a/script.js +++ b/script.js @@ -1,41 +1,161 @@ // === Constants & DOM Elements === -const GRID_SIZE = 4; -const gridCells = document.querySelectorAll(".grid-cell"); +let GRID_SIZE = 4; // Make it let so we can change it +let grid = []; +let score = 0; +let bestScore = 0; +let gameWon = false; +let gridCells = []; // Will be initialized in initializeGrid + +// Initialize DOM elements const newGameBtn = document.getElementById("new-game"); const tryAgainBtn = document.getElementById("retry"); const continueBtn = document.getElementById("continue"); const messageBox = document.getElementById("message"); -const messageText = messageBox.querySelector("p"); +const messageText = messageBox ? messageBox.querySelector("p") : null; const scoreElement = document.getElementById("score"); const bestScoreElement = document.getElementById("best-score"); const toggleBtn = document.getElementById('theme-toggle'); -let grid = []; -let score = 0; -let bestScore = 0; -let gameWon = false; +// Debug logging +console.log('DOM Elements initialized:', { + newGameBtn: !!newGameBtn, + tryAgainBtn: !!tryAgainBtn, + continueBtn: !!continueBtn, + messageBox: !!messageBox, + scoreElement: !!scoreElement, + bestScoreElement: !!bestScoreElement, + toggleBtn: !!toggleBtn +}); // === Initialize Game === -document.addEventListener("DOMContentLoaded", startNewGame); +document.addEventListener("DOMContentLoaded", () => { + console.log('DOM fully loaded, initializing game...'); + + // Initialize with default grid size (4x4) + initializeGrid(4); + + // Set up grid size buttons + const sizeButtons = document.querySelectorAll('.grid-size-btn'); + console.log(`Found ${sizeButtons.length} grid size buttons`); + + sizeButtons.forEach(btn => { + btn.addEventListener('click', (e) => { + e.preventDefault(); + const size = parseInt(btn.dataset.size); + console.log('Grid size button clicked:', size); + handleGridSizeChange(size); + }); + + // Log button info for debugging + console.log(`Button ${btn.textContent} has size: ${btn.dataset.size}`); + }); + + // Start the game + startNewGame(); + + // Focus the game container for keyboard events + const gameContainer = document.querySelector('.game-container'); + if (gameContainer) { + gameContainer.tabIndex = 0; + gameContainer.focus(); + } + + console.log('Game initialization complete'); +}); + newGameBtn.addEventListener("click", startNewGame); tryAgainBtn.addEventListener("click", () => startNewGame()); continueBtn.addEventListener("click", () => { messageBox.style.display = "none"; // Hide win message }); +// === Grid Management === +function initializeGrid(size) { + const gridContainer = document.querySelector('.grid'); + if (!gridContainer) { + console.error('Grid container not found!'); + return; + } + + // Clear existing grid + gridContainer.innerHTML = ''; + + // Set new grid dimensions + gridContainer.style.gridTemplateColumns = `repeat(${size}, 1fr)`; + gridContainer.style.gridTemplateRows = `repeat(${size}, 1fr)`; + + // Create grid cells + for (let i = 0; i < size * size; i++) { + const cell = document.createElement('div'); + cell.className = 'grid-cell'; + cell.textContent = ''; + gridContainer.appendChild(cell); + } + + // Update grid cells reference + gridCells = Array.from(document.querySelectorAll(".grid-cell")); + GRID_SIZE = size; + + // Update active button state + const buttons = document.querySelectorAll('.grid-size-btn'); + if (buttons.length > 0) { + buttons.forEach(btn => { + const isActive = parseInt(btn.dataset.size) === size; + btn.classList.toggle('active', isActive); + console.log(`Button ${btn.textContent} active: ${isActive}`); + }); + } else { + console.error('Grid size buttons not found!'); + } + + console.log(`Grid initialized to ${size}x${size} with ${gridCells.length} cells`); +} + // === Start / Reset Game === function startNewGame() { + console.log('Starting new game with grid size:', GRID_SIZE); + + // Initialize grid with zeros grid = Array.from({ length: GRID_SIZE }, () => Array(GRID_SIZE).fill(0)); score = 0; gameWon = false; + + // Update UI updateScore(); - messageBox.style.display = "none"; - - // Spawn two starting tiles + if (messageBox) messageBox.style.display = "none"; + + // Initialize grid cells if not already done + if (gridCells.length !== GRID_SIZE * GRID_SIZE) { + initializeGrid(GRID_SIZE); + } + + // Clear any existing tiles and spawn new ones + clearTiles(); spawnRandomTile(); spawnRandomTile(); - + renderGrid(); + console.log('New game started'); +} + +function clearTiles() { + const tiles = document.querySelectorAll('.tile'); + tiles.forEach(tile => tile.remove()); +} + +// Handle grid size change +function handleGridSizeChange(size) { + console.log('Changing grid size to:', size); + if (size < 3 || size > 5) { + console.error('Invalid grid size:', size); + return; + } + + // Only reinitialize if size actually changed + if (size !== GRID_SIZE) { + initializeGrid(size); + startNewGame(); + } } // === Core Utility Functions === diff --git a/style.css b/style.css index 2a54bff..0bf0d37 100644 --- a/style.css +++ b/style.css @@ -48,60 +48,139 @@ body { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); - gap: 12px; + gap: 10px; background:var(--grid-bg-color); - padding: 14px; + padding: 10px; border-radius: 6px; width: 100%; - height: 100%; - box-sizing: border-box; + max-width: 400px; aspect-ratio: 1/1; + margin: 0 auto; + transition: all 0.3s ease; } .grid-cell { - background:var(--grid-cell-bg-color); - border-radius: 4px; + background: rgba(238, 228, 218, 0.35); + border-radius: 3px; display: flex; justify-content: center; align-items: center; - font-size: 1.4rem; + font-size: 2rem; + font-weight: bold; color: var(--grid-text-color); - user-select: none; + transition: all 0.15s ease; aspect-ratio: 1/1; - /*squares update-2 */ width: 100%; height: 100%; } +/* Game Controls */ +.game-controls { + display: flex; + justify-content: space-between; + align-items: center; + margin: 1rem 0; + gap: 1rem; + flex-wrap: wrap; + width: 100%; +} + +/* Grid size selector */ +.grid-size-selector { + display: flex; + gap: 0.5rem; + background: rgba(0, 0, 0, 0.05); + padding: 0.5rem; + border-radius: 50px; + box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); +} + +.grid-size-btn { + background: none; + border: none; + padding: 0.5rem 1.2rem; + border-radius: 50px; + font-weight: 600; + cursor: pointer; + transition: all 0.3s ease; + color: var(--text-color); + opacity: 0.7; +} + +.grid-size-btn.active { + background: #8f7a66; + color: white; + opacity: 1; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); +} + +.grid-size-btn:hover:not(.active) { + background: rgba(0, 0, 0, 0.1); + transform: translateY(-2px); +} + /* Light Theme Default */ -:root{ - --bg-color: #ffffff; - --text-color: #000000; +:root { + --bg-color: #faf8ef; + --text-color: #776e65; --grid-bg-color: #bbada0; - --grid-cell-bg-color:#eee4da; + --grid-cell-bg-color: #eee4da; --grid-text-color: #776e65; - + --button-bg: #8f7a66; + --button-hover: #9f8b77; + --button-active: #7f6a56; } -/* Drak Theme */ +/* Dark Theme */ .dark-theme { - --bg-color: #776e65; - --text-color: #ffffff; + --bg-color: #2c2c2c; + --text-color: #f8f8f8; --grid-bg-color: #4d443b; - --grid-cell-bg-color:#eee4da; - --grid-text-color: #131110; + --grid-cell-bg-color: #3a3329; + --grid-text-color: #f8f8f8; + --button-bg: #6d5c4d; + --button-hover: #7d6c5d; + --button-active: #5d4c3d; +} +.dark-theme .grid-size-selector { + background: rgba(255, 255, 255, 0.1); +} + +.dark-theme .grid-size-btn:hover:not(.active) { + background: rgba(255, 255, 255, 0.1); } @media (max-width: 500px) { .game-container { max-width: 98vw; padding: 1rem; } + + .game-controls { + flex-direction: column; + align-items: stretch; + } + + .grid-size-selector { + justify-content: space-between; + } + + .grid-size-btn { + flex: 1; + text-align: center; + padding: 0.5rem; + } + .grid-container { - max-width: 90vw; + max-width: 100%; } + .grid { - gap: 8px; + gap: 6px; padding: 8px; } + + .grid-cell { + font-size: 1rem; + } }