一文教你用JavaScript製作個簡單的大轉盤遊戲

2023-02-03 18:01:36

背景

日常生活中，我們經常會見到形形色色的抽獎活動，例如九宮格、大轉盤等等……以前都沒去深入考慮過，如果讓我去做這些小遊戲，有哪些需要注意的事項，不試不知道，一試全是坑。正好最近有需求讓我做一個大轉盤遊戲，那我也總結一下我的一些感想和經驗。

一、開始前的準備

首先就是確定產品需求，仔細一看，emmm，就是正常的一個大轉盤該有的東西，也沒啥特殊要求，唯一需要注意的是大轉盤的轉盤個數需要動態變化，即使用者設定多少獎品我就需要顯示多少塊區域。

既然要做大轉盤，不外乎三個步驟：

畫出大轉盤
把獎勵放上去
讓大轉盤滾起來

這有啥難的，讓UI給我N個大轉盤背景圖，使用者設了多少獎品我就顯示對應的背景圖... 哦，那樣圖片太多了，太麻煩了，也行吧... 那給我每個角度的扇形切圖一張，我轉一下不就出來了？... 啊？不給啊，那沒事了...（當時的表情：冷靜分析...仔細思索...眉頭稍皺...好耶，我涼了呀）

二、畫出大轉盤

畫出大轉盤底圖部分就不必多說了，最難的部分在於把一個圓動態平均分成N份，並讓其在底圖上正常顯示。

我採用的方法是：使用者選擇了多少獎品（除2個獎品以外）我就在底圖上生成多少個寬高為底圖50%的div，目的是使每個div的右下角正好與底圖的中心點重合（這裡有個坑，看下去就知道了），接著計算出對應的圓心角 angle = 360 / n ，然後將其形變後以右下角為圓心旋轉對應的角度拼成一個圓形。其中，形變和旋轉分別採用skew與rotate進行實現。

注：

skew形變的角度為(90 - angle)deg；
如果要給每一塊加上漸變色的話，由於使用了skew形變，所以要顯示從左到右的漸變的效果，就需要從原先正方形的底邊變到右邊，即：background: linear-gradient('45deg', color1, color2)

如想看到更為細緻的旋轉原理與demo，請點選下方連結：

原理：https://www.w3cplus.com/css3/building-a-circular-navigation-with-css-transforms.html

demo：https://tympanus.net/Tutorials/CircularNavigation/interactivedemo/index.html

// 以下為N為8時，用純JS寫的一個測試demo
const n = 8; // 獎品數量
const circle = document.getElementById('circle');
for(let i = 0; i < n ; i++) {
    let item = document.createElement('div');
    item.className = `circle-item  circle-item-${n}`;
  	// n為2時，旋轉原點不在右下角改為底部中點，不需要skew形變，並且寬度不是50%而是100%
    if(n !== 2) {
      item.style=
        `transform: rotate(${i * angle}deg) skew(${90 - angle}deg);
         transform-origin: bottom right;
         background-color: ${colorList[i % colorList.length]}; //設定了每個格子的背景色，可以不設定
        `
    } else {
      item.style=
        `transform: rotate(${i * angle}deg);
         transform-origin: bottom;
         background-color: ${colorList[i % colorList.length]};
        `
    }
    circle.appendChild(item);
  }

本以為算解決了一個難題，直到我開始測試時，發現 n == 3時出現了奇怪的現象：

好嘛，當 n == 3時，只設定50%的寬高顯然並不能填充滿整個背景圖。於是更改了當 n != 2時的樣式，改為寬高的60%，並設定其初始位置往左和上各平移10%。

.circle-item {
    border: 1px solid;
    height: 60%;
    width: 60%;
    position: absolute;
    left: -10%;
    top: -10%;
}

這樣乍一看是實現了平均分的問題，但仔細一想還有一個問題，那便是如果加上指標，指標永遠是向上的，這樣看起來就怪怪的了，所以還需要將整個影象進行一個旋轉，使初始指標預設指向第一塊的中心位置。

旋轉角度為： (180 - angle) / 2。

三、把獎勵放上去

