這篇文章主要介紹了如何使用Javascript和CSS3實現(xiàn)一個轉(zhuǎn)盤小游戲，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

站在用戶的角度思考問題，與客戶深入溝通，找到利川網(wǎng)站設(shè)計與利川網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗，讓設(shè)計與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個性化、用戶體驗好的作品，建站類型包括：網(wǎng)站設(shè)計、做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣、申請域名、網(wǎng)站空間、企業(yè)郵箱。業(yè)務(wù)覆蓋利川地區(qū)。

具體需要掌握的知識點有：

• css3 背景漸變，transform，transition

• less循環(huán)的使用

• javascript基本隨機算法

• 文檔片段 documentFragment的使用

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

效果圖

實現(xiàn)思路

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

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

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

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

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

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

漸變的代碼如下：

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

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

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

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

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實現(xiàn)轉(zhuǎn)盤邏輯

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

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

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

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

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

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

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

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

// 轉(zhuǎn)動邏輯     var radis = 30,  // 每個扇形區(qū)域的度數(shù)             n = randomArr(0, 360/radis),  // 計算隨機中獎的位置     initRadis = 720,   // 初始轉(zhuǎn)動的角度          time = 16 * 1000,    // 轉(zhuǎn)動時間           once = true,    // 限制一個轉(zhuǎ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)     }              })

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“如何使用Javascript和CSS3實現(xiàn)一個轉(zhuǎn)盤小游戲”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!

本文標(biāo)題：如何使用Javascript和CSS3實現(xiàn)一個轉(zhuǎn)盤小游戲
網(wǎng)頁地址：http://jinyejixie.com/article40/pgijho.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供Google、營銷型網(wǎng)站建設(shè)、做網(wǎng)站、微信公眾號、靜態(tài)網(wǎng)站、App設(shè)計

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)