JavaScriptブラックジャックのソースコード

<style>
.hand {
display: flex;
margin: 20px 0;
}
.hand img {
height: auto;
margin: 0 5px;
}
button {
margin: 10px;
padding: 10px 20px;
font-size: 16px;
}
</style>

<h1>ブラックジャック</h1>
<p>【ディーラー】</p>
<div id="dealer-hand" class="hand"></div>
<p id="dealer-score"></p>
<div id="player-hand" class="hand"></div>
<p>【プレイヤー】</p>
<p id="player-score"></p>
<p id="message"></p>
<button id="hit">ヒット</button>
<button id="stand">スタンド</button>
<button id="new-game">新しいゲーム</button>

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

// プレイヤーとディーラーの手札
let playerHand = [];
let dealerHand = [];

// カードの値を取得する関数
const getCardValue = (card, currentTotal) => {
if (["J", "Q", "K"].includes(card.value)) return 10;
if (card.value === "A") return currentTotal <= 10 ? 11 : 1;
return parseInt(card.value);
};

// デッキを初期化し、シャッフルする関数
function initializeDeck() {
deck = [];
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() {
if (deck.length === 0) initializeDeck();
return deck.pop();
}

// 手札の合計値を計算する関数
function calculateHandValue(hand) {
let total = 0;
let hasAce = false;
for (let card of hand) {
if (card.value === "A") hasAce = true;
total += getCardValue(card, total);
}
if (hasAce && total + 10 <= 21) total += 10;
return total;
}

// 手札を表示する関数
function displayHand(hand, elementId, hideFirstCard = false) {
const handElement = document.getElementById(elementId);
handElement.innerHTML = "";
hand.forEach((card, index) => {
const cardImg = document.createElement("img");
cardImg.src = hideFirstCard && index === 0 ? "card-back.png" : `${card.suit}${card.value}.png`;
cardImg.alt = hideFirstCard && index === 0 ? "Hidden Card" : `${card.value} of ${card.suit}`;
handElement.appendChild(cardImg);
});
}

// ゲームの状態を更新する関数
function updateGameState() {
displayHand(playerHand, "player-hand");
displayHand(dealerHand, "dealer-hand", true);
document.getElementById("player-score").textContent = `プレイヤーの得点: ${calculateHandValue(playerHand)}`;
}

// 新しいゲームを開始する関数
function startNewGame() {
initializeDeck();
playerHand = [drawCard(), drawCard()];
dealerHand = [drawCard(), drawCard()];
document.getElementById("hit").disabled = false;
document.getElementById("stand").disabled = false;
document.getElementById("message").textContent = "";
document.getElementById("dealer-score").textContent = "";
updateGameState();
}

// プレイヤーがヒットする関数
function playerHit() {
playerHand.push(drawCard());
const playerScore = calculateHandValue(playerHand);
updateGameState();
if (playerScore > 21) {
endGame("プレイヤーがバーストしました。ディーラーの勝ちです！");
}
}

// プレイヤーがスタンドする関数
function playerStand() {
document.getElementById("hit").disabled = true;
document.getElementById("stand").disabled = true;

// ディーラーは自動プレイ
displayHand(dealerHand, "dealer-hand");
let dealerScore = calculateHandValue(dealerHand);
document.getElementById("dealer-score").textContent = `ディーラーの得点: ${dealerScore}`;

while (dealerScore < 17) {
dealerHand.push(drawCard());
dealerScore = calculateHandValue(dealerHand);
displayHand(dealerHand, "dealer-hand");
document.getElementById("dealer-score").textContent = `ディーラーの得点: ${dealerScore}`;
}

// 勝敗を判定する
const playerScore = calculateHandValue(playerHand);
if (dealerScore > 21) {
endGame("ディーラーがバーストしました。プレイヤーの勝ちです！");
} else if (dealerScore > playerScore) {
endGame("ディーラーの勝ちです！");
} else if (dealerScore < playerScore) {
endGame("プレイヤーの勝ちです！");
} else {
endGame("引き分けです！");
}
}

// ゲームを終了する関数
function endGame(message) {
document.getElementById("message").textContent = message;
document.getElementById("hit").disabled = true;
document.getElementById("stand").disabled = true;
displayHand(dealerHand, "dealer-hand");
document.getElementById("dealer-score").textContent = `ディーラーの得点: ${calculateHandValue(dealerHand)}`;
}

// イベントリスナーの設定
document.getElementById("hit").addEventListener("click", playerHit);
document.getElementById("stand").addEventListener("click", playerStand);
document.getElementById("new-game").addEventListener("click", startNewGame);

// ゲームの初期化
startNewGame();
</script>