当前位置：首页 > JavaScript

js实现猜拳

2026-03-13 23:14:26JavaScript

实现猜拳游戏的基本思路

使用JavaScript实现猜拳游戏需要处理用户输入、随机生成电脑选择、比较胜负逻辑以及显示结果。以下是一个简单的实现方案。

HTML结构

创建一个简单的HTML界面，包含三个按钮代表石头、剪刀、布，以及一个显示结果的区域。

js实现猜拳

<!DOCTYPE html>
<html>
<head>
    <title>猜拳游戏</title>
</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实现猜拳

// 获取DOM元素
const rockBtn = document.getElementById('rock');
const scissorsBtn = document.getElementById('scissors');
const paperBtn = document.getElementById('paper');
const resultDiv = document.getElementById('result');

// 电脑随机选择
function computerChoice() {
    const choices = ['rock', 'scissors', 'paper'];
    const randomIndex = Math.floor(Math.random() * 3);
    return choices[randomIndex];
}

// 比较用户和电脑的选择
function compareChoices(userChoice, computerChoice) {
    if (userChoice === computerChoice) {
        return '平局！';
    }
    if (
        (userChoice === 'rock' && computerChoice === 'scissors') ||
        (userChoice === 'scissors' && computerChoice === 'paper') ||
        (userChoice === 'paper' && computerChoice === 'rock')
    ) {
        return '你赢了！';
    }
    return '你输了！';
}

// 事件监听
rockBtn.addEventListener('click', () => {
    const compChoice = computerChoice();
    const result = compareChoices('rock', compChoice);
    resultDiv.textContent = `你选择了石头，电脑选择了${compChoice}。${result}`;
});

scissorsBtn.addEventListener('click', () => {
    const compChoice = computerChoice();
    const result = compareChoices('scissors', compChoice);
    resultDiv.textContent = `你选择了剪刀，电脑选择了${compChoice}。${result}`;
});

paperBtn.addEventListener('click', () => {
    const compChoice = computerChoice();
    const result = compareChoices('paper', compChoice);
    resultDiv.textContent = `你选择了布，电脑选择了${compChoice}。${result}`;
});

游戏规则说明

石头（rock）胜过剪刀（scissors），剪刀胜过布（paper），布胜过石头。如果用户和电脑选择相同，则为平局。

扩展功能

可以进一步优化游戏体验，例如添加计分系统、动画效果或历史记录功能。

// 计分系统示例
let userScore = 0;
let computerScore = 0;

function updateScore(result) {
    if (result.includes('赢了')) {
        userScore++;
    } else if (result.includes('输了')) {
        computerScore++;
    }
    resultDiv.textContent += ` 当前比分：用户 ${userScore} - 电脑 ${computerScore}`;
}