一个简单的抽奖转盘游戏详解编程语言

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

 品2 /td td 奖品3 /td /tr 

 tr td 奖品8 /td td button 开始 

 /button /td td 奖品4 /td /tr 

 tr td 奖品7 /td td 奖 

 品6 /td td 奖品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); 

 drawTimer=setTimeout(drawRun,easeTime*70);