Added 3*3 and 5*5 grid matrix

index.html

@@ -10,6 +10,16 @@
   <div class="game-container">
     <header>
       <h1>2048</h1>
+      <div class="game-controls">
+        <div class="grid-size-selector">
+          <button class="grid-size-btn active" data-size="3">3×3</button>
+          <button class="grid-size-btn" data-size="4">4×4</button>
+          <button class="grid-size-btn" data-size="5">5×5</button>
+        </div>
+        <button id="new-game">New Game</button>
+        <button id="undo" disabled>Undo</button>
+        <button id="theme-toggle">🌙</button>
+      </div>
       <div class="score-container">
         <div>Score</div>
         <div id="score">0</div>
@@ -18,9 +28,6 @@ <h1>2048</h1>
         <div>Best</div>
         <div id="best-score">0</div>
       </div>
-      <button id="new-game">New Game</button>
-      <button id="undo" disabled>Undo</button>
-      <button id="theme-toggle">🌙</button>
     </header>
     <div class="grid-wrapper">
       <div class="grid-container">

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 ===

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;
+  }
 }