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