JS地下城ー幸運轉盤

作品連結｜程式碼

達成條件：

1. 利用本地json檔設定禮物品項、禮物數量。

2. 轉盤上同步顯示禮物剩餘數量，已歸零的數量不可轉出。

3. 中獎畫面顯示。

開發技術：

1. vue.js

2. axios 串接本地JSON資料

0. 寫在前面:

本次題目需注意扇型角度的公式計算，以及中獎角度的隨機取得。利用vue.js的框架語法，減少對dom元素的變數宣告（可以增加程式易讀性）。

1. 扇型公式處理

一、扇型繪製方式：

扇型的繪製可以用下圖圖解之：

skewY(deg)為圓內扇型角度

因此，我們可以預期將在一個圓型裡，置入對應數量的<div>標籤，呈現結果如下圖：

六面扇型(內含六塊<div>標籤)

二十面扇型(內含二十塊<div>標籤)

二、扇型公式處理

我們先設定扇型需要的角度為360除以扇型數量，求出角度。接著求出傾斜角度(tilt)為扇型角度除以2，具體公式如下：

扇型面積疊加公式

2. 轉動指針至中獎指定角度

一、旋轉角度取得：

首先，每次點按抽獎時，我們需利用random()函式取出得獎號碼。接著由陣列內取出中獎角度，加在指針動態旋轉角度上，使其動態運轉。取得中獎角度的運作方式可參考下圖：

以上圖為例，若點按後隨機取得號碼為2，即旋轉120°

二、執行旋轉：

有玩過轉盤的人都知道，轉盤不可能只轉一圈（或還不到一圈），就停止了。為了增加抽獎的期待感，筆者在本案例中，設定為旋轉四圈。詳細算式可參考如下：

//指針起始角度 + 旋轉四圈 + 中獎度數 + 指針本身偏移 - 指針起始角度除360得餘數
let degree = vm.startDegree + 1440 + vm.prizeDegree[random]+ 190 - vm.startDegree % 360

三、執行復位：

若更換抽奬畫面或獎品抽完時，則需要將指針復位。公式可依以下的方式撰寫：

//復位角度 = 總角度除360得餘數-復位角度190
vm.storeDegree = degree % 360 -190

3. 抽完獎品後的畫面呈現

獎品已抽完畫面

抽獎次數依轉盤畫面的獎品剩餘數量，轉至獎品數量歸零為止。在數量歸零之後，有以下事件需作處理，具體程式碼可參考下方顯示：

1. 彈出alert畫面。

2. 指針復位。

3. 設定指針不再重覆點按（設布林值為false值）。

獎品抽完後程式碼撰寫

參考資料：

【CSS】绘制一个任意角度的扇形

【前端】【css】商城必备技术之转盘抽奖系统