# html-幸運轉盤

連結: [GitHub](https://github.com/yunnnzeng/spin-the-wheel)、[GitHub Pages](https://yunnnzeng.github.io/spin-the-wheel/)

來由
---
繼刮刮樂覺得可以嘗試其他小活動，所以做了幸運輪盤，網路上有很多種的輪盤，這是陽春版。

## 程式碼
### 使用語法
* HTML、CSS、JS

### HTML
主要架構為轉盤與指針

<div class="container">
    <div class="turntable">
        <div class="pointer"></div>
        <div class="wheel">
            <div class="segment segment1">Section 1</div>
            <div class="segment segment2">Section 2</div>
            <div class="segment segment3">Section 3</div>
            <div class="segment segment4">Section 4</div>
        </div>
    </div>
    <button class="spin-button" onclick="spinWheel()">Spin</button>
</div>

### CSS

.container {
    text-align: center;
    margin-top: 50px;
}

.turntable {
    margin: 20px auto;
    position: relative;
}

.wheel {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    position: relative;
    margin: 0 auto;
    overflow: hidden;
    /* 使用 overflow: hidden 來隱藏超出邊界的部分 */
    border: 2px solid black;
}

.segment {
    position: absolute;
    width: 100%;
    height: 100%;
    clip-path: polygon(50% 50%, 0 0, 100% 0);
    border-radius: 50%;
    /* 確保每個部分都是圓形 */
}

.segment1 {
    background-color: #726da8;
    transform: rotate(0deg);
}

.segment2 {
    background-color: #7d8cc4;
    transform: rotate(90deg);
}

.segment3 {
    background-color: #a0d2db;
    transform: rotate(180deg);
}

.segment4 {
    background-color: #bee7e8;
    transform: rotate(270deg);
}

.pointer {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    border-right: 15px solid transparent;
    border-left: 15px solid transparent;
    border-top: 25px solid #E39EC1;
    z-index: 10;
    /* 確保指針在上面 */
}

.spin-button {
    margin-top: 20px;
}

### JS
隨機生成要旋轉的角度，指針在上所以使用`actualDeg`，如指針在其他角度可使用`pointerDeg`

let spinning = false;

function spinWheel() {
  if (!spinning) {
    spinning = true;
    var wheel = document.querySelector('.wheel');
    var spinButton = document.querySelector('.spin-button');
    // Math.random() 0~1之間
    var deg = Math.floor(1080 + Math.random() * 360*14); // 旋轉的角度，可自行調整

    spinButton.style.pointerEvents = 'none'; // 防止連續點擊

    wheel.style.transition = 'all 1s ease-out'; // 控制旋轉的速度和效果
    wheel.style.transform = `rotate(${deg}deg)`;

    setTimeout(function () {
      spinning = false;
      spinButton.style.pointerEvents = 'auto';
      const actualDeg = deg % 360;
      let pointerDeg = 360 - actualDeg + 90; // 計算指針所在的角度
      if (pointerDeg >= 360) {
        pointerDeg -= 360;
      }
      showResult(actualDeg); // 顯示結果
    }, 1000);

  }
}

顯示結果

function showResult(deg) {
  // 這裡可以根據旋轉角度(deg)來顯示相應的結果
  // 例如，可以根據角度範圍判斷落在哪個部分，並顯示相應的內容
  let result = '';
  if (deg < 45) {
    result = 'Section 1';
  } else if (deg >= 45 && deg < 135) {
    result = 'Section 4';
  } else if (deg >= 135 && deg < 225) {
    result = 'Section 3';
  } else if (deg >= 225 && deg < 315) {
    result = 'Section 2';
  } else {
    result = 'Section 1';
  }
  alert('Congratulations! You got: ' + result);
}

完整程式碼: [GitHub](https://github.com/yunnnzeng/spin-the-wheel)

後續
---
1. 程式優化，讓每個選項百分比不同，但只需要在某處設定，不需要每個地方都修改，例如網頁呈現與最後顯示，目前就是兩處都需要修改
2. 點輪盤中間就可轉動，不一定需要按按鈕
3. 增加互動，使用者自行輸入轉盤選項與機率

###### tags: `html` `css` `js`