<?xml version='1.0' encoding='UTF-8'?><?xml-stylesheet href="http://www.blogger.com/styles/atom.css" type="text/css"?><feed xmlns='http://www.w3.org/2005/Atom' xmlns:openSearch='http://a9.com/-/spec/opensearchrss/1.0/' xmlns:blogger='http://schemas.google.com/blogger/2008' xmlns:georss='http://www.georss.org/georss' xmlns:gd="http://schemas.google.com/g/2005" xmlns:thr='http://purl.org/syndication/thread/1.0'><id>tag:blogger.com,1999:blog-4254036440232409839</id><updated>2025-12-25T19:43:34.038+05:00</updated><title type='text'>Best articals</title><subtitle type='html'>SEO,forex trading secrets,forex trading for beginners,how to make money,</subtitle><link rel='http://schemas.google.com/g/2005#feed' type='application/atom+xml' href='http://shahabmobile.blogspot.com/feeds/posts/default'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4254036440232409839/posts/default?redirect=false'/><link rel='alternate' type='text/html' href='http://shahabmobile.blogspot.com/'/><link rel='hub' href='http://pubsubhubbub.appspot.com/'/><author><name>abrar</name><uri>http://www.blogger.com/profile/07724441332083438937</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author><generator version='7.00' uri='http://www.blogger.com'>Blogger</generator><openSearch:totalResults>2</openSearch:totalResults><openSearch:startIndex>1</openSearch:startIndex><openSearch:itemsPerPage>25</openSearch:itemsPerPage><entry><id>tag:blogger.com,1999:blog-4254036440232409839.post-1358383926696883212</id><published>2024-07-28T17:39:00.002+05:00</published><updated>2025-04-28T20:05:09.196+05:00</updated><title type='text'>ffdd</title><content type='html'>&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;Garden Bloom - Match 3 Game&lt;/title&gt;
    &lt;script src=&quot;https://cdn.tailwindcss.com&quot;&gt;&lt;/script&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css&quot;&gt;
    &lt;style&gt;
        @import url(&#39;https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&amp;display=swap&#39;);
        
        body {
            font-family: &#39;Poppins&#39;, sans-serif;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            user-select: none;
            touch-action: none;
        }
        
        .game-tile {
            transition: all 0.2s ease;
            cursor: pointer;
            border-radius: 12px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            touch-action: none;
            perspective: 1000px;
            transform-style: preserve-3d;
            position: relative;
        }
        
        .tile-inner {
            position: relative;
            width: 100%;
            height: 100%;
            transform-style: preserve-3d;
            transition: transform 0.6s;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .tile-front, .tile-back {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .tile-back {
            transform: rotateY(180deg);
            background: linear-gradient(145deg, #ffffff, #e6e6e6);
            box-shadow: inset 0 0 10px rgba(0,0,0,0.1);
        }
        
        .game-tile:hover .tile-inner {
            transform: rotateY(20deg) scale(1.05);
        }
        
        .game-tile.selected .tile-inner {
            transform: rotateY(0deg) scale(0.95);
            box-shadow: 0 0 0 3px #fff, 0 0 0 6px #4ade80;
        }
        
        .game-tile.dragging .tile-inner {
            transform: rotateY(30deg) scale(1.1);
            box-shadow: 0 0 15px rgba(0,0,0,0.3);
            z-index: 10;
        }
        
        .game-board {
            background: rgba(255, 255, 255, 0.8);
            border-radius: 16px;
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        }
        
        .score-animation {
            animation: scorePop 0.5s ease-out;
        }
        
        @keyframes scorePop {
            0% { transform: scale(1); opacity: 1; }
            50% { transform: scale(1.5); opacity: 0.8; }
            100% { transform: scale(1); opacity: 0; }
        }
        
        .tile-remove {
            animation: tileRemove 0.3s ease-out forwards;
        }
        
        @keyframes tileRemove {
            0% { transform: scale(1); opacity: 1; }
            100% { transform: scale(0); opacity: 0; }
        }
        
        .hint-pulse {
            animation: hintPulse 1s infinite;
        }
        
        @keyframes hintPulse {
            0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 255, 0, 0.7); }
            70% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(255, 255, 0, 0); }
            100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 255, 0, 0); }
        }
        
        .combo-pop {
            animation: comboPop 0.5s ease-out;
        }
        
        @keyframes comboPop {
            0% { transform: scale(1); opacity: 1; }
            50% { transform: scale(1.5); opacity: 1; }
            100% { transform: scale(1); opacity: 0; }
        }
        
        .tile-shadow {
            position: absolute;
            bottom: -5px;
            left: 0;
            right: 0;
            height: 10px;
            background: rgba(0,0,0,0.2);
            border-radius: 50%;
            filter: blur(5px);
            transform: scale(0.9);
            z-index: -1;
        }
        
        .container {
            display: flex;
            gap: 20px;
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .stats-panel {
            width: 200px;
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
        
        .main-content {
            flex-grow: 1;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body class=&quot;min-h-screen flex items-center justify-center p-4&quot;&gt;
    &lt;div class=&quot;container&quot;&gt;
        &lt;!-- Left Stats Panel --&gt;
        &lt;div class=&quot;stats-panel&quot;&gt;
            &lt;div class=&quot;bg-white rounded-xl shadow-md p-4 flex flex-col items-center&quot;&gt;
                &lt;div class=&quot;flex items-center mb-4&quot;&gt;
                    &lt;i class=&quot;fas fa-leaf text-green-500 text-2xl mr-2&quot;&gt;&lt;/i&gt;
                    &lt;h1 class=&quot;text-xl font-bold text-gray-800&quot;&gt;Garden Bloom&lt;/h1&gt;
                &lt;/div&gt;
                &lt;button id=&quot;sound-btn&quot; class=&quot;bg-white p-2 rounded-full shadow-md text-gray-700 mb-4&quot;&gt;
                    &lt;i class=&quot;fas fa-volume-up&quot;&gt;&lt;/i&gt;
                &lt;/button&gt;
            &lt;/div&gt;
            
            &lt;div class=&quot;bg-white rounded-xl shadow-md p-4&quot;&gt;
                &lt;p class=&quot;text-sm text-gray-500 mb-2&quot;&gt;Level&lt;/p&gt;
                &lt;p class=&quot;text-xl font-bold text-green-600 text-center&quot;&gt;1&lt;/p&gt;
            &lt;/div&gt;
            
            &lt;div class=&quot;bg-white rounded-xl shadow-md p-4&quot;&gt;
                &lt;p class=&quot;text-sm text-gray-500 mb-2&quot;&gt;Moves&lt;/p&gt;
                &lt;p id=&quot;moves&quot; class=&quot;text-xl font-bold text-blue-600 text-center&quot;&gt;20&lt;/p&gt;
            &lt;/div&gt;
            
            &lt;div class=&quot;bg-white rounded-xl shadow-md p-4&quot;&gt;
                &lt;p class=&quot;text-sm text-gray-500 mb-2&quot;&gt;Score&lt;/p&gt;
                &lt;p id=&quot;score&quot; class=&quot;text-xl font-bold text-purple-600 text-center&quot;&gt;0&lt;/p&gt;
            &lt;/div&gt;
            
            &lt;div class=&quot;bg-white rounded-xl shadow-md p-4&quot;&gt;
                &lt;p class=&quot;text-sm text-gray-500 mb-2&quot;&gt;Target&lt;/p&gt;
                &lt;div class=&quot;flex items-center justify-center&quot;&gt;
                    &lt;div class=&quot;w-8 h-8 rounded-lg bg-red-400 flex items-center justify-center mr-2&quot;&gt;
                        &lt;i class=&quot;fas fa-apple-alt text-white text-sm&quot;&gt;&lt;/i&gt;
                    &lt;/div&gt;
                    &lt;span id=&quot;target-count&quot; class=&quot;font-bold&quot;&gt;0/20&lt;/span&gt;
                &lt;/div&gt;
            &lt;/div&gt;
            
            &lt;div class=&quot;flex flex-col gap-2 mt-auto&quot;&gt;
                &lt;button id=&quot;hint-btn&quot; class=&quot;bg-yellow-400 hover:bg-yellow-500 text-white font-bold py-2 px-4 rounded-full flex items-center justify-center&quot;&gt;
                    &lt;i class=&quot;fas fa-lightbulb mr-2&quot;&gt;&lt;/i&gt;
                    &lt;span&gt;Hint&lt;/span&gt;
                &lt;/button&gt;
                &lt;button id=&quot;restart-btn&quot; class=&quot;bg-red-400 hover:bg-red-500 text-white font-bold py-2 px-4 rounded-full flex items-center justify-center&quot;&gt;
                    &lt;i class=&quot;fas fa-redo mr-2&quot;&gt;&lt;/i&gt;
                    &lt;span&gt;Restart&lt;/span&gt;
                &lt;/button&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        
        &lt;!-- Main Game Content --&gt;
        &lt;div class=&quot;main-content&quot;&gt;
            &lt;!-- Game Board --&gt;
            &lt;div class=&quot;game-board p-4&quot;&gt;
                &lt;div id=&quot;board&quot; class=&quot;grid grid-cols-8 gap-2&quot;&gt;&lt;/div&gt;
            &lt;/div&gt;
            
            &lt;!-- Combo Display --&gt;
            &lt;div id=&quot;combo-display&quot; class=&quot;fixed top-10 left-0 right-0 flex justify-center hidden&quot;&gt;
                &lt;div class=&quot;bg-yellow-400 text-white font-bold py-2 px-4 rounded-full shadow-lg combo-pop&quot;&gt;
                    &lt;span id=&quot;combo-text&quot;&gt;3x COMBO!&lt;/span&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        
        &lt;!-- Right Stats Panel --&gt;
        &lt;div class=&quot;stats-panel&quot;&gt;
            &lt;div class=&quot;bg-white rounded-xl shadow-md p-4&quot;&gt;
                &lt;p class=&quot;text-sm text-gray-500 mb-2&quot;&gt;Time&lt;/p&gt;
                &lt;div class=&quot;flex items-center justify-center&quot;&gt;
                    &lt;i class=&quot;far fa-clock mr-1 text-gray-500&quot;&gt;&lt;/i&gt;
                    &lt;span id=&quot;timer&quot; class=&quot;font-bold&quot;&gt;00:00&lt;/span&gt;
                &lt;/div&gt;
            &lt;/div&gt;
            
            &lt;div class=&quot;bg-white rounded-xl shadow-md p-4&quot;&gt;
                &lt;p class=&quot;text-sm text-gray-500 mb-2&quot;&gt;Combo&lt;/p&gt;
                &lt;p id=&quot;combo-count&quot; class=&quot;text-xl font-bold text-yellow-600 text-center&quot;&gt;0&lt;/p&gt;
            &lt;/div&gt;
            
            &lt;div class=&quot;bg-white rounded-xl shadow-md p-4&quot;&gt;
                &lt;p class=&quot;text-sm text-gray-500 mb-2&quot;&gt;Best Score&lt;/p&gt;
                &lt;p id=&quot;best-score&quot; class=&quot;text-xl font-bold text-purple-600 text-center&quot;&gt;0&lt;/p&gt;
            &lt;/div&gt;
            
            &lt;div class=&quot;bg-white rounded-xl shadow-md p-4&quot;&gt;
                &lt;p class=&quot;text-sm text-gray-500 mb-2&quot;&gt;Next Goal&lt;/p&gt;
                &lt;div class=&quot;flex items-center justify-center&quot;&gt;
                    &lt;div class=&quot;w-8 h-8 rounded-lg bg-purple-400 flex items-center justify-center mr-2&quot;&gt;
                        &lt;i class=&quot;fas fa-trophy text-white text-sm&quot;&gt;&lt;/i&gt;
                    &lt;/div&gt;
                    &lt;span class=&quot;font-bold&quot;&gt;500&lt;/span&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;

    &lt;!-- Game Over Modal --&gt;
    &lt;div id=&quot;game-over-modal&quot; class=&quot;fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden&quot;&gt;
        &lt;div class=&quot;bg-white rounded-xl p-6 max-w-sm w-full text-center&quot;&gt;
            &lt;h2 class=&quot;text-2xl font-bold text-gray-800 mb-4&quot; id=&quot;game-over-title&quot;&gt;Game Over!&lt;/h2&gt;
            &lt;p class=&quot;text-gray-600 mb-2&quot;&gt;You&#39;ve completed the level with&lt;/p&gt;
            &lt;p class=&quot;text-3xl font-bold text-purple-600 mb-4&quot; id=&quot;final-score&quot;&gt;0&lt;/p&gt;
            &lt;div class=&quot;flex flex-col space-y-4&quot;&gt;
                &lt;button id=&quot;play-again-btn&quot; class=&quot;bg-green-500 hover:bg-green-600 text-white font-bold py-3 px-6 rounded-full&quot;&gt;
                    Play Again
                &lt;/button&gt;
                &lt;button id=&quot;next-level-btn&quot; class=&quot;bg-blue-500 hover:bg-blue-600 text-white font-bold py-3 px-6 rounded-full&quot;&gt;
                    Next Level
                &lt;/button&gt;
                &lt;button id=&quot;close-modal-btn&quot; class=&quot;bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-3 px-6 rounded-full&quot;&gt;
                    Close
                &lt;/button&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;

    &lt;!-- Audio elements for sound effects --&gt;
    &lt;audio id=&quot;swap-sound&quot; src=&quot;https://assets.mixkit.co/sfx/preview/mixkit-game-click-1114.mp3&quot;&gt;&lt;/audio&gt;
    &lt;audio id=&quot;match-sound&quot; src=&quot;https://assets.mixkit.co/sfx/preview/mixkit-positive-interface-beep-221.mp3&quot;&gt;&lt;/audio&gt;
    &lt;audio id=&quot;no-match-sound&quot; src=&quot;https://assets.mixkit.co/sfx/preview/mixkit-arcade-retro-game-over-213.mp3&quot;&gt;&lt;/audio&gt;
    &lt;audio id=&quot;win-sound&quot; src=&quot;https://assets.mixkit.co/sfx/preview/mixkit-winning-chimes-2015.mp3&quot;&gt;&lt;/audio&gt;
    &lt;audio id=&quot;lose-sound&quot; src=&quot;https://assets.mixkit.co/sfx/preview/mixkit-retro-arcade-lose-2027.mp3&quot;&gt;&lt;/audio&gt;
    &lt;audio id=&quot;select-sound&quot; src=&quot;https://assets.mixkit.co/sfx/preview/mixkit-select-click-1109.mp3&quot;&gt;&lt;/audio&gt;
    &lt;audio id=&quot;hint-sound&quot; src=&quot;https://assets.mixkit.co/sfx/preview/mixkit-quick-jump-arcade-game-239.mp3&quot;&gt;&lt;/audio&gt;
    &lt;audio id=&quot;no-hint-sound&quot; src=&quot;https://assets.mixkit.co/sfx/preview/mixkit-software-interface-remove-2578.mp3&quot;&gt;&lt;/audio&gt;
    &lt;audio id=&quot;combo-sound&quot; src=&quot;https://assets.mixkit.co/sfx/preview/mixkit-achievement-bell-600.mp3&quot;&gt;&lt;/audio&gt;
    &lt;audio id=&quot;tile-drop-sound&quot; src=&quot;https://assets.mixkit.co/sfx/preview/mixkit-arcade-game-jump-coin-216.mp3&quot;&gt;&lt;/audio&gt;
    &lt;audio id=&quot;level-complete-sound&quot; src=&quot;https://assets.mixkit.co/sfx/preview/mixkit-unlock-game-notification-253.mp3&quot;&gt;&lt;/audio&gt;
    &lt;audio id=&quot;tile-match-sound&quot; src=&quot;https://assets.mixkit.co/sfx/preview/mixkit-bonus-earned-2065.mp3&quot;&gt;&lt;/audio&gt;

    &lt;script&gt;
        document.addEventListener(&#39;DOMContentLoaded&#39;, () =&gt; {
            // Game configuration
            const config = {
                rows: 8,
                cols: 8,
                tileTypes: [&#39;flower&#39;, &#39;leaf&#39;, &#39;apple&#39;, &#39;berry&#39;, &#39;sun&#39;],
                targetTile: &#39;apple&#39;,
                targetCount: 20,
                moves: 20,
                soundEnabled: true,
                level: 1,
                bestScore: localStorage.getItem(&#39;bestScore&#39;) || 0
            };
            
            // Game state
            let state = {
                board: [],
                selectedTile: null,
                score: 0,
                remainingMoves: config.moves,
                targetCollected: 0,
                isAnimating: false,
                isDragging: false,
                dragStartTile: null,
                dragEndTile: null,
                comboCount: 0,
                timer: 0,
                timerInterval: null,
                matchedTiles: []
            };
            
            // DOM elements
            const boardElement = document.getElementById(&#39;board&#39;);
            const scoreElement = document.getElementById(&#39;score&#39;);
            const movesElement = document.getElementById(&#39;moves&#39;);
            const targetCountElement = document.getElementById(&#39;target-count&#39;);
            const soundButton = document.getElementById(&#39;sound-btn&#39;);
            const hintButton = document.getElementById(&#39;hint-btn&#39;);
            const restartButton = document.getElementById(&#39;restart-btn&#39;);
            const gameOverModal = document.getElementById(&#39;game-over-modal&#39;);
            const playAgainButton = document.getElementById(&#39;play-again-btn&#39;);
            const nextLevelButton = document.getElementById(&#39;next-level-btn&#39;);
            const closeModalButton = document.getElementById(&#39;close-modal-btn&#39;);
            const finalScoreElement = document.getElementById(&#39;final-score&#39;);
            const gameOverTitle = document.getElementById(&#39;game-over-title&#39;);
            const comboDisplay = document.getElementById(&#39;combo-display&#39;);
            const comboText = document.getElementById(&#39;combo-text&#39;);
            const comboCountElement = document.getElementById(&#39;combo-count&#39;);
            const bestScoreElement = document.getElementById(&#39;best-score&#39;);
            const timerElement = document.getElementById(&#39;timer&#39;);
            
            // Sound elements
            const swapSound = document.getElementById(&#39;swap-sound&#39;);
            const matchSound = document.getElementById(&#39;match-sound&#39;);
            const noMatchSound = document.getElementById(&#39;no-match-sound&#39;);
            const winSound = document.getElementById(&#39;win-sound&#39;);
            const loseSound = document.getElementById(&#39;lose-sound&#39;);
            const selectSound = document.getElementById(&#39;select-sound&#39;);
            const hintSound = document.getElementById(&#39;hint-sound&#39;);
            const noHintSound = document.getElementById(&#39;no-hint-sound&#39;);
            const comboSound = document.getElementById(&#39;combo-sound&#39;);
            const tileDropSound = document.getElementById(&#39;tile-drop-sound&#39;);
            const levelCompleteSound = document.getElementById(&#39;level-complete-sound&#39;);
            const tileMatchSound = document.getElementById(&#39;tile-match-sound&#39;);
            
            // Initialize the game
            function initGame() {
                clearInterval(state.timerInterval);
                
                state = {
                    board: [],
                    selectedTile: null,
                    score: 0,
                    remainingMoves: config.moves,
                    targetCollected: 0,
                    isAnimating: false,
                    isDragging: false,
                    dragStartTile: null,
                    dragEndTile: null,
                    comboCount: 0,
                    timer: 0,
                    timerInterval: null,
                    matchedTiles: []
                };
                
                createBoard();
                renderBoard();
                updateUI();
                startTimer();
                
                // Hide game over modal if shown
                gameOverModal.classList.add(&#39;hidden&#39;);
                comboDisplay.classList.add(&#39;hidden&#39;);
                
                // Update best score
                bestScoreElement.textContent = config.bestScore;
            }
            
            // Start game timer
            function startTimer() {
                clearInterval(state.timerInterval);
                state.timer = 0;
                updateTimerDisplay();
                
                state.timerInterval = setInterval(() =&gt; {
                    state.timer++;
                    updateTimerDisplay();
                }, 1000);
            }
            
            // Update timer display
            function updateTimerDisplay() {
                const minutes = Math.floor(state.timer / 60);
                const seconds = state.timer % 60;
                timerElement.textContent = `${minutes.toString().padStart(2, &#39;0&#39;)}:${seconds.toString().padStart(2, &#39;0&#39;)}`;
            }
            
            // Create the game board
            function createBoard() {
                state.board = [];
                
                for (let row = 0; row &lt; config.rows; row++) {
                    state.board[row] = [];
                    for (let col = 0; col &lt; config.cols; col++) {
                        state.board[row][col] = getRandomTileType();
                    }
                }
                
                // Make sure there are no matches at the start
                while (checkForMatches()) {
                    removeMatches();
                    fillEmptyTiles();
                }
            }
            
            // Get a random tile type
            function getRandomTileType() {
                return config.tileTypes[Math.floor(Math.random() * config.tileTypes.length)];
            }
            
            // Render the game board
            function renderBoard() {
                boardElement.innerHTML = &#39;&#39;;
                boardElement.style.gridTemplateColumns = `repeat(${config.cols}, 1fr)`;
                
                for (let row = 0; row &lt; config.rows; row++) {
                    for (let col = 0; col &lt; config.cols; col++) {
                        const tile = state.board[row][col];
                        if (!tile) continue;
                        
                        const tileElement = document.createElement(&#39;div&#39;);
                        tileElement.className = `game-tile w-full h-12`;
                        tileElement.dataset.row = row;
                        tileElement.dataset.col = col;
                        
                        // Set tile color and icon based on type
                        let bgColor, icon;
                        switch (tile) {
                            case &#39;flower&#39;:
                                bgColor = &#39;bg-gradient-to-br from-pink-400 to-pink-600&#39;;
                                icon = &#39;fa-spa&#39;;
                                break;
                            case &#39;leaf&#39;:
                                bgColor = &#39;bg-gradient-to-br from-green-400 to-green-600&#39;;
                                icon = &#39;fa-leaf&#39;;
                                break;
                            case &#39;apple&#39;:
                                bgColor = &#39;bg-gradient-to-br from-red-400 to-red-600&#39;;
                                icon = &#39;fa-apple-alt&#39;;
                                break;
                            case &#39;berry&#39;:
                                bgColor = &#39;bg-gradient-to-br from-purple-400 to-purple-600&#39;;
                                icon = &#39;fa-wine-bottle&#39;;
                                break;
                            case &#39;sun&#39;:
                                bgColor = &#39;bg-gradient-to-br from-yellow-400 to-yellow-600&#39;;
                                icon = &#39;fa-sun&#39;;
                                break;
                        }
                        
                        tileElement.innerHTML = `
                            &lt;div class=&quot;tile-inner&quot;&gt;
                                &lt;div class=&quot;tile-front ${bgColor} rounded-lg flex items-center justify-center&quot;&gt;
                                    &lt;i class=&quot;fas ${icon} text-white text-xl&quot;&gt;&lt;/i&gt;
                                &lt;/div&gt;
                                &lt;div class=&quot;tile-back&quot;&gt;&lt;/div&gt;
                                &lt;div class=&quot;tile-shadow&quot;&gt;&lt;/div&gt;
                            &lt;/div&gt;
                        `;
                        
                        // Add event listeners for drag functionality
                        tileElement.addEventListener(&#39;mousedown&#39;, (e) =&gt; handleTileMouseDown(e, row, col, tileElement));
                        tileElement.addEventListener(&#39;touchstart&#39;, (e) =&gt; handleTileTouchStart(e, row, col, tileElement));
                        tileElement.addEventListener(&#39;click&#39;, () =&gt; handleTileClick(row, col, tileElement));
                        
                        boardElement.appendChild(tileElement);
                    }
                }
            }
            
            // Handle tile mouse down (start of drag)
            function handleTileMouseDown(e, row, col, tileElement) {
                if (state.isAnimating || state.remainingMoves &lt;= 0) return;
                
                e.preventDefault();
                state.isDragging = true;
                state.dragStartTile = { row, col, element: tileElement };
                tileElement.classList.add(&#39;dragging&#39;);
                
                document.addEventListener(&#39;mousemove&#39;, handleDragMove);
                document.addEventListener(&#39;mouseup&#39;, handleDragEnd);
            }
            
            // Handle tile touch start (mobile)
            function handleTileTouchStart(e, row, col, tileElement) {
                if (state.isAnimating || state.remainingMoves &lt;= 0) return;
                
                e.preventDefault();
                state.isDragging = true;
                state.dragStartTile = { row, col, element: tileElement };
                tileElement.classList.add(&#39;dragging&#39;);
                
                document.addEventListener(&#39;touchmove&#39;, handleDragMove, { passive: false });
                document.addEventListener(&#39;touchend&#39;, handleDragEnd);
            }
            
            // Handle drag movement
            function handleDragMove(e) {
                if (!state.isDragging || !state.dragStartTile) return;
                
                e.preventDefault();
                
                // Get current position
                let clientX, clientY;
                if (e.type === &#39;mousemove&#39;) {
                    clientX = e.clientX;
                    clientY = e.clientY;
                } else if (e.type === &#39;touchmove&#39;) {
                    clientX = e.touches[0].clientX;
                    clientY = e.touches[0].clientY;
                }
                
                // Find the tile we&#39;re hovering over
                const elementUnderMouse = document.elementFromPoint(clientX, clientY);
                if (elementUnderMouse &amp;&amp; elementUnderMouse.classList.contains(&#39;game-tile&#39;)) {
                    const row = parseInt(elementUnderMouse.dataset.row);
                    const col = parseInt(elementUnderMouse.dataset.col);
                    
                    // Check if it&#39;s adjacent to the start tile
                    const start = state.dragStartTile;
                    const isAdjacent = 
                        (Math.abs(start.row - row) === 1 &amp;&amp; start.col === col) ||
                        (Math.abs(start.col - col) === 1 &amp;&amp; start.row === row);
                    
                    if (isAdjacent &amp;&amp; (!state.dragEndTile || state.dragEndTile.row !== row || state.dragEndTile.col !== col)) {
                        // Remove highlight from previous end tile
                        if (state.dragEndTile) {
                            state.dragEndTile.element.classList.remove(&#39;selected&#39;);
                        }
                        
                        // Highlight new end tile
                        state.dragEndTile = { row, col, element: elementUnderMouse };
                        elementUnderMouse.classList.add(&#39;selected&#39;);
                    }
                }
            }
            
            // Handle drag end
            function handleDragEnd(e) {
                if (!state.isDragging || !state.dragStartTile) return;
                
                e.preventDefault();
                
                // Clean up event listeners
                document.removeEventListener(&#39;mousemove&#39;, handleDragMove);
                document.removeEventListener(&#39;mouseup&#39;, handleDragEnd);
                document.removeEventListener(&#39;touchmove&#39;, handleDragMove);
                document.removeEventListener(&#39;touchend&#39;, handleDragEnd);
                
                // Remove drag classes
                state.dragStartTile.element.classList.remove(&#39;dragging&#39;);
                if (state.dragEndTile) {
                    state.dragEndTile.element.classList.remove(&#39;selected&#39;);
                }
                
                // If we have an end tile, attempt to swap
                if (state.dragEndTile) {
                    const start = state.dragStartTile;
                    const end = state.dragEndTile;
                    
                    // Swap tiles
                    attemptSwap(start.row, start.col, end.row, end.col);
                }
                
                // Reset drag state
                state.isDragging = false;
                state.dragStartTile = null;
                state.dragEndTile = null;
            }
            
            // Handle tile click
            function handleTileClick(row, col, tileElement) {
                if (state.isAnimating || state.remainingMoves &lt;= 0 || state.isDragging) return;
                
                // If no tile is selected, select this one
                if (!state.selectedTile) {
                    state.selectedTile = { row, col };
                    tileElement.classList.add(&#39;selected&#39;);
                    playSound(&#39;select&#39;);
                    return;
                }
                
                // If clicking the same tile, deselect it
                if (state.selectedTile.row === row &amp;&amp; state.selectedTile.col === col) {
                    state.selectedTile = null;
                    tileElement.classList.remove(&#39;selected&#39;);
                    return;
                }
                
                // Check if tiles are adjacent
                const selected = state.selectedTile;
                const isAdjacent = 
                    (Math.abs(selected.row - row) === 1 &amp;&amp; selected.col === col) ||
                    (Math.abs(selected.col - col) === 1 &amp;&amp; selected.row === row);
                
                if (!isAdjacent) {
                    // Not adjacent, select the new tile instead
                    document.querySelector(&#39;.game-tile.selected&#39;)?.classList.remove(&#39;selected&#39;);
                    state.selectedTile = { row, col };
                    tileElement.classList.add(&#39;selected&#39;);
                    playSound(&#39;select&#39;);
                    return;
                }
                
                // Swap tiles
                attemptSwap(selected.row, selected.col, row, col);
            }
            
            // Attempt to swap two tiles
            function attemptSwap(row1, col1, row2, col2) {
                if (state.isAnimating) return;
                
                state.isAnimating = true;
                playSound(&#39;swap&#39;);
                
                // Remove selection
                document.querySelector(&#39;.game-tile.selected&#39;)?.classList.remove(&#39;selected&#39;);
                state.selectedTile = null;
                
                // Swap tiles in the board
                const temp = state.board[row1][col1];
                state.board[row1][col1] = state.board[row2][col2];
                state.board[row2][col2] = temp;
                
                // Re-render the board to show the swap
                renderBoard();
                
                // Check for matches after swap
                setTimeout(() =&gt; {
                    const matchesFound = checkForMatches();
                    
                    if (matchesFound) {
                        removeMatches();
                        state.remainingMoves--;
                        updateUI();
                        
                        // Continue processing matches until none left
                        setTimeout(processMatches, 500);
                    } else {
                        // No matches, swap back
                        playSound(&#39;no-match&#39;);
                        const temp = state.board[row1][col1];
                        state.board[row1][col1] = state.board[row2][col2];
                        state.board[row2][col2] = temp;
                        
                        renderBoard();
                        state.isAnimating = false;
                    }
                }, 300);
            }
            
            // Check for matches on the board (3,4,5,6 in a row or column)
            function checkForMatches() {
                state.matchedTiles = [];
                
                // Check horizontal matches
                for (let row = 0; row &lt; config.rows; row++) {
                    for (let col = 0; col &lt; config.cols - 2; col++) {
                        const tile = state.board[row][col];
                        if (!tile) continue;
                        
                        // Check for matches of 3 or more
                        let matchLength = 1;
                        while (col + matchLength &lt; config.cols &amp;&amp; state.board[row][col + matchLength] === tile) {
                            matchLength++;
                        }
                        
                        if (matchLength &gt;= 3) {
                            // Add all matched tiles to the array
                            for (let i = 0; i &lt; matchLength; i++) {
                                state.matchedTiles.push({ row, col: col + i });
                            }
                        }
                    }
                }
                
                // Check vertical matches
                for (let col = 0; col &lt; config.cols; col++) {
                    for (let row = 0; row &lt; config.rows - 2; row++) {
                        const tile = state.board[row][col];
                        if (!tile) continue;
                        
                        // Check for matches of 3 or more
                        let matchLength = 1;
                        while (row + matchLength &lt; config.rows &amp;&amp; state.board[row + matchLength][col] === tile) {
                            matchLength++;
                        }
                        
                        if (matchLength &gt;= 3) {
                            // Add all matched tiles to the array
                            for (let i = 0; i &lt; matchLength; i++) {
                                state.matchedTiles.push({ row: row + i, col });
                            }
                        }
                    }
                }
                
                // Remove duplicates (tiles that are part of multiple matches)
                const uniqueMatchedTiles = [];
                const seen = new Set();
                
                for (const tile of state.matchedTiles) {
                    const key = `${tile.row},${tile.col}`;
                    if (!seen.has(key)) {
                        seen.add(key);
                        uniqueMatchedTiles.push(tile);
                    }
                }
                
                state.matchedTiles = uniqueMatchedTiles;
                return state.matchedTiles.length &gt; 0;
            }
            
            // Remove matched tiles from the board (3,4,5,6 in a row or column)
            function removeMatches() {
                if (state.matchedTiles.length === 0) return false;
                
                // Group matches by type to calculate combo
                const matchesByType = {};
                for (const tile of state.matchedTiles) {
                    const tileType = state.board[tile.row][tile.col];
                    if (!matchesByType[tileType]) {
                        matchesByType[tileType] = [];
                    }
                    matchesByType[tileType].push(tile);
                }
                
                // Process each type of match
                for (const tileType in matchesByType) {
                    const tiles = matchesByType[tileType];
                    const matchSize = tiles.length;
                    
                    // Calculate points based on match size
                    let points = tileType === config.targetTile ? 20 : 10;
                    
                    // Bonus for larger matches
                    if (matchSize &gt;= 4) {
                        points *= 2; // Double points for matches of 4 or more
                        showCombo(4);
                    }
                    if (matchSize &gt;= 5) {
                        points *= 3; // Triple points for matches of 5 or more
                        showCombo(5);
                    }
                    if (matchSize &gt;= 6) {
                        points *= 4; // Quadruple points for matches of 6 or more
                        showCombo(6);
                    }
                    
                    // Combo multiplier
                    if (state.comboCount &gt; 0) {
                        points *= (1 + state.comboCount * 0.2);
                    }
                    
                    state.score += Math.round(points);
                    
                    // Update target count if it&#39;s the target tile
                    if (tileType === config.targetTile) {
                        state.targetCollected += tiles.length;
                    }
                    
                    // Remove the tiles
                    for (const tile of tiles) {
                        state.board[tile.row][tile.col] = null;
                        
                        // Show score animation
                        const tileElement = document.querySelector(`.game-tile[data-row=&quot;${tile.row}&quot;][data-col=&quot;${tile.col}&quot;]`);
                        if (tileElement) {
                            const scorePopup = document.createElement(&#39;div&#39;);
                            scorePopup.className = `absolute score-animation font-bold ${tileType === config.targetTile ? &#39;text-red-500&#39; : &#39;text-white&#39;}`;
                            scorePopup.textContent = `+${Math.round(points / tiles.length)}`;
                            tileElement.appendChild(scorePopup);
                            
                            setTimeout(() =&gt; {
                                scorePopup.remove();
                            }, 500);
                        }
                    }
                    
                    playSound(&#39;tile-match&#39;);
                }
                
                return true;
            }
            
            // Show combo notification for larger matches
            function showCombo(size) {
                state.comboCount++;
                comboText.textContent = `${size}x COMBO!`;
                comboCountElement.textContent = state.comboCount;
                comboDisplay.classList.remove(&#39;hidden&#39;);
                playSound(&#39;combo&#39;);
                
                setTimeout(() =&gt; {
                    comboDisplay.classList.add(&#39;hidden&#39;);
                }, 1000);
            }
            
            // Fill empty tiles after matches
            function fillEmptyTiles() {
                let tilesDropped = 0;
                
                for (let col = 0; col &lt; config.cols; col++) {
                    let emptyRow = config.rows - 1;
                    
                    // Move tiles down to fill empty spaces
                    for (let row = config.rows - 1; row &gt;= 0; row--) {
                        if (state.board[row][col] !== null) {
                            state.board[emptyRow][col] = state.board[row][col];
                            if (emptyRow !== row) {
                                state.board[row][col] = null;
                                tilesDropped++;
                            }
                            emptyRow--;
                        }
                    }
                    
                    // Fill remaining empty spaces with new tiles
                    for (let row = emptyRow; row &gt;= 0; row--) {
                        state.board[row][col] = getRandomTileType();
                        tilesDropped++;
                    }
                }
                
                if (tilesDropped &gt; 0) {
                    playSound(&#39;tile-drop&#39;);
                }
                
                renderBoard();
            }
            
            // Process matches until no more are found
            function processMatches() {
                if (checkForMatches()) {
                    removeMatches();
                    setTimeout(() =&gt; {
                        fillEmptyTiles();
                        updateUI();
                        
                        // Check if target has been reached
                        if (state.targetCollected &gt;= config.targetCount) {
                            endGame(true);
                            return;
                        }
                        
                        // Check if moves are exhausted
                        if (state.remainingMoves &lt;= 0) {
                            endGame(false);
                            return;
                        }
                        
                        // Continue processing matches
                        setTimeout(processMatches, 500);
                    }, 500);
                } else {
                    state.comboCount = 0;
                    comboCountElement.textContent = &#39;0&#39;;
                    state.isAnimating = false;
                    
                    // Check if moves are exhausted
                    if (state.remainingMoves &lt;= 0) {
                        endGame(false);
                    }
                }
            }
            
            // Update the UI with current game state
            function updateUI() {
                scoreElement.textContent = state.score;
                movesElement.textContent = state.remainingMoves;
                targetCountElement.textContent = `${state.targetCollected}/${config.targetCount}`;
                
                // Update best score if current score is higher
                if (state.score &gt; config.bestScore) {
                    config.bestScore = state.score;
                    bestScoreElement.textContent = config.bestScore;
                    localStorage.setItem(&#39;bestScore&#39;, config.bestScore);
                }
            }
            
            // End the game
            function endGame(success) {
                clearInterval(state.timerInterval);
                
                if (success) {
                    gameOverTitle.textContent = &quot;Level Complete!&quot;;
                    playSound(&#39;level-complete&#39;);
                } else {
                    gameOverTitle.textContent = state.targetCollected &gt;= config.targetCount ? 
                        &quot;Level Complete!&quot; : &quot;Game Over!&quot;;
                    playSound(state.targetCollected &gt;= config.targetCount ? &#39;level-complete&#39; : &#39;lose&#39;);
                }
                
                finalScoreElement.textContent = state.score;
                gameOverModal.classList.remove(&#39;hidden&#39;);
                
                // Show/hide next level button based on success
                if (success) {
                    nextLevelButton.classList.remove(&#39;hidden&#39;);
                } else {
                    nextLevelButton.classList.add(&#39;hidden&#39;);
                }
            }
            
            // Play sound effect
            function playSound(type) {
                if (!config.soundEnabled) return;
                
                switch (type) {
                    case &#39;swap&#39;:
                        swapSound.currentTime = 0;
                        swapSound.play();
                        break;
                    case &#39;match&#39;:
                        matchSound.currentTime = 0;
                        matchSound.play();
                        break;
                    case &#39;no-match&#39;:
                        noMatchSound.currentTime = 0;
                        noMatchSound.play();
                        break;
                    case &#39;win&#39;:
                        winSound.currentTime = 0;
                        winSound.play();
                        break;
                    case &#39;lose&#39;:
                        loseSound.currentTime = 0;
                        loseSound.play();
                        break;
                    case &#39;select&#39;:
                        selectSound.currentTime = 0;
                        selectSound.play();
                        break;
                    case &#39;hint&#39;:
                        hintSound.currentTime = 0;
                        hintSound.play();
                        break;
                    case &#39;no-hint&#39;:
                        noHintSound.currentTime = 0;
                        noHintSound.play();
                        break;
                    case &#39;combo&#39;:
                        comboSound.currentTime = 0;
                        comboSound.play();
                        break;
                    case &#39;tile-drop&#39;:
                        tileDropSound.currentTime = 0;
                        tileDropSound.play();
                        break;
                    case &#39;level-complete&#39;:
                        levelCompleteSound.currentTime = 0;
                        levelCompleteSound.play();
                        break;
                    case &#39;tile-match&#39;:
                        tileMatchSound.currentTime = 0;
                        tileMatchSound.play();
                        break;
                }
            }
            
            // Toggle sound
            soundButton.addEventListener(&#39;click&#39;, () =&gt; {
                config.soundEnabled = !config.soundEnabled;
                soundButton.innerHTML = config.soundEnabled 
                    ? &#39;&lt;i class=&quot;fas fa-volume-up&quot;&gt;&lt;/i&gt;&#39; 
                    : &#39;&lt;i class=&quot;fas fa-volume-mute&quot;&gt;&lt;/i&gt;&#39;;
            });
            
            // Hint button - shows a possible move
            hintButton.addEventListener(&#39;click&#39;, () =&gt; {
                if (state.isAnimating || state.remainingMoves &lt;= 0) return;
                
                // Find all possible moves
                const possibleMoves = [];
                
                // Check horizontal swaps
                for (let row = 0; row &lt; config.rows; row++) {
                    for (let col = 0; col &lt; config.cols - 1; col++) {
                        // Try swapping with right neighbor
                        const temp = state.board[row][col];
                        state.board[row][col] = state.board[row][col + 1];
                        state.board[row][col + 1] = temp;
                        
                        if (checkForMatches()) {
                            possibleMoves.push({
                                row1: row,
                                col1: col,
                                row2: row,
                                col2: col + 1
                            });
                        }
                        
                        // Swap back
                        state.board[row][col + 1] = state.board[row][col];
                        state.board[row][col] = temp;
                    }
                }
                
                // Check vertical swaps
                for (let col = 0; col &lt; config.cols; col++) {
                    for (let row = 0; row &lt; config.rows - 1; row++) {
                        // Try swapping with bottom neighbor
                        const temp = state.board[row][col];
                        state.board[row][col] = state.board[row + 1][col];
                        state.board[row + 1][col] = temp;
                        
                        if (checkForMatches()) {
                            possibleMoves.push({
                                row1: row,
                                col1: col,
                                row2: row + 1,
                                col2: col
                            });
                        }
                        
                        // Swap back
                        state.board[row + 1][col] = state.board[row][col];
                        state.board[row][col] = temp;
                    }
                }
                
                if (possibleMoves.length &gt; 0) {
                    playSound(&#39;hint&#39;);
                    
                    // Pick a random possible move
                    const move = possibleMoves[Math.floor(Math.random() * possibleMoves.length)];
                    
                    // Highlight the tiles
                    const tile1 = document.querySelector(`.game-tile[data-row=&quot;${move.row1}&quot;][data-col=&quot;${move.col1}&quot;]`);
                    const tile2 = document.querySelector(`.game-tile[data-row=&quot;${move.row2}&quot;][data-col=&quot;${move.col2}&quot;]`);
                    
                    if (tile1 &amp;&amp; tile2) {
                        tile1.classList.add(&#39;hint-pulse&#39;);
                        tile2.classList.add(&#39;hint-pulse&#39;);
                        
                        setTimeout(() =&gt; {
                            tile1.classList.remove(&#39;hint-pulse&#39;);
                            tile2.classList.remove(&#39;hint-pulse&#39;);
                        }, 1000);
                    }
                } else {
                    playSound(&#39;no-hint&#39;);
                }
            });
            
            // Restart button
            restartButton.addEventListener(&#39;click&#39;, initGame);
            
            // Play again button
            playAgainButton.addEventListener(&#39;click&#39;, initGame);
            
            // Next level button
            nextLevelButton.addEventListener(&#39;click&#39;, () =&gt; {
                config.level++;
                config.targetCount = Math.floor(config.targetCount * 1.2);
                config.moves = Math.floor(config.moves * 1.1);
                initGame();
                gameOverModal.classList.add(&#39;hidden&#39;);
            });
            
            // Close modal button
            closeModalButton.addEventListener(&#39;click&#39;, () =&gt; {
                gameOverModal.classList.add(&#39;hidden&#39;);
            });
            
            // Initialize the game
            initGame();
        });
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</content><link rel='replies' type='application/atom+xml' href='http://shahabmobile.blogspot.com/feeds/1358383926696883212/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment/fullpage/post/4254036440232409839/1358383926696883212' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4254036440232409839/posts/default/1358383926696883212'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4254036440232409839/posts/default/1358383926696883212'/><link rel='alternate' type='text/html' href='http://shahabmobile.blogspot.com/2024/07/ffdd.html' title='ffdd'/><author><name>abrar</name><uri>http://www.blogger.com/profile/07724441332083438937</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4254036440232409839.post-2968524760745913199</id><published>2024-07-28T17:29:00.003+05:00</published><updated>2024-07-28T17:31:30.290+05:00</updated><title type='text'>dasdas</title><content type='html'>{getProduct} $button={Button Text} $price={Product Price} $sale={Product Offer} $free={It is Free?} $icon={Icon Name} $style={Style Options}</content><link rel='replies' type='application/atom+xml' href='http://shahabmobile.blogspot.com/feeds/2968524760745913199/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment/fullpage/post/4254036440232409839/2968524760745913199' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4254036440232409839/posts/default/2968524760745913199'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4254036440232409839/posts/default/2968524760745913199'/><link rel='alternate' type='text/html' href='http://shahabmobile.blogspot.com/2024/07/dasdas.html' title='dasdas'/><author><name>abrar</name><uri>http://www.blogger.com/profile/07724441332083438937</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry></feed>