Spaces:

KEXEL
/

git

Running

App Files Files Community

KEXEL commited on May 24, 2025

Commit

e31d625

verified ·

1 Parent(s): 3e57a04

1.1

Browse files

Files changed (1) hide show

VitaMahjong.html +719 -8

VitaMahjong.html CHANGED Viewed

@@ -86,11 +86,722 @@
             50% { transform: scale(1.05); }
             100% { transform: scale(1); }
         }
     </style>
 </head>
 <body class="bg-gray-100 min-h-screen font-sans">
     <div class="container mx-auto px-4 py-8">
-        <!-- Header -->
         <header class="flex justify-between items-center mb-8">
             <div class="flex items-center">
                 <i class="fas fa-dragon text-4xl text-purple-600 mr-3"></i>
@@ -112,7 +823,7 @@
             </div>
         </header>
-        <!-- Game Controls -->
         <div class="flex justify-between mb-6">
             <div class="flex space-x-3">
                 <button id="new-game" class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-lg shadow flex items-center">
@@ -129,19 +840,19 @@
             </div>
         </div>
-        <!-- Game Board -->
         <div class="board-container bg-white rounded-xl shadow-xl p-6 mb-6">
             <div id="board" class="grid grid-cols-8 gap-3 mx-auto"></div>
         </div>
-        <!-- Game Status -->
         <div id="game-status" class="text-center mb-6 hidden">
             <div class="inline-block bg-green-100 border-l-4 border-green-500 text-green-700 p-4 rounded-lg">
                 <p class="font-bold">Level Complete!</p>
             </div>
         </div>
-        <!-- Level Complete Modal -->
         <div id="level-complete-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50">
             <div class="bg-white rounded-xl shadow-2xl p-8 max-w-md w-full level-complete">
                 <div class="text-center">
@@ -167,7 +878,7 @@
             </div>
         </div>
-        <!-- Game Over Modal -->
         <div id="game-over-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50">
             <div class="bg-white rounded-xl shadow-2xl p-8 max-w-md w-full">
                 <div class="text-center">
@@ -194,7 +905,7 @@
         </div>
     </div>
-    <!-- Audio elements for sound effects -->
     <audio id="flip-sound" src="https://kexel-git.static.hf.space/gsom/zapsplat_multimedia_button_click.mp3" preload="auto"></audio>
     <audio id="match-sound" src="https://kexel-git.static.hf.space/gsom/positive-beeps.mp3" preload="auto"></audio>
     <audio id="mismatch-sound" src="https://kexel-git.static.hf.space/gsom/mixkit-quick-jump-arcade-game-239.mp3" preload="auto"></audio>
@@ -659,7 +1370,7 @@
     </script>
 </body>
 </html>
 <!--<!DOCTYPE html>

             50% { transform: scale(1.05); }
             100% { transform: scale(1); }
         }
