WEST MiRa(1,739 Byte)
JavaScript(1,601 Byte)
 iTunes StoreiJapanj

■ 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";

になります。


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

Copyright (C) 1998-2007 WEST MiRa. All rights reserved.