JavaScriptハイ＆ローのソースコード

<h1>ハイ＆ロー</h1>
<p>【コンピューター】</p>
<p><img id="currentCard" src="card-back.png" alt="カード"></p>
<p>【プレイヤー】</p>
<p><img id="nextCard" src="card-back.png" alt="カード"></p>
<p>コンピューターのカードよりプレイヤーのカードが「大きい」か「小さい」か予想して下さい</p>
<button id="highButton" onclick="guessHigh()">大きい</button>
<button id="lowButton" onclick="guessLow()">小さい</button>
<p id="result"></p>
<button id="restartButton" onclick="startNewGame()" style="display:none;">もう一度プレイ</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 currentCard, nextCard;

// デッキを初期化し、シャッフルする関数
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 getCardValue(card) {
const valueMap = { A: 1, J: 11, Q: 12, K: 13 };
return valueMap[card.value] || parseInt(card.value);
}

// 新しいゲームを開始する関数
function startNewGame() {
initializeDeck();
currentCard = deck.pop();
nextCard = deck.pop();
document.getElementById("currentCard").src = `${currentCard.suit}${currentCard.value}.png`;
document.getElementById("nextCard").src = "card-back.png";
document.getElementById("result").textContent = "";
document.getElementById("highButton").style.display = "inline";
document.getElementById("lowButton").style.display = "inline";
document.getElementById("restartButton").style.display = "none";
}

// プレイヤーの予想を処理する関数
function makeGuess(isHigh) {
document.getElementById("nextCard").src = `${nextCard.suit}${nextCard.value}.png`;

const currentValue = getCardValue(currentCard);
const nextValue = getCardValue(nextCard);

let result;
if ((isHigh && nextValue > currentValue) || (!isHigh && nextValue < currentValue)) {
result = "当たりです！";
} else {
result = "はずれです！";
}

document.getElementById("result").textContent = result;
document.getElementById("highButton").style.display = "none";
document.getElementById("lowButton").style.display = "none";
document.getElementById("restartButton").style.display = "inline";
}

// 高いと予想する関数
function guessHigh() {
makeGuess(true);
}

// 低いと予想する関数
function guessLow() {
makeGuess(false);
}

// ゲーム開始時に初期化
startNewGame();
</script>