Of Stack

js realizes the large turntable lottery game instance

  • 2020-06-22 23:45:44
  • OfStack

This article describes the js implementation of large turntable lottery game. Share to everybody for everybody reference. Specific implementation methods are as follows: 


<!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 Lucky draw </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>
 Please enter the 1-16 Among them 1 A bit integer representing the position to stop <input id="txtnum" value="12" type="text" /><input type="button" value=" start " onclick="StartGame()" />
 <script type="text/javascript">
  /*
  *  Delete the left and right Spaces 
  */
  function Trim(str){
   return str.replace(/(^\s*)|(\s*$)/g, ""); 
  }
  /*
   *  Define an array 
   */
  function GetSide(m,n){
   // Initializing array 
   var arr = [];
   for(var i=0;i<m;i++){
    arr.push([]);
    for(var j=0;j<n;j++){
     arr[i][j]=i*n+j;
    }
   }
   // Gets the outermost circle of the array 
   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,   // Current bright area position 
  prevIndex=0,   // before 1 location 
  Speed=300,   // The initial velocity 
  Time,   // Define the object 
  arr = GetSide(5,5),   // Initializing array 
   EndIndex=0,   // Where is the decision 1 Slow, 
   tb = document.getElementById("tb"),  // To obtain tb object  
   cycle=0,   // Turning laps  
   EndCycle=0,   // Calculation of ring 
  flag=false,   // End turning mark  
  quick=0;   // To speed up 
  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){
   // Running horse variable speed 
   if(flag==false){
    // go 5 Lattice begins to accelerate 
    if(quick==5){
     clearInterval(Time);
     Speed=50;
     Time=setInterval(Star,Speed);
    }
    // run N Circle to slow down 
    if(cycle==EndCycle+1 && index==EndIndex){
    clearInterval(Time);
     Speed=300;
     flag=true;   // End of the trigger 
     Time=setInterval(Star,Speed);
    }
   }
   if(index>=arr.length){
    index=0;
    cycle++;
   }
   // Complete the rotation and select the number 
   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>

Hopefully, this article has been helpful in your javascript programming.

Related articles: