JavaScriptプログラミング第３弾です。
たかがじゃんけんゲームですが、この形に落ち着くまでに数時間もかかってしまいました。
ゲームプログラミングってほんと難しいっす。
以下、コードです。
<!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 {
font-family: Arial, sans-serif;
text-align: center;
margin-top: 50px;
}
button {
padding: 10px 20px;
font-size: 16px;
margin: 5px;
display: none;
}
#start-button {
display: inline-block;
}
#result {
margin-top: 20px;
font-size: 18px;
}
</style>
</head>
<body>
<h1>じゃんけんゲーム</h1>
<p id="display"></p>
<button id="start-button" onclick="startGame()">じゃんけんを始める</button>
<div id="choices">
<button id="gu-button" onclick="play('グー')">グー</button>
<button id="choki-button" onclick="play('チョキ')">チョキ</button>
<button id="pa-button" onclick="play('パー')">パー</button>
</div>
<div id="result">
<p id="player-choice"></p>
<p id="computer-choice"></p>
<p id="game-result"></p>
</div>
<script>
function resetGame() {
// 結果表示エリアをクリア
document.getElementById('player-choice').textContent = '';
document.getElementById('computer-choice').textContent = '';
document.getElementById('game-result').textContent = '';
}
function startGame() {
const display = document.getElementById('display');
const startButton = document.getElementById('start-button');
// 前の結果をリセット
resetGame();
display.textContent = 'じゃん';
startButton.style.display = 'none';
setTimeout(() => {
display.textContent = 'けん';
}, 1000);
setTimeout(() => {
display.textContent = '';
// ボタンを表示
document.getElementById('gu-button').style.display = 'inline-block';
document.getElementById('choki-button').style.display = 'inline-block';
document.getElementById('pa-button').style.display = 'inline-block';
}, 2000);
}
function play(playerChoice) {
const choices = ['グー', 'チョキ', 'パー'];
const computerChoice = choices[Math.floor(Math.random() * choices.length)];
let result = '';
if (playerChoice === computerChoice) {
result = 'あいこ！';
} else if (
(playerChoice === 'グー' && computerChoice === 'チョキ') ||
(playerChoice === 'チョキ' && computerChoice === 'パー') ||
(playerChoice === 'パー' && computerChoice === 'グー')
) {
result = 'あなたの勝ち！';
} else {
result = 'コンピュータの勝ち！';
}
// 結果を縦に表示
document.getElementById('player-choice').textContent = `あなた: ${playerChoice}`;
document.getElementById('computer-choice').textContent = `コンピュータ: ${computerChoice}`;
document.getElementById('game-result').textContent = result;
// ボタンを再び非表示にし、再スタートボタンを表示
document.getElementById('gu-button').style.display = 'none';
document.getElementById('choki-button').style.display = 'none';
document.getElementById('pa-button').style.display = 'none';
document.getElementById('start-button').style.display = 'inline-block';
}
</script>
</body>
</html>