<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>三维四子棋</title>
    <style>
        body {
            margin: 0;
            padding: 10px;
            display: flex;
            flex-direction: column;
            align-items: center;
            background-color: #f0f0f0;
            font-family: Arial, sans-serif;
        }

        .board {
            display: flex;
            flex-direction: column;
            gap: 15px;
            width: 100%;
        }

        .layer {
            display: grid;
            grid-template-rows: repeat(4, 1fr);
            gap: 3px;
            background: #ddd;
            padding: 8px;
            border-radius: 8px;
        }

        .row {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 3px;
        }
        .progress-container {
            width: 80%;
            height: 20px;
            background: #ddd;
            border-radius: 10px;
            margin: 10px;
            display: none;
        }
        .progress-bar {
            width: 0%;
            height: 100%;
            background: #4CAF50;
            border-radius: 10px;
            transition: width 0.3s ease;
        }
        .cell {
            width: 18vw;
            height: 18vw;
            max-width: 70px;
            max-height: 70px;
            background: white;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: background 0.3s;
            position: relative;
        }

        .cell.red { background: #ff4444; }
        .cell.blue { background: #4444ff; }
        .cell.highlight::after {
            content: "";
            position: absolute;
            width: 30%;
            height: 30%;
            background: rgba(255, 215, 0, 0.8);
            border-radius: 50%;
        }

        #status {
            margin: 10px;
            font-size: 1.2em;
            text-align: center;
        }
        .ai-switch {
            margin: 10px;
            padding: 5px 15px;
            font-size: 1em;
            background: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="status">当前玩家：红方</div>
    <button class="ai-switch" onclick="toggleAI()">AI对手：关闭</button>
    <div class="progress-container">
        <div class="progress-bar"></div>
    </div>
    <div class="board"></div>

    <script>
        const board = Array(4).fill().map(() => 
            Array(4).fill().map(() => 
                Array(4).fill(null)
            )
        );
        let aiEnabled = false;
        let aiDepth =4;  // 根据手机性能调整
        const MAX_SCORE = 1000000;
        const MIN_SCORE = -MAX_SCORE;
        let computationSteps = 0;
        let progressContainer = document.querySelector('.progress-container');
        let progressBar = document.querySelector('.progress-bar');
        let totalSteps = 0;
        let completedSteps = 0;
        let currentPlayer = 'red';
const directions = [
    [1,0,0], [0,1,0], [1,1,0], [1,-1,0],
    [0,0,1], [1,0,1], [0,1,1], [1,1,1], [1,-1,1],
    [-1,0,1], [0,-1,1], [1,1,-1], [1,-1,-1]]

        const boardElement = document.querySelector('.board');
        for (let z = 0; z < 4; z++) {
            const layer = document.createElement('div');
            layer.className = 'layer';
            for (let y = 0; y < 4; y++) {
                const row = document.createElement('div');
                row.className = 'row';
                for (let x = 0; x < 4; x++) {
                    const cell = document.createElement('div');
                    cell.className = 'cell';
                    cell.dataset.pos = `${x},${y},${z}`;
                    cell.addEventListener('click', handleClick);
                    row.appendChild(cell);
                }
                layer.appendChild(row);
            }
            boardElement.appendChild(layer);
        }

        async function handleClick(e) {
            if (aiEnabled && currentPlayer === 'blue') return;
            const cell = e.target;
            const [x, y, z] = cell.dataset.pos.split(',').map(Number);
            
            if (board[z][y][x]) return;

            cell.classList.add(currentPlayer);
            board[z][y][x] = currentPlayer;

            if (checkWin(x, y, z)) {
                alert("游戏结束!");
                return;
            } else {
                if (aiEnabled) {
                    currentPlayer='blue';
                    updateStatus();
                    highlightDangerousMoves();
                    await aiMove();
                }
            }

            // 更新高亮
            currentPlayer = currentPlayer === 'red' ? 'blue' : 'red';
            updateStatus();
            highlightDangerousMoves();
        }

        function findDangerousPositions() {
            const enemy = currentPlayer === 'red' ? 'blue' : 'red';
            const dangerous = new Set();

            for(let z=0; z<4; z++){
                for(let y=0; y<4; y++){
                    for(let x=0; x<4; x++){
                        if(board[z][y][x]) continue;
                        
                        // 模拟敌方下棋
                        board[z][y][x] = enemy;
                        if(checkWin(x, y, z)) dangerous.add(`${x},${y},${z}`);
                        board[z][y][x] = null;
                    }
                }
            }
            return dangerous;
        }

        function highlightDangerousMoves() {
            // 清除旧高亮
            document.querySelectorAll('.cell').forEach(cell => {
                cell.classList.remove('highlight');
            });

            const dangers = findDangerousPositions();
            document.querySelectorAll('.cell').forEach(cell => {
                if(dangers.has(cell.dataset.pos)) {
                    cell.classList.add('highlight');
                }
            });
        }

        function checkWin(x, y, z) {
            const player = board[z][y][x];
            if (!player) return null;
            for (const [dx, dy, dz] of directions) {
                let count = 1;
                
                // 正向检查
                for (let i=1; i<4; i++) {
                    const nx = x + dx*i;
                    const ny = y + dy*i;
                    const nz = z + dz*i;
                    if (nx<0 || nx>=4 || ny<0 || ny>=4 || nz<0 || nz>=4) break;
                    if (board[nz][ny][nx] !== player) break;
                    count++;
                }

                // 反向检查
                for (let i=1; i<4; i++) {
                    const nx = x - dx*i;
                    const ny = y - dy*i;
                    const nz = z - dz*i;
                    if (nx<0 || nx>=4 || ny<0 || ny>=4 || nz<0 || nz>=4) break;
                    if (board[nz][ny][nx] !== player) break;
                    count++;
                }

                if (count >= 4) return true;
            }
            return false;
        }

        function updateStatus() {
            document.getElementById('status').textContent = 
                `当前玩家：${currentPlayer === 'red' ? '红方' : '蓝方'}`;
        }

        function resetGame() {
            board.forEach(layer => layer.forEach(row => row.fill(null)));
            document.querySelectorAll('.cell').forEach(cell => {
                cell.className = 'cell';
            });
            currentPlayer = 'red';
            updateStatus();
            highlightDangerousMoves();
        }
async function aiMove() {
            progressContainer.style.display = 'block';
            progressBar.style.width = '0%';
            
            const emptyCells = getEmptyCells();
            totalSteps = emptyCells.length;
            completedSteps = 0;
            
            let bestScore = MIN_SCORE;
            let bestMoves = [];
            
            for (const [x, y, z] of emptyCells) {
                board[z][y][x] = 'blue';
                
                // 立即胜利检查
                if (checkWin(x, y, z)) {
                    bestMoves = [[x, y, z]];
                    board[z][y][x] = null;
                    break;
                }
                
                // 异步更新进度条
                await new Promise(resolve => {
                    requestAnimationFrame(() => {
                        let score = alphaBeta(aiDepth - 1, MIN_SCORE, MAX_SCORE, false);
                        board[z][y][x] = null;
                        
                        if (score > bestScore) {
                            bestScore = score;
                            bestMoves = [[x, y, z]];
                        } else if (score === bestScore) {
                            bestMoves.push([x, y, z]);
                        }
                        
                        completedSteps++;
                        progressBar.style.width = 
                            Math.min(100, (completedSteps / totalSteps) * 100) + '%';
                        resolve();
                    });
                });
            }

            if (bestMoves.length > 0) {
                const [x, y, z] = bestMoves[Math.floor(Math.random() * bestMoves.length)];
                const selector = `[data-pos="${x},${y},${z}"]`;
                const cell = document.querySelector(selector);
                handleAIClick(cell, x, y, z);
            }
            
            progressContainer.style.display = 'none';
        }

        function handleAIClick(cell, x, y, z) {
            cell.classList.add('blue');
            board[z][y][x] = 'blue';

            if (checkWin(x, y, z)) {
                alert('AI获胜！');
                return;
            }
        }

        function evaluateBoard() {
            let score = 0;
            const patterns = [
                {count: 3, gaps: 0, score: 100}, // 活三
                {count: 3, gaps: 1, score: 80},  // 眠三
                {count: 2, gaps: 0, score: 60}   // 活二
            ];

            // 检查所有方向
            directions.forEach(([dx, dy, dz]) => {
                for (let z = 0; z < 4; z++) {
                    for (let y = 0; y < 4; y++) {
                        for (let x = 0; x < 4; x++) {
                            let current = board[z][y][x];
                            if (!current) continue;

                            let streak = 1;
                            let gaps = 0;
                            for (let i = 1; i < 4; i++) {
                                const nx = x + dx*i;
                                const ny = y + dy*i;
                                const nz = z + dz*i;
                                if (nx < 0 || nx >=4 || ny <0 || ny >=4 || nz <0 || nz >=4) break;
                                
                                const cell = board[nz][ny][nx];
                                if (cell === current) {
                                    streak++;
                                } else if (!cell) {
                                    gaps++;
                                } else {
                                    break;
                                }
                            }

                            patterns.forEach(pattern => {
                                if (streak === pattern.count && 
                                   (pattern.gaps === undefined || gaps === pattern.gaps)) {
                                    score += current === 'blue' ? pattern.score : -pattern.score-1;
                                }
                            });
                        }
                    }
                }
            });

            return score;
        }
        
       
        function getEmptyCells() {
            const cells = [];
            for (let z = 0; z < 4; z++) {
                for (let y = 0; y < 4; y++) {
                    for (let x = 0; x < 4; x++) {
                        if (!board[z][y][x]) cells.push([x, y, z]);
                    }
                }
            }
            return cells;
        }
        function toggleAI() {
            aiEnabled = !aiEnabled;
            document.querySelector('.ai-switch').textContent = 
                `AI对手：${aiEnabled ? '开启' : '关闭'}`;
            if (aiEnabled && currentPlayer === 'blue') aiMove();
        }
        function alphaBeta(depth, alpha, beta, maximizingPlayer, lastMove) {
    computationSteps++;
    if (depth === 0) return evaluateBoard();

    const emptyCells = getEmptyCells();
    if (maximizingPlayer) {
        let value = MIN_SCORE;
        for (const [x, y, z] of emptyCells) {
            board[z][y][x] = 'blue';
            if (checkWin(x, y, z)) {
                board[z][y][x] = null;
                return MAX_SCORE;
            }
            const moveScore = alphaBeta(depth - 1, alpha, beta, false, [x, y, z]);
            board[z][y][x] = null;

            if (moveScore === MAX_SCORE) { // 直接胜利
                return MAX_SCORE;
            }
            value = Math.max(value, moveScore);
            alpha = Math.max(alpha, value);
            if (alpha >= beta) break;
        }
        return value;
    } else {
        let value = MAX_SCORE;
        for (const [x, y, z] of emptyCells) {
            board[z][y][x] = 'red';
            if (checkWin(x, y, z)) {
                board[z][y][x] = null;
                return MIN_SCORE;
            }
            const moveScore = alphaBeta(depth - 1, alpha, beta, true, [x, y, z]);
            board[z][y][x] = null;

            if (moveScore === MIN_SCORE) { // 直接失败
                return MIN_SCORE;
            }
            value = Math.min(value, moveScore);
            beta = Math.min(beta, value);
            if (alpha >= beta) break;
        }
        return value;
    }
}


        // 初始高亮
        highlightDangerousMoves();
    </script>
</body>
</html>