js实现大转盘抽奖游戏实例

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3 <html xmlns="http://www.w3.org/1999/xhtml">
  4 <head>
  5  <title>js抽奖</title>
  6  <style type="text/css">
  7   td{width:50px;height:50px;border:3px solid #ccc;text-align:center;vertical-align:middle}
  8  </style>
  9 </head>
 10 <body>
 11 <table id="tb">
 12 <tr>
 13  <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td>
 14 </tr>
 15 <tr>
 16  <td>16</td><td></td><td></td><td></td><td>6</td>
 17 </tr>
 18 <tr>
 19  <td>15</td><td></td><td></td><td></td><td>7</td>
 20 </tr>
 21 <tr>
 22  <td>14</td><td></td><td></td><td></td><td>8</td>
 23 </tr>
 24 <tr>
 25  <td>13</td><td>12</td><td>11</td><td>10</td><td>9</td>
 26 </tr>
 27 </table>
 28 <p></p>
 29 请输入1-16其中一位整数，代表要停止的位置<input id="txtnum" value="12" type="text" /><input type="button" value="开始" onclick="StartGame()" />
 30  <script type="text/javascript">
 31   /*
 32   * 删除左右两端的空格
 33   */
 34   function Trim(str){
 35    return str.replace(/(^s*)|(s*$)/g, ""); 
 36   }
 37   /*
 38    * 定义数组
 39    */
 40   function GetSide(m,n){
 41    //初始化数组
 42    var arr = [];
 43    for(var i=0;i<m;i++){
 44     arr.push([]);
 45     for(var j=0;j<n;j++){
 46      arr[i][j]=i*n+j;
 47     }
 48    }
 49    //获取数组最外圈
 50    var resultArr=[];
 51    var tempX=0,
 52     tempY=0,
 53     direction="Along",
 54     count=0;
 55    while(tempX>=0 && tempX<n && tempY>=0 && tempY<m && count<m*n)
 56    {
 57     count++;
 58     resultArr.push([tempY,tempX]);
 59     if(direction=="Along"){
 60      if(tempX==n-1)
 61       tempY++;
 62      else
 63       tempX++;
 64      if(tempX==n-1&&tempY==m-1)
 65       direction="Inverse"
 66     }
 67     else{
 68      if(tempX==0)
 69       tempY--;
 70      else
 71       tempX--;
 72      if(tempX==0&&tempY==0)
 73       break;
 74     }
 75    }
 76    return resultArr;
 77   }
 78   var index=0,   //当前亮区位置
 79   prevIndex=0,   //前一位置
 80   Speed=300,   //初始速度 通过定时器的时间设置的
 81   Time,   //定义对象
 82   arr = GetSide(5,5),   //初始化数组
 83    EndIndex=0,   //决定在哪一格变慢
 84    tb = document.getElementById("tb"),  //获取tb对象 
 85    cycle=0,   //转动圈数 
 86    EndCycle=0,   //计算圈数
 87   flag=false,   //结束转动标志 
 88   quick=0;   //加速
 89   function StartGame(){
 90    cycle=0;
 91    flag=false;
 92    EndIndex=Math.floor(Math.random()*16);
 93    //EndCycle=Math.floor(Math.random()*4);
 94   EndCycle=1;
 95    Time = setInterval(Star,Speed);
 96   }
 97   function Star(num){
 98    //跑马灯变速
 99    if(flag==false){
100     //走五格开始加速
101     if(quick==5){
102      clearInterval(Time);
103      Speed=50;
104      Time=setInterval(Star,Speed);
105     }
106     //跑N圈减速
107     if(cycle==EndCycle+1 && index==EndIndex){
108     clearInterval(Time);
109      Speed=300;
110      flag=true;   //触发结束
111      Time=setInterval(Star,Speed);
112     }
113    }
114    if(index>=arr.length){
115     index=0;
116     cycle++;
117    }
118    //结束转动并选中号码
119    if(flag==true && index==parseInt(Trim(document.getElementById("txtnum").value))-1){ 
120    quick=0;
121    clearInterval(Time);
122    }
123    tb.rows[arr[index][0]].cells[arr[index][1]].style.border="3px solid red";
124    if(index>0)
125     prevIndex=index-1;
126    else{
127     prevIndex=arr.length-1;
128    }
129    tb.rows[arr[prevIndex][0]].cells[arr[prevIndex][1]].style.border="3px solid #ccc";
130    index++;
131    quick++;
132   }
133   /*
134   window.onload=function(){
135    Time = setInterval(Star,Speed);
136   }
137   */
138  </script>
139 </body>
140 </html>