# JavaScript - 抽獎轉盤
* 完成範例：[CodePen](https://codepen.io/liu_0821/pen/XWOaPmg)、[GitHub](https://github.com/liu-huangling/JSPractice)、[Medium](https://medium.com/@LindaLiu0821/javascript-%E6%8A%BD%E7%8D%8E%E8%BD%89%E7%9B%A4-31d454880c47)

> 9F - 抽獎轉盤

### 使用語法
* HTML、CSS(SCSS)、JS(原生)
* 補充一下這次有使用到的套件
## [Sweetalert2](https://sweetalert2.github.io/)
#### 是可美化且可客製化<font color=blue>`alert`</font>的一種JavaScript套件，而且它還支援現今主流的JavaScript框架，包含React、Vue、Angular等等。
* [參考範例](https://sweetalert2.github.io/#examples)
* [如何導入專案？](https://sweetalert2.github.io/#download)
#### 基本上文件就包含所有內容物的介紹跟使用方法，所以在這邊就不多做說明，是個簡單好用經濟實惠(?)的好套件！！

### 攻略要點
1. 輪盤只能轉 20 次，人人有獎

    Flight：1份
    Child：4份
    Anything：5份
    Wifi：5份
    Wish：5份

2. 已經被抽到的獎項，就不可再次出現。
3. 【特定技術】以上兩個遊戲轉盤，不可直接寫死樣式在網頁上，請將品項以「JSON」格式來儲存，再藉由 JS 跑迴圈依序顯示獎項在輪盤上，此舉用意為若日後輪盤會新增獎項時，只要在 JSON 格式上新增即可。
4. 【特定技術】點選中間的「PRESS」後，指針開始滾動，滾動到一定時間後，就會停止並指向到獎項上。
5. 【特定技術】請考量中獎機率，而隨著品項變少也會跟著重新計算中獎率。

### 拆解步驟
* **HTML**
> 這次`HTML`部分就比較簡單直接pass~

* **CSS(SCSS)**
* 這次`icon`是用的[Icon連結在這邊！！](https://fonts.google.com/icons)
### 扇形怎麼做？
* 這次扇形是使用`clip-path`的方式去裁切形狀，再建立偽元素`before`
* 之後使用`transform-origin`改變重心位置，如下圖
* 再旋轉60度，就會如下圖所示
* 最後使用<font color=cake>`overflow:hidden`</font>隱藏掉多餘的部分就完成像披薩一樣的形狀了唷~
### 元素選擇器
* 像此案例是要間隔讓它有不同的背景顏色，在這邊就可以使用元素選擇器，來篩選我們想要的元素瞜~
| 選擇器名稱 | 說明 |
| ---------------- | --------------------------------- |
| :nth-child(n) | 設定第<font color=cake>**n**</font>個元素(n從1開始) |
| :nth-child(odd) | 設定<font color=cake>**單數**</font>元素 |
| :nth-child(even) | 設定<font color=cake>**雙數**</font>元素 |
| :nth-child(an+b) | 設定<font color=cake>**a(倍數)xn+b(差距)**</font>元素 |
### 動畫
* 這次讓指針動起來是採用css的`animation`動畫效果去設定。
* 欸它是怎麼旋轉到指定的抽獎位置呢？那就繼續往下看下去!!!

* **JavaScript**
### json資料 / 可更動式資料
這次專案是要用`json`檔串接，我在這邊寫了<font color=green>**`github`**</font>跟<font color=green>**`codepen`**</font>的版本，所以分成兩種方式來說明。
* <font color=green>**`Codepen`**</font>利用物件組成的陣列來替代`json`，所以如果要更換獎品名稱與數量，修改裡面的值即可做替換。
* <font color=green>**`Github`**</font>採用`json`檔來建立可更動式資料，使用`axiso`來做資料串。
### 自動新增元素
* 利用<font color=cake>**`forEach`**</font>跑每筆資料，再分別用`createElement`建立標籤，即可自動新增元素。
### 點選<font color=cake>**PRESS**</font>開始按鈕
* 設置變數透過`true`&`false`判斷什麼時候可以按下按鈕。
### 隨機抽獎邏輯
Math.floor(Math.random()*6)+1
* 透過上述函示隨機抽取數字1~6
* 抽取該獎項，首先判斷是否還有該獎品，有則減1，無則重抽。
* 當總數都減完之後，則會跳出`alert`通知所有獎項已被抽取完畢。
### **StyleSheets**使用
上面講述了抽獎邏輯的概念，現在要來講解怎麼讓動畫轉起來！

arrow.classList.add("aniRotate");
arrow.style.transform == ""? preRotate = 0:preRotate = parseInt(arrow.style.transform.split('(')[1].split('d')[0]-1800);
rotate= random * 60 ;
document.styleSheets[1].insertRule(`
@keyframes rotate{
from{
transform: rotate(`+preRotate +`deg);
}
to{
transform: rotate(`+parseInt(rotate + 1800) +`deg);
}
}`,26+i);
arrow.style.transform = 'rotate('+ parseInt(rotate)+'deg)';

* 一樣透過動畫來撰寫，需要設定動畫時間與運行方式，但比較特殊是使用JavaScript來讓他每次旋轉的起點都能夠擷取上次的角度開始做旋轉。
* 為了讓畫面看起來比較有再轉動的感覺，所以讓他每次轉動都會固定多轉5圈（1800度÷360度），所以要再加上1800度。
* 最後設定`transform`不會跑回原點。
### 歷史紀錄
* 因為動畫時間設定為3秒，所以設定一個3秒的`setTimeout`為記錄點。
* 使用`localstorage`作為存取紀錄的工具。

### 參考資料
* [同學的範例](https://medium.com/@cc86418520/%E6%96%B0%E6%89%8B-js-%E5%9C%B0%E4%B8%8B%E5%9F%8E-9f-%E6%8A%BD%E7%8D%8E%E8%BD%89%E7%9B%A4-8e23e5b3c56e)、[關於扇形怎麼做](https://codepen.io/ntjtcxpt-the-animator/pen/eYrRLNX)

### 結尾
* 終於又生出來一篇了(;´༎ຶД༎ຶ`)
* 這次比較困難的點在於扇形的製作，所以有參考一些同學的做法，剩下就是旋轉的邏輯，要讓它動起來一定有其他更好的方式，但是透過這次我也學習到怎麼透過JS設定css動畫，果然前端學海無涯(???( º﹃º )

---

##### ヽ(∀ﾟ )人(ﾟ∀)人( ﾟ∀)人(∀ﾟ )人(ﾟ∀)人( ﾟ∀)ﾉヽ(∀ﾟ )人(ﾟ∀ﾟ)人( ﾟ∀)人(∀ﾟ )人(ﾟ∀ﾟ)人( ﾟ∀)人(∀ﾟ )人( ﾟ∀)人

##### 以上 如果哪裡有錯誤或有問題，歡迎提出來一起討論~~~~