本文主要介紹如何使用原生javascript和Css3來實(shí)現(xiàn)一個在各大移動應(yīng)用中經(jīng)常出現(xiàn)的轉(zhuǎn)盤游戲，由于改實(shí)現(xiàn)可以有不同方式，如果熟悉canvas的話也可以用canvas實(shí)現(xiàn)，本文采用js和css實(shí)現(xiàn)主要考慮到復(fù)雜度較小性能較好，所以如果有更好的方案，也可以隨時和我交流。

前言

本文技術(shù)路線采用和上篇文章教你用200行代碼寫一個愛豆拼拼樂H5小游戲(附源碼)同樣的技術(shù),即均使用本人自己寫的dom庫去簡化dom操作,具體需要掌握的知識點(diǎn)有：

• css3 背景漸變，transform，transition
• less循環(huán)的使用
• javascript基本隨機(jī)算法
• 文檔片段 documentFragment的使用

由于文章沒有太高深的技術(shù)，關(guān)鍵是思路，所以接下來開始我們的實(shí)現(xiàn)介紹。

效果圖

實(shí)現(xiàn)思路

實(shí)現(xiàn)思路分兩部分，第一部分是用css繪制轉(zhuǎn)盤背景，第二部分是通過js實(shí)現(xiàn)轉(zhuǎn)盤的轉(zhuǎn)動以及轉(zhuǎn)動隨機(jī)性的實(shí)現(xiàn)。

1. 繪制轉(zhuǎn)盤背景

我們采用背景漸變的方式去實(shí)現(xiàn)條紋交替的扇形，原理就是通過繪制一個半圓，并在半圓里加漸變來實(shí)現(xiàn)，如下圖：

實(shí)現(xiàn)將方形變成半圓的css我們通過border-radius來實(shí)現(xiàn)：

width: 150px; 
height: 300px; 
border-radius: 0 150px 150px 0; 

我們再通過css的線性漸變，這樣本基本上可以實(shí)現(xiàn)一個小的扇形區(qū)域：

漸變的代碼如下：

