| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Ocean Match-3 Adventure</title> |
| <style> |
| * { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| } |
| |
| body { |
| font-family: 'Arial', sans-serif; |
| background: linear-gradient(135deg, #001f3f 0%, #003366 50%, #006699 100%); |
| min-height: 100vh; |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| color: white; |
| overflow: hidden; |
| } |
| |
| .game-container { |
| text-align: center; |
| background: rgba(255, 255, 255, 0.1); |
| backdrop-filter: blur(10px); |
| border-radius: 20px; |
| padding: 30px; |
| box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); |
| position: relative; |
| } |
| |
| h1 { |
| font-size: 2.5em; |
| margin-bottom: 10px; |
| text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); |
| background: linear-gradient(45deg, #00d4ff, #90e0ef); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| } |
| |
| .game-stats { |
| display: grid; |
| grid-template-columns: repeat(4, 1fr); |
| gap: 15px; |
| margin-bottom: 20px; |
| font-size: 1em; |
| font-weight: bold; |
| } |
| |
| .stat-box { |
| background: rgba(255, 255, 255, 0.1); |
| border-radius: 10px; |
| padding: 10px; |
| border: 2px solid rgba(0, 212, 255, 0.3); |
| } |
| |
| .stat-label { |
| font-size: 0.8em; |
| opacity: 0.8; |
| margin-bottom: 5px; |
| } |
| |
| .stat-value { |
| font-size: 1.2em; |
| color: #00d4ff; |
| } |
| |
| .timer { |
| color: #ff6b6b !important; |
| } |
| |
| .timer.warning { |
| animation: timerPulse 1s infinite; |
| } |
| |
| @keyframes timerPulse { |
| 0%, 100% { transform: scale(1); } |
| 50% { transform: scale(1.1); color: #ff4757; } |
| } |
| |
| .level-progress { |
| margin-bottom: 15px; |
| } |
| |
| .progress-bar { |
| width: 100%; |
| height: 8px; |
| background: rgba(255, 255, 255, 0.2); |
| border-radius: 4px; |
| overflow: hidden; |
| } |
| |
| .progress-fill { |
| height: 100%; |
| background: linear-gradient(90deg, #00d4ff, #90e0ef); |
| border-radius: 4px; |
| transition: width 0.3s ease; |
| width: 0%; |
| } |
| |
| .game-board { |
| display: grid; |
| grid-template-columns: repeat(8, 60px); |
| grid-template-rows: repeat(8, 60px); |
| gap: 2px; |
| background: rgba(0, 50, 100, 0.5); |
| padding: 10px; |
| border-radius: 15px; |
| margin: 0 auto; |
| border: 3px solid rgba(255, 255, 255, 0.2); |
| position: relative; |
| } |
| |
| .tile { |
| width: 60px; |
| height: 60px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-size: 2em; |
| background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05)); |
| border-radius: 10px; |
| cursor: pointer; |
| transition: all 0.3s ease; |
| border: 2px solid transparent; |
| position: relative; |
| overflow: hidden; |
| } |
| |
| .tile:hover { |
| transform: scale(1.05); |
| box-shadow: 0 5px 15px rgba(0, 212, 255, 0.4); |
| } |
| |
| .tile.selected { |
| border-color: #00d4ff; |
| box-shadow: 0 0 20px rgba(0, 212, 255, 0.8); |
| transform: scale(1.1); |
| } |
| |
| .tile.matching { |
| animation: matchPulse 0.6s ease-in-out; |
| background: linear-gradient(135deg, rgba(255, 215, 0, 0.9), rgba(255, 165, 0, 0.9)); |
| z-index: 10; |
| } |
| |
| @keyframes matchPulse { |
| 0% { transform: scale(1); } |
| 50% { transform: scale(1.3); box-shadow: 0 0 30px rgba(255, 215, 0, 0.8); } |
| 100% { transform: scale(1); } |
| } |
| |
| @keyframes fall { |
| from { transform: translateY(-60px); opacity: 0; } |
| to { transform: translateY(0); opacity: 1; } |
| } |
| |
| .tile.falling { |
| animation: fall 0.4s ease-out; |
| } |
| |
| |
| .floating-tile { |
| position: absolute; |
| font-size: 2em; |
| pointer-events: none; |
| z-index: 1000; |
| animation: floatDown 2s ease-in forwards; |
| } |
| |
| @keyframes floatDown { |
| 0% { |
| transform: translateY(0) rotate(0deg); |
| opacity: 1; |
| } |
| 100% { |
| transform: translateY(600px) rotate(360deg); |
| opacity: 0; |
| } |
| } |
| |
| .controls { |
| margin-top: 20px; |
| display: flex; |
| gap: 15px; |
| justify-content: center; |
| } |
| |
| button { |
| padding: 12px 24px; |
| font-size: 1em; |
| font-weight: bold; |
| border: none; |
| border-radius: 25px; |
| cursor: pointer; |
| background: linear-gradient(135deg, #00d4ff, #0099cc); |
| color: white; |
| transition: all 0.3s ease; |
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); |
| } |
| |
| button:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); |
| } |
| |
| button:disabled { |
| opacity: 0.5; |
| cursor: not-allowed; |
| transform: none; |
| } |
| |
| .hint-text { |
| margin-top: 15px; |
| font-size: 0.9em; |
| opacity: 0.8; |
| color: #90e0ef; |
| } |
| |
| .level-complete { |
| position: fixed; |
| top: 50%; |
| left: 50%; |
| transform: translate(-50%, -50%); |
| background: linear-gradient(135deg, #00d4ff, #0099cc); |
| padding: 40px; |
| border-radius: 20px; |
| box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5); |
| z-index: 2000; |
| animation: levelCompleteAnimation 0.5s ease-out; |
| } |
| |
| @keyframes levelCompleteAnimation { |
| from { transform: translate(-50%, -50%) scale(0); } |
| to { transform: translate(-50%, -50%) scale(1); } |
| } |
| |
| .game-over { |
| position: fixed; |
| top: 50%; |
| left: 50%; |
| transform: translate(-50%, -50%); |
| background: linear-gradient(135deg, #ff6b6b, #ff4757); |
| padding: 40px; |
| border-radius: 20px; |
| box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5); |
| z-index: 2000; |
| animation: gameOverAnimation 0.5s ease-out; |
| } |
| |
| @keyframes gameOverAnimation { |
| from { transform: translate(-50%, -50%) scale(0) rotate(180deg); } |
| to { transform: translate(-50%, -50%) scale(1) rotate(0deg); } |
| } |
| |
| .sound-toggle { |
| position: absolute; |
| top: 10px; |
| right: 10px; |
| background: rgba(255, 255, 255, 0.2); |
| border: none; |
| border-radius: 50%; |
| width: 40px; |
| height: 40px; |
| cursor: pointer; |
| font-size: 1.2em; |
| color: white; |
| } |
| </style> |
| </head> |
| <body> |
| <div class="game-container"> |
| <button class="sound-toggle" onclick="toggleSound()" id="soundToggle">🔊</button> |
| |
| <h1>🌊 Ocean Match-3 🌊</h1> |
| |
| <div class="game-stats"> |
| <div class="stat-box"> |
| <div class="stat-label">Level</div> |
| <div class="stat-value" id="level">1</div> |
| </div> |
| <div class="stat-box"> |
| <div class="stat-label">Score</div> |
| <div class="stat-value" id="score">0</div> |
| </div> |
| <div class="stat-box"> |
| <div class="stat-label">Moves</div> |
| <div class="stat-value" id="moves">30</div> |
| </div> |
| <div class="stat-box"> |
| <div class="stat-label">Time</div> |
| <div class="stat-value timer" id="timer">5:00</div> |
| </div> |
| </div> |
|
|
| <div class="level-progress"> |
| <div class="stat-label">Level Progress</div> |
| <div class="progress-bar"> |
| <div class="progress-fill" id="progressFill"></div> |
| </div> |
| <div style="margin-top: 5px; font-size: 0.9em;"> |
| <span id="matchesLeft">20</span> matches needed |
| </div> |
| </div> |
| |
| <div class="game-board" id="gameBoard"></div> |
| |
| <div class="controls"> |
| <button onclick="newGame()">New Game</button> |
| <button onclick="findHint()">Hint</button> |
| <button onclick="pauseGame()" id="pauseBtn">Pause</button> |
| </div> |
| |
| <div class="hint-text"> |
| Swap adjacent tiles to match 3 or more of the same sea creatures! |
| </div> |
| </div> |
|
|
| <script> |
| const BOARD_SIZE = 8; |
| const TILE_TYPES = ['🐠', '🐟', '🐡', '🦀', '🐙', '🦑']; |
| |
| let board = []; |
| let selectedTile = null; |
| let score = 0; |
| let moves = 30; |
| let level = 1; |
| let gameActive = true; |
| let gamePaused = false; |
| let soundEnabled = true; |
| let timeLeft = 300; |
| let gameTimer = null; |
| let matchesNeeded = 20; |
| let matchesMade = 0; |
| |
| |
| const audioContext = new (window.AudioContext || window.webkitAudioContext)(); |
| |
| function playSound(frequency, duration, type = 'sine') { |
| if (!soundEnabled) return; |
| |
| const oscillator = audioContext.createOscillator(); |
| const gainNode = audioContext.createGain(); |
| |
| oscillator.connect(gainNode); |
| gainNode.connect(audioContext.destination); |
| |
| oscillator.frequency.value = frequency; |
| oscillator.type = type; |
| |
| gainNode.gain.setValueAtTime(0.3, audioContext.currentTime); |
| gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + duration); |
| |
| oscillator.start(audioContext.currentTime); |
| oscillator.stop(audioContext.currentTime + duration); |
| } |
| |
| function playMatchSound() { |
| |
| playSound(523, 0.1); |
| setTimeout(() => playSound(659, 0.1), 50); |
| setTimeout(() => playSound(784, 0.2), 100); |
| } |
| |
| function playNoMatchSound() { |
| |
| playSound(400, 0.3, 'sawtooth'); |
| setTimeout(() => playSound(300, 0.3, 'sawtooth'), 100); |
| } |
| |
| function playLevelCompleteSound() { |
| |
| const notes = [523, 659, 784, 1047]; |
| notes.forEach((note, i) => { |
| setTimeout(() => playSound(note, 0.3), i * 100); |
| }); |
| } |
| |
| function playGameOverSound() { |
| |
| playSound(200, 0.5, 'sawtooth'); |
| setTimeout(() => playSound(150, 0.8, 'sawtooth'), 200); |
| } |
| |
| function toggleSound() { |
| soundEnabled = !soundEnabled; |
| document.getElementById('soundToggle').textContent = soundEnabled ? '🔊' : '🔇'; |
| } |
| |
| function startTimer() { |
| gameTimer = setInterval(() => { |
| if (!gamePaused && gameActive) { |
| timeLeft--; |
| updateTimerDisplay(); |
| |
| if (timeLeft <= 60) { |
| document.getElementById('timer').classList.add('warning'); |
| } |
| |
| if (timeLeft <= 0) { |
| gameOver(); |
| } |
| } |
| }, 1000); |
| } |
| |
| function updateTimerDisplay() { |
| const minutes = Math.floor(timeLeft / 60); |
| const seconds = timeLeft % 60; |
| document.getElementById('timer').textContent = `${minutes}:${seconds.toString().padStart(2, '0')}`; |
| } |
| |
| function pauseGame() { |
| gamePaused = !gamePaused; |
| const pauseBtn = document.getElementById('pauseBtn'); |
| pauseBtn.textContent = gamePaused ? 'Resume' : 'Pause'; |
| } |
| |
| function createFloatingTile(tileType, startX, startY) { |
| const floatingTile = document.createElement('div'); |
| floatingTile.className = 'floating-tile'; |
| floatingTile.textContent = tileType; |
| floatingTile.style.left = startX + 'px'; |
| floatingTile.style.top = startY + 'px'; |
| |
| document.body.appendChild(floatingTile); |
| |
| setTimeout(() => { |
| floatingTile.remove(); |
| }, 2000); |
| } |
| |
| function initializeBoard() { |
| const gameBoard = document.getElementById('gameBoard'); |
| gameBoard.innerHTML = ''; |
| board = []; |
| |
| for (let row = 0; row < BOARD_SIZE; row++) { |
| board[row] = []; |
| for (let col = 0; col < BOARD_SIZE; col++) { |
| let tileType; |
| do { |
| tileType = TILE_TYPES[Math.floor(Math.random() * TILE_TYPES.length)]; |
| } while (wouldCreateMatch(row, col, tileType)); |
| |
| board[row][col] = tileType; |
| |
| const tile = document.createElement('div'); |
| tile.className = 'tile'; |
| tile.textContent = tileType; |
| tile.dataset.row = row; |
| tile.dataset.col = col; |
| tile.addEventListener('click', handleTileClick); |
| gameBoard.appendChild(tile); |
| } |
| } |
| } |
| |
| function wouldCreateMatch(row, col, tileType) { |
| let horizontalCount = 1; |
| for (let c = col - 1; c >= 0 && board[row][c] === tileType; c--) { |
| horizontalCount++; |
| } |
| for (let c = col + 1; c < BOARD_SIZE && board[row] && board[row][c] === tileType; c++) { |
| horizontalCount++; |
| } |
| |
| let verticalCount = 1; |
| for (let r = row - 1; r >= 0 && board[r][col] === tileType; r--) { |
| verticalCount++; |
| } |
| for (let r = row + 1; r < BOARD_SIZE && board[r] && board[r][col] === tileType; r++) { |
| verticalCount++; |
| } |
| |
| return horizontalCount >= 3 || verticalCount >= 3; |
| } |
| |
| function handleTileClick(event) { |
| if (!gameActive || gamePaused) return; |
| |
| const clickedTile = event.target; |
| const row = parseInt(clickedTile.dataset.row); |
| const col = parseInt(clickedTile.dataset.col); |
| |
| if (selectedTile === null) { |
| selectedTile = { row, col, element: clickedTile }; |
| clickedTile.classList.add('selected'); |
| } else { |
| if (selectedTile.row === row && selectedTile.col === col) { |
| selectedTile.element.classList.remove('selected'); |
| selectedTile = null; |
| } else if (isAdjacent(selectedTile.row, selectedTile.col, row, col)) { |
| attemptSwap(selectedTile.row, selectedTile.col, row, col); |
| selectedTile.element.classList.remove('selected'); |
| selectedTile = null; |
| } else { |
| selectedTile.element.classList.remove('selected'); |
| selectedTile = { row, col, element: clickedTile }; |
| clickedTile.classList.add('selected'); |
| } |
| } |
| } |
| |
| function isAdjacent(row1, col1, row2, col2) { |
| const rowDiff = Math.abs(row1 - row2); |
| const colDiff = Math.abs(col1 - col2); |
| return (rowDiff === 1 && colDiff === 0) || (rowDiff === 0 && colDiff === 1); |
| } |
| |
| function attemptSwap(row1, col1, row2, col2) { |
| const temp = board[row1][col1]; |
| board[row1][col1] = board[row2][col2]; |
| board[row2][col2] = temp; |
| |
| const matches = findAllMatches(); |
| |
| if (matches.length > 0) { |
| updateDisplay(); |
| moves--; |
| document.getElementById('moves').textContent = moves; |
| |
| setTimeout(() => { |
| processMatches(); |
| }, 300); |
| } else { |
| board[row1][col1] = board[row2][col2]; |
| board[row2][col2] = temp; |
| playNoMatchSound(); |
| } |
| } |
| |
| function findAllMatches() { |
| const matches = []; |
| |
| |
| for (let row = 0; row < BOARD_SIZE; row++) { |
| let count = 1; |
| let currentType = board[row][0]; |
| |
| for (let col = 1; col < BOARD_SIZE; col++) { |
| if (board[row][col] === currentType) { |
| count++; |
| } else { |
| if (count >= 3) { |
| for (let i = 0; i < count; i++) { |
| matches.push({ row, col: col - count + i }); |
| } |
| } |
| count = 1; |
| currentType = board[row][col]; |
| } |
| } |
| |
| if (count >= 3) { |
| for (let i = 0; i < count; i++) { |
| matches.push({ row, col: BOARD_SIZE - count + i }); |
| } |
| } |
| } |
| |
| |
| for (let col = 0; col < BOARD_SIZE; col++) { |
| let count = 1; |
| let currentType = board[0][col]; |
| |
| for (let row = 1; row < BOARD_SIZE; row++) { |
| if (board[row][col] === currentType) { |
| count++; |
| } else { |
| if (count >= 3) { |
| for (let i = 0; i < count; i++) { |
| matches.push({ row: row - count + i, col }); |
| } |
| } |
| count = 1; |
| currentType = board[row][col]; |
| } |
| } |
| |
| if (count >= 3) { |
| for (let i = 0; i < count; i++) { |
| matches.push({ row: BOARD_SIZE - count + i, col }); |
| } |
| } |
| } |
| |
| return matches; |
| } |
| |
| function processMatches() { |
| const matches = findAllMatches(); |
| |
| if (matches.length === 0) { |
| checkGameEnd(); |
| return; |
| } |
| |
| playMatchSound(); |
| |
| |
| matches.forEach(match => { |
| const tile = document.querySelector(`[data-row="${match.row}"][data-col="${match.col}"]`); |
| tile.classList.add('matching'); |
| |
| |
| const rect = tile.getBoundingClientRect(); |
| createFloatingTile(board[match.row][match.col], rect.left, rect.top); |
| }); |
| |
| |
| matchesMade += Math.floor(matches.length / 3); |
| const remaining = Math.max(0, matchesNeeded - matchesMade); |
| document.getElementById('matchesLeft').textContent = remaining; |
| |
| |
| const progress = (matchesMade / matchesNeeded) * 100; |
| document.getElementById('progressFill').style.width = Math.min(100, progress) + '%'; |
| |
| |
| score += matches.length * 10 * level; |
| document.getElementById('score').textContent = score; |
| |
| setTimeout(() => { |
| matches.forEach(match => { |
| board[match.row][match.col] = null; |
| }); |
| |
| dropTiles(); |
| fillEmptySpaces(); |
| updateDisplay(); |
| |
| setTimeout(() => { |
| processMatches(); |
| }, 400); |
| }, 600); |
| } |
| |
| function dropTiles() { |
| for (let col = 0; col < BOARD_SIZE; col++) { |
| let writeIndex = BOARD_SIZE - 1; |
| |
| for (let row = BOARD_SIZE - 1; row >= 0; row--) { |
| if (board[row][col] !== null) { |
| board[writeIndex][col] = board[row][col]; |
| if (writeIndex !== row) { |
| board[row][col] = null; |
| } |
| writeIndex--; |
| } |
| } |
| } |
| } |
| |
| function fillEmptySpaces() { |
| for (let row = 0; row < BOARD_SIZE; row++) { |
| for (let col = 0; col < BOARD_SIZE; col++) { |
| if (board[row][col] === null) { |
| board[row][col] = TILE_TYPES[Math.floor(Math.random() * TILE_TYPES.length)]; |
| } |
| } |
| } |
| } |
| |
| function updateDisplay() { |
| const tiles = document.querySelectorAll('.tile'); |
| tiles.forEach(tile => { |
| const row = parseInt(tile.dataset.row); |
| const col = parseInt(tile.dataset.col); |
| tile.textContent = board[row][col]; |
| tile.classList.remove('matching', 'selected'); |
| tile.classList.add('falling'); |
| |
| setTimeout(() => { |
| tile.classList.remove('falling'); |
| }, 400); |
| }); |
| } |
| |
| function checkGameEnd() { |
| if (matchesMade >= matchesNeeded) { |
| levelComplete(); |
| } else if (moves <= 0 || timeLeft <= 0) { |
| gameOver(); |
| } |
| } |
| |
| function levelComplete() { |
| gameActive = false; |
| clearInterval(gameTimer); |
| playLevelCompleteSound(); |
| |
| const popup = document.createElement('div'); |
| popup.className = 'level-complete'; |
| popup.innerHTML = ` |
| <h2>🎉 Level ${level} Complete! 🎉</h2> |
| <p>Score: ${score}</p> |
| <p>Time Bonus: ${timeLeft * 5}</p> |
| <button onclick="nextLevel()" style="margin-top: 20px;">Next Level</button> |
| `; |
| document.body.appendChild(popup); |
| |
| score += timeLeft * 5; |
| document.getElementById('score').textContent = score; |
| } |
| |
| function nextLevel() { |
| document.querySelector('.level-complete').remove(); |
| level++; |
| matchesNeeded = 15 + (level * 5); |
| matchesMade = 0; |
| moves = 30 + (level * 2); |
| timeLeft = 300 - (level * 15); |
| gameActive = true; |
| |
| document.getElementById('level').textContent = level; |
| document.getElementById('moves').textContent = moves; |
| document.getElementById('matchesLeft').textContent = matchesNeeded; |
| document.getElementById('progressFill').style.width = '0%'; |
| document.getElementById('timer').classList.remove('warning'); |
| |
| initializeBoard(); |
| startTimer(); |
| } |
| |
| function gameOver() { |
| gameActive = false; |
| clearInterval(gameTimer); |
| playGameOverSound(); |
| |
| const popup = document.createElement('div'); |
| popup.className = 'game-over'; |
| popup.innerHTML = ` |
| <h2>💀 Game Over! 💀</h2> |
| <p>Final Score: ${score}</p> |
| <p>Level Reached: ${level}</p> |
| <button onclick="document.querySelector('.game-over').remove(); newGame();" style="margin-top: 20px;">Play Again</button> |
| `; |
| document.body.appendChild(popup); |
| } |
| |
| function newGame() { |
| score = 0; |
| moves = 30; |
| level = 1; |
| matchesNeeded = 20; |
| matchesMade = 0; |
| timeLeft = 300; |
| gameActive = true; |
| gamePaused = false; |
| selectedTile = null; |
| |
| clearInterval(gameTimer); |
| |
| document.getElementById('score').textContent = score; |
| document.getElementById('moves').textContent = moves; |
| document.getElementById('level').textContent = level; |
| document.getElementById('matchesLeft').textContent = matchesNeeded; |
| document.getElementById('progressFill').style.width = '0%'; |
| document.getElementById('pauseBtn').textContent = 'Pause'; |
| document.getElementById('timer').classList.remove('warning'); |
| |
| |
| const existingPopups = document.querySelectorAll('.level-complete, .game-over'); |
| existingPopups.forEach(popup => popup.remove()); |
| |
| initializeBoard(); |
| startTimer(); |
| updateTimerDisplay(); |
| } |
| |
| function findHint() { |
| if (!gameActive || gamePaused) return; |
| |
| const tiles = document.querySelectorAll('.tile'); |
| const randomTile = tiles[Math.floor(Math.random() * tiles.length)]; |
| |
| randomTile.style.animation = 'matchPulse 1s ease-in-out 2'; |
| setTimeout(() => { |
| randomTile.style.animation = ''; |
| }, 2000); |
| } |
| |
| |
| newGame(); |
| </script> |
| </body> |
| </html> |
