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. KATAMINOを解くのをスタートさせる
  13. 解いた結果をダイアログで表示する
  14. 使わないフィールドをマスクする
  15. 使用中のピースを選択画面から消す
  16. ピースを戻す表示を追加する
  17. もう一度解く機能の実装
  18. 一時停止、再開機能の実装
  19. 速度調整機能の実装

ソースコード

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

依存ライブラリ

動作環境