JavaScriptじゃんけんのソースコード

<style>
img:hover {
border: solid 1px;
}
</style>

<h1>じゃんけん</h1>
コンピューターの手<br>
<img id="computerchoiceImg" src="gu.png">
<p id="result"></p>
<p>自分の手を選んでください:</p>
<img src="p-gu.png" alt="グー" id="gu" onclick="playGame('gu')">
<img src="p-cho.png" alt="チョキ" id="cho" onclick="playGame('cho')">
<img src="p-pa.png" alt="パー" id="pa" onclick="playGame('pa')">

<script>
function playGame(playerchoice) {
// じゃんけんの手のリスト化
let choices = ['gu', 'cho', 'pa'];

// コンピューターの手をランダムに生成
let computerchoice = choices[Math.floor(Math.random() * choices.length)];
document.getElementById('computerchoiceImg').src = `${computerchoice}.png`;

// プレイヤーが選んだ手とコンピューターがランダムで生成した手の勝敗の判別
if (playerchoice === computerchoice) {
result = '引き分け！';
} else if (
(playerchoice === 'gu' && computerchoice === 'cho') ||
(playerchoice === 'cho' && computerchoice === 'pa') ||
(playerchoice === 'pa' && computerchoice === 'gu')
) {
result = 'あなたの勝ち！';
} else {
result = 'コンピューターの勝ち！';
}
// 結果を表示する
document.getElementById('result').textContent = `${result}`;
}
</script>