<!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。
时间： 2024-11-25 08:45:21