<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
background: gray;
text-align: center;
color: aqua;
}
#choose {
margin: 50px auto;
height: 200px;
width: 1200px;
}
#choose img {
cursor: pointer;
margin-right: 95px;
border: #000000 1px solid;
}
#choose img:last-child {
margin-right: 0;
}
#result {/*结果的文字显示*/
font-size: 50px;
}
#win-count {
font-size: 30px;
color: blue;
}
#lost-count{
font-size: 30px;
color: green;
}
#draw-count{
font-size: 30px;
color: pink;
}
#times{
color:red;
font-size: 30px;
}
</style>
</head>
<body>
<h1>剪刀石头布游戏</h1>
<h2>你获胜了<span id="win-count"></span>次!!!</h2>
<h2>你输了<span id="lost-count"></span>次!!!</h2>
<h2>平局<span id="draw-count"></span>次!!!</h2>
<h2>总场数<span id="times"></span>次</h2>
<div id="choose">
<img src="images/jiandao.jpg" alt="剪刀" id="jiandao" width="100" height="100">
<img src="images/shitou.jpg" alt="石头" id="shitou" width="100" height="100">
<img src="images/bu.jpg" alt="布" id="bu" width="100" height="100">
</div>
<img id="yourchoose" alt="" width="100" height="100">
<span id="result"></span>
<img id="computer" alt="" width="100" height="100">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
function $(id) {
return document.getElementById(id);
}
var winCount = 0;//定义赢的次数
var times = 1;//定义初始总次数
var lostCount = 0;//定义输的次数
var drawCount = 0;//定义平局的次数
function Game(choose) {
choose.addEventListener('click', function() {
if (choose == $('jiandao')) {
$('yourchoose').src = "images/jiandao.jpg";
} else if (choose == $('shitou')) {
$('yourchoose').src = "images/shitou.jpg";
} else {
$('yourchoose').src = "images/bu.jpg";
}
var computerResult = Math.random();
//random() 方法可返回介于 0 ~ 1 之间的一个随机数。
if (computerResult < 0.34) {
$('computer').src = "images/jiandao.jpg";
if (choose == $('jiandao')) {
$('result').innerHTML = "平手";
drawCount++;
} else if (choose == $('shitou')) {
$('result').innerHTML = "你赢了";
winCount++;
} else {
$('result').innerHTML = "电脑获胜!!!";
lostCount++;
}
} else if (computerResult < 0.67) {
$('computer').src = "images/shitou.jpg";
if (choose == $('shitou')) {
$('result').innerHTML = "平手";
drawCount++;
} else if (choose == $('bu')) {
$('result').innerHTML = "你赢了";
winCount++;
} else {
$('result').innerHTML = "电脑获胜!!!";
lostCount++;
}
} else {
$('computer').src = "images/bu.jpg";
if (choose == $('bu')) {
$('result').innerHTML = "平手";
drawCount++;
} else if (choose == $('jiandao')) {
$('result').innerHTML = "你赢了";
winCount++;
} else {
$('result').innerHTML = "电脑获胜!!!";
lostCount++;
}
}
$('win-count').innerHTML = winCount;
$('lost-count').innerHTML = lostCount;
$('draw-count').innerHTML = drawCount;
$('times').innerHTML = times++;
});
}
Game($('jiandao'));
Game($('shitou'));
Game($('bu'));
</script>
</body>
</html>
效果如图：