当前位置：首页 > JavaScript

js实现猜拳

2026-02-01 01:04:54JavaScript

实现猜拳游戏的步骤

HTML 结构 创建一个简单的HTML页面，包含三个按钮（石头、剪刀、布）和一个显示结果的区域。

js实现猜拳

<!DOCTYPE html>
<html>
<head>
    <title>猜拳游戏</title>
    <style>
        button { margin: 10px; padding: 8px; }
        #result { margin-top: 20px; font-size: 18px; }
    </style>
</head>
<body>
    <h1>猜拳游戏</h1>
    <button id="rock">石头</button>
    <button id="scissors">剪刀</button>
    <button id="paper">布</button>
    <div id="result"></div>
    <script src="game.js"></script>
</body>
</html>

JavaScript 逻辑 在game.js中实现游戏逻辑，包括玩家选择、电脑随机选择以及胜负判断。

js实现猜拳

const buttons = document.querySelectorAll('button');
const resultDiv = document.getElementById('result');

const choices = ['石头', '剪刀', '布'];

buttons.forEach(button => {
    button.addEventListener('click', () => {
        const playerChoice = button.textContent;
        const computerChoice = choices[Math.floor(Math.random() * 3)];
        const winner = determineWinner(playerChoice, computerChoice);

        resultDiv.textContent = `你选择了 ${playerChoice}，电脑选择了 ${computerChoice}。${winner}`;
    });
});

function determineWinner(player, computer) {
    if (player === computer) return '平局！';

    if (
        (player === '石头' && computer === '剪刀') ||
        (player === '剪刀' && computer === '布') ||
        (player === '布' && computer === '石头')
    ) {
        return '你赢了！';
    } else {
        return '电脑赢了！';
    }
}

功能扩展 可以增加计分功能，记录玩家和电脑的胜负次数。

let playerScore = 0;
let computerScore = 0;

function updateScore(winner) {
    if (winner.includes('你赢了')) playerScore++;
    if (winner.includes('电脑赢了')) computerScore++;
    resultDiv.textContent += ` 比分：玩家 ${playerScore} - 电脑 ${computerScore}`;
}

// 在事件监听器中调用
const winner = determineWinner(playerChoice, computerChoice);
updateScore(winner);

优化用户体验 添加动画效果或延迟显示电脑的选择，增强游戏体验。

button.addEventListener('click', () => {
    resultDiv.textContent = '电脑正在选择...';
    setTimeout(() => {
        const computerChoice = choices[Math.floor(Math.random() * 3)];
        const winner = determineWinner(playerChoice, computerChoice);
        resultDiv.textContent = `你选择了 ${playerChoice}，电脑选择了 ${computerChoice}。${winner}`;
        updateScore(winner);
    }, 1000);
});