一个简单的JS抽奖转盘游戏

jopen 10年前

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