|
■ JavaScript - サンプル集(257種類) - ゲーム
- ぱずるっこ Ver2
ジグソーパズルのスクリプトです。
Ver2は面クリアタイプになっています。
・1面クリアすると、次の面に進みます。
サンプルでは6面までありますが、最大数はお好みに応じて増減可能です。
・1面クリア毎に異なるメッセージを表示できます。
・ヒント機能を使用するか使用しないか選択できます。
・ヒント機能は正解画像を指定秒数表示するタイプと、
面毎に異なるヒントメッセージを表示するタイプの2種類があります。
・最終面をクリアした際は、別ページへ移動も可能です。
・面毎にパズルで使用する画像の大きさ、ピースの数を変更できます。
サンプルでは、1面〜3面までは9ピースですが、
4面では16ピース、5面では25ピース、6面では36ピースになっています。
・遊び方
左に各ピースが並んでいるので、選択したいピースをクリックします。
次に、右側の疑問符の場所をクリックすると、先ほど選択したピースがはめられます。
一度ピースをはめた後で、別のピースをはめる事も可能です。
全部正しい場所に配置できたら、「こたえあわせ」ボタンをクリックします。
正しくパズルが組み立てられたか、判定されます。
・サンプルを見る
・ソースを保存する
（右クリック→「対象をファイルに保存」or「リンクを名前を付けて保存」して下さい。）
・ソースを見る
・解説を見る
[ ソース ]
このソースはサイズが大きいので、ここには掲載致しません。
サンプルのソースを直接ご覧下さい。
[ 解説 ]
使用画像、正解時の動作などの指定は、全て「Style.js」で行います。
変更できる箇所は注釈付きで「Style.js」にまとめています。
「Style.js」内の注釈を参考に色々と指定してみて下さい。
[ パズル画像の変更方法 ]
オリジナル画像を使用する場合は、まず画像を用意します。
1枚絵をお好きなサイズでスライスして下さい。
ただし、この時必ず縦・横の数を同じにします。（3x3や4x4など）
横に5つで縦には3つ、横に4つで縦に5つなどの変則は出来ません。
分割した画像ファイルの名前にも、ご注意下さい。
必ず、数字で名前を付ける必要があります。
ファイルの名前は、一番左上から右方向に向かって大きくなっていき、
行の端まで来たら、次の行の左端から始まります。
例えば3x3のパターンで使用する場合、
左上 中上 右上
左中 中中 右中
左下 中下 右下
のように分割されます。
この時の画像ファイル名は、
0.gif 1.gif 2.gif
3.gif 4.gif 5.gif
6.gif 7.gif 8.gif
のようになります。
4x4のようなパターンの場合は、
0.gif 1.gif 2.gif 3.gif
4.gif 5.gif 6.gif 7.gif
8.gif 9.gif 10.gif 11.gif
12.gif 13.gif 14.gif 15.gif
のようになります。
|
|