把獎勵放上去我想到兩種方法：

1、給每個獎勵生成一個與底部背景圖寬高一樣的正方形，然後將其對著中心點旋轉對應的角度，將其一層層的放在底部背景圖上，即可完成。如下圖1所示，每一個正方形的大小都是與底部的背景圖的寬高是一樣的，只是將其進行一個旋轉即可。（當時以為不好顯示使用者抽中的扇形的部分，就沒采用這種方法，現在總結了才發現只需要將顏色填充在每個扇形中即可，不用填充在獎勵背景上，如下圖2所示，應該也是能實現的）

圖1 每一層獎勵的範圍

圖2 總結時想到的實現方法

2、將獎勵直接放在每一個扇形區域裡面，這樣我就直接修改每個扇形的背景色即可。看上去很簡單，但實際開始操作了就發現了兩個問題：

由於每一塊方格是skew形變出來的，獎勵直接放上去也會產生形變，需要將形變消除；
獎勵居中顯示很麻煩，到現在我也沒有找到可以套用的公式；

第一點解決起來較為簡單，只需要將獎勵進行一個反向的skew變形，旋轉角度為：-(90 – (angle / 2))deg。第二點我到現在也沒有找到可以套用的公式，是每一種給他寫了一個樣式居中的。（還好產品只要求2-6的獎勵數量，不然可能就沒有這篇文章了，如果大家有好的方法也可以教教我）

兩種方法各有優點：方法一的優點是不需要將獎勵進行反向形變，怎麼放上去就是怎麼顯示；方法二的優點是獎勵與扇形不分離，我不需要額外的新增太多的div來實現獎勵正確顯示。

四、讓大轉盤滾起來

大轉盤到現在已經完成了七七八八了，現在就差最後一步，讓其滾起來，點選一次後捲動到對應的位置然後停下。

採用的方法是給大轉盤新增一個旋轉的動畫，突然想起來 transform 中有 ease-in-out 這個過渡方法，即慢-快-慢的過渡效果，正好滿足我抽獎所需，於是直接採用了這種方法。

這裡有個小細節，由於大轉盤上本來就設定了transform的動畫效果，如果不想現在的旋轉動畫覆蓋掉之前的動畫，就需要單獨給動畫加上一層div，放在大轉盤底圖的外邊一層。

const circle = 8; // 旋轉圈數
let circleAdd = 0; // 抽獎次數，每次抽完自增
let rotateAngle = 0; // 旋轉角度
let getPrizeIndex = 0; // 抽到的獎品的index

在定義完上面的內容之後計算需要旋轉的角度： rotateAngle = circle * 360 * circleAdd - angle * getPrizeIndex，將這個rotateAngle放入需要旋轉的style中即可完成旋轉。

這裡走了兩次彎路，一次是沒有加上circleAdd，然後就發現第一次大轉盤會正常旋轉，第二次開始就不動或者只往前滾不到360°甚至往回滾！原因是因為每一次給style賦新值的時候，由於已經有旋轉的角度了，他會在你設定新的旋轉角度的時候從上一個旋轉角度開始執行動畫。

第二次是我在寫計算公式的時候，想當然的把上面的“-”寫成了“+”，想的是我先旋轉了circle * circleAdd圈，然後還要滾 getPrizeIndex 個獎勵就是我需要顯示的獎勵，然後發現指標指向的獎勵與我需要選擇的 getPrizeIndex 並不相符。仔細檢查了才發現雖然大轉盤旋轉是順時針方向的，但是獎勵的讀取方向應該是逆向的，所以應該是“-”而不是“+”。

個人總結

在寫這個大轉盤之前我一直沒覺得大轉盤這種小遊戲有多難，無非就是轉一下，然後獎勵顯示一下，這有啥難的？寫了之後才發現自己真的too young too simple，一個簡單的大轉盤裡面也有不少的數學的公式需要學習計算，真的是走一步卡半天，一步一個坑。還是需要多多學習！

到此這篇關於一文教你用JavaScript製作個簡單的大轉盤遊戲的文章就介紹到這了,更多相關JavaScript大轉盤遊戲內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！