js實現(xiàn)大轉盤抽獎游戲實例

更新時間：2015年06月24日 16:54:31 作者：一把汗

這篇文章主要介紹了js實現(xiàn)大轉盤抽獎游戲的方法,實例分析了javascript基于數(shù)組、隨機數(shù)等實現(xiàn)抽獎游戲的技巧,需要的朋友可以參考下

本文實例講述了js實現(xiàn)大轉盤抽獎游戲。分享給大家供大家參考。具體實現(xiàn)方法如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>js抽獎</title>
 <style type="text/css">
  td{width:50px;height:50px;border:3px solid #ccc;text-align:center;vertical-align:middle}
 </style>
</head>
<body>
<table id="tb">
<tr>
 <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td>
</tr>
<tr>
 <td>16</td><td></td><td></td><td></td><td>6</td>
</tr>
<tr>
 <td>15</td><td></td><td></td><td></td><td>7</td>
</tr>
<tr>
 <td>14</td><td></td><td></td><td></td><td>8</td>
</tr>
<tr>
 <td>13</td><td>12</td><td>11</td><td>10</td><td>9</td>
</tr>
</table>
<p></p>
請輸入1-16其中一位整數(shù)，代表要停止的位置<input id="txtnum" value="12" type="text" /><input type="button" value="開始" onclick="StartGame()" />
 <script type="text/javascript">
  /*
  * 刪除左右兩端的空格
  */
  function Trim(str){
   return str.replace(/(^\s*)|(\s*$)/g, ""); 
  }
  /*
   * 定義數(shù)組
   */
  function GetSide(m,n){
   //初始化數(shù)組
   var arr = [];
   for(var i=0;i<m;i++){
    arr.push([]);
    for(var j=0;j<n;j++){
     arr[i][j]=i*n+j;
    }
   }
   //獲取數(shù)組最外圈
   var resultArr=[];
   var tempX=0,
    tempY=0,
    direction="Along",
    count=0;
   while(tempX>=0 && tempX<n && tempY>=0 && tempY<m && count<m*n)
   {
    count++;
    resultArr.push([tempY,tempX]);
    if(direction=="Along"){
     if(tempX==n-1)
      tempY++;
     else
      tempX++;
     if(tempX==n-1&&tempY==m-1)
      direction="Inverse"
    }
    else{
     if(tempX==0)
      tempY--;
     else
      tempX--;
     if(tempX==0&&tempY==0)
      break;
    }
   }
   return resultArr;
  }
  var index=0,   //當前亮區(qū)位置
  prevIndex=0,   //前一位置
  Speed=300,   //初始速度
  Time,   //定義對象
  arr = GetSide(5,5),   //初始化數(shù)組
   EndIndex=0,   //決定在哪一格變慢
   tb = document.getElementById("tb"),  //獲取tb對象 
   cycle=0,   //轉動圈數(shù) 
   EndCycle=0,   //計算圈數(shù)
  flag=false,   //結束轉動標志 
  quick=0;   //加速
  function StartGame(){
   cycle=0;
   flag=false;
   EndIndex=Math.floor(Math.random()*16);
   //EndCycle=Math.floor(Math.random()*4);
  EndCycle=1;
   Time = setInterval(Star,Speed);
  }
  function Star(num){
   //跑馬燈變速
   if(flag==false){
    //走五格開始加速
    if(quick==5){
     clearInterval(Time);
     Speed=50;
     Time=setInterval(Star,Speed);
    }
    //跑N圈減速
    if(cycle==EndCycle+1 && index==EndIndex){
    clearInterval(Time);
     Speed=300;
     flag=true;   //觸發(fā)結束
     Time=setInterval(Star,Speed);
    }
   }
   if(index>=arr.length){
    index=0;
    cycle++;
   }
   //結束轉動并選中號碼
   if(flag==true && index==parseInt(Trim(document.getElementById("txtnum").value))-1){ 
   quick=0;
   clearInterval(Time);
   }
   tb.rows[arr[index][0]].cells[arr[index][1]].style.border="3px solid red";
   if(index>0)
    prevIndex=index-1;
   else{
    prevIndex=arr.length-1;
   }
   tb.rows[arr[prevIndex][0]].cells[arr[prevIndex][1]].style.border="3px solid #ccc";
   index++;
   quick++;
  }
  /*
  window.onload=function(){
   Time = setInterval(Star,Speed);
  }
  */
 </script>
</body>
</html>

希望本文所述對大家的javascript程序設計有所幫助。

您可能感興趣的文章: