|
このサイトはPHPを独習する際に作成したスクリプトを基に、プログラム言語初心者のための入門講座として作成しました。PHPは初心者に親しみやすく、解りやすいプログラム言語です。これからプログラムを学ぶ人の参考になればと思います。
画像パズル１
９枚に分割された写真を一枚づつ動かして、全体を完成させるよくあるパズルです。 １、９枚に分割された写真をランダムに並べる。 ２、右下の１枚は空欄とする。 ３、写真をクリックすると、空欄と入れ替わる。 ４、クリックできる写真は空欄の上下左右だけとする。 ５、８枚が正しく並ぶと全体を表示した１枚の画像を表示する。 ６、再度ランダムに並べ、もう一度できるようにする。 １のランダムに並べるのは、配列に入れシャッフルするだけで簡単です。２の右下を空欄にするのも０〜７をシャッフルし最後の一枚を後で付け足すことで実現できました。 ３の写真の入替えは次のようにやっています。９枚の写真は左上から順に０〜８を位置番号とし、正しく並んだ９まいの写真にも０〜８の番号をつけます。ただし、８番は空欄（白い画像）に入替えます。 次に url に写真の位置番号と写真番号を埋め込んで、クリックで送信します。データを受け取ると、８番の写真つまり空欄を探し配列のキー（空欄の位置番号）を得ます。その配列にクリックした写真を入れ、クリックされた位置番号の配列には８（空欄）を入れれば入替えが完成です。
$num = $_GET['num']; //移動する写真の場所
$movepict = $_GET['pict']; //移動する写真の番号
$key = array_search('8', $pict); //８空欄を探す
$pict[$key] = $movepict; //空欄の場所に移動する写真をいれる
$pict[$num] = "8"; //移動する写真は８空欄になる
次の問題は、クリックできる場所を空欄の上下左右だけにすることです。本当は空欄の位置から判定できる関数を作りたかったのですが、９個くらいなら一個づつデータを用意したほうが早いと考え、０〜８の位置におけるクリック可能なデータを switch をつかって準備しました。
switch ($key) {
case 0: //空欄が０番なら１と３がクリックできる場所である
$link="13"; break ;
case 1: //空欄が１番なら０と２と４がクリックできる場所である
$link="024"; break ;
//以下８番まで同じように設定する。
}
この switch で得た情報と、繰返しで順に張りつけていく写真の番号がマッチすればリンクを張ります。これには簡単な正規表現の仕組みを使っています。最後は配列の中味が０〜８と順に並んだことを確認すれば完成です。 ※エラーが出る場合があります。そのときは「NEW」をクリックしてください。
⇒こんな感じ
画像パズル２
９枚の設定ではなく何枚の設定でも使えるプログラムに改造してみました。「縦横の枚数」「元画像のサイズ」「元画像の名前」を変更するだけで画像枚数を自由に変更することができます。ただし画像は９９枚までです。 分割する画像はPhotoshopのスライス機能を使うことで簡単に作成できます。この時分割された画像は「元画像の名前」＋_01から始まる番号の名前になるので、これを前提として作成しました。 つまり元画像が cat.jpg なら、cat_01.jpg, cat_02.jpg, cat_03.jpg〜となります。ここで問題になるのが01という数字で、PHPで繰返しカウントを使う場合の数字は 0 から順に始まるため一桁表示に違いが出ます。そのため一桁数字は表示の時に 0 を付け加えています。 分割した画像は１から始まり、これを配列に格納します。この時配列のキーは０から始まるのでキーと要素の番号がずれます。これがこのスクリプトを解りづらくしています。画像の名前を 0 からにすれば、理解しやすくなるのですが、Photoshop のスライスが01から始まるため、分割画像の全ての名前を変えていくのは面倒です。まぁ、VIXなんかでリネームする手もありますが、それではそのままスクリプトを使う場合煩雑になるので、この方式で作成しました。 画像を変更する場合は次の設定を変更します。
$col = 5 ; //横の枚数
$row = 4 ; //縦の枚数
$width_full = 456 ; //元画像の幅
$height_full = 550 ; //元画像の高さ
$image_name = "marilyn"; //画像ファイルの名前
ポイントはクリックできる場所を、どんな場合でも設定できる関数の作成です。まず、ある場所に対してクリックできる場所は４箇所（上下左右）であることから足し算引き算で出す。しかし上下左右の端はクリックできない（存在しない）部分があるので、これを４種類に分けてチェックします。座標番号とは左上を 0 として順に付けていく場所の番号です。
１、上端以外の場合 →列数以上の座標番号
２、下端以外の場合 →画像数−列数以下の座標番号
３、右端以外の場合 →座標番号を列数で割って（列数−１）になる場合以外
４、左端以外の場合 →座標番号を列数で割って 0 になる場合以外
function CLICK($width,$height,$posi){ //空欄に対してクリックできる場所のデータ
$data = null ;
if($posi >= $width){ //一番上の行以外の時は空白の上がクリックできる
$data[] = $posi -$width ;
}
if($posi % $width != ($width-1)){ //右端以外の時は空白の右がクリックできる
$data[] = $posi + 1 ;
}
if($posi % $width != 0){ //左端以外の時は空白の左がクリックできる
$data[] = $posi - 1 ;
}
if($posi <= $height*($width-1)){ //一番下の行以外の時は空白の下がクリックできる
$data[] = $posi + $width ;
}
return $data ;
}
これをもとに空白の座標番号からクリックできる番号を$data という配列に格納、1枚の画像を表示する際に、その番号が関数で得た配列の中にあるかどうかを順に確認し、あればリンクを張ります。
for($b = 0;isset($data[$b]);$b++){ //リンクの設定 if($a == $data[$b]){ echo "<a href='".$PHP_SELF."?num=".$a."&pict=".$pict[$a]."'>"; } }
最後に、このパズルは1枚の画像をクリックするたびにPHPでHTMLを生成しているので、時々反応が遅い時があります。まぁ、こういったゲーム的なものはPHPには向いてないですね。
⇒こんな感じ | 