HTML斗地主代码解析与实现html斗地主代码

HTML斗地主代码解析与实现html斗地主代码，

本文目录导读：

游戏规则
代码实现
完整代码

斗地主是一款经典的扑克牌游戏,拥有丰富的规则和策略，本文将详细介绍如何使用HTML、JavaScript和CSS实现一款简单的斗地主游戏，并提供完整的代码示例。

斗地主是一款二人或三人参与的扑克牌游戏,主要分为“摸牌”、“出牌”和“出完牌”三个阶段，游戏的目标是通过出牌将对手的牌库中的所有牌出完，本文将实现一个两人斗地主的简化版本。

游戏规则

为了实现斗地主游戏,我们需要明确以下规则：

牌型：
- 炸弹：任意三张相同点数的牌。
- 三带一：任意一张带三张不同点数的牌。
- 对子：任意两张相同点数的牌。
- 单张：任意一张牌。
出牌规则：
- 每次必须出至少一张牌。
- 不能出错牌（即不能出不符合牌型的牌）。
胜负判定：
- 首先比对炸弹,炸弹数量多者胜。
- 若炸弹数量相同,比对三带一，三带一数量多者胜。
- 若三带一数量相同,比对对子，对子数量多者胜。
- 若所有牌型数量相同,比对单张，单张点数总和多者胜。
特殊规则：
- 炸弹必须使用至少三张牌。
- 三带一必须使用至少四张牌。
- 每次出牌后,剩余牌必须形成有效的牌型。

代码实现

HTML结构

我们首先创建一个HTML页面,用于显示游戏界面和控制台输出。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">HTML斗地主</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            background-color: #f0f0f0;
        }
        #gameContainer {
            max-width: 800px;
            margin: 20px auto;
            padding: 20px;
        }
        #player1 {
            background-color: #e0e0e0;
            padding: 10px;
            margin-bottom: 10px;
        }
        #player2 {
            background-color: #e0e0e0;
            padding: 10px;
            margin-bottom: 10px;
        }
        #score {
            margin-top: 20px;
        }
        .player {
            margin: 10px;
        }
    </style>
</head>
<body>
    <h1>HTML斗地主</h1>
    <div id="gameContainer">
        <div id="player1">玩家1：</div>
        <div id="player2">玩家2：</div>
        <div id="score">比分：0 - 0</div>
    </div>
    <script>
        // 游戏逻辑代码将被插入在这里
    </script>
</body>
</html>

JavaScript代码

我们编写JavaScript代码,实现斗地主游戏的功能。

1 创建牌库

我们需要创建一个牌库,包含所有扑克牌。

const suits = ['黑桃', '红心', '梅花', '方块'];
const values = ['2', '3', '4', '5', '6', '7', '8', '9', '10', 'J', 'Q', 'K', 'A'];
const cards = [];
suits.forEach(suit => {
    values.forEach(value => {
        cards.push(`${value}${suit}`);
    });
});

2 洗牌

每次游戏开始前,我们需要洗牌。

function shuffleCards() {
    const cardList = [...cards];
    Math.random().sort(cardList);
    return cardList;
}

3 分配牌

将洗好的牌分配给玩家。

function dealCards() {
    const cards = shuffleCards();
    const player1 = cards.slice(0, 2);
    const player2 = cards.slice(2);
    return { player1, player2 };
}

4 判断牌型

我们需要一个函数来判断给定的牌是否符合特定的牌型。

function checkHand(hand, target) {
    const valueMap = {
        '2': 2, '3': 3, '4': 4, '5': 5, '6': 6, '7': 7, '8': 8, '9': 9, '10': 10,
        'J': 11, 'Q': 12, 'K': 13, 'A': 14
    };
    const counts = Array(15).fill(0); // 0到14
    hand.forEach(card => {
        const value = valueMap[card[0]] || valueMap[card[1]];
        counts[value] += 1;
    });
    if (target === '炸弹') {
        return counts.some(c => c >= 3);
    } else if (target === '三带一') {
        return counts.some(c => c >= 3) && counts.some(c => c === 1);
    } else if (target === '对子') {
        return counts.some(c => c >= 2);
    } else {
        return true; // 单张
    }
}

5 出牌逻辑

玩家可以根据当前牌型出牌。

function playCard(player, card) {
    player = player.replace(new RegExp(card, '/g'), '');
    return player;
}

6 游戏循环

主游戏循环,处理玩家出牌和判定胜负。

