BLOG

  1. HOME
  2. ブログ
  3. WEB制作・デザイン
  4. コーディング(html/css/JavaScript)
  5. jQueryを使った簡単なパズル作成
by 稲垣 稲垣

jQueryを使った簡単なパズル作成

jQueryを使った簡単なパズル作成

こんにちは稲垣です。

先日、昼休みに公園でパンを食べていると、知らないお爺さんに500mlの缶ビール3本とパンの交換を持ちかけられました。
しかし残っているパンが小さなクロワッサン一つと知ったお爺さんはササッとビールを引っ込めてしまいました。残念です。

さて、今回はjQueryで簡単なパズルを作成してみました。

目次

デモ

html、CSS

動きの実装

まとめ

デモ

完成イメージはこちらです。

スタートを押すと画像がシャッフルするので、クリックで画像を入れ替えつつ元の絵に戻します。

完成したパズル

html、CSS

html

#block、#time、#againは進行具合によって表示非表示を切り替えます。

#puzzleの中に、分割数分のliタグが挿入される予定です。

css

この段階で#puzzleの子要素であるliに背景画像を設定しておきます。
あとは各タグ生成時に適宜background-positionを設定することにより、一枚画像をバラバラにしたピースを作成できます。

動きの実装

それではまずスタート画面を表示させてみましょう。

先に必要な変数と配列を宣言しておきます。

配列posには0~23までの数字を格納します。

この数字を元に各ピースの位置を移動させていくことになります。

位置調整用に下記の関数を作成しました。

liタグの生成を行います。

0~23の数字を配列に格納すると同時にliのIDも設定します。

生成した後sortArr()関数を実行すると、各ピースが配列posの番号の位置に移動します。

現在の配列posの中身はこんな感じです。
配列の0番目がli#0の位置、1番目がli#1の位置という構造になっています。

img160520_1

ここまでのデモを載せておきます。

完成イメージが表示されたスタート画面ができあがりました。

デモ

引き続きスタート後の処理を書いていきます。

下記の関数を追加しました。

shuffle()は配列posの中身をランダムに並び替える関数です。

これにより配列の中身は下記のようになります。

img160520_2

配列の中身はバラバラになりますが、各liタグが参照する場所は変わりません。
よって、この状態でsortArr()を実行するとliタグの座標をバラバラにしたパズルの画面ができあがります。

img160520_3

goal()では配列posの中身が本来の順番通りにならんでいるかチェックして、クリアー判定をしています。

そして最後に、スタートボタンと各ピースのクリックイベントを記述します。

ピースの入れ替えについては、1枚目の選択時にIDを変数selectの中に保存しています。

2枚目の選択時に変数selectを基にして1枚目と2枚目のposの中身が入れ替わり、その後sortArr()をかけることで実際に場所が入れ替わります。

2枚の入れ替えが終わった時点でgoal()を実行し、クリアー判定をしています。

まとめ

以上でパズルの動きが完成しました!

最後にコードをまとめて載せます。

冒頭のお爺さんですが、とてもお腹がすいていると嘆いておられました。

コンビニの方に歩いて行きましたが、その後食べ物にありつけたかちょっと心配です。

それではまた。

ページの先頭に戻る