一个简单的抽奖转盘游戏

最新推荐文章于 2020-04-07 16:48:41 发布

风火程序员

最新推荐文章于 2020-04-07 16:48:41 发布

阅读量3.9k

点赞数 2

分类专栏：游戏文章标签：转盘游戏

本文链接：https://blog.csdn.net/phpfenghuo/article/details/26174865

版权

游戏专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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