【CodeBuddy】三分鐘開發一個實用小功能之：記憶翻牌配對游戲

?

前言：人機思維對話

"我需要一個記憶翻牌游戲，包含計時器、步數統計、動態卡片生成、勝利彈窗..."

當開發者將這些需求輸入CodeBuddy時，就像在咖啡廳向一位全棧工程師描述構想。AI通過自然語言理解，瞬間規劃出技術方案：用<div>構建卡片容器，通過CSS的transform實現3D翻轉效果，借助grid布局響應式適配，最后用JavaScript管理游戲狀態。整個過程如同思維導圖在數字世界具象化，需求與技術實現之間架起無形橋梁。

以下是實際操作中的開發界面與最終呈現效果(文末附完整代碼)：

二、應用場景：重塑開發工作流

快速原型開發：從游戲配置對象到狀態管理模塊的自動生成，AI在5秒內搭建起完整框架
跨技術棧協同：CSS的perspective屬性營造3D空間感，classList操作實現動畫過渡，多技術無縫銜接
樣式與邏輯解耦：CSS變量管理主題色系，獨立模塊處理游戲規則，體現架構設計思維
交互細節處理：自動生成卡片匹配邏輯、計時器防抖機制、模態框顯隱控制等交互細節

三、核心功能

需求翻譯器：將"勝利彈窗需要顯示數據"轉化為modal組件與狀態綁定的完整實現
代碼建筑師：構建config配置中心、state狀態機、initGame初始化流程等架構元素
最佳實踐向導：采用dataset存儲卡片索引，shuffleArray實現洗牌算法，處處體現規范
智能優化師：通過canFlip防連點機制、setTimeout動畫協調，避免常見交互缺陷

四、優化展望

動態難度系統：根據玩家表現自動調整卡片數量與倒計時規則
智能動畫優化：根據設備性能自動選擇CSS過渡或Web Animation API
跨平臺適配：自動生成不同屏幕尺寸的布局方案與觸控優化
數據驅動迭代：基于玩家行為分析自動優化卡片分布算法

五、感悟

當AI能在數秒內將一個概念轉化為可運行的程序，編程正從"鍵盤敲擊"轉向"思維傳遞"。記憶翻牌游戲的誕生過程揭示：開發者只需專注創意本質，將布局適配交給grid，動畫效果托付transition，邏輯流程由狀態機自動維護。這種協作模式不是替代，而是解放——就像游戲中的卡片完成翻轉后展現的絢麗圖案，AI編程助手正為我們打開人機協作的魔法之門，讓每個創意都能在數字世界完美綻放。

附
index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>記憶翻牌配對游戲</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="game-container">
        <header class="game-header">
            <h1>記憶翻牌配對游戲</h1>
            <div class="game-info">
                <div class="timer">時間: <span id="time">0</span>秒</div>
                <div class="moves">步數: <span id="moves">0</span></div>
            </div>
        </header>
        
        <div class="game-board" id="game-board">
            <!-- 卡片將通過JavaScript動態生成 -->
        </div>
        
        <div class="game-controls">
            <button id="restart-btn">重新開始</button>
        </div>
    </div>

    <div class="modal" id="win-modal">
        <div class="modal-content">
            <h2>恭喜你贏了!</h2>
            <p>用時: <span id="final-time">0</span>秒</p>
            <p>步數: <span id="final-moves">0</span></p>
            <button id="play-again-btn">再玩一次</button>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>

style.css

:root {
    --primary-color: #3498db;
    --secondary-color: #2ecc71;
    --dark-color: #2c3e50;
    --light-color: #ecf0f1;
    --shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Arial', sans-serif;
}

body {
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    color: var(--light-color);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.game-container {
    width: 100%;
    max-width: 800px;
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    padding: 20px;
    box-shadow: var(--shadow);
}

.game-header {
    text-align: center;
    margin-bottom: 20px;
}

.game-header h1 {
    color: var(--light-color);
    margin-bottom: 10px;
}

.game-info {
    display: flex;
    justify-content: space-around;
    background-color: rgba(0, 0, 0, 0.2);
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 20px;
}

.game-board {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    perspective: 1000px;
}

.card {
    position: relative;
    width: 100%;
    height: 100px;
    transform-style: preserve-3d;
    transition: transform 0.5s;
    cursor: pointer;
    border-radius: 5px;
}

.card-face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    box-shadow: var(--shadow);
}

.card-front {
    background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
    transform: rotateY(180deg);
    font-size: 2rem;
    color: white;
}

