|
■ JavaScript - サンプル集(257種類) - ゲーム
- ぱずるっこ Ver1
ジグソーパズルのスクリプトです。
補足：大幅に作り替えました。(2002/05/01)
・デフォルトでは、9ピースのパズルになっています。
しかし画像さえ用意すれば、お好みのピース指定が出来ます。
・デフォルトでは、パズルは3パターン用意されています。
しかし画像さえようすれば、何パターンにでも増やせます。
（ただし、あまり増やしすぎると、読み込みが重くなります）
・パズルに指定する画像は変更できます。
サイズも変更可能です。
・パズルは用意されたパターンからランダムに選択され、
ピースの配置もランダムに決定されます。
・正解した際の動作は、4パターン用意されています。
パズルのピースを花丸に変更して、ダイアログを表示するタイプ、
パズルのピースを花丸に変更して、正解画像を表示するタイプ、
別ページに移動するタイプ、
パズル毎に異なるページに移動するタイプ、
の4パターンです。
お好みに合わせて変更する事が出来ます。
・遊び方
左に各ピースが並んでいるので、選択したいピースをクリックします。
次に、右側の疑問符の場所をクリックすると、先ほど選択したピースがはめられます。
一度ピースをはめた後で、別のピースをはめる事も可能です。
どうしてもわからなくなってしまった時は、「ヒント」ボタンをクリックして下さい。
正解画像が数秒だけ表示されます。
その後遊んでいた画面に戻りますので、ヒントを元にパズルを完成させて下さい。
全部正しい場所に配置できたら、「こたえあわせ」ボタンをクリックします。
正しくパズルが組み立てられたか、判定されます。
もう一度初めから遊びたい時には、「はじめる」ボタンをクリックします。
・サンプルを見る
・ソースを保存する
（右クリック→「対象をファイルに保存」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
のようになります。
[ ピースの変更方法 ]
画像を変更して、パズルのピースを変更した際は、
必ずピース指定を変更する必要があります。
Style.jsにあります
PicPiece=3;
を変更します。
サンプルでは3x3のパズルですから、ここには3の数値が入っています。
もし、4x4のパズルに変更した場合は
PicPiece=4;
になります。
[ パズル画像格納フォルダの変更方法 ]
次に、画像を格納するフォルダですが、これはどこでも構いませんし、名前にも法則は存在しません。
お好きなようにご変更下さい。
ただし、必ずフォルダを変更した場合は、ソース内のフォルダ指定部分も変更して下さい。
ソース内のフォルダ指定部分は、上から8〜10行目にあります
PicKind[0]="ice";
PicKind[1]="cake";
PicKind[2]="car";
の部分が、画像パターンを格納している各フォルダです。
サンプルでは3パターン存在しますので、フォルダも3つ存在まします。
もし、フォルダの名前を変更された場合は、この部分を変更して下さい。
例えば、iceというフォルダを、icecreamと言うフォルダに変更した場合は、
PicKind[0]="icecream";
PicKind[1]="cake";
PicKind[2]="car";
のようになります。
[ パズル画像サイズの変更方法 ]
パズル画像のサイズを変更した場合は、
Style.jsにある以下の部分を変更して下さい。
PicWidth=80;
PicHeight=80;
の部分です。
上の行が横幅、下の行が高さを表しています。
サンプルでは80x80の画像を使用していますので、
上記のようになっていますが、例えば50x50の画像に変更する場合は、
PicWidth=50;
PicHeight=50;
になります。
[ パズル画像パターンの増減 ]
パズルのパターンを増やす場合は、
「パズル画像の変更方法」と「パズル画像格納フォルダの変更方法」に従って、画像ファイルを作り、
画像フォルダに格納して下さい。
次に、Style.jsにある画像フォルダ指定場所を変更します。
サンプルでは、画像パターンは3種類ですから、
PicKind[0]="ice";
PicKind[1]="cake";
PicKind[2]="car";
のように、3つのフォルダが指定されています。
これを、増やしてあげます。
ただし、この時に注意して頂きたいのは、先頭部分にあります数値部分です。
この場所はユニークに異なっている必要があり、
必ず1つずつ繰り上げた数値をご記入下さい。
例えば1つパターンを増やした場合は、以下のようになります。
PicKind[0]="ice";
PicKind[1]="cake";
PicKind[2]="car";
PicKind[3]="tree";
同じ要領で幾つでも増やす事が出来ます。
減らす場合は、反対に下から不要な行を削除して下さい。
例えばサンプルから1パターン減らした場合は、
PicKind[0]="ice";
PicKind[1]="cake";
になります。
|
|
