以下がJavaScriptのコードです。このコードは、HTMLファイル内で`<script>`タグで囲んで実行することができます。
```
// 選擇器
const rockBtn = document.querySelector('#rock');
const paperBtn = document.querySelector('#paper');
const scissorsBtn = document.querySelector('#scissors');
const restartBtn = document.querySelector('#restart');
const result = document.querySelector('#result')
const message = document.querySelector('#message');
// 玩家選擇的手勢
let playerChoice;
// 電腦隨機選擇手勢
function computerChoice() {
const choices = ['rock', 'paper', 'scissors'];
const randomIndex = Math.floor(Math.random() * 3);
return choices[randomIndex];
}
// 游戲邏輯判定
function playGame(playerChoice) {
const computer = computerChoice();
if (playerChoice === computer) {
message.innerText = '平手，再來一次！';
return;
}
if (playerChoice === 'rock' && computer === 'scissors' ||
playerChoice === 'paper' && computer === 'rock' ||
playerChoice === 'scissors' && computer === 'paper') {
// 玩家獲勝
const congratulationsMessages = ['恭喜你！贏咗啦！', '你好勁啵！', '你係咪變咗鐵人頭？！', '底牌係你呀！'];
const randomIndex = Math.floor(Math.random() * congratulationsMessages.length);
message.innerText = congratulationsMessages[randomIndex];
result.innerText = '';
} else {
// 玩家輸了
result.innerText = '你輸了！再來一次😡';
message.innerText = '';
}
}
// 玩家選擇手勢的事件監聽器
rockBtn.addEventListener('click', () => {
playerChoice = 'rock';
playGame(playerChoice);
});
paperBtn.addEventListener('click', () => {
playerChoice = 'paper';
playGame(playerChoice);
});
scissorsBtn.addEventListener('click', () => {
playerChoice = 'scissors';
playGame(playerChoice);
});
// 重新開始按鈕的事件監聽器
restartBtn.addEventListener('click', () => {
result.innerText = '';
message.innerText = '';
});
```
HTMLファイルは以下のようにすることができます。CSSファイルは問題文に記載がないため省略します。
```
<!DOCTYPE html>
<html lang="zh-HK">
<head>
<meta charset="UTF-8">
<title>猜拳</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<h1>猜拳遊戲</h1>
<div>
<button id="rock">包 ✋</button>
<button id="paper">剪 ✌️</button>
<button id="scissors">揼 ✊</button>
</div>
<div id="result"></div>
<div id="message"></div>
<button id="restart">重新開始</button>
</body>
</html>
```
