猜拳游戏.JavaScript-(案例)

代码放在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>
猜拳游戏.JavaScript-(案例)

猜你喜欢
