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

★前回の記事

yucatio.hatenablog.com

STEP2では見た目を整えてアプリを完成させます。 ページを開いた時の見た目はこのようになります。

f:id:yucatio:20191010231229p:plain

画面上部でピースを選択します。スタートボタンを押すと、解くのを開始し、解く過程が表示されます。

ピースの選択(ドラッグアンドドロップ)↓

f:id:yucatio:20191003082948p:plain

解いている過程。フィールドにピースの画像が表示されます↓

f:id:yucatio:20191003083016p:plain

解けたときにこのようなダイアログを表示します↓

f:id:yucatio:20191003083031p:plain

解けなかったときにはこのようなダイアログを表示します↓

f:id:yucatio:20191003083044p:plain

解き終わった後はピースを選び直すボタンを表示します↓

f:id:yucatio:20191003083056p:plain

また、以下の機能も実装します。

  • 選択したピースが3個未満の場合はスタートボタンを押せないようにする
  • フィールドに置かれたピースは選択エリアから消す
  • ピースを1つずつ選択エリアに戻す処理を追加する
  • 一時停止、再生機能を追加する
  • 解く速度を変更できるようにする

使用するライブラリ

2019年現在、フロントエンドのライブラリばReactやVueが使われていますが、 ドラッグ&ドロップ機能を使用したいので、jQueryを使用します。ドラッグ&ドロップjQuery UIの機能です。

CSSフライブラリにはbootstrapを使用します。

解説する内容について

この記事を書いているブログ主はデザインについては素人なのでデザイン面の解説はしません。 プログラムの部分のみ解説します。

それではSTEP 2を始めましょう。


★次回の記事

yucatio.hatenablog.com

★目次

yucatio.hatenablog.com