jQueryで作る15パズル

jQueryで作る15パズル

こんにちは、稲垣です。

今回は小さい頃にお祭りの出店で買ってよく遊んでいた15パズルを作成してみました。

目次

デモ

まずは完成サンプルです。

ランダムに並んだパネルを移動させ、左上から順番に1から15までを並べるとクリアーになります。

html、CSS、画像ファイル

html

中身のliタグとimgタグはjavascriptで生成するのでこれのみです。

css

パズルの枠になる#puzzleの位置調整と、liタグをposition:absoluteで設定しています。

各パネルの位置は生成時に決定させます。

画像ファイル

15枚のパネルの画像を準備します。

柄はイラストなどなんでも構いませんが、後から配列での扱いを楽にするためファイル名は0~15でつけておきます。

動きの実装

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

まずは必要な変数と配列を宣言します。

変数の宣言をしたら次はパネルの配置を行っていきましょう。

用意した配列に、ランダム配置するパネルの枚数分の数字を格納します。

パネルは全部で15枚ですが、最後の★マークは初期位置が右下固定となるので、まずは0~14までの数字でランダム処理を行い、最後に15を一番うしろに来るようにpushします。

この配列の中身を基にパネルの生成と位置指定を行います。

ここでも15番目の★マークのみは固定になるので、for文を抜けた後に個別で処理しました。

パネルの位置は下図のような計算で求めていきます。

これで15枚のパネルがランダムに並んだ状態までできました。

次にパネルをクリックした時の動きを書いていきます。

クリックしたパネルの位置を変数に保存し、★と隣接しているか判定した後に位置を入れ替えています。

パネルの入れ替えが終わった後に、下記のクリアー判定の関数を実行します。

まとめ

以上で完成になります!最後にコードをまとめて載せます。

クリックしたパネルが★と隣接しているかどうかの判定にifを使ったのですが、ここもうちょっとスムーズに処理できる方法がないでしょうか…。

またいつか並べたパネルを使うミニゲームを作る時に考えてみようと思います。

同じカテゴリー(WEB制作・デザイン)の記事