代码放在js下,图片放在项目下
<html>
<head>
<title>Game</title>
<meta charset="utf-8" />
<script src="caiquan2.js" language="javascript" type="text/javascript">
</script>
<style>
td {
color: white
}
;
</style>
</head>
<body>
<div style="float:left;width:500px">
<table align=center bgColor="#8B1A1A" border=solid>
<tr align=center>
<td width=140px>
<font color="white" size="5">你</font>
</br><img id="myImg1" src="../1.png" /></td>
<td>
<font size=28px>VS</font>
</td>
<td width=140px>
<font color="white" size="5">电脑</font>
</br><img id="comImg" src="../3.png" /></td>
</tr>
<tr height=50px align=center>
<td colspan=3>
<font id="result" size=28px color="yellow">Get Ready!</font>
</td>
</tr>
<tr align=center>
<td>
<font color="white" size="5">您选择了</font>
</br><img id="myImg0" src="../3.png" /></td>
<td>
<font size=10px>Choice</font>
</td>
<td>
请选择出全拳:<select id="choice" name="choice">
<option value="">---请选择---</option>
<option value="shitou">石头</option>
<option value="jiandao">剪刀</option>
<option value="bu">布</option>
</select>
</br>
</br>
<input type="button" style="width: 200px; height: 30px;" value="想好了,出招" onClick="myChoice()" /></br>
</br>
<input type="button" style="width: 200px; height: 30px;" value="重新再来过!" onClick="reset()" />
</td>
</tr>
<tr align=center>
<td colspan=3>
<font id="total" color="white" size="4">总局数:</font>
</br>
<input type="button" style="width: 220px;
height: 30px;" value="显示全部比赛结果!" onClick="showResult()" />
</td>
</tr>
<tr>
<td colspan=3>
<table id="resultTable" align="center"></table>
</td>
<tr/>
</table>
</div>
</body>
<script type="text/javascript">
//结果类
function Result(my, com, result) {
this.my = my;
this.com = com;
this.result = result;
}
//全局
var results = new Array();
var totalWin = 0;
var totalFail = 0;
var totalPeace = 0;
var totalNum = 0;
//重置
function reset() {
results = null;
results = new Array();
totalWin = 0;
totalFail = 0;
totalPeace = 0;
totalNum = 0;
total.innerText = "总局数:" + totalNum + " "+ totalWin + "赢," + totalFail + "输," + totalPeace + "和";
var table = $("resultTable");
trs = table.getElementsByTagName("tr");
for (var i = trs.length - 1; i >= 0; i--) {
table.deleteRow(i);
}
}
//比赛
function myChoice() {
var myNum;
var mySelect = $("choice");
var mySrc0 = $("myImg0");
var mySrc1 = $("myImg1");
var comSrc = $("comImg");
var total = $("total");
randNum = Math.floor(Math.random() * 3); //产生0~2之间的随机数
comSrc.src = "../"+randNum + ".png";
if (mySelect.value == "") {
window.alert("您还没有选择!");
return;
} else if (mySelect.value == "shitou") {
myNum = 0;
mySrc0.src = "../3.png";
mySrc1.src = "../3.png";
} else if (mySelect.value == "jiandao") {
myNum = 1;
mySrc0.src = "../1.png";
mySrc1.src = "../1.png";
} else if (mySelect.value == "bu") {
myNum = 2;
mySrc0.src = "../2.png";
mySrc1.src = "../2.png";
}
var resultNum = PK(myNum, randNum);
var result = new Result(myNum, randNum, resultNum);
totalNum = totalNum + 1;
switch (resultNum) {
case 0:
totalPeace++;
break;
case 1:
totalWin++;
break;
case 2:
totalFail++;
break;
default:
break;
}
results.push(result);
total.innerText = "总局数:" + totalNum + " " + totalWin + "赢," + totalFail + "输," + totalPeace + "和";
}
function PK(myNum, randNum) {
var result = $("result");
if (myNum == randNum) {
//window.alert("和");
result.innerText = "Peace";
return 0;
} else if ((myNum - randNum) == -1 || (myNum - randNum) == 2) {
//window.alert("You Win");
result.innerText = "You Win";
return 1;
} else if ((myNum - randNum) == 1 || (myNum - randNum) == -2) {
//window.alert("You Fail");
result.innerText = "You Fail"
return 2;
}
}
function changeNumToChar0(num) {
var char = "";
switch (num) {
case 0:
char = "石头";
break;
case 1:
char = "剪刀";
break;
case 2:
char = "布";
break;
default:
break;
}
return char;
}
function changeNumToChar1(num) {
var char = "";
switch (num) {
case 0:
char = "和";
break;
case 1:
char = "赢";
break;
case 2:
char = "输";
break;
default:
break;
}
return char;
}
//显示比赛结果
function showResult() {
var table = $("resultTable");
for (var i = 0; i < results.length; i++) {
var result = results[i];
var row = table.insertRow(i); //表格行创建位置
var inDex = row.insertCell(0); //第0列
var x = row.insertCell(1); //第一列
var y = row.insertCell(2); //第二列
var z = row.insertCell(3); //第三列
inDex.innerHTML = "第" + (i + 1) + "次"; //第0列显示的数字
x.innerHTML = "你: " + changeNumToChar0(result.my); //你的选择
y.innerHTML = "电脑: " + changeNumToChar0(result.com); //电脑的选择
z.innerHTML = "结果: " + changeNumToChar1(result.result); //输赢结果
}
}
//根据id号得到文档对象
function $(id) {
return document.getElementById(id);
}
</script>
</html>