background-image: linear-gradient(120deg, #f6d365, #f6d365 75px, transparent 75px); 

實(shí)現(xiàn)了一個扇形，我們自然可以通過計算，比如我們扇形弧度為30deg，那么我們需要12個扇形即可組成一個圓，為了方便，我們使用less的循環(huán)來實(shí)現(xiàn)：

.loop(@n) when (@n >= 0) { 
    .loop(@n - 1); 
    .piece-@{n} { 
        transform: rotate(-30deg * (@n + 1)); 
    }  
} 

還有一個細(xì)節(jié)是，我們需要改變變換的中心點(diǎn)，讓每個扇形都以一個中心點(diǎn)渲染，這樣才可以組成一個完整的圓：

transform-origin: left center; 

完整的css大致如下：

.piece-wrap { 
    position: relative; 
    width: 300px; 
    height: 300px; 
    margin: 100px auto  auto 173px; 
    transform-origin: left center; 
    transition: transform 16s cubic-bezier(0,.47,.31,1.03); 
    .piece { 
        position: absolute; 
        left: 0; 
        top: 0; 
        width: 150px; 
        height: 300px; 
        border-radius: 0 150px 150px 0; 
        transform-origin: left center; 
        span { 
            margin-left: 16px; 
            margin-top: 20px; 
            display: inline-block; 
            color: #fff; 
        } 
        &:nth-child(2n) { 
            background-image: linear-gradient(120deg, #f6d365, #f6d365 75px, transparent 75px); 
        } 
        &:nth-child(2n+1) { 
            background-image: linear-gradient(120deg, #ff5858, #ff5858 75px, transparent 75px); 
        } 
    } 
 
    .loop(@n) when (@n >= 0) { 
        .loop(@n - 1); 
        .piece-@{n} { 
            transform: rotate(-30deg * (@n + 1)); 
        }  
    } 
 
    .loop(11); 
} 

2.javascript實(shí)現(xiàn)轉(zhuǎn)盤邏輯

由于轉(zhuǎn)盤的轉(zhuǎn)動是隨機(jī)的，所以我們需要每次點(diǎn)擊開始按鈕都要隨機(jī)生成一個角度，但是仔細(xì)分析一些平臺會發(fā)現(xiàn)轉(zhuǎn)盤每次都至少轉(zhuǎn)動n圈后才會滿滿開始停下，所以我們會給轉(zhuǎn)盤一個初始的角度，比如720deg，1080deg，這樣能保證轉(zhuǎn)盤至少轉(zhuǎn)動n圈才停下來。

另一個注意點(diǎn)是我們要如何通過轉(zhuǎn)動角度知道轉(zhuǎn)盤停下來后的位置?這里處于性能問題，我們盡量不操作dom，通過數(shù)據(jù)控制，我們可以通過每次隨機(jī)后得到的角度和單位扇形區(qū)域的弧度來計算停下來的位置，公式如下：

totalRadis = initRadis + radis * n + radis/2totalRadis為轉(zhuǎn)動的角度，

initRadis為初始化角度，radis為扇形的角度，radis/2是中獎的范圍，這里主要用來定位用的，n是隨機(jī)數(shù)，接下來我將解釋n的作用。

那么怎么實(shí)現(xiàn)隨機(jī)角度呢?我們一般會想通過寫個隨機(jī)函數(shù)去做，不過這里有一種新的思路，就是通過隨機(jī)生成中獎的位置來實(shí)現(xiàn)隨機(jī)角度，由于我的扇形為30度，一共有12個扇形獎品區(qū)，所以索引為0-11。因此，上面講到的n，就是我們的隨機(jī)索引，我們只需要寫個生成指定范圍的隨機(jī)數(shù)就可以了。

了解了以上知識，我們開始準(zhǔn)備初始化數(shù)據(jù)：

// 轉(zhuǎn)盤抽獎數(shù)據(jù) 
    var wards = ['1元', '2元', '3元', '5元', '再來',  
     '算法', '0.5元', '0.1元', '0.2元', '0.6元', 
     '0.5元', '來']; 

渲染獎品數(shù)據(jù),這里我們用了DocumentFragment，雖然對簡單渲染沒有必要，但是后期可能會很有用：

// 渲染dom 
var fragment = document.createDocumentFragment(); 
for(var i=0, len = wards.length; i < len; i++) { 
    var piece = document.createElement('div'); 
    piece.className = 'piece piece-' + i; 
    piece.innerHTML = '<span>' + wards[i] + '</span>'; 
    fragment.appendChild(piece); 
} 
 
$('#piece_wrap')[0].appendChild(fragment); 

生成指定范圍的隨機(jī)數(shù)的方法：

// 生成從 start到end的隨機(jī)數(shù) 
function randomArr(start, end) { 
    return Math.round(start + Math.random()* (end - start)) 
} 

當(dāng)我們點(diǎn)擊開始按鈕時，我將通過改變轉(zhuǎn)盤的transform來讓其運(yùn)動起來：

// 轉(zhuǎn)動邏輯 
    var radis = 30,  // 每個扇形區(qū)域的度數(shù) 
            n = randomArr(0, 360/radis),  // 計算隨機(jī)中獎的位置 
    initRadis = 720,   // 初始轉(zhuǎn)動的角度 
         time = 16 * 1000,    // 轉(zhuǎn)動時間  
         once = true,    // 限制一個轉(zhuǎn)動周期只能點(diǎn)擊一次 
   totalRadis = initRadis + radis * n + radis/2;  // 轉(zhuǎn)動角度計算公式 
$('.start').on('click', function(){ 
    if(once) { 
        once = false; 
        $('#piece_wrap').css({ 
            'transform':'rotate(' + totalRadis + 'deg)', 
            'transition': 'transform 16s cubic-bezier(0,.47,.31,1.03)' 
        }); 
        setTimeout(function(){ 
            once = true; 
            alert('恭喜你抽中了' + wards[n] + '!'); 
            $('#piece_wrap').css({ 
                'transform':'rotate(' + 0 + 'deg)', 
                'transition': 'none' 
            }); 
        }, time) 
    } 
         
    }) 

核心代碼就這些，怎么樣，是不是很簡單呢?