console 命令行工具 X clear

console

// 定义所有牌
const cards = [
    "3♠️", "4♠️", "5♠️", "6♠️", "7♠️", "8♠️", "9♠️", "10♠️", "J♠️", "Q♠️", "K♠️", "A♠️", "2♠️",
    "3♥️", "4♥️", "5♥️", "6♥️", "7♥️", "8♥️", "9♥️", "10♥️", "J♥️", "Q♥️", "K♥️", "A♥️", "2♥️",
    "3♦️", "4♦️", "5♦️", "6♦️", "7♦️", "8♦️", "9♦️", "10♦️", "J♦️", "Q♦️", "K♦️", "A♦️", "2♦️",
    "3♣️", "4♣️", "5♣️", "6♣️", "7♣️", "8♣️", "9♣️", "10♣️", "J♣️", "Q♣️", "K♣️", "A♣️", "2♣️",
    "小王", "大王"
];

// 按花色分组
const groupedCards = {
    "♠️": [],
    "♥️": [],
    "♦️": [],
    "♣️": [],
    "特殊": [] // 小王和大王
};

cards.forEach(card => {
    if (card.includes("小王") || card.includes("大王")) {
        groupedCards["特殊"].push(card);
    } else {
        const suit = card.slice(-2); // 获取花色
        groupedCards[suit].push(card);
    }
});

// 初始化牌
const cardContainer = document.getElementById("cardContainer");
for (const suit in groupedCards) {
    const row = document.createElement("div");
    row.className = "card-row";
    groupedCards[suit].forEach(card => {
        const cardElement = document.createElement("div");
        cardElement.className = "card";
        cardElement.textContent = card;
        cardElement.addEventListener("click", () => {
            cardElement.classList.toggle("hidden"); // 切换隐藏状态
        });
        row.appendChild(cardElement);
    });
    cardContainer.appendChild(row);
}

// 特殊牌（小王、大王）单独一行
const specialRow = document.createElement("div");
specialRow.className = "card-row";
groupedCards["特殊"].forEach(card => {
    const cardElement = document.createElement("div");
    cardElement.className = "card";
    cardElement.textContent = card;
    cardElement.addEventListener("click", () => {
        cardElement.classList.toggle("hidden");
    });
    specialRow.appendChild(cardElement);
});
cardContainer.appendChild(specialRow);

// 重置按钮
const resetButton = document.getElementById("resetButton");
resetButton.addEventListener("click", () => {
    const allCards = document.querySelectorAll(".card");
    allCards.forEach(card => {
        card.classList.remove("hidden");
    });
});

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>欢乐斗地主记牌器</title>
</head>
<body>
    <h1>欢乐斗地主记牌器</h1>
    <div id="cardContainer"></div>
    <button id="resetButton">重置</button>
</body>
</html>

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    padding: 20px;
}
.card-row {
    display: flex;
    gap: 5px; /* 牌间距 */
    margin-bottom: 10px; /* 行间距 */
}
.card {
    width: 60px;
    height: 80px;
    background-color: #007bff;
    color: white;
    text-align: center;
    line-height: 80px;
    font-size: 24px;
    border-radius: 10px;
    cursor: pointer;
}
.card.hidden {
    visibility: hidden; /* 隐藏牌但保留位置 */
}
#resetButton {
    margin-top: 20px;
    padding: 10px 20px;
    font-size: 18px;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 10px;
    cursor: pointer;
}