一個簡單的JS抽獎轉盤游戲

jopen 10年前發布 | 52K 次閱讀 游戲 JavaScript開發

   在一個項目中要做一個游戲,在這個過程中做了一個簡單的9宮格抽獎游戲。大體思路是,點擊開始按鈕，游戲開始。由一個逐步遞增參數 drawStep 來控制格子的背景顏色的改變，游戲停止的位置參數 stopPosition 由隨機函數生成，以此來控制格子停止的位置。游戲轉動一圈是8個格子,5圈就是40.easeTime參數模擬格子轉動的緩步啟動和緩步停止。

    <!doctype html>

    <html>

    <head>

    <meta charset="gbk">

    <title>簡單抽獎游戲</title>

    <style type="text/css">

    *{margin:0; padding:0;}

    table{width:400px; height:500px; margin:0 auto; text-align:center;}

    td{border:1px solid #900;}

    .run{background:#F00;}

    </style>

    </head>



<body>  
<table>  
<tr><td class="gif_icon gif_0">獎品1</td><td class="gif_icon gif_1">獎  

品2</td><td class="gif_icon gif_2">獎品3</td></tr>  
<tr><td class="gif_icon gif_7">獎品8</td><td><button>開始  

</button></td><td class="gif_icon gif_3">獎品4</td></tr>  
<tr><td class="gif_icon gif_6">獎品7</td><td class="gif_icon gif_5">獎  

品6</td><td class="gif_icon gif_4">獎品5</td></tr>  
</table>  
<script type="text/javascript"   

src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">  

</script>  
<script type="text/javascript">  
$(function(){  
   var drawTimer=null;  
   var drawStep=-1;       
   var easeTime=2;//緩動計時  
   var stopPosition=1;      

   $('button').click(function(){      
       stopPosition=Math.floor(Math.random()*8+1);   
       drawTimer=setTimeout(drawRun,easeTime*100);  
   });   
   function drawRun(){//抽獎游戲滾動       
              if(drawStep>= ( 40+stopPosition ) ){                       


                 $('.gif_'+(drawStep%8)).css('background','#f00');  
                  drawStep=stopPosition;      
                  easeTime=2;      
                  msg(drawStep+1);        
                  clearTimeout(drawTimer);                
                  return;  
              }            
              if(drawStep>=(36+stopPosition)){  
                  easeTime+=1;                
              }else{  
                  if(easeTime<=2){  
                      easeTime=2;  
                  }  
                  easeTime--;  
              }            
              drawStep++;                            
              $('.gif_icon').each(function(index){  
                   $(this).css('background','#fff');  
              });   
              $('.gif_'+(drawStep%8)).css('background','#f00');  
              drawTimer=setTimeout(drawRun,easeTime*70);                 


  }  

  function msg(num){  
          alert('恭喜您抽中了獎品'+num);  
  }  
})  
</script>  
</body>  
</html>  </pre></span>
 本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！