tamakipedia

フロントエンドエンジニア。Typescriptもう特訓中です。一日の振り返りや学んだことをちょっとずつ吐いています。

【javascript】setIntervalは実行中に引数を変えてもスピードは変わらない・・・

やっとテトリスの得点を取得することに成功しました。
単純にラインが消える関数の中で count++ ;のように書いて
ラインを消す関数を呼ぶたびに+1する記述をすればよかったのです。

ということで今日書いてて気になった部分に行きたいと思います。

setIntervalの第二因数を動的に

通常setIntervalは第一引数に処理内容、第二引数に時間を設定します。
私が今作っているテトリスでは、0.5秒に一回テトリスの形をした配列を描画する必要があります。
なので

  1     const over = setInterval(()=>{
  2       // 一マス下に移動する処理
  3       // 描画処理
  4     
  5     ,500 )};

このようになります。

次に得点が 3点ごとにスピードアップさせたいのです。したがって
第二引数をspeed(Level)のようにして動的にスピードをあげるようにしました。
f:id:okinawanpizza:20200113171435p:plain

ですが結局speed関数のリターンで1.2.3......など数字を返しているものの
テトリスのスピードは変わりませんでした。

調べてみると、どうやらsetIntervalは実行開始したら変更があっても開始時のスピードのままループするのだとか.....
動的に変更できれば簡単でしたのに、、

対策 -- 3ラインが消えるごとにclearInterval()setInterval()を呼び出す

f:id:okinawanpizza:20200113181728p:plain

「止める」「始める」が記述された関数gameStart()

f:id:okinawanpizza:20200113182033p:plain

カウントが3の時に上の関数を実行するspeedUp()

これをラインを消去する処理の中で関数を呼び出すと
3の倍数の時に新しい速度のインターバルに上書きされるというわけです。

解決したら少しスッキリました。 次はtone.js 操作かな?

おしまーい!