JavaScript石取りゲームのソースコード

<h1>石取りゲーム</h1>
<p>20個の石を1～3個の間で取っていき最後の1個を取らなければ勝利です</p>
<p id="stones">残りの石の数: 20</p>
<p id="stoneVisual"></p>
<p id="message"></p>
<div id="radioButtons">
</div>
<button id="actionButton" onclick="playerTurn()">石を取る</button>

<script>
// 石の数
let stones = 20;

// ラジオボタンを動的に生成
function generateRadioButtons() {
const radioButtonsDiv = document.getElementById("radioButtons");

// 前のラジオボタンをクリア
radioButtonsDiv.innerHTML = "";

// 残りの石の数に応じて、ラジオボタンを生成
const maxSelectable = Math.min(3, stones);

for (let i = 1; i <= maxSelectable; i++) {
// ラジオボタンの要素を作成
const radioButton = document.createElement("input");
radioButton.type = "radio";
radioButton.id = `stone${i}`;
radioButton.name = "stone";
radioButton.value = i;

if (i === 1) {
// 最初のボタンをデフォルト選択
radioButton.checked = true;
}

// ラベルの要素を作成
const label = document.createElement("label");
label.htmlFor = `stone${i}`;
label.textContent = i + "個";

// DOMに追加
radioButtonsDiv.appendChild(radioButton);
radioButtonsDiv.appendChild(label);
radioButtonsDiv.appendChild(document.createElement("br"));
}
}

// プレイヤーのターンの処理
function playerTurn() {

// 選択された石の数を取得
const selectedStone = document.querySelector('input[name="stone"]:checked').value;
const playerStones = parseInt(selectedStone);

// 石を減らす
stones -= playerStones;
updateStones();

// ゲーム終了判定
if (stones === 0) {
document.getElementById("message").textContent = "あなたの負けです！";
changeToResetButton();
return;
}

// 1秒後にコンピューターのターン
setTimeout(computerTurn, 1000);
}

// コンピューターのターンの処理
function computerTurn() {
let computerStones;

// 最後の1個の時のコンピューターの処理
if (stones === 1) {
computerStones = 1;
stones -= computerStones;
document.getElementById("message").textContent = "コンピューターが " + computerStones + " 個の石を取りました。";
updateStones();
document.getElementById("message").textContent = "あなたの勝利です！";
changeToResetButton();
return;
}

// 石が4個以下になればコンピューターに最適な手を取らせる
if (stones <= 4) {
computerStones = stones - 1;
} else {
computerStones = Math.floor(Math.random() * 3) + 1;
}

// 結果を表示
document.getElementById("message").textContent = "コンピューターが " + computerStones + " 個の石を取りました。";
stones -= computerStones;
updateStones();

// ゲーム終了判定
if (stones === 0) {
document.getElementById("message").textContent = "あなたの勝利です！";
changeToResetButton();
return;
}
}

// 残りの石の数の表示設定
function updateStones() {
document.getElementById("stones").textContent = "残りの石の数: " + stones;
generateRadioButtons();
updateStoneVisual();
}

// 残りの石の数を〇で表示
function updateStoneVisual() {
const stoneVisual = document.getElementById("stoneVisual");
stoneVisual.textContent = "〇".repeat(stones);
}

// ゲームが終了したらリセットボタンを表示
function changeToResetButton() {
const button = document.getElementById("actionButton");
button.textContent = "リセット";
button.onclick = resetGame;
}

// リスタート設定
function resetGame() {

// 石の数をリセット
stones = 20;

// メッセージをクリア
document.getElementById("message").textContent = "";
document.getElementById("stones").textContent = "残りの石の数: 20";

// ボタンを元に戻す
const button = document.getElementById("actionButton");
button.textContent = "石を取る";
button.onclick = playerTurn;

// ラジオボタンと石の視覚表示を更新
generateRadioButtons();
updateStoneVisual();
}

// 初回ロード時にラジオボタンと石の視覚表示を生成
generateRadioButtons();
updateStoneVisual();
</script>