KATAMINOを解いているときの表示 (KATAMINOを解くプログラムを作成する)

★前回の記事 yucatio.hatenablog.com フィールド上のピースの表示を行います。また、KATAMINOを解いているときのピースの選択エリアやボタンの部分も変更します。 フィールドに置かれているピースの表示 前回、表示に必要な情報をstate.placedPiecesに格納し…

KATAMINOを解くのをスタートさせる (KATAMINOを解くプログラムを作成する)

★前回の記事 yucatio.hatenablog.com スタートボタンを押したときの挙動をプログラミングしていきます。 actionの登録 スタートボタンへactionを登録します。スタートボタンがクリックされたときにaction.startSolveを呼びます。この関数はすぐ下で実装しま…

使うピースの選択を実装する (KATAMINOを解くプログラムを作成する)

★前回の記事 yucatio.hatenablog.com プログラミングをしていきます。まずは使うピースの選択です。 状態の追加 選択中のピースをstateに追加します。 初期値はpieceIdが1, 2, 9, 5, 10ですので、これを追加します。 js/state.js const state = { // One of …

画面の状態を考える (KATAMINOを解くプログラムを作成する)

★前回の記事 yucatio.hatenablog.com 画面の状態遷移について考えます。画面の状態とは、"ピースの選択中"や"解いている"という状態です。 "ピースの選択中"と"解いている"、"解けた"、"解けなかった"の状態遷移は以下のようになります。 今回は一時停止がで…

プログラムの構造を考える (KATAMINOを解くプログラムを作成する)

★前回の記事 yucatio.hatenablog.com プログラムの内部設計をします。今回はjQueryを使用しますが、(jQueryのサンプルでよく見るような)コールバックを多用するとコードの見通しが悪くなるので、今回はReact+Reduxのプログラム構成を参考にして設計してみま…

一時停止・再開ボタン、速度調節用スライダーの用意 (KATAMINOを解くプログラムを作成する)

★前回の記事 yucatio.hatenablog.com 一時停止・再開ボタンの追加 フイールドのcardコンポーネントのフッターに一時停止・再開のボタンを追加します。両方ともページが読み込まれたときには押せないボタンなのでdisabled属性を付与しています。 index.html <div class="card my-2"> <div class="card-body"></div></div>…

KATAMINOフィールドとピースの用意 (KATAMINOを解くプログラムを作成する)

★前回の記事 yucatio.hatenablog.com KTAMINOのフィールドを配置します。 今回はKATAMINOを置くマス目(フィールド)に画像を用います。 画像はこちらからダウンロードできます。ダウンロードしたら、img/fieldに配置します。 KATAMINO-SOLVER/KATAMINO-SOLVER…

スタートボタンの用意 (KATAMINOを解くプログラムを作成する)

★前回の記事 yucatio.hatenablog.com KATAMINOを解くのをスタートさせるボタンを用意します。 ボタンの種類と実装方針 作成するプログラムでの、ボタンの状態は以下の4つです。 押せる状態のスタートボタン 押せない状態のスタートボタン "つかうピースをも…

ピースをドラッグ&ドロップさせる(jQuery-UI使用) (KATAMINOを解くプログラムを作成する)

★前回の記事 yucatio.hatenablog.com 前回までで、選択用のピースを画面に表示させることができました。今回はピースをドラッグ&ドロップさせる処理を追加します。 draggableとdroppableの設定 jQuery-UIのdroppableのページを参考に、ピースをドラッグ&ド…

ピースの選択エリアの作成 (KATAMINOを解くプログラムを作成する)

★前回の記事 yucatio.hatenablog.com ピースの選択エリアを作成します。ドラッグアンドドロップでピースを選択できるようにします。 jQuery-UIのDraggableとDroppableを使用します。 使用するbootstrapのコンポーネントは以下のようにContainerとAlertとCard…

KATAMINOピースの用意 (KATAMINOを解くプログラムを作成する)

★前回の記事 yucatio.hatenablog.com STEP 1では、KATAMINOのフィールドの1マスをテーブルの1セルに対応させていました。 このままでは見栄えが良くないので改善します。 改善したいポイントとしては、1ピースの中ではボーターを表示せず、さらにピースとピ…

ロゴの作成とbootstrapのnavbarの設定 (KATAMINOを解くプログラムを作成する)

★前回の記事 yucatio.hatenablog.com 見た目を整える最初の1歩として、ロゴを作成して表示してみましょう。Webで無料でロゴが作れるサービスはいくつかありますが、今回はLOGASTER を利用しました。 会社名に"KATAMINO SOLVER"と入力して、次へを押すと、ロ…

bootstrapとjQueryの設定 (KATAMINOを解くプログラムを作成する)

★前回の記事 yucatio.hatenablog.com はじめに、bootstrapとjQuery, jQuery-UIのライブラリを読み込んでおきましょう。 ひな形をbootstrapのページからコピーします。前回までの内容は一旦全て削除します。 Introduction · Bootstrap のページ内のStarter Te…

STEP2での成果物 (KATAMINOを解くプログラムを作成する)

★前回の記事 yucatio.hatenablog.com STEP2では見た目を整えてアプリを完成させます。 ページを開いた時の見た目はこのようになります。 画面上部でピースを選択します。スタートボタンを押すと、解くのを開始し、解く過程が表示されます。 ピースの選択(ド…

フィールドが分割された時に探索をやめる (KATAMINOを解くプログラムを作成する)

★前回の記事 前回まででピースを画面から選ぶことができ、解く過程も表示することができました。 いくつかの組み合わせを試してみると、以下の画像のように、フィールドに穴が空いている場合でも、ピースを置くのを続けてしまう場合があることに気づきます。…

ピースを画面から選べるようにする (KATAMINOを解くプログラムを作成する)

★前回の記事 yucatio.hatenablog.com これまで、使用するピースはjs/main.jsで指定してきましたが、画面で選べるように変更します。 表示するピースの画像の準備 ピースを選択する際にどのピースの画像を表示させます。画像をダウンロードします。 KATAMINO-…

JavaScriptのsetTimeoutを使用して途中経過を表示する (KATAMINOを解くプログラムを作成する)

★前回の記事 yucatio.hatenablog.com 前回までで解けた場合のフィールドを表示しました。今回は途中の経過も表示します。 ピースが置けた時にフィールドを更新します。 途中経過の表示方法 途中経過を表示します。ピースが置けたときに画面を更新します。 画…

セルに色をつける (KATAMINOを解くプログラムを作成する)

★前回の記事 yucatio.hatenablog.com 前回の記事で解けた内容を画面に表示しました。まだ見づらいので今回は見た目を整えていきます。 テーブルの枠線の表示し各セルに色をつけます。 色の準備 各ピースの色は以下のとおりです。 各ピースの色は パステルカ…

表示用メソッドの作成 (KATAMINOを解くプログラムを作成する)

★前回の記事 yucatio.hatenablog.com ここまでコンソールに表示してきましたが、仕上げとして画面に表示してみましょう。 実装 js/display.jsというファイルに表示用関数をまとめることにします。ファイルを 作成して以下の内容を書いておきます。 const dis…

次に置くピースの投入 (KATAMINOを解くプログラムを作成する)

★前回の記事 yucatio.hatenablog.com 前回まででスタックに新たにデータを投入する準備が整いました。今回はスタックに次のデータを投入しましょう。 実装 solver.initでデータを投入したのと同じように、まだフィールドに置かれていないピースnextUnPlaced…

最小の空白マスの更新 (KATAMINOを解くプログラムを作成する)

★前回の記事 yucatio.hatenablog.com 今回はminEmptyの更新をします。minEmptyはピースが置かれていないマスのうち、1番上の段の、1番左のマスです。 実装 フィールドを渡して最小の空白を探すfindMinEmptyを実装します。まずは呼び出し側を書きます。 js/so…

JavaScriptで値を指定して削除する(置かれていないピースの更新) (KATAMINOを解くプログラムを作成する)

★前回の記事 yucatio.hatenablog.com 続いてunPlacedPieceの更新をします。unPlacedPieceはまだ置かれていないピースの番号を格納しています。置かれたピースの番号をここから削除します。 実装 JavaScriptでは、引数に渡された値と同じ値を削除する関数は用…

フィールドの更新 (KATAMINOを解くプログラムを作成する)

★前回の記事 yucatio.hatenablog.com フィールドにピースが置かれているかどうか判定できたので、今回はフィールドにピースを置く処理を実装します。 実装 ピースが置かれた場所を、pieceIdで更新します。kataminoFieldの値を更新してしまうとスタック内の他…

フィールドにピースが置けるかどうかの判定 (KATAMINOを解くプログラムを作成する)

★前回の記事 yucatio.hatenablog.com 前回まででスピンをどこに移動するか求めることができたので、今回はその位置に置けるかどうかを判定する関数を作成します。 ピースがフィールドに置ける条件は、以下の2点を満たすことです。 ピースがフィールドの外に…

ピースを置く場所の算出 (KATAMINOを解くプログラムを作成する)

★前回の記事 yucatio.hatenablog.com スタックからフィールドとスピン情報を取得することができたので、ピースが置けるか判定していきます。 minEmptyのマスに重なるようにピースを置くのでした。 minEmptyは、フィールドのピースが置かれていないマスのうち…

スタックからの情報の取り出し (KATAMINOを解くプログラムを作成する)

★前回の記事 yucatio.hatenablog.com solve関数を実装していきます。 この関数内では、スタックからフィールドとピースの組み合わせを1つ取り出し、すべてのピースがフィールドに置けるまで(もしくはすべての組み合わせを試して、解けないことが確定するまで…

スタックへの初期データの投入 (KATAMINOを解くプログラムを作成する)

★前回の記事 yucatio.hatenablog.com スタックへデータを投入します。 スタックを使用するアルゴリズムについては以下の記事を参照してください。 yucatio.hatenablog.com 実装 フィールドと次に置くことができるピースをスタックへ投入します。 スタックsol…

フィールドの初期化 (KATAMINOを解くプログラムを作成する)

★前回の記事 yucatio.hatenablog.com KATAMINOのピースを置くフィールドを初期化します。 フィールドのサイズは、5 × (置くピースの数)です。 詳しくは以下の記事を参照してください。 yucatio.hatenablog.com 実装 フィールドの各値を-1で初期化します。配…

KATMINOを解くメインのプログラムの準備 (KATAMINOを解くプログラムを作成する)

★前回の記事 yucatio.hatenablog.com KATAMINOを解くメインのプログラムを作成します。 ディレクトリとhtmlファイルを用意しましょう。 KATAMINO-SOLVERフォルダの下に KATAMINO-SOLVER-mainという名前のフォルダを作成してください。 その下に index.htmlフ…

2次元配列からピースがある場所のリストを作成する (KATAMINOを解くプログラムを作成する)

★前回の記事 yucatio.hatenablog.com 2次元配列からピースがある場所のリストを作成します。こちらの記事を参考にしてください。 yucatio.hatenablog.com 現在はピースを以下のように2次元配列で表現しています。ピースの場所を1, ピースでない場所を0で表現…