[Mobile] Game Kim Cương Trái Tim

Hướng dẫn cách chơi game kim cương (xếp gạch/puzzle) cơ bản: hoán đổi hai viên kim cương liền kề để tạo thành hàng hoặc cột từ 3 viên cùng màu trở lên nhằm ghi điểm và làm chúng biến mất. Tận dụng các combo (4-5 viên) để tạo kim cương đặc biệt phá hủy diện rộng, đồng thời tập trung vào các viên kim cương có thời gian hạn chế.

Lưu ý: tốc độ hiển thị game để chơi phụ thuộc vào tốc độ mạng bạn đang dùng.

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Game Kim Cương Trái Tim - thichgame.com</title>
    <style>
        :root { --border: #00f2fe; --accent: #ff00cc; }
        body, html { margin: 0; padding: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #05070a; color: white; font-family: sans-serif; overflow: hidden; }
        
        #status-bar { width: 92vmin; display: flex; justify-content: space-between; padding: 12px; background: #1a1a2e; border: 2px solid var(--border); border-radius: 12px; box-sizing: border-box; margin-bottom: 10px; }
        .stat { text-align: center; }
        .stat label { font-size: 10px; color: var(--border); text-transform: uppercase; display: block; font-weight: bold; }
        .stat span { font-size: 20px; font-weight: 900; }

#game-board { position: relative; width: 92vmin; height: 92vmin; background: #101026; display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); border: 4px solid var(--border); border-radius: 8px; }
        .cell { border: 0.5px solid rgba(255, 255, 255, 0.05); display: flex; align-items: center; justify-content: center; position: relative; }
        .gem { font-size: 7.5vmin; cursor: pointer; user-select: none; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
        
        .selected { transform: scale(1.3); filter: brightness(1.5) drop-shadow(0 0 10px white); z-index: 5; }
        .invalid { animation: shake 0.4s; }
        @keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }
        
        .falling { animation: dropDown 0.4s ease-in; }
        @keyframes dropDown { 0% { transform: translateY(-100%); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }

#overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.92); display: none; flex-direction: column; align-items: center; justify-content: center; z-index: 100; text-align: center; padding: 20px; box-sizing: border-box; border-radius: 4px; }
        #overlay h1 { font-size: 8vmin; color: var(--accent); margin: 0 0 10px 0; text-shadow: 0 0 10px var(--accent); }
        #overlay p { font-size: 4vmin; color: #00f2fe; line-height: 1.5; font-weight: bold; }
        
        button { padding: 12px 20px; border: none; border-radius: 25px; background: var(--border); color: #000; font-weight: bold; cursor: pointer; font-size: 16px; transition: 0.2s; }
        button:active { transform: scale(0.95); }
        #controls { margin-top: 15px; display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
        .btn-sub { background: #222; color: #fff; border: 1px solid #444; }
        .btn-audio { min-width: 50px; }
        #level-up-msg {
            position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
            background: rgba(255, 0, 204, 0.9); color: white; padding: 20px 40px;
            border-radius: 50px; font-size: 6vmin; font-weight: bold;
            z-index: 200; display: none; white-space: nowrap;
            box-shadow: 0 0 30px var(--accent); animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        @keyframes popIn { 0% { transform: translate(-50%, -50%) scale(0); } 100% { transform: translate(-50%, -50%) scale(1); } }
    </style>
</head>
<body>

function playSound(id) {
        if (isMuted) return;
        const s = document.getElementById(id);
        if(s) { s.currentTime = 0; s.play().catch(()=>{}); }
    }

function toggleMute() {
        isMuted = !isMuted;
        document.getElementById('mute-btn').innerText = isMuted ? '🔇' : '🔊';
    }

function initGame() {
        score = 0; level = 0; timeLeft = 60;
        isProcessing = false; isPaused = false; selected = null; isLevelingUp = false;
        document.getElementById('overlay').style.display = 'none';
        document.getElementById('ovl-content').innerHTML = `<button onclick="togglePause()">TIẾP TỤC</button>`;
        createBoard();
        updateUI();
        startTimer();
    }

function createBoard() {
        board = [];
        const boardEl = document.getElementById('game-board');
        const ovl = document.getElementById('overlay');
        const lvMsg = document.getElementById('level-up-msg');
        boardEl.innerHTML = ''; 
        boardEl.appendChild(ovl);
        boardEl.appendChild(lvMsg);

for (let r = 0; r < SIZE; r++) {
            board[r] = [];
            for (let c = 0; c < SIZE; c++) {
                board[r][c] = Math.floor(Math.random() * ICONS.length);
                const cell = document.createElement('div');
                cell.className = 'cell';
                cell.id = `c-${r}-${c}`;
                cell.onclick = () => handleInput(r, c);
                boardEl.appendChild(cell);
            }
        }
        if (findMatches().length > 0) createBoard();
        else drawGems();
    }

async function handleInput(r, c) {
        if (isPaused || isProcessing || isLevelingUp) return;
        const cellEl = document.getElementById(`c-${r}-${c}`);
        const currentGem = cellEl ? cellEl.querySelector('.gem') : null;
        if (!currentGem) return;

if (!selected) {
            playSound('s-click');
            selected = { r, c, el: currentGem };
            currentGem.classList.add('selected');
        } else {
            const dr = Math.abs(r - selected.r);
            const dc = Math.abs(c - selected.c);

if (dr + dc === 1) { 
                isProcessing = true;
                selected.el.classList.remove('selected');
                swap(r, c, selected.r, selected.c);
                drawGems();

function swap(r1, c1, r2, c2) {
        let t = board[r1][c1]; board[r1][c1] = board[r2][c2]; board[r2][c2] = t;
    }

async function processMatches(matches) {
        playSound('s-match');
        score += 10 + (matches.length - 3) * 10;
        updateUI();
        matches.forEach(([r, c]) => board[r][c] = -1);
        drawGems();
        await new Promise(res => setTimeout(res, 300));
        applyGravity();
        drawGems();
        const next = findMatches();
        if (next.length > 0) {
            await new Promise(res => setTimeout(res, 300));
            await processMatches(next);
        } else {
            // Chỉ kiểm tra lên màn khi combo đã kết thúc hoàn toàn
            checkLevel();
        }
    }

function updateUI() {
        document.getElementById('score-txt').innerText = score;
        document.getElementById('level-txt').innerText = level + 1;
        document.getElementById('target-txt').innerText = TARGETS[level] || "MAX";
    }

function showLevelUp() {
        isLevelingUp = true; // Khóa trạng thái chuyển màn
        const msg = document.getElementById('level-up-msg');
        msg.style.display = 'block';
        playSound('s-match');
        
        setTimeout(() => {
            msg.style.display = 'none';
            level++;
            timeLeft = 60;
            // score giữ nguyên để dồn điểm
            updateUI();
            createBoard();
            isLevelingUp = false; // Mở khóa sau khi hoàn tất tạo bảng mới
        }, 2000);
    }

function togglePause() {
        if (isLevelingUp) return;
        isPaused = !isPaused;
        document.getElementById('overlay').style.display = isPaused ? 'flex' : 'none';
        document.getElementById('ovl-msg').innerText = "TẠM DỪNG";
    }

function endGame(win) {
        clearInterval(timer); isPaused = true;
        const ovl = document.getElementById('overlay');
        ovl.style.display = 'flex';
        document.getElementById('ovl-msg').innerText = win ? "CHIẾN THẮNG!" : "HẾT GIỜ!";
        document.getElementById('ovl-content').innerHTML = `<p>Số điểm: ${score}<br>Bấm CHƠI LẠI để bắt đầu</p>`;
        if(!win) playSound('s-timeout');
    }

window.onload = initGame;
</script>
</body>
</html>

[Mobile] Game Kim Cương Trái Tim

Chia sẻ lên:

Next

This is the most recent post.

Previous

Bài đăng Cũ hơn

Bình Luận