下面是编程之家 jb51.cc 通过网络收集整理的代码片段。
编程之家小编现在分享给大家,也给大家做个参考。
在一个项目中要做一个游戏,在这个过程中做了一个简单的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>
以上是编程之家(jb51.cc)为你收集整理的全部代码内容,希望文章能够帮你解决所遇到的程序开发问题。
如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。