JavaScriptトランプを引くのソースコード

<h1>トランプを引く</h1>
<p><img id="result" src="card-back.png"></p>
<p id="comment"></p>
<button onclick="drawCard()">カードを引く</button>

<script>
// カードデッキの作成
const deck = [];
const suits = ["spade", "heart", "diamond", "club"];
const values = ["A", "2", "3", "4", "5", "6", "7", "8", "9", "10", "J", "Q", "K"];

// デッキにカードを追加
for (let suit of suits) {
for (let value of values) {
deck.push({suit: suit, value: value});
}
}

// デッキをシャッフル
for (let i = deck.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[deck[i], deck[j]] = [deck[j], deck[i]];
}

// カードを引く関数
function drawCard() {
const card = deck.pop();

// カードの数値を取得する関数
const getCardValue = (card) => {
const valueMap = { A: 1, J: 11, Q: 12, K: 13 };
return valueMap[card.value] || parseInt(card.value);
};

// 結果を表示する
document.getElementById('comment').textContent = `引いたカードは${card.suit}の${card.value}です。`;
document.getElementById("result").src = `${card.suit}${card.value}.png`;

// デッキが空になったら再シャッフル
if (deck.length === 0) {
alert("デッキが空になりました。カードをリセットします。");
location.reload();
}
}
</script>