WEST MiRa JavaScript：サンプル集(257種類) - ゲーム

[ JavaScriptの目次 ]

▲トップページ
▲基礎知識
▲基本操作
▲その他
▲サンプル集(257種類)
▲その他

[ 他の一覧 ]

◆↑ホームへ

■ JavaScript - サンプル集(257種類) - ゲーム
　　 - ぱずるっこ Ver1

All About ［ホームページ作成］

ジグソーパズルのスクリプトです。
補足：大幅に作り替えました。(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";

になります。

コスメ・コムで売れ筋のクレンジング・洗顔ランキング

　 WEST MiRa > JavaScript > サンプル集(257種類) > ゲーム > ぱずるっこ Ver1 >

バナー、リンクについて , 利用規約 , ヘルプ