Eight Queen

作品プロフィール

使用言語：HTML / JavaScript / CSS

概要：

8×8マスの盤に、8ヶのクイーンを移動範囲が重ならないように配置するパズルゲーム
レスポンシブデザインを取り入れ、画面長の縦/横に合わせてボタンなどの配置が変わる
プロジェクト文書も作成（リバース）

機能：

盤、背景色を「ランダム」で変更可能
　(好きなタイミングでワンタッチで行える)

背景色はグラデーションでアニメーションする

駒の画像を選択して変更可能
　(ゲーム中でも変更可能)

すでに置いてある駒の移動範囲には置けない制限機能

置けないマスの明示のON/OFFの切り替え機能
　(いつでも切り替えられる)

置いた駒の数をカウントダウンするカウンター
　(カーソルを合わせると拡大表示)
　(置ける所が無くなるか、すべての駒を置くとダイアログを表示)

押されたボタンによってボタンの構成を入れ替える機能
　(選択すると反応もする)

盤のマスの数を任意の数に変更可能
　(入力値をバリデーションし、文字や不適切な値には警告を表記)
　(タイトル、カウンターの表記も入力値に合わせて変化)
　(念のため最高値を100×100に制限)

後記：

学んだばかりのJavaScriptがすぐにブラウザで実行できることが楽しくて作ってみました。
CSSで要素を思い通りに配置する方法や、レスポンシブデザインを実装する為の微調整が一番苦労しました。
100×100マスにして移動範囲を表示させると独特な幾何学模様になるのも想定外で面白かったです。
甥っ子がスマホで１時間も熱中して遊んでいました。

portfolioトップへ