一个简单的抽奖转盘游戏

2015/04/25 48746

在一个项目中要做一个游戏,在这个过程中做了一个简单的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>

代码片段