<!DOCTYPE html>
<html>
<head>
<title>じゃんけんアプリ</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
font-family: sans-serif;
text-align: center;
}
h1 {
margin-top: 2em;
}
button {
margin: 0.5em;
padding: 0.5em 1em;
font-size: 1.2em;
border-radius: 10px;
border: none;
background-color: #ccc;
color: white;
cursor: pointer;
}
button:hover {
background-color: #999;
}
.result {
margin-top: 2em;
font-size: 1.5em;
font-weight: bold;
color: #333;
}
.error {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<h1>じゃんけんアプリ</h1>
<button id="btn-gu">グー</button>
<button id="btn-choki">チョキ</button>
<button id="btn-pa">パー</button>
<div class="result"></div>
<script>
const btnGu = document.getElementById('btn-gu');
const btnChoki = document.getElementById('btn-choki');
const btnPa = document.getElementById('btn-pa');
const resultDiv = document.querySelector('.result');
function getRandomInt(max) {
return Math.floor(Math.random() * Math.floor(max));
}
function getComputerHand() {
const hands = ['グー', 'チョキ', 'パー'];
const randomIndex = getRandomInt(3);
return hands[randomIndex];
}
function showResult(playerHand) {
const computerHand = getComputerHand();
let resultText = '';
if (playerHand === computerHand) {
resultText = 'あいこです！';
} else if (
(playerHand === 'グー' && computerHand === 'チョキ') ||
(playerHand === 'チョキ' && computerHand === 'パー') ||
(playerHand === 'パー' && computerHand === 'グー')
) {
resultText = 'あなたの勝ちです！';
} else {
resultText = 'あなたの負けです！';
}
resultDiv.innerText = resultText;
}
btnGu.addEventListener('click', function () {
showResult('グー');
});
btnChoki.addEventListener('click', function () {
showResult('チョキ');
});
btnPa.addEventListener('click', function () {
showResult('パー');
});
</script>
</body>
</html>