.card-back {
    background: linear-gradient(45deg, #e74c3c, #f39c12);
    transform: rotateY(0deg);
}

.card.flipped {
    transform: rotateY(180deg);
}

.card.matched {
    transform: rotateY(180deg);
    opacity: 0.7;
    cursor: default;
}

.game-controls {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

button {
    background-color: var(--primary-color);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.3s;
}

button:hover {
    background-color: #2980b9;
    transform: translateY(-2px);
}

.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 100;
    justify-content: center;
    align-items: center;
}

.modal-content {
    background-color: var(--dark-color);
    padding: 30px;
    border-radius: 10px;
    text-align: center;
    max-width: 400px;
    width: 90%;
}

.modal h2 {
    margin-bottom: 20px;
    color: var(--secondary-color);
}

.modal p {
    margin: 10px 0;
    font-size: 1.2rem;
}

@media (max-width: 600px) {
    .game-board {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .card {
        height: 80px;
    }
}

script.js

document.addEventListener('DOMContentLoaded', () => {
    // 游戲配置
    const config = {
        cardPairs: 8, // 卡片對數
        icons: ['??', '??', '??', '??', '??', '??', '??', '??', '??', '??', '??', '??', '??', '??', '??', '??'],
        boardElement: document.getElementById('game-board'),
        timeElement: document.getElementById('time'),
        movesElement: document.getElementById('moves'),
        restartButton: document.getElementById('restart-btn'),
        winModal: document.getElementById('win-modal'),
        finalTimeElement: document.getElementById('final-time'),
        finalMovesElement: document.getElementById('final-moves'),
        playAgainButton: document.getElementById('play-again-btn')
    };

    // 游戲狀態
    let state = {
        cards: [],
        flippedCards: [],
        matchedPairs: 0,
        moves: 0,
        timer: null,
        seconds: 0,
        canFlip: true
    };

    // 初始化游戲
    function initGame() {
        // 重置狀態
        state.cards = [];
        state.flippedCards = [];
        state.matchedPairs = 0;
        state.moves = 0;
        state.seconds = 0;
        state.canFlip = true;
        
        // 更新UI
        config.movesElement.textContent = state.moves;
        config.timeElement.textContent = state.seconds;
        
        // 清除計時器
        if (state.timer) {
            clearInterval(state.timer);
        }
        
        // 開始計時
        state.timer = setInterval(() => {
            state.seconds++;
            config.timeElement.textContent = state.seconds;
        }, 1000);
        
        // 生成卡片
        generateCards();
    }

    // 生成卡片
    function generateCards() {
        // 清空游戲板
        config.boardElement.innerHTML = '';
        
        // 獲取圖標對
        const icons = config.icons.slice(0, config.cardPairs);
        const cardIcons = [...icons, ...icons];
        
        // 洗牌
        shuffleArray(cardIcons);
        
        // 創建卡片元素
        cardIcons.forEach((icon, index) => {
            const card = document.createElement('div');
            card.className = 'card';
            card.dataset.index = index;
            
            card.innerHTML = `
                <div class="card-face card-back"></div>
                <div class="card-face card-front">${icon}</div>
            `;
            
            card.addEventListener('click', flipCard);
            config.boardElement.appendChild(card);
            
            // 保存卡片引用
            state.cards.push({
                element: card,
                icon: icon,
                isFlipped: false,
                isMatched: false
            });
        });
    }

    // 洗牌算法
    function shuffleArray(array) {
        for (let i = array.length - 1; i > 0; i--) {
            const j = Math.floor(Math.random() * (i + 1));
            [array[i], array[j]] = [array[j], array[i]];
        }
        return array;
    }

    // 翻轉卡片
    function flipCard() {
        if (!state.canFlip) return;
        
        const cardIndex = parseInt(this.dataset.index);
        const card = state.cards[cardIndex];
        
        // 如果卡片已經翻轉或匹配，則忽略
        if (card.isFlipped || card.isMatched) return;
        
        // 翻轉卡片
        card.isFlipped = true;
        this.classList.add('flipped');
        state.flippedCards.push(card);
        
        // 如果翻轉了兩張卡片，檢查是否匹配
        if (state.flippedCards.length === 2) {
            state.moves++;
            config.movesElement.textContent = state.moves;
            
            state.canFlip = false;
            checkForMatch();
        }
    }

    // 檢查匹配
    function checkForMatch() {
        const [card1, card2] = state.flippedCards;
        
        if (card1.icon === card2.icon) {
            // 匹配成功
            card1.isMatched = true;
            card2.isMatched = true;
            card1.element.classList.add('matched');
            card2.element.classList.add('matched');
            
            state.matchedPairs++;
            
            // 檢查游戲是否結束
            if (state.matchedPairs === config.cardPairs) {
                setTimeout(endGame, 500);
            }
            
            resetFlippedCards();
        } else {
            // 不匹配，翻回去
            setTimeout(() => {
                card1.isFlipped = false;
                card2.isFlipped = false;
                card1.element.classList.remove('flipped');
                card2.element.classList.remove('flipped');
                
                resetFlippedCards();
            }, 1000);
        }
    }

    // 重置翻轉的卡片
    function resetFlippedCards() {
        state.flippedCards = [];
        state.canFlip = true;
    }

    // 游戲結束
    function endGame() {
        clearInterval(state.timer);
        
        // 顯示勝利模態框
        config.finalTimeElement.textContent = state.seconds;
        config.finalMovesElement.textContent = state.moves;
        config.winModal.style.display = 'flex';
    }

    // 重新開始游戲
    function restartGame() {
        config.winModal.style.display = 'none';
        initGame();
    }

    // 事件監聽
    config.restartButton.addEventListener('click', restartGame);
    config.playAgainButton.addEventListener('click', restartGame);

    // 開始游戲
    initGame();
});

?? 讓技術經驗流動起來

▌▍▎▏ 你的每個互動都在為技術社區蓄能 ▏▎▍▌
? 點贊 → 讓優質經驗被更多人看見
?? 收藏 → 構建你的專屬知識庫
?? 轉發 → 與技術伙伴共享避坑指南

點贊 ? 收藏 ? 轉發，助力更多小伙伴一起成長！??

?? 深度連接：
點擊「頭像」→「+關注」
每周解鎖：
?? 一線架構實錄｜ ?? 故障排查手冊｜ ?? 效能提升秘籍

posted @ 2025-05-20 17:11 黯然消魂掌閱讀(6) 評論(0) 收藏舉報

刷新頁面返回頂部

jimaks

【CodeBuddy】三分鐘開發一個實用小功能之：記憶翻牌配對游戲

前言：人機思維對話

二、應用場景：重塑開發工作流

三、核心功能

四、優化展望

五、感悟

公告

jimaks

【CodeBuddy】三分鐘開發一個實用小功能之：記憶翻牌配對游戲

前言：人機思維對話

二、應用場景：重塑開發工作流

三、核心功能

四、優化展望

五、感悟

公告

二、應用場景：重塑開發工作流

五、感悟