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

★前回の記事

yucatio.hatenablog.com

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

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

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

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

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

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

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

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

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

使用するライブラリ

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

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

解説する内容について

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

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

【 ポイント11倍 】 Gigamic（ギガミック）社 カタミノ KATAMINO 3歳〜 (ネコポス不可) 価格：6048円（税込、送料無料) (2019/9/30時点) 楽天で購入

★次回の記事

yucatio.hatenablog.com

★目次

yucatio.hatenablog.com