BLOG

  1. HOME
  2. ブログ
  3. WEB制作・デザイン
  4. コーディング(html/css/JavaScript)
  5. jQueryで福笑いを作ってみた
by 稲垣 稲垣

jQueryで福笑いを作ってみた

jQueryで福笑いを作ってみた

こんにちは、稲垣です。

少し時期を逃した気もしますが、今回はお正月の遊びである福笑いをjQueryで作成してみました。

目次

デモ

まずは完成サンプルになります。

スタートボタンを押すと目隠しが表示され、パーツが動かせるようになります。

デモ(PCでご利用ください)

html、CSS、画像ファイル

htmlとcss、画像ファイルを準備します。

html

.mihonは左上に表示している完成見本です。

耳や目などの動かすパーツに.partsのクラスを振っておきます。

後は目隠し用のレイヤーと各ボタンを準備します。

css

基本的に各要素の初期位置を設定していくだけになります。

目隠しレイヤーを上に被せるとその下の要素にクリックが効かなくなるので、#mekakusiにpointer-events: none;を設定してクリックイベントを無効にしておきます。

画像ファイル

各パーツと輪郭部分の画像を作成し書き出しておきます。

動きの実装

それでは動きの部分になります。

今回はjQuery UIを使用するので処理を書く前に先に読み込ませておきます。

そして福笑いを作る上で必須になるパーツのドラッグ&ドロップの処理ですが…

なんとこの1行のみでOKです!

これを書くだけで.partsが付いた要素が全てドラッグで移動できるようになります。

あとはスタートボタンと完成ボタンを押すタイミングでドラッグの有効無効、目隠しと各ボタンの表示非表示を切り替えるだけで完成です。

まとめ

今回思いの外コードが短かったので最後にまとめて載せるのも省略します。

ドラッグ&ドロップの処理が面倒そうだなと思いながら作り始めたのですが、jQuery UIを使用すると一瞬で終わってしまって拍子抜けしました。

各パーツを置いた後に、本来の位置からどのくらい離れているか判定して点数をつけるみたいな仕様にしてみてもよかったかもしれません。

ページの先頭に戻る