? ??
?
? ? ??
?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>猜拳游戏</title>
<link rel="stylesheet" href="css/index.css" />
</head>
<body>
<table class="table1">
<tr>
<td class="td1">
<div class="text1">你</div>
<div class="image"><img id="youimg" src="img/zb.jpg"/></div>
</td>
<td class="td1">
<div class="text2">VS</div>
</td>
<td class="td1">
<div class="text1">电脑</div>
<div class="image"><img id="computerimg" src="img/zb.jpg"/></div>
</td>
</tr>
<tr>
<td class="td1" colspan="3">
<div class="text3" id="ready">Are you ready?</div>
</td>
</tr>
<tr>
<td class="td1">
<div class="text1">你选择了：</div>
<div class="image"><img id="img" src="img/zb.jpg"/></div>
</td>
<td class="td1">
<div class="text4">Choice</div>
</td>
<td class="td1">
<div class="text1">请选择出拳:</div>
<div class="">
<select id="select" onchange="start()">
<option value="0">请选择</option>
<option value="1">石头</option>
<option value="2">剪刀</option>
<option value="3">布</option>
</select>
<button id="btn" onclick="go()">确认出拳</button>
</div>
</td>
</tr>
<tr>
<td colspan="3">
<table class="table2">
<tr class="tr2">
<td class="td2"><div class="text1">总数:</div></td>
<td class="td3"><div class="text1" id="sum">0</div></td>
<td class="td2"><div class="text1">胜利:</div></td>
<td class="td3"><div class="text1" id="win">0</div></td>
<td class="td2"><div class="text1">失败:</div></td>
<td class="td3"><div class="text1" id="fail">0</div></td>
<td class="td2"><div class="text1">平局:</div></td>
<td class="td3"><div class="text1" id="equal">0</div></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
<script type="text/javascript" src="js/index.js" ></script>.table1{
text-align: center;
border: 1px solid black;
border-collapse: collapse;
border-spacing: 0;
margin: 100px auto;
}
.table2{
margin: auto;
}
.td1{
border: 1px solid black;
padding: 10px;
}
.text1{
font-size: 15px;
color: black;
font-family: "微软雅黑";
font-weight: 600;
margin: 10px auto;
}
.text2{
color: #FFC125 ;
font-size: 50px;
font-weight: bolder;
}
.text3{
color: red;
font-weight: bolder;
font-size: 30px;
margin: 15px auto;
}
.text4{
color: #FFC125 ;
font-size: 30px;
font-weight: bolder;
}
.td2{
width: 50px;
}
.td3{
text-align: left;
width: 30px;
}
.image{
margin: auto 30px;
}
.btn{
position:absolute;
cursor: pointer;
}
var sumnum=0;
var winnum=0;
var failnum=0;
var equalnum=0;
function start(){
var sel=document.getElementById('select').value;//获取下拉菜单的value值
var img=document.getElementById('img');
if(sel==1){
img.src='img/st.jpg';
}
else if(sel==2){
img.src='img/jd.jpg';
}
else if(sel==3){
img.src='img/bu.jpg';
}
}
function go(){
var youimg=document.getElementById('youimg');
var computerimg=document.getElementById('computerimg');
var ready=document.getElementById('ready');
var sel=document.getElementById('select').value;
var img=document.getElementById('img');
var sum=document.getElementById('sum');
var win=document.getElementById('win');
var fail=document.getElementById('fail');
var equal=document.getElementById('equal');
if(sel!=0){
youimg.src=img.src;
var num=parseInt(Math.random()*3+1);
if(num==1){
computerimg.src='img/st.jpg';
}
else if(num==2){
computerimg.src='img/jd.jpg';
}
else if(num==3){
computerimg.src='img/bu.jpg';
}
var result=sel-num;
sumnum++;
if(result==0){
equalnum++;
ready.innerText='平局';
}
else if(result==-1||result==2){
winnum++;
ready.innerText='胜利';
}
else if(result==-2||result==1){
failnum++;
ready.innerText='失败';
}
}
else{
ready.innerText='请选择出拳';
}
win.innerText=winnum;
fail.innerText=failnum;
equal.innerText=equalnum;
sum.innerText=sumnum;
}
/*
* 石头 剪刀 布
* 1 2 3
*
* 胜利 1 2 -1
* 2 3 -1
* 3 1 2
*
* 失败 1 3 -2
* 2 1 1
* 3 2 1
*/