剪刀石头布游戏人机交互HTML,HTML5 剪刀石头布小游戏

本文介绍了一个使用JavaScript实现的简单网页版石头剪刀布游戏。玩家可以通过点击按钮选择石头、剪刀或布来与电脑进行对战。游戏通过DOM操作实时更新比赛状态和得分。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

JavaScript

语言:

JaveScriptBabelCoffeeScript

确定

var humanScore = 0;

var computerScore = 0;

document.getElementById('rock').onclick = playRock;

document.getElementById('paper').onclick = playPaper;

document.getElementById('scissors').onclick = playScissors;

function playRock() {

play("rock");

}

function playPaper() {

play("paper");

}

function playScissors() {

play("scissors");

}

function play(humanPlay) {

computerPlay = getComputerPlay();

document.getElementById('status').innerHTML = "

You played " + humanPlay + ". The bot played " + computerPlay + ".

";

if (humanPlay == 'rock') {

if (computerPlay == 'rock') {

document.getElementById('status').innerHTML += "

You tied. :|

";

} else if (computerPlay == 'paper') {

document.getElementById('status').innerHTML += "

You lose. :(

";

computerScore++;

} else if (computerPlay == 'scissors') {

document.getElementById('status').innerHTML += "

You win! :)

";

humanScore++;

}

} else if (humanPlay == 'paper') {

if (computerPlay == 'rock') {

document.getElementById('status').innerHTML += "

You win! :)

";

humanScore++;

} else if (computerPlay == 'paper') {

document.getElementById('status').innerHTML += "

You tied. :|

";

} else if (computerPlay == 'scissors') {

document.getElementById('status').innerHTML += "

You lose. :(

";

computerScore++;

}

} else if (humanPlay == 'scissors') {

if (computerPlay == 'rock') {

document.getElementById('status').innerHTML += "

You lose. :(

";

computerScore++;

} else if (computerPlay == 'paper') {

document.getElementById('status').innerHTML += "

You win! :)

";

humanScore++;

} else if (computerPlay == 'scissors') {

document.getElementById('status').innerHTML += "

You tied. :|

";

}

}

document.getElementById('humanScore').innerHTML = humanScore;

document.getElementById('computerScore').innerHTML = computerScore;

}

function getComputerPlay() {

var plays = ['rock', 'paper', 'scissors'];

var play = plays[Math.floor(Math.random() * plays.length)];

return play;

}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值