Javascript(JQuery)作ったパズルゲームの改良

 前回製作したパズルゲームですが、簡単すぎると言う意見が多かったので、少し改良しました。
改良した点は、パズルの完成部分に画像を表示しないようにしました。

サンプルページはこちらになります。


パズルゲーム改良(jQuery)の紹介画像

遊び方

1. ゲームを開始するには、スタートを押してください
2. 左側のピースをドラッグ&ドロップして右側の画像の当て嵌めてください。
3. もし、元画像を確認する時は、「元画像を表示」ボタンで表示を切り替えれます。
4. 完成したら、「完了」ボタンを押してください。

ソースを変更するにには

・パズル画像の変更と追加
 「image」フォルダー内に画像を入れてください。サイズは自由ですが、画像サイズを分割数で割ったときに端数が出ないようにしてください。また表示領域の最大幅を350px、最大高さ500pxにしているので、それより小さい画像を使ってください。

・画像の分割数を変更する
 「java.js」の「x_split」と「y_split」を変更してください。

・phpを使わないようにするには
 「index.php」を「index.html」に変更し、先頭行の「control.php」の呼び込み部分を削除し、id「hidden_datas」の中に画像のパスを記述してください。

 ソースコードは、以下のようになっています。もし良かったらダウンロードしてください。
tar形式でダウンロード
zip形式でダウンロード

Be the first to comment on "Javascript(JQuery)作ったパズルゲームの改良"

Leave a comment