イカサマルーレットを作った話

#何を作ったか？
イカサマ用のルーレットを作りました。
**[デモ](https://moscwa.github.io/Ikasama-roulette/)** (スマホ推奨)
[github](https://github.com/moscwa/moscwa.github.io/blob/master/Ikasama-roulette/README.md)

#やりかた
### ①友達と何か賭けをする
ジュース1本おごりレベルの軽い賭けにすることをお勧めします
###②ルーレットを回して、友達に色を選んでもらう
ここで「声を出して色を言う」事がポイント
###③ルーレットを止めてもらう
イカサマを疑われないため、止めるタイミングは友達に決めてもらいます
###④結果を見る
あら不思議、何回やっても友達が言ってない方の色が当たってます。

# 種明かし
音声認識で友達の選んだ色を特定し、**友達が選んでない側の色**が当たるように調節します。

#ソースコード

##Javascript

```javascript
col = null
isMatch=location.href.split('?')[1]=="a"// URLの末尾に　?aを入れると「言った通りの色が出る」になります

flag = true
start_btn.addEventListener('click', () => {//スタートボタンを押したら
  if (flag) {//2重押し防止
    recognition.start()//音声認識開始
    flag=false
    start_btn.style.backgroundColor="#1d4293"
    start_btn.innerText="STOP"
    deg=0
    speed=5
    rotating=setInterval(()=>{//ルーレットを回す
      deg+=speed
      roulette.style.transform="rotate("+deg+"deg)"
    },10)
  } else {//2回目はストップボタンとして機能
    start_btn.style.opacity="0"
    speed=4
    setTimeout(()=>{
      speed=3
    },1000)
    setTimeout(()=>{
      Stop(col)
    },2000)
  }
})

recognition = new webkitSpeechRecognition();//音声認識
recognition.onresult = function(event) {
  if (event.results.length > 0) {
    spoken = event.results[0][0].transcript//言った内容
    console.log(spoken)
    ch1=spoken.split('緑').length - 1 + spoken.split('ミド').length-1 + spoken.split('みど').length-1 //緑　っぽいことを言った回数
    ch2=spoken.split('紫').length - 1 + spoken.split('ムラ').length-1 + spoken.split('むら').length-1 //紫　っぽいことを言った回数
    if (ch1 || ch2) {//どちらも0だったらもう1度
      if (ch1>ch2){
        col = "green"
      }else{
        col = "purple"
      }
    }else{
      recognition.start()
    }
  }
}

function Stop(col){
    if(!isMatch){//初めの値がFalse→「言ってない色が当たる」モードの時は、緑⇔紫を入れ替える
      if(col=="green"){
        col="purple"
      }else if(col=="purple"){
        col="green"
      }
    }
    if (col=="green"){
      if (deg%360<180){
        clearInterval(rotating)
        restart.style.opacity="1"
      }else{
        setTimeout(()=>{
          clearInterval(rotating)
          restart.style.opacity="1"
        },600)
      }
    }
    else if(col=="purple"){
      if (deg%360>180){
        clearInterval(rotating)
        restart.style.opacity="1"
      }else{
        setTimeout(()=>{
          clearInterval(rotating)
          restart.style.opacity="1"
        },600)
      }
    } else {//認識できなかった時は、普通にランダムに回す
      setTimeout(() => {
        clearInterval(rotating)
        restart.style.opacity="1"
      }, Math.round(Math.random() * 1200))
    }
}


restart.addEventListener('click',()=>{
  location.reload();
})

```

##html
別に工夫はしてないです

```html
<!DOCTYPE html>
<html lang='ja'>
  <head>
    <meta charset="UTF-8">
    <title>Roulette</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div id="content">
      <div id="pointer"></div>
      <div id="roulette"></div>
      <div id="start_btn">START</div>
    </div>
    <div id="restart">
      もう1度
    </div>
    <script type="text/javascript" src="main.js"></script>
  </body>
</html>

```

##CSS
::beforeとoverflow:hiddenで円を2分割しています

```css
body{
  position: absolute;
  width:100vw;
  height:100vh;
  overflow: hidden;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
#content{
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
#start_btn{
  position: absolute;
  width: 30vmin;
  height:30vmin;
  border-radius: 50%;
  background-color: #c60019;
  display: flex;
  justify-content:center;
  align-items: center;
  font-size:6vw;
  color: white;
}
#roulette{
  position: absolute;
  width: 60vmin;
  height: 60vmin;
  background-color:#7d0f80;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
}
#roulette::before{
  content:"";
  position: absolute;
  top:0;
  left:0;
  width:50%;
  height:100%;
  background-color:#00984b;
  transform-origin: right center;
}
#pointer{
  content:"";
  position: absolute;
  transform: translateY(-33vmin);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 7vmin 4vmin 0 4vmin;
  border-color: #007bff transparent transparent transparent;
}
#restart{
  position: absolute;
  bottom:10%;
  left:30%;
  width: 40%;
  text-align: center;
  padding: 5%;
  box-sizing: border-box;
  font-size: 8vmin;
  background-color: #019fe6;
  border-radius: 20%;
  box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.3);
  opacity: 0;
  
}
```


#注意
・これはジョークアプリです。
・使用によって発生したいかなる損害についても責任は負いません。
・音声認識はたまに機能しません
・バレる可能性は十分にあります