0
收藏
评论

一个简单的抽奖转盘游戏

在一个项目中要做一个游戏,在这个过程中做了一个简单的9宫格抽奖游戏。

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

代码演示:http://github.crmeb.net/u/LXT

最后一次编辑于  08-12  (未经腾讯允许,不得转载)
复制链接赞 0收藏评论