yucatio@システムエンジニア

趣味で作ったものいろいろ

KATAMINOを解くプログラムを作成する【目次】

f:id:yucatio:20190616200409p:plain

KATAMINOとは

KATAMINOとは、Gigamic社が発売するパズルゲームです。 ペンタミノという、5個の正方形をつなげてできる形をしたピースを使い、 長方形の枠にぴったり収まるように組み合わせて遊ぶゲームです。


作るもの

KATAMINOを解くプログラムを作成します。言語はJavaScriptです。

完成したものがこちらです。↓

KATAMINO SOLVER

カタミノのピースをドラッグアンドドロップで選択してスタートボタンを押します。

f:id:yucatio:20190617084121p:plain:w300

解く過程も表示されます。

f:id:yucatio:20190617084135p:plain:w620

完成したら、「できたよ」と表示されます。

f:id:yucatio:20190617084151p:plain:w300

KATAMINOを解くプログラム 目次

STEP 1: KATAMINOを解くプログラムを作成する

  1. KATAMINOを解くアルゴリズム
  2. データ構造を考える
  3. ペンタミノの回転、反転をするためのアルゴリズム
  4. もととなるペンタミノのピースの準備
  5. 最終的に出来上がる配列の確認と関数の準備
  6. JavaScriptで転置を実装する
  7. JavaScriptで2次元配列のコピーと配列の反転
  8. 8パターンのスピンを作成する
  9. 2次元配列の重複を取り除く
  10. 2次元配列からピースがある場所のリストを作成する
  11. KATMINOを解くメインのプログラムの準備
  12. フィールドの初期化
  13. スタックへの初期データの投入
  14. スタックからの情報の取り出し
  15. ピースを置く場所の算出
  16. フィールドにピースが置けるかどうかの判定
  17. フィールドの更新
  18. JavaScriptで値を指定して削除する(置かれていないピースの更新)
  19. 最小の空白マスの更新
  20. 次に置くピースの投入
  21. 表示用メソッドの作成
  22. セルに色をつける
  23. JavaScriptのsetTimeoutを使用して途中経過を表示する
  24. ピースを画面から選べるようにする
  25. フィールドが分割された時に探索をやめる

STEP 2: UIを整える

  1. STEP2での成果物
  2. bootstrapとjQueryの設定
  3. ロゴの作成とbootstrapのnavbarの設定
  4. KATAMINOピースの用意
  5. ピースの選択エリアの作成
  6. ピースをドラッグ&ドロップさせる(jQuery-UI使用)
  7. スタートボタンの用意
  8. KATAMINOフィールドの用意
  9. 一時停止・再開ボタン、速度調節用スライダーの用意
  10. プログラムの構造を考える
  11. 画面の状態を考える
  12. 使うピースの選択を実装する
  13. KATAMINOを解くのをスタートさせる
  14. KATAMINOを解いているときの表示
  15. KATAMINOを解くのが終了したときの遷移
  16. 解いた結果をダイアログで表示する
  17. ピースの再選択を実装する
  18. 一時停止、再開機能を実装する
  19. 速度調整機能を実装する
  20. ピースが置かれないフィールドをマスクする
  21. フィールドに置かれたピースを選択エリアから消す
  22. ピースを戻す表示を追加する

ソースコード

githubソースコード公開しています : https://github.com/yucatio/KATAMINO-SOLVER

依存ライブラリ

動作環境