<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>石头剪刀布小游戏</title>
<link href="jiandaoshitoubu.css" rel="stylesheet"/>
</head>
<body>
<div id="container">
<h1>与电脑玩猜拳</h1>
<div id="display">
<h2>请选择以下一种拳法：</h2>
<img src="IMG/jiandao.png" alt="jiandao" title="jiandao"/>
<img src="IMG/shitou.png" alt="shitou" title="shitou"/>
<img src="IMG/bu.png" alt="bu" title="bu"/>
</div>
<div id="compete">
<h2>你：</h2>
<img src="IMG/jiandao.png" id="youchoose"/>
<h2>电脑：</h2>
<img src="IMG/jiandao.png" id="computerchoose"/>
<h1 id="result"></h1>
</div>
</div>
<script src="jiandaoshitoubu.js"></script>
</body>
</html>
*{padding:0;margin:0;}
body{background-color:#FC0;font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif}
#container{
margin:0 auto;
}
h1{font-size:40px;text-align:center;color:#C03;font-weight:bold;}
h2{font-size:30px;font-weight:normal;color:#C03;}
#display{text-align:center;}
#compete{text-align:center;}
#compete h2{display:inline;}
#compete h1{font-size:80px;color:#909;margin-top:45px;}
function competition(){
var display=document.getElementById('display');
var imgs=display.getElementsByTagName('img');
var youchoose=document.getElementById('youchoose');
for(var i=0;i<imgs.length;i++){
imgs[i].onclick=function(){
youchoose.setAttribute("src",this.src);
compareResult(this.getAttribute('title'),computerResultSet());
}
}
}
window.onload=competition;
function computerResultSet(){
var computer_choose=document.getElementById('computerchoose');
var num=Math.random()*3;
var s;
if(num<1){
computer_choose.setAttribute('src','IMG/jiandao.png');
s='jiandao';
}
else if(num<2){
computer_choose.setAttribute('src','IMG/shitou.png');
s='shitou';
}
else{
computer_choose.setAttribute('src','IMG/bu.png');
s='bu';
}
return s;
}
function compareResult(you_choose,computer_choose){
var result=document.getElementById('result');
var s;
if(you_choose=='jiandao'){
if(computer_choose=='shitou'){s='You Lose';}
else if(computer_choose=='bu'){s='You Win';}
else {s='Tie';}
}
if(you_choose=='shitou'){
if(computer_choose=='jiandao'){s='You Win';}
else if(computer_choose=='bu'){s='You Lose';}
else {s='Tie';}
}
if(you_choose=='bu'){
if(computer_choose=='jiandao'){s='You Lose';}
else if(computer_choose=='shitou'){s='You Win';}
else {s='Tie';}
}
result.innerHTML=s;
}
以上是第一版，2015-10-4。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>石头剪刀布小游戏</title>
<link href="jiandaoshitoubu.css" rel="stylesheet"/>
</head>
<body>
<div id="container">
<h1>与电脑玩猜拳</h1>
<div id="display">
<h2>请选择以下一种拳法：</h2>
<img src="IMG/jiandao.png" alt="jiandao" title="jiandao"/>
<img src="IMG/shitou.png" alt="shitou" title="shitou"/>
<img src="IMG/bu.png" alt="bu" title="bu"/>
</div>
<div id="compete">
<h2>你：</h2>
<img src="IMG/jiandao.png" id="youchoose"/>
<h2>电脑：</h2>
<img src="IMG/jiandao.png" id="computerchoose"/>
<h1 id="result"></h1>
<p><span id="sumcount"></span> <span id="luckcount"></span> <span id="luckratio"></span></p>
</div>
</div>
<script src="jiandaoshitoubu.js"></script>
</body>
</html>
function competition(){ var display=document.getElementById('display'); var imgs=display.getElementsByTagName('img'); var youchoose=document.getElementById('youchoose'); var sumcount=document.getElementById('sumcount'); var sumcount_num=0; var luckcount=document.getElementById('luckcount'); var luckratio=document.getElementById('luckratio'); var luckcount_num=0; var ratio=0;; for(var i=0;i<imgs.length;i++){ imgs[i].onclick=function(){ sumcount_num++; sumcount.innerHTML='出拳总次数：'+sumcount_num; youchoose.setAttribute("src",this.src); var s=compareResult(this.getAttribute('title'),computerResultSet()); if(s=='You Win'){luckcount_num++;} luckcount.innerHTML='赢拳次数：'+luckcount_num; ratio=parseInt(luckcount_num/sumcount_num*100); luckratio.innerHTML='今天幸运值（0-100）：'+ratio; } } } window.onload=competition; function computerResultSet(){ var computer_choose=document.getElementById('computerchoose'); var num=Math.random()*3; var s; if(num<1){ computer_choose.setAttribute('src','IMG/jiandao.png'); s='jiandao'; } else if(num<2){ computer_choose.setAttribute('src','IMG/shitou.png'); s='shitou'; } else{ computer_choose.setAttribute('src','IMG/bu.png'); s='bu'; } return s; } function compareResult(you_choose,computer_choose){ var result=document.getElementById('result'); var s; if(you_choose=='jiandao'){ if(computer_choose=='shitou'){s='You Lose';} else if(computer_choose=='bu'){s='You Win';} else {s='Tie';} } if(you_choose=='shitou'){ if(computer_choose=='jiandao'){s='You Win';} else if(computer_choose=='bu'){s='You Lose';} else {s='Tie';} } if(you_choose=='bu'){ if(computer_choose=='jiandao'){s='You Lose';} else if(computer_choose=='shitou'){s='You Win';} else {s='Tie';} } result.innerHTML=s; return s; }
改于2015-10-5。