这个游戏怎么才能输出到表格!求大神帮忙!!
石头剪刀布.rar
(139.87 KB)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.p{
background-image: url(img/背景.jpg);
background-repeat: no-repeat;
background-size: 240px 360px;
}
#bg {
padding: 30px 0px 0px 0px;
width: 240px;
height: 320px;
background-color: blanchedalmond;
font-size: 20px;
}
#move {
padding: 5px 0px 15px 0px;
font-size: 15px;
position: absolute;
left: 0px;
top: 8px;
}
#adiv{
margin-left: 0px;
margin-top: 60px;
float: left;
}
#bdiv{
margin-right:0px;
float: right;
}
img {
width: 50px;
}
#start{
width: 50px;
height: 30px;
position: absolute;
left: 100px;
top:200px;
}
#answer{
width: 50px;
height: 30px;
position: absolute;
left: 40px;
top:300px;
}
table{
width: 240px;
height: 120px;
border-collapse: collapse;
position: absolute;
margin-left: -30px;
margin-top: -65px;
}
</style>
</head>
<body>
<div id="bg" class="p">
<div id="move">
欢迎来玩小游戏
</div>
请点击正确方
<div id="adiv"><img src="img/1.jpg" id="pic" /> </div>
<div id="bdiv">
<img src="img/1.jpg"id="pic1"/><br />
<img src="img/2.jpg"id="pic2"/><br />
<img src="img/3.jpg"id="pic3"/>
</div>
<input type="button" id="start" value="开始" onclick="start()"/>
<div id="answer">
<table border="1">
<tr>
<th>人物</th>
<th>赢</th>
<th>输</th>
<th>胜率</th>
</tr>
<tr>
<td>A</td>
<td id=""></td>
<td id=""></td>
<td id=""></td>
</tr>
<tr>
<td>B</td>
<td id=""></td>
<td id=""></td>
<td id=""></td>
</tr>
</table>
</div>
</div>
<script type="text/javascript">
var move=document.getElementById("move");
var pic=document.getElementById("pic");
var pic1=document.getElementById("pic1");
var pic2=document.getElementById("pic2");
var pic3=document.getElementById("pic3");
var start=document.getElementById("start");
var answer=document.getElementById("answer");
var moveleft=0;
setInterval(function(){
moveleft++;
move.style.left=moveleft+"px";
if(moveleft>=240) moveleft=0;
},100);
var j=1;
var timer1;
start.onclick=function(){
timer1=setInterval(function(){
pic.src="img/"+j+".jpg";
j=j+1;
if(j>3){
j=1;
}
},200);
}
function stbtest(name){
var result;
switch (name){
case 0:
result="url(img/1.jpg)";
break;
case 1:
result="url(img/2.jpg)";
break;
case 2:
result1="url(img/.jpg)";
break;
default:
break;
}
return result;
}
function stbtest1(name){
var result1;
switch (name){
case 0:
result1="url(img/1.jpg)";
break;
case 1:
result1="url(img/2.jpg)";
break;
case 2:
result1="url(img/.jpg)";
break;
default:
break;
}
return result1;
}
var ru1,ru2;
bdiv.onclick=function (){
var num1=Math.random()*10+1;
num1=Math.floor(num1);
ru1=num1%3;
var g1=stbtest(ru1);
var gg1=stbtest1(ru1);
// adiv.innerHTML=g1;
// adiv.style.backgroundImage=gg1;
var num2=Math.random()*10+1;
num2=Math.floor(num2);
ru2=num2%3;
var g2=stbtest(ru2);
// bdiv.innerHTML=g2;
// bdiv.style.backgroundImage=gg2;
// answer.innerHTML="结果";
}
bdiv.onclick=function(){
var i=ru1-ru2;
i=Math.abs(i);
var ans;
switch (i){
case 0:
ans="平手";
// alert(ans);
break;
case 1:
if (ru1<ru2) {
ans="输";
} else{
ans="赢";
}
// alert(ans);
break;
case 2:
if (ru1>ru2) {
ans="输";
} else{
ans="赢";
}
// alert(ans);
break;
default:
break;
}
// answer.innerHTML=ans;
}
pic1.onclick= function(){
clearInterval(timer1);
}
pic2.onclick= function(){
clearInterval(timer1);
}
pic3.onclick=function(){
clearInterval(timer1);
}
</script>
</body>
</html>