数字当てクイズ　【React】

昔、プレイしていたファイナルファンタジー１１というオンラインゲームにランダムの数値を当てて宝箱を開錠するというコンテンツがあったのを今でも憶えている。

モンスターを倒すとフィールドに出現することがある宝箱

オマケ程度の要素だったが、開錠が成功してアイテムを手に入れることが出来たときは少しうれしかった。今回はその経験から着想を得て同じような仕組みのクイズを自作してみた。

ランダム数値当てクイズ

ざっくり説明スライド

０から２０の範囲でランダム数値を生成し、ヒントを頼りに数値を探っていくクイズになるわけだが、意外と難しく正解までたどり着けないことの方が多かった（笑）

使用したReactのコード（HTML&CSSは省略）

const Button = () => {

  /* 保持できる変数の作成（初期値も設定出来る）*/

  var [count, setCount] = React.useState(0)
  var [random, setNum] = React.useState(0)
  var [life,setLife] = React.useState(0)
  var [kaitou,setEqual] = React.useState("スタートボタンを押してください")
  var [start,setStart] = React.useState("スタート")
  var [jogen,setHint] = React.useState("")
  
  /* カウンターの最大値を設定 */

  if(count < 0){
    count = 20;
  }else if(count > 20){
    count = 0;
  }
  
  /*JSXを記述*/

  return (
    <div>
      <div><h2>数字当てクイズ</h2></div>
	
      <!--スタート/リセットボタン-->

      <button onClick={() => setNum(random = getRandom(0,20),
                                    setLife(life = 3),
                                    setEqual(kaitou = "数字を決めたら回答ボタンを押そう"),
                                    setCount(count = 0),
                                    setStart(start = "リセット"),
                                    setHint(jogen = getHint(random,count))
                                    )}>{start}</button>

      <!--数値増減ボタン-->

      <div><h1>{count}</h1></div>
      <button onClick={() => setCount(count + 1)}>+</button>
      <button onClick={() => setCount(count - 1)}>-</button>

　　　<!--回答情報表示欄-->
　　　
      <div><h2>残り挑戦回数：{life}</h2></div>
      <div><h2>{jogen}</h2></div>
      <div><h2>{kaitou}</h2></div>

　　　<!--回答ボタン-->

      <div><button onClick={() => {if(life > 1){
            if(count===random){
              var kaisuu = 4 - life;
              setEqual(kaitou = "回答：正解(挑戦回数は"+kaisuu+"回でした。)");
            }else{
              setEqual(kaitou = "回答：不正解");
              setLife(life - 1);
              setHint(hint = getHint(random,count));
            }}else{
              setLife(life = 0);
              setEqual(kaitou = "リセットボタンを押してください");
              setHint(hint = "");
            }}}>回答する</button></div>
    </div>
  )
}

/* 答えの数値をランダム生成する為の関数 */

function getRandom( min, max ) {
    var random = Math.floor( Math.random() * (max + 1 - min) ) + min;
    return random;
}

/* ヒントをランダム生成する為の関数 */

function getHint(random,count){
    var rdm = Math.floor(Math.random() * (3 + 1 - 1)) + 1;
    var rdm2 = Math.floor(Math.random() * (19 + 1 - 2)) + 2;
    var hint;
    switch(rdm){
      case 1:
        if(random % 2 === 0){
          hint = "ヒント：答えは偶数です"
        }else{
          hint = "ヒント：答えは奇数です"
        }
        break;
      case 2:
        if(rdm2 > random){
          hint = "ヒント：答えは"+ rdm2 +"よりも小さいです"
        }else{
          hint = "ヒント：答えは"+ rdm2 +"よりも大きいです"
        }
        break;
      case 3:
        if(count > random){
          hint = "ヒント：答えは"+ count +"よりも小さいです"
        }else{
          hint = "ヒント：答えは"+ count +"よりも大きいです"
        }
        break;
    }
    return hint;
}

/* return()内をHTMLに変換して描画する */

ReactDOM.render(<Button />, document.querySelector('#app'))

数値などの値を保持してくれる変数が非常に役立った。（というか無ければ作れなかった）

アイデアの源泉は自分の経験にある

新しく学んだことを使って無理やりアイデアを捻り出して形にするのは非常に大変な作業になる。。。
その際に助けとなるのは過去の経験が多い気がする。
ゲームのアイデアも自信を助けてくれる経験の一部なのだと思う。

過去記事の紹介

先週の記事
ギリシャ文字って宗教的な風味を感じるのですが、僕だけでしょうか？