JavaScript实现石头剪刀布游戏：事件驱动与AI逻辑优化

<div class="options">
    <button class="rock">Rock</button>
    <button class="paper">Paper</button>
    <button class="scissor">Scissors</button>   
</div>
<p id="you">You chose: </p>
<p id="ai">AI Chose: </p>
<!-- 假设还有其他元素用于显示游戏结果 -->

// 获取DOM元素
const rockButton = document.querySelector('.rock');
const paperButton = document.querySelector('.paper');
const scissorButton = document.querySelector('.scissor');
const youDisplay = document.getElementById('you');
const aiDisplay = document.getElementById('ai');

// 将所有玩家选择按钮放入一个数组，方便统一处理
const playerOptions = [rockButton, paperButton, scissorButton];

// 定义AI可能做出的选择
const aiChoices = ['rock', 'paper', 'scissors'];

// 遍历每个玩家选择按钮，并添加事件监听器
playerOptions.forEach(optionButton => {
    optionButton.addEventListener('click', function() {
        // 1. 更新玩家的选择显示
        // this.innerText 获取当前点击按钮的文本内容（如 'Rock', 'Paper', 'Scissors'）
        const playerChoiceText = this.innerText;
        youDisplay.textContent = `You chose: ${playerChoiceText}`;

        // 2. 生成AI的选择
        // Math.random() 生成一个0到1之间的浮点数
        // 乘以aiChoices.length (即3) 得到0到3之间的浮点数
        // Math.floor() 向下取整，得到0, 1, 或 2
        const choiceIndex = Math.floor(Math.random() * aiChoices.length);
        const aiChoice = aiChoices[choiceIndex];

        // 3. 更新AI的选择显示
        aiDisplay.textContent = `AI Chose: ${aiChoice}`;

        // 4. (可选) 在这里添加游戏胜负判断逻辑
        // 例如：determineWinner(playerChoiceText.toLowerCase(), aiChoice);
    });
});

// 示例：如果需要一个胜负判断函数
// function determineWinner(player, ai) {
//     // 你的胜负判断逻辑
//     console.log(`Player: ${player}, AI: ${ai}`);
//     if (player === ai) {
//         console.log("It's a tie!");
//     } else if (
//         (player === 'rock' && ai === 'scissors') ||
//         (player === 'paper' && ai === 'rock') ||
//         (player === 'scissors' && ai === 'paper')
//     ) {
//         console.log("You win!");
//     } else {
//         console.log("AI wins!");
//     }
// }