KATMINOを解くメインのプログラムの準備 (KATAMINOを解くプログラムを作成する)
★前回の記事
KATAMINOを解くメインのプログラムを作成します。 ディレクトリとhtmlファイルを用意しましょう。
KATAMINO-SOLVER
フォルダの下に
KATAMINO-SOLVER-main
という名前のフォルダを作成してください。
その下に
index.html
ファイルを作成し、以下の内容を書き込んで保存します。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>KATAMINO SOLVER</title> </head> <body> <script src="js/util.js"></script> <script src="js/katamino-arr.js"></script> <script src="js/solver.js"></script> <script src="js/main.js"></script> </body> </html>
KATAMINO-main
フォルダの下に、jsフォルダを作成し、
その下にmain.js
とkatamino-arr.js
、solver.js
、util.js
という名前の空のファイルを作成します。
それぞれのファイルは以下の用途で使用します。
ファイル | 用途 |
---|---|
main.js | メインのプログラムを記載する |
katamino-arr.js | KATAMINOのピースのスピン情報を格納した配列を記載する |
solver.js | KATAMINOを解くプログラムを記載する |
util.js | ユーティリティ関数を記載する |
ディレクトリ構成はこのようになっています。
KATAMINO-SOLVER/ |_ KATAMINO-SOLVER-main/ | |_ index.html | |_ js/ | |_ katamino-arr.js | |_ main.js | |_ solver.js | |_ util.js |_ KATAMINO-SOLVER-preparation/ |_ ....
KATAMINOのスピン情報を持つ配列の準備
js/katamino-arr.js
ファイルに、KATAMINO-SOLVER-preparation/index.html
で画面に表示された内容をコピーします。
手動コピーはかなり良くない方法だとは思いますが、他によい方法が見当たりませんでした。
js/katamino-arr.js
const KATAMINO_ARR = [[[{"x":0,"y":0},{"x":0,"y":1},{"x":0,"y":2},{"x":0,"y":3},{"x":0,"y":4}],[{"x":0,"y":0},{"x":1,"y":0},{"x":2,"y":0},{"x":3,"y":0},{"x":4,"y":0}]],[[{"x":0,"y":0},{"x":0,"y":1},{"x":0,"y":2},{"x":0,"y":3},{"x":1,"y":0}],[{"x":0,"y":0},{"x":1,"y":0},{"x":2,"y":0},{"x":3,"y":0},{"x":3,"y":1}],[{"x":0,"y":3},{"x":1,"y":0},{"x":1,"y":1},{"x":1,"y":2},{"x":1,"y":3}],[{"x":0,"y":0},{"x":0,"y":1},{"x":1,"y":1},{"x":2,"y":1},{"x":3,"y":1}],[{"x":0,"y":0},{"x":1,"y":0},{"x":1,"y":1},{"x":1,"y":2},{"x":1,"y":3}],[{"x":0,"y":1},{"x":1,"y":1},{"x":2,"y":1},{"x":3,"y":0},{"x":3,"y":1}],[{"x":0,"y":0},{"x":0,"y":1},{"x":0,"y":2},{"x":0,"y":3},{"x":1,"y":3}],[{"x":0,"y":0},{"x":0,"y":1},{"x":1,"y":0},{"x":2,"y":0},{"x":3,"y":0}]],[[{"x":0,"y":0},{"x":0,"y":1},{"x":0,"y":2},{"x":0,"y":3},{"x":1,"y":1}],[{"x":0,"y":0},{"x":1,"y":0},{"x":2,"y":0},{"x":2,"y":1},{"x":3,"y":0}],[{"x":0,"y":2},{"x":1,"y":0},{"x":1,"y":1},{"x":1,"y":2},{"x":1,"y":3}],[{"x":0,"y":1},{"x":1,"y":0},{"x":1,"y":1},{"x":2,"y":1},{"x":3,"y":1}],[{"x":0,"y":1},{"x":1,"y":0},{"x":1,"y":1},{"x":1,"y":2},{"x":1,"y":3}],[{"x":0,"y":1},{"x":1,"y":1},{"x":2,"y":0},{"x":2,"y":1},{"x":3,"y":1}],[{"x":0,"y":0},{"x":0,"y":1},{"x":0,"y":2},{"x":0,"y":3},{"x":1,"y":2}],[{"x":0,"y":0},{"x":1,"y":0},{"x":1,"y":1},{"x":2,"y":0},{"x":3,"y":0}]],[[{"x":0,"y":0},{"x":0,"y":1},{"x":0,"y":2},{"x":1,"y":2},{"x":1,"y":3}],[{"x":0,"y":1},{"x":1,"y":0},{"x":1,"y":1},{"x":2,"y":0},{"x":3,"y":0}],[{"x":0,"y":0},{"x":0,"y":1},{"x":1,"y":1},{"x":1,"y":2},{"x":1,"y":3}],[{"x":0,"y":1},{"x":1,"y":1},{"x":2,"y":0},{"x":2,"y":1},{"x":3,"y":0}],[{"x":0,"y":2},{"x":0,"y":3},{"x":1,"y":0},{"x":1,"y":1},{"x":1,"y":2}],[{"x":0,"y":0},{"x":1,"y":0},{"x":1,"y":1},{"x":2,"y":1},{"x":3,"y":1}],[{"x":0,"y":1},{"x":0,"y":2},{"x":0,"y":3},{"x":1,"y":0},{"x":1,"y":1}],[{"x":0,"y":0},{"x":1,"y":0},{"x":2,"y":0},{"x":2,"y":1},{"x":3,"y":1}]],[[{"x":0,"y":0},{"x":0,"y":1},{"x":0,"y":2},{"x":1,"y":0},{"x":2,"y":0}],[{"x":0,"y":0},{"x":1,"y":0},{"x":2,"y":0},{"x":2,"y":1},{"x":2,"y":2}],[{"x":0,"y":2},{"x":1,"y":2},{"x":2,"y":0},{"x":2,"y":1},{"x":2,"y":2}],[{"x":0,"y":0},{"x":0,"y":1},{"x":0,"y":2},{"x":1,"y":2},{"x":2,"y":2}]],[[{"x":0,"y":0},{"x":0,"y":1},{"x":0,"y":2},{"x":1,"y":0},{"x":1,"y":1}],[{"x":0,"y":0},{"x":1,"y":0},{"x":1,"y":1},{"x":2,"y":0},{"x":2,"y":1}],[{"x":0,"y":1},{"x":0,"y":2},{"x":1,"y":0},{"x":1,"y":1},{"x":1,"y":2}],[{"x":0,"y":0},{"x":0,"y":1},{"x":1,"y":0},{"x":1,"y":1},{"x":2,"y":1}],[{"x":0,"y":0},{"x":0,"y":1},{"x":1,"y":0},{"x":1,"y":1},{"x":1,"y":2}],[{"x":0,"y":1},{"x":1,"y":0},{"x":1,"y":1},{"x":2,"y":0},{"x":2,"y":1}],[{"x":0,"y":0},{"x":0,"y":1},{"x":0,"y":2},{"x":1,"y":1},{"x":1,"y":2}],[{"x":0,"y":0},{"x":0,"y":1},{"x":1,"y":0},{"x":1,"y":1},{"x":2,"y":0}]],[[{"x":0,"y":0},{"x":0,"y":1},{"x":0,"y":2},{"x":1,"y":0},{"x":1,"y":2}],[{"x":0,"y":0},{"x":0,"y":1},{"x":1,"y":0},{"x":2,"y":0},{"x":2,"y":1}],[{"x":0,"y":0},{"x":0,"y":2},{"x":1,"y":0},{"x":1,"y":1},{"x":1,"y":2}],[{"x":0,"y":0},{"x":0,"y":1},{"x":1,"y":1},{"x":2,"y":0},{"x":2,"y":1}]],[[{"x":0,"y":0},{"x":0,"y":1},{"x":1,"y":1},{"x":2,"y":1},{"x":2,"y":2}],[{"x":0,"y":2},{"x":1,"y":0},{"x":1,"y":1},{"x":1,"y":2},{"x":2,"y":0}],[{"x":0,"y":1},{"x":0,"y":2},{"x":1,"y":1},{"x":2,"y":0},{"x":2,"y":1}],[{"x":0,"y":0},{"x":1,"y":0},{"x":1,"y":1},{"x":1,"y":2},{"x":2,"y":2}]],[[{"x":0,"y":0},{"x":0,"y":1},{"x":1,"y":1},{"x":1,"y":2},{"x":2,"y":1}],[{"x":0,"y":1},{"x":1,"y":0},{"x":1,"y":1},{"x":1,"y":2},{"x":2,"y":0}],[{"x":0,"y":1},{"x":1,"y":0},{"x":1,"y":1},{"x":2,"y":1},{"x":2,"y":2}],[{"x":0,"y":2},{"x":1,"y":0},{"x":1,"y":1},{"x":1,"y":2},{"x":2,"y":1}],[{"x":0,"y":1},{"x":1,"y":1},{"x":1,"y":2},{"x":2,"y":0},{"x":2,"y":1}],[{"x":0,"y":1},{"x":1,"y":0},{"x":1,"y":1},{"x":1,"y":2},{"x":2,"y":2}],[{"x":0,"y":1},{"x":0,"y":2},{"x":1,"y":0},{"x":1,"y":1},{"x":2,"y":1}],[{"x":0,"y":0},{"x":1,"y":0},{"x":1,"y":1},{"x":1,"y":2},{"x":2,"y":1}]],[[{"x":0,"y":0},{"x":0,"y":1},{"x":0,"y":2},{"x":1,"y":1},{"x":2,"y":1}],[{"x":0,"y":0},{"x":1,"y":0},{"x":1,"y":1},{"x":1,"y":2},{"x":2,"y":0}],[{"x":0,"y":1},{"x":1,"y":1},{"x":2,"y":0},{"x":2,"y":1},{"x":2,"y":2}],[{"x":0,"y":2},{"x":1,"y":0},{"x":1,"y":1},{"x":1,"y":2},{"x":2,"y":2}]],[[{"x":0,"y":0},{"x":0,"y":1},{"x":1,"y":1},{"x":1,"y":2},{"x":2,"y":2}],[{"x":0,"y":1},{"x":0,"y":2},{"x":1,"y":0},{"x":1,"y":1},{"x":2,"y":0}],[{"x":0,"y":0},{"x":1,"y":0},{"x":1,"y":1},{"x":2,"y":1},{"x":2,"y":2}],[{"x":0,"y":2},{"x":1,"y":1},{"x":1,"y":2},{"x":2,"y":0},{"x":2,"y":1}]],[[{"x":0,"y":1},{"x":1,"y":0},{"x":1,"y":1},{"x":1,"y":2},{"x":2,"y":1}]]]
KATAMINOを解くプログラムの準備
js/solver.js
ファイルの準備をします。以下の内容を記載してください。
const solver = { init : (targetPiece) => { console.log("init start") console.log("targetPiece", targetPiece) }, solve : () => { console.log("solve start") }, }
targetPiece
は、KATAMINOを解く対象のピースの配列です。例えば、[1, 2, 9]
であれば、以下の3つのピースです。
ピースの番号とピースの形一覧は以下になります。
main.jsの準備
solver.js
を呼び出すmain.js
の準備をします。
js/main.js
solver.init([1,2,9]) solver.solve()
動作確認
index.html
を開きましょう。引き続きGoogle Cromeを使用します。
ディベロッパーツールを表示します。Windowsの場合はF12
キー、Macの場合はCommand
+Option
+I
キーで開きます。
コンソールを開きます。以下のように表示されていれば成功です。
以上でKATMINOを解くメインのプログラムの準備は完了です。
★次回の記事
★目次