make the blockes move able from a place to another by drag and drop

game.html

@@ -220,103 +220,149 @@ const languageBtn = document.getElementById('language-btn');
                 }
             });
         }
-        
         // Create initial blocks
         function generateBlocks() {
             const blocksArea = document.getElementById('blocks-area');
             blocksArea.innerHTML = '';
             
-            for (let i = 0; i < 15; i++) {
+            for (let i = 0; i < 10; i++) {
                 const block = document.createElement('div');
-                block.className = 'block w-16 h-8 bg-amber-600 rounded-sm shadow-md cursor-grab';
+                block.className = 'block w-12 h-12 bg-amber-600 rounded-sm shadow-md cursor-grab';
                 block.style.position = 'relative';
                 block.style.transform = `rotate(${Math.random() * 10 - 5}deg)`;
+                block.dataset.id = `block-${i}`;
                 
-                block.addEventListener('mousedown', (e) => {
-                    if (gameState.isPaused) return;
-                    
-                    // Create a clone to drag
-                    const heldBlock = block.cloneNode(true);
-                    heldBlock.classList.add('block-held');
-                    heldBlock.style.position = 'fixed';
-                    heldBlock.style.left = `${e.clientX - 30}px`;
-                    heldBlock.style.top = `${e.clientY - 30}px`;
-                    heldBlock.style.zIndex = '100';
-                    heldBlock.style.transform = 'rotate(5deg)';
-                    heldBlock.style.filter = 'drop-shadow(0 0 5px rgba(0,0,0,0.5))';
-                    document.body.appendChild(heldBlock);
-                    
-                    gameState.heldBlock = heldBlock;
-                    block.style.opacity = '0.5';
-                    
-                    e.preventDefault(); // Prevent text selection
-                });
-                
+                block.addEventListener('mousedown', startDrag);
                 blocksArea.appendChild(block);
             }
         }
-        // Drop block into pyramid
-        function dropBlock(e) {
-            if (!gameState.heldBlock || gameState.isPaused) return;
+
+        // Start dragging a block
+        function startDrag(e) {
+            if (gameState.isPaused) return;
+            
+            const block = e.target;
+            gameState.draggedBlock = block;
+            
+            // Calculate initial positions
+            gameState.dragStartX = e.clientX;
+            gameState.dragStartY = e.clientY;
+            gameState.blockStartX = block.getBoundingClientRect().left;
+            gameState.blockStartY = block.getBoundingClientRect().top;
+            
+            // Style the dragged block
+            block.style.position = 'fixed';
+            block.style.zIndex = '100';
+            block.style.transform = 'rotate(5deg)';
+            block.style.filter = 'drop-shadow(0 0 5px rgba(0,0,0,0.5))';
+            block.style.left = `${gameState.blockStartX}px`;
+            block.style.top = `${gameState.blockStartY}px`;
+            
+            document.addEventListener('mousemove', dragBlock);
+            document.addEventListener('mouseup', stopDrag);
+            
+            e.preventDefault();
+        }
+
+        // Drag block movement
+        function dragBlock(e) {
+            if (!gameState.draggedBlock) return;
+            
+            const block = gameState.draggedBlock;
+            const dx = e.clientX - gameState.dragStartX;
+            const dy = e.clientY - gameState.dragStartY;
+            
+            block.style.left = `${gameState.blockStartX + dx}px`;
+            block.style.top = `${gameState.blockStartY + dy}px`;
+        }
+
+        // Stop dragging and drop block
+        function stopDrag(e) {
+            if (!gameState.draggedBlock) return;
             
+            const block = gameState.draggedBlock;
             const constructionArea = document.getElementById('construction-area');
             const areaRect = constructionArea.getBoundingClientRect();
             
+            // Check if dropped in construction area
             if (e.clientX >= areaRect.left && e.clientX <= areaRect.right &&
                 e.clientY >= areaRect.top && e.clientY <= areaRect.bottom) {
                 
-                // Calculate pyramid row
-                const baseWidth = 5; // Base has 5 blocks
-                const row = Math.floor(Math.sqrt(gameState.blocksStacked * 2));
-                const blocksInRow = baseWidth - row;
-                
-                // Only place block if there's space in the row
-                if (blocksInRow > 0) {
-                    const block = document.createElement('div');
-                    block.className = 'pyramid-block w-16 h-8 bg-amber-700 rounded-sm shadow-md absolute';
-                    
-                    // Calculate position in row
-                    const rowY = 8 + (row * 8); // Each row is 8px higher
-                    const spacing = (320 - (blocksInRow * 64)) / (blocksInRow + 1);
-                    const blockX = spacing + ((gameState.blocksInRow[row] || 0) * (64 + spacing));
-                    
-                    block.style.bottom = `${rowY}px`;
-                    block.style.left = `${blockX}px`;
-                    
-                    constructionArea.appendChild(block);
-                    
-                    // Update counts
-                    gameState.blocksStacked++;
-                    gameState.blocksInRow[row] = (gameState.blocksInRow[row] || 0) + 1;
-                    
-                    // Check if row is complete
-                    if (gameState.blocksInRow[row] >= blocksInRow) {
-                        gameState.blocksInRow[row + 1] = 0;
-                    }
-                    
-                    updateUI();
-                    
-                    // Check for win condition
-                    if (gameState.blocksStacked >= 15) {
-                        pauseGame();
-                        pauseTitle.textContent = translations[gameState.language].gameComplete;
-                    }
-                    
-                    // Create particles
-                    createParticles(block);
-                }
+                placeInPyramid(block);
+            } else {
+                // Return to original position
+                block.style.position = 'relative';
+                block.style.left = 'auto';
+                block.style.top = 'auto';
+                block.style.zIndex = 'auto';
+                block.style.transform = '';
+                block.style.filter = '';
                 
-                // Reset the original block
-                const blocks = document.querySelectorAll('#blocks-area .block');
-                blocks.forEach(b => b.style.opacity = '1');
+                // Move back to blocks area
+                document.getElementById('blocks-area').appendChild(block);
             }
             
-            // Remove held block
-            if (gameState.heldBlock) {
-                gameState.heldBlock.remove();
-                gameState.heldBlock = null;
-            }
+            document.removeEventListener('mousemove', dragBlock);
+            document.removeEventListener('mouseup', stopDrag);
+            gameState.draggedBlock = null;
         }
+}
+        // Place block in pyramid
+        function placeInPyramid(block) {
+            if (gameState.isPaused) return;
+            
+            // Calculate pyramid row
+            const baseWidth = 5; // Base has 5 blocks
+            const row = Math.floor(Math.sqrt(gameState.blocksStacked * 2));
+            const blocksInRow = baseWidth - row;
+            
+            // Only place block if there's space in the row
+            if (blocksInRow > 0) {
+                block.className = 'pyramid-block w-12 h-12 bg-amber-700 rounded-sm shadow-md absolute';
+                block.style.position = 'absolute';
+                block.style.cursor = 'default';
+                
+                // Calculate position in row
+                const rowY = 12 + (row * 12); // Each row is 12px higher
+                const spacing = (320 - (blocksInRow * 48)) / (blocksInRow + 1);
+                const blockX = spacing + ((gameState.blocksInRow[row] || 0) * (48 + spacing));
+                
+                block.style.bottom = `${rowY}px`;
+                block.style.left = `${blockX}px`;
+                
+                document.getElementById('construction-area').appendChild(block);
+                
+                // Update counts
+                gameState.blocksStacked++;
+                gameState.blocksInRow[row] = (gameState.blocksInRow[row] || 0) + 1;
+                
+                // Check if row is complete
+                if (gameState.blocksInRow[row] >= blocksInRow) {
+                    gameState.blocksInRow[row + 1] = 0;
+                }
+                
+                updateUI();
+                
+                // Check for win condition
+                if (gameState.blocksStacked >= 10) {
+                    pauseGame();
+                    pauseTitle.textContent = translations[gameState.language].gameComplete;
+                }
+                
+                // Create particles
+                createParticles(block);
+            } else {
+                // Return to blocks area if no space
+                block.style.position = 'relative';
+                block.style.left = 'auto';
+                block.style.top = 'auto';
+                block.style.zIndex = 'auto';
+                block.style.transform = '';
+                block.style.filter = '';
+                
+                document.getElementById('blocks-area').appendChild(block);
+            }
+}
 // Create particle effects
         function createParticles(element) {
             const rect = element.getBoundingClientRect();
@@ -401,7 +447,6 @@ const languageBtn = document.getElementById('language-btn');
         }
         // Setup event listeners
         function setupEventListeners() {
-            document.addEventListener('mouseup', dropBlock);
 pauseBtn.addEventListener('click', () => {
                 if (gameState.isPaused) {
                     resumeGame();
@@ -454,26 +499,7 @@ pauseBtn.addEventListener('click', () => {
             });
             
             // Keyboard controls
-            document.addEventListener('keydown', (e) => {
-                if (gameState.isPaused) return;
-                
-                if (e.key === 'ArrowLeft') {
-                    gameState.playerPosition = Math.max(0, gameState.playerPosition - 0.05);
-                    player.style.left = `${gameState.playerPosition * 80 + 10}%`;
-                    player.classList.add('player-walk');
-                } else if (e.key === 'ArrowRight') {
-                    gameState.playerPosition = Math.min(1, gameState.playerPosition + 0.05);
-                    player.style.left = `${gameState.playerPosition * 80 + 10}%`;
-                    player.classList.add('player-walk');
-                }
-            });
-            
-            document.addEventListener('keyup', (e) => {
-                if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
-                    player.classList.remove('player-walk');
-                }
-            });
-        }
+}
         
         // Initialize the game
         initGame();