Reactでモグラたたきゲーム

React勉強中！！

今回はモグラたたきゲームです！！
少しずつ作りたいものを手早く作れるようになってきた。慣れてきた証！！

成果物を動かすとこんな感じです。

ソースコードはこちらに格納。
GitHub - Elsammit/Moguratataki

今回肝となる部分は定期的にもぐらの位置を変えるための定期処理かな？と個人的には思っております。
今回定期処理には、setInterval関数を用いました。

setInterval関数は下記のように用いればよいです。

this.intervalId = setInterval(()=>{
　this.rand_MoguraUp();　←　定期的に行いたい関数を入れる
}, 1000);　←インターバル期間(ミリ秒)

また、今回は30秒後にモグラたたきを終了させたいので、ある時間後に処理を実行するsetTimeout関数を用いました。
setTimeout関数はこちらのように用いればよいです。

setTimeout(()=>{
    this.finish_mogura();　←　セットしたタイマ時間後に実行したい処理を入れる
},30000);　←タイマ(ミリ秒)

最後に、定期処理を止めるにはこちらを用いればよいです。

clearInterval(this.intervalId);　←intervalidにはsetInterval関数のIDです

30秒後にモグラたたきを終了させたいので、finish_mogura関数はこちらのようにしました。

finish_mogura = () =>{
    clearInterval(this.intervalId);
}

今回はスタートボタンを押した時に定期的にモグラの位置を動かせばよいため用いませんでしたが、
ロード時から定期処理を動かしたい場合にはこちらを実行すればよいです。

  componentDidMount() {
    this.intervalId = setInterval(()=>{
      this.rand_MoguraUp();　←　定期的に行いたい関数を入れる
    }, 1000);
  }
  componentWillUnmount(){
    clearInterval(this.intervalId);　←intervalidにはsetInterval関数のIDです
  }

ReactでsetInterval使用で定期描画する | ikapblog

最後に、、、

簡単なゲームぐらいならすぐに作れるようになってきた。
次はWebページを作ってみようかな？

reactでWebページどうやって作っていけばよいかをまずは調査しようかな？