一個簡單的抽獎遊戲

時間 2019-11-08

標籤一個簡單抽獎遊戲欄目遊戲简体版

原文原文鏈接

在一個項目中要作一個遊戲,在這個過程當中作了一個簡單的9宮格抽獎遊戲。大致思路是,點擊開始按鈕，遊戲開始。由一個逐步遞增參數 drawStep 來控制格子的背景顏色的改變，遊戲中止的位置參數 stopPosition 由隨機函數生成，以此來控制格子中止的位置。遊戲轉動一圈是8個格子,5圈就是40.easeTime參數模擬格子轉動的緩步啓動和緩步中止。javascript

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<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>css

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。