+        /* Mobile-specific styles */
+        @media (max-width: 640px) {
+            .tile-front span, .tile-back i {
+                font-size: 1rem !important;
+            }
+            .header-container {
+                flex-direction: column;
+                align-items: center;
+                gap: 1rem;
+            }
+            .stats-container {
+                width: 100%;
+                justify-content: space-between;
+            }
+            .controls-container {
+                flex-direction: column;
+                gap: 0.5rem;
+            }
+            .controls-container > div {
+                width: 100%;
+            }
+            .controls-container button {
+                width: 100%;
+                padding: 0.5rem;
+            }
+            .modal-content {
+                width: 90%;
+                padding: 1.5rem;
+            }
+        }
+    </style>
+</head>
+<body class="bg-gray-100 min-h-screen font-sans">
+    <div class="container mx-auto px-2 sm:px-4 py-4 sm:py-8">
+        <!-- Header - Made responsive with flex column on mobile -->
+        <header class="header-container flex flex-col sm:flex-row justify-between items-center mb-4 sm:mb-8">
+            <div class="flex items-center mb-2 sm:mb-0">
+                <i class="fas fa-dragon text-3xl sm:text-4xl text-purple-600 mr-2 sm:mr-3"></i>
+                <h1 class="text-2xl sm:text-3xl font-bold text-gray-800">Vita Mahjong</h1>
+            </div>
+            <div class="stats-container flex items-center space-x-2 sm:space-x-4 w-full sm:w-auto justify-center sm:justify-start">
+                <div class="bg-white rounded-lg shadow p-2 sm:p-3 flex items-center text-sm sm:text-base">
+                    <i class="fas fa-clock text-purple-600 mr-1 sm:mr-2 text-sm sm:text-base"></i>
+                    <span id="timer" class="font-bold">00:00</span>
+                </div>
+                <div class="bg-white rounded-lg shadow p-2 sm:p-3 flex items-center text-sm sm:text-base">
+                    <i class="fas fa-layer-group text-purple-600 mr-1 sm:mr-2 text-sm sm:text-base"></i>
+                    <span id="level" class="font-bold">Level 1</span>
+                </div>
+                <div class="bg-white rounded-lg shadow p-2 sm:p-3 flex items-center text-sm sm:text-base">
+                    <i class="fas fa-star text-yellow-500 mr-1 sm:mr-2 text-sm sm:text-base"></i>
+                    <span id="score" class="font-bold">0</span>
+                </div>
+            </div>
+        </header>
+        <!-- Game Controls - Stacked vertically on mobile -->
+        <div class="controls-container flex flex-col sm:flex-row justify-between mb-4 sm:mb-6">
+            <div class="flex space-x-2 sm:space-x-3 mb-2 sm:mb-0">
+                <button id="new-game" class="bg-purple-600 hover:bg-purple-700 text-white px-3 sm:px-4 py-1 sm:py-2 rounded-lg shadow flex items-center text-sm sm:text-base">
+                    <i class="fas fa-plus-circle mr-1 sm:mr-2"></i> New Game
+                </button>
+                <button id="hint" class="bg-amber-500 hover:bg-amber-600 text-white px-3 sm:px-4 py-1 sm:py-2 rounded-lg shadow flex items-center text-sm sm:text-base">
+                    <i class="fas fa-lightbulb mr-1 sm:mr-2"></i> Hint
+                </button>
+            </div>
+            <div>
+                <button id="sound-toggle" class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-3 sm:px-4 py-1 sm:py-2 rounded-lg shadow flex items-center text-sm sm:text-base">
+                    <i class="fas fa-volume-up mr-1 sm:mr-2"></i> Sound On
+                </button>
+            </div>
+        </div>
+        <!-- Game Board - Responsive grid with smaller tiles on mobile -->
+        <div class="board-container bg-white rounded-xl shadow-xl p-3 sm:p-6 mb-4 sm:mb-6 overflow-auto">
+            <div id="board" class="grid grid-cols-4 sm:grid-cols-6 md:grid-cols-8 gap-2 sm:gap-3 mx-auto"></div>
+        </div>
+        <!-- Game Status -->
+        <div id="game-status" class="text-center mb-4 sm:mb-6 hidden">
+            <div class="inline-block bg-green-100 border-l-4 border-green-500 text-green-700 p-3 sm:p-4 rounded-lg text-sm sm:text-base">
+                <p class="font-bold">Level Complete!</p>
+            </div>
+        </div>
+        <!-- Level Complete Modal - Responsive sizing -->
+        <div id="level-complete-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50 p-2 sm:p-4">
+            <div class="modal-content bg-white rounded-xl shadow-2xl p-4 sm:p-8 w-full max-w-sm sm:max-w-md level-complete">
+                <div class="text-center">
+                    <div class="text-4xl sm:text-6xl text-yellow-500 mb-2 sm:mb-4">
+                        <i class="fas fa-trophy"></i>
+                    </div>
+                    <h2 class="text-xl sm:text-3xl font-bold text-gray-800 mb-1 sm:mb-2">Level Complete!</h2>
+                    <p class="text-sm sm:text-base text-gray-600 mb-4 sm:mb-6">Great job! Ready for the next challenge?</p>
+                    <div class="grid grid-cols-2 gap-2 sm:gap-4 mb-4 sm:mb-6">
+                        <div class="bg-purple-50 rounded-lg p-2 sm:p-3">
+                            <p class="text-xs sm:text-sm text-purple-600">Time</p>
+                            <p id="level-time" class="font-bold text-lg sm:text-xl">00:45</p>
+                        </div>
+                        <div class="bg-purple-50 rounded-lg p-2 sm:p-3">
+                            <p class="text-xs sm:text-sm text-purple-600">Score</p>
+                            <p id="level-score" class="font-bold text-lg sm:text-xl">+250</p>
+                        </div>
+                    </div>
+                    <button id="next-level" class="w-full bg-purple-600 hover:bg-purple-700 text-white py-2 sm:py-3 rounded-lg shadow-lg font-bold text-sm sm:text-base">
+                        Next Level <i class="fas fa-arrow-right ml-1 sm:ml-2"></i>
+                    </button>
+                </div>
+            </div>
+        </div>
+        <!-- Game Over Modal - Responsive sizing -->
+        <div id="game-over-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50 p-2 sm:p-4">
+            <div class="modal-content bg-white rounded-xl shadow-2xl p-4 sm:p-8 w-full max-w-sm sm:max-w-md">
+                <div class="text-center">
+                    <div class="text-4xl sm:text-6xl text-red-500 mb-2 sm:mb-4">
+                        <i class="fas fa-gamepad"></i>
+                    </div>
+                    <h2 class="text-xl sm:text-3xl font-bold text-gray-800 mb-1 sm:mb-2">Game Over</h2>
+                    <p class="text-sm sm:text-base text-gray-600 mb-4 sm:mb-6">Better luck next time!</p>
+                    <div class="grid grid-cols-2 gap-2 sm:gap-4 mb-4 sm:mb-6">
+                        <div class="bg-purple-50 rounded-lg p-2 sm:p-3">
+                            <p class="text-xs sm:text-sm text-purple-600">Level Reached</p>
+                            <p id="final-level" class="font-bold text-lg sm:text-xl">3</p>
+                        </div>
+                        <div class="bg-purple-50 rounded-lg p-2 sm:p-3">
+                            <p class="text-xs sm:text-sm text-purple-600">Total Score</p>
+                            <p id="final-score" class="font-bold text-lg sm:text-xl">750</p>
+                        </div>
+                    </div>
+                    <button id="play-again" class="w-full bg-purple-600 hover:bg-purple-700 text-white py-2 sm:py-3 rounded-lg shadow-lg font-bold text-sm sm:text-base">
+                        Play Again <i class="fas fa-redo ml-1 sm:ml-2"></i>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- Audio elements for sound effects -->
+    <audio id="flip-sound" src="https://kexel-git.static.hf.space/gsom/zapsplat_multimedia_button_click.mp3" preload="auto"></audio>
+    <audio id="match-sound" src="https://kexel-git.static.hf.space/gsom/positive-beeps.mp3" preload="auto"></audio>
+    <audio id="mismatch-sound" src="https://kexel-git.static.hf.space/gsom/mixkit-quick-jump-arcade-game-239.mp3" preload="auto"></audio>
+    <audio id="hint-sound" src="https://kexel-git.static.hf.space/gsom/unlock-game-notification.mp3" preload="auto"></audio>
+    <audio id="level-complete-sound" src="https://kexel-git.static.hf.space/gsom/2015-preview.mp3" preload="auto"></audio>
+    <audio id="game-over-sound" src="https://kexel-git.static.hf.space/gsom/2027-preview.mp3" preload="auto"></audio>
+    <audio id="button-click-sound" src="https://kexel-git.static.hf.space/gsom/mixkit-mouse-click-close-1113.mp3" preload="auto"></audio>
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+            // Game state
+            const state = {
+                board: [],
+                level: 1,
+                score: 0,
+                time: 0,
+                timerInterval: null,
+                selectedTiles: [],
+                matchedPairs: 0,
+                totalPairs: 0,
+                soundEnabled: true,
+                gameActive: false,
+                isMobile: window.innerWidth < 640 // Check if mobile device
+            };
+            // Audio elements
+            const flipSound = document.getElementById('flip-sound');
+            const matchSound = document.getElementById('match-sound');
+            const mismatchSound = document.getElementById('mismatch-sound');
+            const hintSound = document.getElementById('hint-sound');
+            const levelCompleteSound = document.getElementById('level-complete-sound');
+            const gameOverSound = document.getElementById('game-over-sound');
+            const buttonClickSound = document.getElementById('button-click-sound');
+            // DOM elements
+            const boardElement = document.getElementById('board');
+            const timerElement = document.getElementById('timer');
+            const levelElement = document.getElementById('level');
+            const scoreElement = document.getElementById('score');
+            const newGameButton = document.getElementById('new-game');
+            const hintButton = document.getElementById('hint');
+            const soundToggleButton = document.getElementById('sound-toggle');
+            const gameStatusElement = document.getElementById('game-status');
+            const levelCompleteModal = document.getElementById('level-complete-modal');
+            const gameOverModal = document.getElementById('game-over-modal');
+            const nextLevelButton = document.getElementById('next-level');
+            const playAgainButton = document.getElementById('play-again');
+            const levelTimeElement = document.getElementById('level-time');
+            const levelScoreElement = document.getElementById('level-score');
+            const finalLevelElement = document.getElementById('final-level');
+            const finalScoreElement = document.getElementById('final-score');
+            // Tile types (Vita Mahjong style)
+            const tileTypes = [
+                '1m', '2m', '3m', '4m', '5m', '6m', '7m', '8m', '9m', // Characters
+                '1s', '2s', '3s', '4s', '5s', '6s', '7s', '8s', '9s', // Bamboo
+                '1p', '2p', '3p', '4p', '5p', '6p', '7p', '8p', '9p', // Circles
+                'ew', 'sw', 'ww', 'nw', // Winds
+                'wd', 'gd', 'rd' // Dragons
+            ];
+            // Initialize game
+            function initGame() {
+                state.level = 1;
+                state.score = 0;
+                state.time = 0;
+                state.matchedPairs = 0;
+                state.gameActive = true;
+                clearInterval(state.timerInterval);
+                startTimer();
+                updateUI();
+                createBoard();
+                // Play button click sound
+                playSound('button-click');
+            }
+            // Create game board based on current level
+            function createBoard() {
+                boardElement.innerHTML = '';
+                state.board = [];
+                state.selectedTiles = [];
+                state.matchedPairs = 0;
+                // Determine number of pairs based on level and screen size
+                const basePairs = state.isMobile ? 2 : 4;
+                const pairs = Math.min(basePairs + state.level, state.isMobile ? 12 : 32);
+                state.totalPairs = pairs;
+                // Create array of tile pairs
+                let tiles = [];
+                const availableTypes = [...tileTypes].sort(() => 0.5 - Math.random()).slice(0, pairs);
+                availableTypes.forEach(type => {
+                    tiles.push(type, type);
+                });
+                // Shuffle tiles
+                tiles = shuffleArray(tiles);
+                // Determine grid columns based on screen size
+                const cols = state.isMobile ? 4 : (window.innerWidth < 768 ? 6 : 8);
+                const rows = Math.ceil(tiles.length / cols);
+                for (let i = 0; i < rows; i++) {
+                    const row = [];
+                    for (let j = 0; j < cols; j++) {
+                        const index = i * cols + j;
+                        if (index < tiles.length) {
+                            row.push({
+                                type: tiles[index],
+                                flipped: false,
+                                matched: false,
+                                row: i,
+                                col: j
+                            });
+                        } else {
+                            row.push(null); // Empty slot for uneven boards
+                        }
+                    }
+                    state.board.push(row);
+                }
+                // Render tiles
+                renderBoard();
+            }
+            // Render the game board
+            function renderBoard() {
+                boardElement.innerHTML = '';
+                // Calculate grid columns based on screen size
+                const cols = state.isMobile ? 4 : (window.innerWidth < 768 ? 6 : 8);
+                boardElement.className = `grid gap-2 sm:gap-3 mx-auto`;
+                boardElement.style.gridTemplateColumns = `repeat(${cols}, minmax(0, 1fr))`;
+                state.board.forEach((row, rowIndex) => {
+                    row.forEach((tile, colIndex) => {
+                        if (!tile) return;
+                        const tileElement = document.createElement('div');
+                        tileElement.className = `tile aspect-square cursor-pointer transition-all duration-300 ${tile.matched ? 'opacity-0' : ''}`;
+                        tileElement.innerHTML = `
+                            <div class="tile-inner ${tile.flipped ? 'flipped' : ''}">
+                                <div class="tile-back flex items-center justify-center">
+                                    <i class="fas fa-dragon text-xl sm:text-2xl"></i>
+                                </div>
+                                <div class="tile-front">
+                                    <span class="text-xl sm:text-3xl font-bold">${getTileSymbol(tile.type)}</span>
+                                </div>
+                            </div>
+                        `;
+                        tileElement.addEventListener('click', () => handleTileClick(tile));
+                        if (!tile.matched) {
+                            tileElement.classList.add('tile-hover');
+                        }
+                        boardElement.appendChild(tileElement);
+                    });
+                });
+            }
+            // Handle tile click
+            function handleTileClick(tile) {
+                if (!state.gameActive || tile.matched || tile.flipped || state.selectedTiles.length >= 2) {
+                    return;
+                }
+                // Flip the tile
+                tile.flipped = true;
+                state.selectedTiles.push(tile);
+                // Play sound
+                playSound('flip');
+                renderBoard();
+                // Check for match if two tiles are selected
+                if (state.selectedTiles.length === 2) {
+                    const [tile1, tile2] = state.selectedTiles;
+                    if (tile1.type === tile2.type) {
+                        // Match found
+                        tile1.matched = true;
+                        tile2.matched = true;
+                        state.matchedPairs++;
+                        state.score += 50 * state.level;
+                        // Play success sound
+                        playSound('match');
+                        // Check if level is complete
+                        if (state.matchedPairs === state.totalPairs) {
+                            levelComplete();
+                        }
+                        // Clear selection after delay
+                        setTimeout(() => {
+                            state.selectedTiles = [];
+                            renderBoard();
+                        }, 500);
+                    } else {
+                        // No match
+                        setTimeout(() => {
+                            tile1.flipped = false;
+                            tile2.flipped = false;
+                            state.selectedTiles = [];
+                            renderBoard();
+                            // Play mismatch sound
+                            playSound('mismatch');
+                        }, 1000);
+                    }
+                }
+                updateUI();
+            }
+            // Level complete
+            function levelComplete() {
+                state.gameActive = false;
+                clearInterval(state.timerInterval);
+                // Calculate bonus points based on time
+                const timeBonus = Math.max(0, 300 - state.time);
+                state.score += timeBonus;
+                // Show level complete modal
+                levelTimeElement.textContent = formatTime(state.time);
+                levelScoreElement.textContent = `+${timeBonus}`;
+                levelCompleteModal.classList.remove('hidden');
+                // Play level complete sound
+                playSound('level-complete');
+                updateUI();
+            }
+            // Next level
+            function nextLevel() {
+                playSound('button-click');
+                state.level++;
+                state.time = 0;
+                state.gameActive = true;
+                levelCompleteModal.classList.add('hidden');
+                startTimer();
+                createBoard();
+                updateUI();
+                // Show level up message
+                gameStatusElement.classList.remove('hidden');
+                gameStatusElement.querySelector('p').textContent = `Level ${state.level}!`;
+                setTimeout(() => {
+                    gameStatusElement.classList.add('hidden');
+                }, 2000);
+            }
+            // Game over
+            function gameOver() {
+                state.gameActive = false;
+                clearInterval(state.timerInterval);
+                // Update final stats
+                finalLevelElement.textContent = state.level;
+                finalScoreElement.textContent = state.score;
+                // Show game over modal
+                gameOverModal.classList.remove('hidden');
+                // Play game over sound
+                playSound('game-over');
+            }
+            // Start timer
+            function startTimer() {
+                state.time = 0;
+                updateTimerDisplay();
+                state.timerInterval = setInterval(() => {
+                    state.time++;
+                    updateTimerDisplay();
+                    // Game over if time exceeds limit (5 minutes)
+                    if (state.time >= 300) {
+                        gameOver();
+                    }
+                }, 1000);
+            }
+            // Update timer display
+            function updateTimerDisplay() {
+                timerElement.textContent = formatTime(state.time);
+            }
+            // Format time as MM:SS
+            function formatTime(seconds) {
+                const mins = Math.floor(seconds / 60).toString().padStart(2, '0');
+                const secs = (seconds % 60).toString().padStart(2, '0');
+                return `${mins}:${secs}`;
+            }
+            // Update UI elements
+            function updateUI() {
+                levelElement.textContent = `Level ${state.level}`;
+                scoreElement.textContent = state.score;
+            }
+            // Get tile symbol for display
+            function getTileSymbol(type) {
+                const symbols = {
+                    '1m': '一', '2m': '二', '3m': '三', '4m': '四', '5m': '五',
+                    '6m': '六', '7m': '七', '8m': '八', '9m': '九',
+                    '1s': '1', '2s': '2', '3s': '3', '4s': '4', '5s': '5',
+                    '6s': '6', '7s': '7', '8s': '8', '9s': '9',
+                    '1p': '❶', '2p': '❷', '3p': '❸', '4p': '❹', '5p': '❺',
+                    '6p': '❻', '7p': '❼', '8p': '❽', '9p': '❾',
+                    'ew': '東', 'sw': '南', 'ww': '西', 'nw': '北',
+                    'wd': '白', 'gd': '發', 'rd': '中'
+                };
+                return symbols[type] || type;
+            }
+            // Shuffle array
+            function shuffleArray(array) {
+                const newArray = [...array];
+                for (let i = newArray.length - 1; i > 0; i--) {
+                    const j = Math.floor(Math.random() * (i + 1));
+                    [newArray[i], newArray[j]] = [newArray[j], newArray[i]];
+                }
+                return newArray;
+            }
+            // Play sound
+            function playSound(type) {
+                if (!state.soundEnabled) return;
+                try {
+                    switch (type) {
+                        case 'flip':
+                            flipSound.currentTime = 0;
+                            flipSound.play();
+                            break;
+                        case 'match':
+                            matchSound.currentTime = 0;
+                            matchSound.play();
+                            break;
+                        case 'mismatch':
+                            mismatchSound.currentTime = 0;
+                            mismatchSound.play();
+                            break;
+                        case 'hint':
+                            hintSound.currentTime = 0;
+                            hintSound.play();
+                            break;
+                        case 'level-complete':
+                            levelCompleteSound.currentTime = 0;
+                            levelCompleteSound.play();
+                            break;
+                        case 'game-over':
+                            gameOverSound.currentTime = 0;
+                            gameOverSound.play();
+                            break;
+                        case 'button-click':
+                            buttonClickSound.currentTime = 0;
+                            buttonClickSound.play();
+                            break;
+                    }
+                } catch (e) {
+                    console.error('Error playing sound:', e);
+                }
+            }
+            // Provide hint
+            function provideHint() {
+                if (!state.gameActive || state.matchedPairs === state.totalPairs) {
+                    return;
+                }
+                // Play button click sound
+                playSound('button-click');
+                // Find all unflipped, unmatched tiles
+                const unflippedTiles = [];
+                state.board.forEach(row => {
+                    row.forEach(tile => {
+                        if (tile && !tile.flipped && !tile.matched) {
+                            unflippedTiles.push(tile);
+                        }
+                    });
+                });
+                if (unflippedTiles.length < 2) return;
+                // Find a matching pair
+                const tileCount = {};
+                let hintTile1 = null;
+                let hintTile2 = null;
+                for (const tile of unflippedTiles) {
+                    if (tileCount[tile.type]) {
+                        hintTile1 = tileCount[tile.type];
+                        hintTile2 = tile;
+                        break;
+                    }
+                    tileCount[tile.type] = tile;
+                }
+                if (hintTile1 && hintTile2) {
+                    // Highlight the hint tiles
+                    const tileElements = boardElement.querySelectorAll('.tile');
+                    tileElements.forEach((element, index) => {
+                        const cols = state.isMobile ? 4 : (window.innerWidth < 768 ? 6 : 8);
+                        const row = Math.floor(index / cols);
+                        const col = index % cols;
+                        const tile = state.board[row]?.[col];
+                        if (tile === hintTile1 || tile === hintTile2) {
+                            element.classList.add('ring-4', 'ring-yellow-400', 'ring-opacity-75');
+                            // Remove highlight after delay
+                            setTimeout(() => {
+                                element.classList.remove('ring-4', 'ring-yellow-400', 'ring-opacity-75');
+                            }, 2000);
+                        }
+                    });
+                    // Deduct points for using hint
+                    state.score = Math.max(0, state.score - 25);
+                    updateUI();
+                    // Play hint sound
+                    playSound('hint');
+                }
+            }
+            // Event listeners
+            newGameButton.addEventListener('click', initGame);
+            hintButton.addEventListener('click', provideHint);
+            soundToggleButton.addEventListener('click', () => {
+                state.soundEnabled = !state.soundEnabled;
+                soundToggleButton.innerHTML = state.soundEnabled
+                    ? '<i class="fas fa-volume-up mr-1 sm:mr-2"></i> Sound On'
+                    : '<i class="fas fa-volume-mute mr-1 sm:mr-2"></i> Sound Off';
+                playSound('button-click');
+            });
+            nextLevelButton.addEventListener('click', nextLevel);
+            playAgainButton.addEventListener('click', () => {
+                playSound('button-click');
+                gameOverModal.classList.add('hidden');
+                initGame();
+            });
+            // Handle window resize
+            window.addEventListener('resize', () => {
+                state.isMobile = window.innerWidth < 640;
+                if (state.gameActive) {
+                    createBoard();
+                }
+            });
+            // Initialize the game
+            initGame();
+        });
+    </script>
+</body>
+</html>
+<!--<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vita Mahjong</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        @keyframes tileHover {
+            0% { transform: translateY(0); }
+            50% { transform: translateY(-5px); }
+            100% { transform: translateY(0); }
+        }
+        .tile-hover:hover {
+            animation: tileHover 0.3s ease;
+            transform: translateY(-5px);
+            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
+        }
+        .tile-selected {
+            transform: translateY(-15px);
+            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2);
+            z-index: 10;
+        }
+        .tile-matched {
+            animation: fadeOut 0.5s ease forwards;
+        }
+        @keyframes fadeOut {
+            to {
+                opacity: 0;
+                transform: scale(0.8);
+            }
+        }
+        .board-container {
+            perspective: 1000px;
+        }
+        .tile {
+            transition: all 0.3s ease;
+            transform-style: preserve-3d;
+        }
+        .tile-inner {
+            position: relative;
+            width: 100%;
+            height: 100%;
+            transform-style: preserve-3d;
+        }
+        .tile-front, .tile-back {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            backface-visibility: hidden;
+            border-radius: 8px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        .tile-front {
+            background: linear-gradient(145deg, #f0f0f0, #ffffff);
+            transform: rotateY(180deg);
+        }
+        .tile-back {
+            background: linear-gradient(145deg, #4f46e5, #7c3aed);
+            color: white;
+        }
+        .flipped {
+            transform: rotateY(180deg);
+        }
+        .level-complete {
+            animation: pulse 2s infinite;
+        }
+        @keyframes pulse {
+            0% { transform: scale(1); }
+            50% { transform: scale(1.05); }
+            100% { transform: scale(1); }
+        }
     </style>
 </head>
 <body class="bg-gray-100 min-h-screen font-sans">
     <div class="container mx-auto px-4 py-8">
         <header class="flex justify-between items-center mb-8">
             <div class="flex items-center">
                 <i class="fas fa-dragon text-4xl text-purple-600 mr-3"></i>
             </div>
         </header>
         <div class="flex justify-between mb-6">
             <div class="flex space-x-3">
                 <button id="new-game" class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-lg shadow flex items-center">
             </div>
         </div>
         <div class="board-container bg-white rounded-xl shadow-xl p-6 mb-6">
             <div id="board" class="grid grid-cols-8 gap-3 mx-auto"></div>
         </div>
         <div id="game-status" class="text-center mb-6 hidden">
             <div class="inline-block bg-green-100 border-l-4 border-green-500 text-green-700 p-4 rounded-lg">
                 <p class="font-bold">Level Complete!</p>
             </div>
         </div>
         <div id="level-complete-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50">
             <div class="bg-white rounded-xl shadow-2xl p-8 max-w-md w-full level-complete">
                 <div class="text-center">
             </div>
         </div>
         <div id="game-over-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50">
             <div class="bg-white rounded-xl shadow-2xl p-8 max-w-md w-full">
                 <div class="text-center">
         </div>
     </div>
     <audio id="flip-sound" src="https://kexel-git.static.hf.space/gsom/zapsplat_multimedia_button_click.mp3" preload="auto"></audio>
     <audio id="match-sound" src="https://kexel-git.static.hf.space/gsom/positive-beeps.mp3" preload="auto"></audio>
     <audio id="mismatch-sound" src="https://kexel-git.static.hf.space/gsom/mixkit-quick-jump-arcade-game-239.mp3" preload="auto"></audio>
     </script>
 </body>
 </html>
+-->
 <!--<!DOCTYPE html>