function gameLoop() {
    // 判断当前牌型
    const player1Hand = [...player1Cards];
    const player2Hand = [...player2Cards];
    // 玩家1出牌
    const player1CurrentHand = player1Hand.filter(card => {
        // 检查是否符合出牌规则
        const isBomb = checkHand(player1CurrentHand, '炸弹');
        const isTrip = checkHand(player1CurrentHand, '三带一');
        const isPair = checkHand(player1CurrentHand, '对子');
        const isSingle = !isBomb && !isTrip && !isPair;
        if (!isSingle) {
            return false;
        }
        return true;
    });
    if (player1CurrentHand.length === 0) {
        // 玩家1输
        updateScore(0, 1);
        return;
    }
    const cardToPlay = player1CurrentHand[0];
    player1Cards = playCard(player1Cards, cardToPlay);
    showHand(player1Cards);
    // 判断胜负
    if (winCondition(player1Cards, player2Cards)) {
        updateScore(1, 2);
        return;
    }
    // 玩家2出牌
    const player2CurrentHand = player2Hand.filter(card => {
        const isBomb = checkHand(player2CurrentHand, '炸弹');
        const isTrip = checkHand(player2CurrentHand, '三带一');
        const isPair = checkHand(player2CurrentHand, '对子');
        const isSingle = !isBomb && !isTrip && !isPair;
        if (!isSingle) {
            return false;
        }
        return true;
    });
    if (player2CurrentHand.length === 0) {
        // 玩家2输
        updateScore(1, 2);
        return;
    }
    const cardToPlay = player2CurrentHand[0];
    player2Cards = playCard(player2Cards, cardToPlay);
    showHand(player2Cards);
    // 判断胜负
    if (winCondition(player1Cards, player2Cards)) {
        updateScore(1, 2);
    }
}
function showHand(hand) {
    // 显示玩家当前的牌
    return hand.join(', ');
}
function winCondition(player1, player2) {
    // 比较牌型
    const player1Bombs = player1.filter(card => {
        const value = card[0] || card[1];
        return value <= 14 && value >= 2 && value >= 2 && value >= 2;
    }).length;
    const player2Bombs = player2.filter(card => {
        const value = card[0] || card[1];
        return value <= 14 && value >= 2 && value >= 2 && value >= 2;
    }).length;
    if (player1Bombs > player2Bombs) {
        return true;
    } else if (player1Bombs < player2Bombs) {
        return false;
    } else {
        // 比较三带一
        const player1Triples = player1.filter(hand => {
            const values = hand.split('').map(c => c.slice(-1)).map(v => {
                const suit = c.slice(0);
                return parseInt(v) === 3;
            });
            return values.length >= 3;
        }).length;
        const player2Triples = player2.filter(hand => {
            const values = hand.split('').map(c => c.slice(-1)).map(v => {
                const suit = c.slice(0);
                return parseInt(v) === 3;
            });
            return values.length >= 3;
        }).length;
        if (player1Triples > player2Triples) {
            return true;
        } else if (player1Triples < player2Triples) {
            return false;
        } else {
            // 比较对子
            const player1Pairs = player1.filter(hand => {
                const values = hand.split('').map(c => c.slice(-1)).map(v => {
                    const suit = c.slice(0);
                    return parseInt(v) === 2;
                });
                return values.length >= 2;
            }).length;
            const player2Pairs = player2.filter(hand => {
                const values = hand.split('').map(c => c.slice(-1)).map(v => {
                    const suit = c.slice(0);
                    return parseInt(v) === 2;
                });
                return values.length >= 2;
            }).length;
            if (player1Pairs > player2Pairs) {
                return true;
            } else if (player1Pairs < player2Pairs) {
                return false;
            } else {
                // 比较单张
                const player1Singles = player1.reduce((acc, curr) => {
                    const value = curr.slice(-1);
                    return acc + (value === 14 ? 1 : 0);
                }, 0);
                const player2Singles = player2.reduce((acc, curr) => {
                    const value = curr.slice(-1);
                    return acc + (value === 14 ? 1 : 0);
                }, 0);
                return player1Singles > player2Singles;
            }
        }
    }
}

7 分数更新

当一方出完牌时,更新分数。

function updateScore(winner, loser) {
    document.getElementById('score').textContent = `比分：${winner} - ${loser}`;
}

8 游戏初始化

初始化游戏并开始循环。

function initGame() {
    const player1Cards = [];
    const player2Cards = [];
    const cards = shuffleCards();
    player1Cards = cards.slice(0, 2);
    player2Cards = cards.slice(2);
    showHand(player1Cards);
    showHand(player2Cards);
    gameLoop();
}
initGame();

完整代码

将以上代码整合到一个HTML文件中：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">HTML斗地主</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            background-color: #f0f0f0;
        }
        #gameContainer {
            max-width: 800px;
            margin: 20px auto;
            padding: 20px;
        }
        #player1 {
            background-color: #e0e0e0;
            padding: 10px;
            margin-bottom: 10px;
        }
        #player2 {
            background-color: #e0e0e0;
            padding: 10px;
            margin-bottom: 10px;
        }
        #score {
            margin-top: 20px;
        }
        .player {
            margin: 10px;
        }
    </style>
