角子老虎機 By Javascript ; Slot By Javascript

2013-07-09

4603
0
Javascript
2013-11-14

摘要:Js 角子老虎機 package

最近筆者在網路上看到一個不錯玩的套件 ,

Demo 網站 , GitHub

在這套件我們可以客製化的彈性很大 , 例如角子老虎機裡面的圖示其實是由兩張相同的圖片構成 ,

一張是模糊版用來當畫面快速進行中的照片 , 另外一張清晰版是當停止時所顯示的圖片

移動的動畫主要是用指定圖片的position來達成 , 當你在看Demo網站的時候可以使用開發者工具

指定Slot1 div , 其background-position 的數字會不斷的改變

有幾個可能會玩到的項目:

一. 添加新的角子老虎

在Slot.js裡面搜尋 //create slot objects ,

預設初始化了3個角子老虎 , 可以在這裡移除或者增加你自己的Slot , 當初始化一個新的Slot ,

你同樣需要增加它的Start , Stop , Reset 動作 , 你可以在 $( '#control').click 範圍裡面增加設定

二.更換角子老虎裡面的圖片項目

你可以直接製作自己的圖片 , 不過一張是模糊版 , 另外一張是清晰版 , 其原理就像前面提到的一樣

三.將角子老虎設定往上跑...

這可能有點無聊 .... 不過你可以在


$(el).pan({
            fps:30,
            dir: 'down'  //up的話就會往上飄
});

在裡面你可以發現設定了一組win陣列 , 這意思很明白了 ...


    var win = [];
    win[0] = win[454] = win[913] = 1;     3個orange位置
    win[80] = win[539] = win[1000] = 2;
    win[165] = win[624] = win[1085] = 3;
    win[237] = win[696] = win[1157] = 4;
    win[310] = win[769] = win[1230] = 5;
    win[378] = win[837] = win[1298] = 6;

對照posArr這組陣列的項目


 posArr = [           
            0, //orange
            80, //number 7
            165, //bar
            237, //guava
            310, //banana
            378, //cherry
            454, //orange
            539, //number 7
            624, //bar
            696, //guava
            769, //banana
            837, //cherry
            913, //orange
            1000, //number 7
            1085, //bar
            1157, //guava
            1230, //banana
            1298 //cherry
        ];

回首頁