剪刀石头布的小游戏

<!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。

相关阅读:
.NET 操作XML
C#常用操作类库五（电脑操作类）
C#常用操作类库四（File操作类）
C#常用操作类库一(验证类)
RabbitMQ 学习
 redis 常用命令
 windows10配置redis一主二从三哨兵
 Oracle递归查询（查询当前记录所有父级或子级）
echarts 中柱图、折线图、柱图层叠
 简单的前台登录
原文地址：https://www.cnblogs.com/carrie-hong/p/4854722.html