</head>
<body>
    <h1>HTML斗地主</h1>
    <div id="gameContainer">
        <div id="player1">玩家1：</div>
        <div id="player2">玩家2：</div>
        <div id="score">比分：0 - 0</div>
    </div>
    <script>
        const suits = ['黑桃', '红心', '梅花', '方块'];
        const values = ['2', '3', '4', '5', '6', '7', '8', '9', '10', 'J', 'Q', 'K', 'A'];
        const cards = [];
        suits.forEach(suit => {
            values.forEach(value => {
                cards.push(`${value}${suit}`);
            });
        });
        function shuffleCards() {
            const cardList = [...cards];
            Math.random().sort(cardList);
            return cardList;
        }
        function dealCards() {
            const cards = shuffleCards();
            const player1 = cards.slice(0, 2);
            const player2 = cards.slice(2);
            return { player1, player2 };
        }
        function checkHand(hand, target) {
            const valueMap = {
                '2': 2, '3': 3, '4': 4, '5': 5, '6': 6, '7': 7, '8': 8, '9': 9, '10': 10,
                'J': 11, 'Q': 12, 'K': 13, 'A': 14
            };
            const counts = Array(15).fill(0); // 0到14
            hand.forEach(card => {
                const value = valueMap[card[0]] || valueMap[card[1]];
                counts[value] += 1;
            });
            if (target === '炸弹') {
                return counts.some(c => c >= 3);
            } else if (target === '三带一') {
                return counts.some(c => c >= 3) && counts.some(c => c === 1);
            } else if (target === '对子') {
                return counts.some(c => c >= 2);
            } else {
                return true; // 单张
            }
        }
        function playCard(player, card) {
            player = player.replace(new RegExp(card, '/g'), '');
            return player;
        }
        function showHand(hand) {
            return hand.join(', ');
        }
        function winCondition(player1, player2) {
            const player1Bombs = player1.filter(card => {
                const value = card[0] || card[1];
                return value <= 14 && value >= 2 && value >= 2 && value >= 2;
            }).length;
            const player2Bombs = player2.filter(card => {
                const value = card[0] || card[1];
                return value <= 14 && value >= 2 && value >= 2 && value >= 2;
            }).length;
            if (player1Bombs > player2Bombs) {
                return true;
            } else if (player1Bombs < player2Bombs) {
                return false;
            } else {
                const player1Triples = player1.filter(hand => {
                    const values = hand.split('').map(c => c.slice(-1)).map(v => {
                        const suit = c.slice(0);
                        return parseInt(v) === 3;
                    });
                    return values.length >= 3;
                }).length;
                const player2Triples = player2.filter(hand => {
                    const values = hand.split('').map(c => c.slice(-1)).map(v => {
                        const suit = c.slice(0);
                        return parseInt(v) === 3;
                    });
                    return values.length >= 3;
                }).length;
                if (player1Triples > player2Triples) {
                    return true;
                } else if (player1Triples < player2Triples) {
                    return false;
                } else {
                    const player1Pairs = player1.filter(hand => {
                        const values = hand.split('').map(c => c.slice(-1)).map(v => {
                            const suit = c.slice(0);
                            return parseInt(v) === 2;
                        });
                        return values.length >= 2;
                    }).length;
                    const player2Pairs = player2.filter(hand => {
                        const values = hand.split('').map(c => c.slice(-1)).map(v => {
                            const suit = c.slice(0);
                            return parseInt(v) === 2;
                        });
                        return values.length >= 2;
                    }).length;
                    if (player1Pairs > player2Pairs) {
                        return true;
                    } else if (player1Pairs < player2Pairs) {
                        return false;
                    } else {
                        const player1Singles = player1.reduce((acc, curr) => {
                            const value = curr.slice(-1);
                            return acc + (value === 14 ? 1 : 0);
                        }, 0);
                        const player2Singles = player2.reduce((acc, curr) => {
                            const value = curr.slice(-1);
                            return acc + (value === 14 ? 1 : 0);
                        }, 0);
                        return player1Singles > player2Singles;
                    }
                }
            }
        }
        function updateScore(winner, loser) {
            document.getElementById('score').textContent = `比分：${winner} - ${loser}`;
        }
        function initGame() {
            const player1Cards = [];
            const player2Cards = [];
            const cards = shuffleCards();
            player1Cards = cards.slice(0, 2);
            player2Cards = cards.slice(2);
            showHand(player1Cards);
            showHand(player2Cards);
            gameLoop();
        }

HTML斗地主代码解析与实现html斗地主代码，