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

版权声明：本文为carrie-hong原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/carrie-hong/p/4854722.html