速度調整機能を実装する (KATAMINOを解くプログラムを作成する)

★前回の記事

yucatio.hatenablog.com

現在300ms間隔で描画を行なっていますが、ピースの数が多い場合は若干遅く感じます。そこで速度調節機能を追加します。

速度設定の追加

速度の設定を追加しましょう。 下記の記事で5段階のスライダーを用意しました。

yucatio.hatenablog.com

5段階それぞれに対応した速度を設定します。値は適当に決めています。

js/config.js

const config = {
  cellSize: 25,
  fieldOffset: {top: 26, left: 26},
  // 追加
  speedList: [10, 50, 100, 200, 500],
}

初期値はhtmlからスライダーの値を読み込むのが良いのですが、今回は簡単のため、スライダーの初期値をconfigに記載します。

js/config.js

const config = {
  cellSize: 25,
  fieldOffset: {top: 26, left: 26},
  speedList: [10, 50, 100, 200, 500],
  // 追加
  defaultSpeedLevel: 3,
}

速度を格納する変数の追加

速度を格納する変数をします。初期値は、config.speedList[config.defaultSpeedLevel]です。 setTImeoutの引数を、定義した変数に変更します。

js/solver.js

const solver = {
  solverStack : [],
  timer: null,
  // 追加
  speed: config.speedList[config.defaultSpeedLevel],

  // 中略
  solve : (options) => {
    // 中略
    if (! solver.hasAllFiveTimesCells(nextField, nextEmpty)){
      console.log("フィールドが5の倍数以外で分断されている")
      // 変更前
      // solver.timer = setTimeout(() => solver.solve(options), 300)
      // 変更後
      solver.timer = setTimeout(() => solver.solve(options), solver.speed)
      return
    }

    // 中略

    // 変更前
    // solver.timer = setTimeout(() => solver.solve(options), 300)
    // 変更後
    solver.timer = setTimeout(() => solver.solve(options), solver.speed)
  },
  // 中略
}

速度を変更するための関数をsolverに定義します。

js/solver.js

const solver = {
   // 中略

   // 追加ここから
   setSpeed: (speed) => {
     solver.speed = speed
   },
   // 追加ここまで
}

これで速度を変更する準備が整いました。

actionの登録

スライダー(speed-range)にactionを登録します。(action.changeSpeedはまだ定義していません)。$('#speed-range').val()でスライダーの値を取得していますが、文字列型なのでparseIntで数値に変換しています。

js/main.js

// 前略
const initializer = {
  setEvent: () => {
    // 中略

    // 追加ここから
    $('#speed-range').on("change", () => {
      const speedLevel = $('#speed-range').val()
      action.changeSpeed(parseInt(speedLevel, 10))
    })
    // 追加ここまで
  },
}

actionの実装

action.changeSpeedを実装します。configから値を取り出して、solverにセットします。

js/action.js

const action = {
  // 中略

  // 追加ここから
  changeSpeed: (speedLevel) => {
    solver.setSpeed(config.speedList[speedLevel])
  },
  // 追加ここまで
}

実行結果

実行結果です。スライダーを動かすと、ピースを置く速度が変わりました。(画像では伝わらないので、実際に動かして確かめてみてください)

以上で速度調整機能の実装ができました。

【 ポイント11倍 】 Gigamic（ギガミック）社 カタミノ KATAMINO 3歳〜 (ネコポス不可) ※消費税10%価格に変更済ページです。 価格：6160円（税込、送料無料) (2019/10/17時点) 楽天で購入

★次回の記事

yucatio.hatenablog.com

★目次

yucatio.hatenablog.com