きっかけ

この記事を読んで作りたくなった。

前書き（予防線）

なるべくシンプルに少ないコードで、
バニラJSで、
拡張性を別段考慮せず、
ボタン連打によるバグなども一切考慮せず、
演出やUIは全くこだわらず、
1ファイルで完結するようにし、
ロジックが初学者でも（頑張れば）分かるように意識して作ってみました。

詳しいルールはWikipediaを読んでください。（丸投げ）

以下が分かっていればいいです。

「2～9」はそのまま
「10～K」は10
「A」は1 or 11
合計が21を超えずに近い方が勝ち
両者とも21を超えたらプレイヤーの負け
ディーラーがカード2枚で合計21、
プレイヤーがカード3枚以上で合計21の場合、プレイヤーの負け
HIT = カード追加
STAND = このままでいい

なおゲームで出てくるカードの「T」は「10」を意味しています。

成果物

コード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ブラックジャックもどき</title>
    <style>
    body, button {
        font-size: 32px;
        user-select: none;
    }
    .name {
        display: inline-block;
        width: 150px;
        text-align: center;
    }
    #dealer-card-list, #player-card-list {
        display: inline-block;
    }
    #result, #hit, #stand {
        display: inline-block;
        margin-right: 8px;
    }
    #next {
        display: block;
    }
    @media screen and (width <= 480px) {
        body, button {
            font-size: 14px;
        }
        .name {
            width: 70px;
        }
    }
    </style>
</head>
<body>
    <div id="history">WIN：0 / LOSE：0 / DRAW：0</div>
    <div>
        <div class="name">DEALER</div>
        <div id="dealer-card-list"></div>
    </div>
    <div>
        <div class="name">PLAYER</div>
        <div id="player-card-list"></div>
    </div>
    <button id="hit">HIT</button><button id="stand">STAND</button>
    <div id="result"></div><button id="next">NEXT</button>

    <script>
    const domHistory = document.querySelector("#history");
    const domDealerCardList = document.querySelector("#dealer-card-list");
    const domPlayerCardList = document.querySelector("#player-card-list");
    const domResult = document.querySelector("#result");
    const domHit = document.querySelector("#hit");
    const domStand = document.querySelector("#stand");
    const domNext = document.querySelector("#next");
    let winCount = 0, loseCount = 0, drawCount = 0;
    let cardList = [];
    let dealerCardList = [];
    let playerCardList = [];

    /// UI更新処理定義、シーン処理定義

    function updateUICardList(isGameOver = false) {
        if (isGameOver) {
            domDealerCardList.textContent = dealerCardList.map(card => card.suit + card.numberName).join(" ");
        }
        else {
            domDealerCardList.textContent = dealerCardList[0].suit + dealerCardList[0].numberName;
            for (let i = 0; i < dealerCardList.length - 1; i++) {
                domDealerCardList.textContent += " ？";
            }
        }
        domPlayerCardList.textContent = playerCardList.map(card => card.suit + card.numberName).join(" ");
    }

    function gameStartScene() {
        cardList = [];
        for (const suit of "♠♣♢♡") {
            for (const numberName of "A23456789TJQK") {
                cardList.push({suit, numberName});
            }
        }
        dealerCardList = [hit(), hit()];
        playerCardList = [hit(), hit()];

        updateUICardList();
        domResult.style.display = "none";
        domHit.style.display = "";
        domStand.style.display = "";
        domNext.style.display = "none";
    }

    function gameOverScene() {
        const playerSum = calcSum(playerCardList);
        const dealerSum = calcSum(dealerCardList);
        let result = "";

        // バストは強制敗北
        if (playerSum > 21) {
            loseCount++;
            result = "LOSE";
        }
        else if (dealerSum > 21) {
            winCount++;
            result = "WIN";
        }
        else if (playerSum === 21 && dealerSum === 21) {
            if (dealerCardList.length === 2 && playerCardList.length > 2) {
                loseCount++;
                result = "LOSE";
            }
            else {
                drawCount++;
                result = "DRAW";
            }
        }
        else if (playerSum > dealerSum) {
            winCount++;
            result = "WIN";
        }
        else if (playerSum < dealerSum) {
            loseCount++;
            result = "LOSE";
        }
        else {
            drawCount++;
            result = "DRAW";
        }

        updateUICardList(true);
        domResult.style.display = "";
        const displayPlayerSum = playerSum === 21 && playerCardList.length === 2 ? "NATURAL21" : playerSum;
        const displayDealerSum = dealerSum === 21 && dealerCardList.length === 2 ? "NATURAL21" : dealerSum;
        domResult.textContent = `PLAYER：${displayPlayerSum}, DEALER：${displayDealerSum} / ${result}`;
        domHistory.textContent = `WIN：${winCount} / LOSE：${loseCount} / DRAW：${drawCount}`;
        domHit.style.display = "none";
        domStand.style.display = "none";
        domNext.style.display = "";
    }

    /// ビジネスロジック定義

    function calcSum(cardList) {
        let maxAceCount = 0;
        let sum = 0;
        for (const card of cardList) {
            if (card.numberName === "A") {
                maxAceCount++;
            }
            else if ("TJQK".includes(card.numberName)) {
                sum += 10;
            }
            else {
                sum += Number(card.numberName);
            }
        }
        // 「♠A ♣A ♢A ♡A ♠8 ♠9」みたいなケースがあるのでエースは最後に足す
        const tmpSum = sum;
        for (let aceCount = 0; aceCount <= maxAceCount; aceCount++) {
            sum = tmpSum + 11 * (maxAceCount - aceCount) + 1 * aceCount;
            if (sum <= 21) {
                return sum;
            }
        }
        return sum;
    }

    function hit() {
        const index = Math.floor(Math.random() * cardList.length);
        const card = cardList[index];
        cardList.splice(index, 1);
        return card;
    }

    function dealerTurn(isPlayerStand = false) {
        if (calcSum(dealerCardList) >= 17) {
            return;
        }
        dealerCardList.push(hit());
        if (isPlayerStand) {
            dealerTurn(true);
        }
    }

    /// イベント定義

    domHit.onclick = () => {
        playerCardList.push(hit());

        if (calcSum(playerCardList) > 21) {
            gameOverScene();
            return;
        }
        dealerTurn();
        updateUICardList();
    };

    domStand.onclick = () => {
        dealerTurn(true);
        gameOverScene();
    };

    domNext.onclick = () => {
        gameStartScene();
    };

    /// ゲーム開始
    gameStartScene();
    </script>
</body>
</html>