js编程猜拳小游戏

js编程小游戏:
运行效果图:
js编程猜拳小游戏_第1张图片
源码:
HTML:

<html>  
<head>  
    <title>Gametitle>
    <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>VSfont>td>
<td width=140px><font color="white" size="5">电脑font>br><img id="comImg" src="2.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="0.png"/>td>
<td><font size=10px>Choicefont>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: 100px; height: 30px;" value="想好了,出招" onClick="myChoice()"/>br>br>   
    <input type="button" style="width: 90px; 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: 160px;
height: 30px;" value="显示全部比赛结果"  onClick="showResult()"/>
td>  
tr>  

<tr>
<td colspan=3 ><table id="resultTable" align="center">table>
td>
<tr/>
table>  
div> 
body>
html>

js代码:

//结果类  
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="0.png";  
        mySrc1.src="0.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;ivar 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);   
 }  

你可能感兴趣的:(js)