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

KATAMINOとは

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

【ポイント11倍】Gigamic（ギガミック）社 カタミノ KATAMINO 3歳〜 ギフト プレゼント (ネコポス不可) puzzle 新入学 新入園 【k0507】 価格：6048円（税込、送料無料) (2019/6/16時点) 楽天で購入

作るもの

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

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

KATAMINO SOLVER

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

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

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

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

依存ライブラリ

• jQuery 3.3.1
• jQuery-UI 1.12.1
• bootstrap 4.3.1

動作環境

• Mac OS Sierra 10.12.6
• Google Chrome 72.0