//window对象--猜拳游戏
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="caiquan.css">
//外部样式:
body{
margin: 0;
padding: 0;
}
div,p,input,select,option{
margin: 0;
padding: 0;
}
.content{
background: pink;
width: 510px;
height: 500px;
margin: 20px auto;
padding: 20px 50px;
}
.left{
float: left;
width: 200px;
height: 200px;
border: 2px solid green;
text-align: center;
line-height: 2em;
}
#you-img{
width: 120px;
height: 120px;
margin: 20px auto;
}
.center{
float: left;
width: 100px;
height: 200px;
border-top: 2px solid green;
border-bottom: 2px solid green;
text-align: center;
line-height: 200px;
font-size: 25px;
font-weight: bold;
}
.right{
float: left;
width: 200px;
height: 200px;
border: 2px solid green;
text-align: center;
line-height: 2em;
}
.right #computer-img{
width: 120px;
height: 120px;
margin: 20px auto;
}
#current-img{
width: 120px;
height: 120px;
margin: 20px auto;
}
#jieguo{
width: 504px;
height: 50px;
border: 2px solid green;
clear: both;
border-top: none;
text-align: center;
line-height: 50px;
font-size: 25px;
font-weight: bold;
color: red;
}
.center1{
float: left;
width: 100px;
height: 200px;
text-align: center;
line-height: 200px;
border-bottom: 2px solid green;
font-size: 25px;
font-weight: bold;
}
.choice{
float: left;
width: 200px;
height: 200px;
border: 2px solid green;
text-align: center;
line-height: 2em;
border-top: none;
}
.choose{
float: left;
width: 200px;
height: 200px;
border: 2px solid green;
border-top: none;
text-align: center;
line-height: 2em;
}
#button1{
margin-top: 80px;
}
.allresult{
width: 504px;
height: 30px;
border: 2px solid green;
border-top: none;
text-align: center;
line-height: 30px;
clear: both;
}
//JS代码:
<script type="text/javascript">var allcount=0;
var wincount=0;
var failcount=0;
var drawcount=0;
function select(obj){
//获取当前你选的出什么
var currentchoice=document.getElementById('current-img');
changeImg(currentchoice,obj.value);
}
//猜拳图片切换你要出什么拳
function changeImg(imgObj,value){
switch(value){
case '-1':
imgObj.style.display='none';
break;
case '0':
imgObj.style.display='inline';
imgObj.src='jiandao.png';
break;
case '1':
imgObj.style.display='inline';
imgObj.src='shitou.png';
break;
case '2':
imgObj.style.display='inline';
imgObj.src='bu.png';
break;
}
}
//判断你是否选择出了拳
function start(){
var selectValue=document.getElementById('select').value;
if (selectValue==-1) {
alert('请先选择再出拳!');
return;
}
//模拟电脑出拳
//数组保存电脑切换的图片
var arrimg=[];
arrimg[0]='jiandao.png';
arrimg[1]='shitou.png';
arrimg[2]='bu.png';
//获取电脑出拳的图片的地址
document.getElementById('computer-img').src=arrimg[computerValue];
//获取你出拳切换的图片ID
var myImgObj=document.getElementById('you-img');
//执行图片切换函数
changeImg(myImgObj,selectValue);
//执行结果输赢函数,参数用value值进行比较
compare(selectValue,computerValue);
}
//结果输赢比较函数
function compare(gesture1,gesture2){
var result=gesture1+' '+gesture2;
//0代表剪刀,1代表石头,2代表布
case '02':
case '10':
case '21':
wincount++;
document.getElementById('win').innerHTML=' '+wincount;
document.getElementById('jieguo').innerHTML='你赢了!';
alert('您赢了!');
break;
case '01':
case '12':
case '20':
failcount++;
document.getElementById('fail').innerHTML=' '+failcount;
document.getElementById('jieguo').innerHTML='你输了!';
alert('您输了!');
break;
default:
drawcount++;
document.getElementById('draw').innerHTML=' '+drawcount;
document.getElementById('jieguo').innerHTML='平局!';
alert('平局!');
break;
}
allcount++;
document.getElementById('allcount').innerHTML=' '+allcount;
}
</script>
</head>
<body>
<div class="content">
<div class="left">
<p>你</p>
<img src="jiandao.png" id="you-img"/>
</div>
<div class="center">VS</div>
<div class="right">
<p>电脑</p>
<img src="shitou.png" id="computer-img">
</div>
<div id="jieguo"></div>
<div class="choice">
<p>你选择了</p>
<img src="bu.png" id="current-img">
</div>
<div class="center1">choke</div>
<div class="choose">
请选择出拳:<select name="请选择" id="select" οnchange="select(this)">
<option value="-1">请选择</option>
<option value="0">剪刀</option>
<option value="1">石头</option>
<option value="2">布</option>
</select>
<input type="button" value="想好了出拳" id="button1" οnclick="start()" /><br/>
</div>
<div class="allresult">总局数:<span id="allcount">0</span> 赢:<span id="win">0</span> 输:<span id="fail">0</span> 平:<span id="draw">0</span></div>
</div>
</body>
</html>
//效果截图: