基礎から解る!PHP入門講座 プログラム入門に最適な言語、PHPを学ぼう

基礎から解る!PHP入門講座

プログラム入門に最適な言語、PHPを学ぼう      

 このサイトはPHPを独習する際に作成したスクリプトを基に、プログラム言語初心者のための入門講座として作成しました。PHPは初心者に親しみやすく、解りやすいプログラム言語です。これからプログラムを学ぶ人の参考になればと思います。


画像パズル1

 9枚に分割された写真を一枚づつ動かして、全体を完成させるよくあるパズルです。

1、9枚に分割された写真をランダムに並べる。
2、右下の1枚は空欄とする。
3、写真をクリックすると、空欄と入れ替わる。
4、クリックできる写真は空欄の上下左右だけとする。
5、8枚が正しく並ぶと全体を表示した1枚の画像を表示する。
6、再度ランダムに並べ、もう一度できるようにする。

 1のランダムに並べるのは、配列に入れシャッフルするだけで簡単です。2の右下を空欄にするのも0〜7をシャッフルし最後の一枚を後で付け足すことで実現できました。
 3の写真の入替えは次のようにやっています。9枚の写真は左上から順に0〜8を位置番号とし、正しく並んだ9まいの写真にも0〜8の番号をつけます。ただし、8番は空欄(白い画像)に入替えます。
 次に url に写真の位置番号と写真番号を埋め込んで、クリックで送信します。データを受け取ると、8番の写真つまり空欄を探し配列のキー(空欄の位置番号)を得ます。その配列にクリックした写真を入れ、クリックされた位置番号の配列には8(空欄)を入れれば入替えが完成です。
$num = $_GET['num'];    //移動する写真の場所
$movepict = $_GET['pict'];    //移動する写真の番号
$key = array_search('8', $pict);    //8空欄を探す
$pict[$key] = $movepict;    //空欄の場所に移動する写真をいれる
$pict[$num] = "8";    //移動する写真は8空欄になる
 次の問題は、クリックできる場所を空欄の上下左右だけにすることです。本当は空欄の位置から判定できる関数を作りたかったのですが、9個くらいなら一個づつデータを用意したほうが早いと考え、0〜8の位置におけるクリック可能なデータを switch をつかって準備しました。
switch ($key) {
 case 0:    //空欄が0番なら1と3がクリックできる場所である
  $link="13"; break ;
 case 1:    //空欄が1番なら0と2と4がクリックできる場所である
  $link="024"; break ;
   //以下8番まで同じように設定する。
}
 この switch で得た情報と、繰返しで順に張りつけていく写真の番号がマッチすればリンクを張ります。これには簡単な正規表現の仕組みを使っています。最後は配列の中味が0〜8と順に並んだことを確認すれば完成です。
※エラーが出る場合があります。そのときは「NEW」をクリックしてください。 ⇒こんな感じ
スクリプトは ⇒こちらへどうぞ

画像パズル2

 9枚の設定ではなく何枚の設定でも使えるプログラムに改造してみました。「縦横の枚数」「元画像のサイズ」「元画像の名前」を変更するだけで画像枚数を自由に変更することができます。ただし画像は99枚までです。
 分割する画像はPhotoshopのスライス機能を使うことで簡単に作成できます。この時分割された画像は「元画像の名前」+_01から始まる番号の名前になるので、これを前提として作成しました。
 つまり元画像が cat.jpg なら、cat_01.jpg, cat_02.jpg, cat_03.jpg〜となります。ここで問題になるのが01という数字で、PHPで繰返しカウントを使う場合の数字は 0 から順に始まるため一桁表示に違いが出ます。そのため一桁数字は表示の時に 0 を付け加えています。

 分割した画像は1から始まり、これを配列に格納します。この時配列のキーは0から始まるのでキーと要素の番号がずれます。これがこのスクリプトを解りづらくしています。画像の名前を 0 からにすれば、理解しやすくなるのですが、Photoshop のスライスが01から始まるため、分割画像の全ての名前を変えていくのは面倒です。まぁ、VIXなんかでリネームする手もありますが、それではそのままスクリプトを使う場合煩雑になるので、この方式で作成しました。

 画像を変更する場合は次の設定を変更します。
$col = 5 ;    //横の枚数
$row = 4 ;    //縦の枚数
$width_full = 456 ;    //元画像の幅
$height_full = 550 ;   //元画像の高さ
$image_name = "marilyn";  //画像ファイルの名前
 ポイントはクリックできる場所を、どんな場合でも設定できる関数の作成です。まず、ある場所に対してクリックできる場所は4箇所(上下左右)であることから足し算引き算で出す。しかし上下左右の端はクリックできない(存在しない)部分があるので、これを4種類に分けてチェックします。座標番号とは左上を 0 として順に付けていく場所の番号です。
1、上端以外の場合 →列数以上の座標番号
2、下端以外の場合 →画像数−列数以下の座標番号
3、右端以外の場合 →座標番号を列数で割って(列数−1)になる場合以外
4、左端以外の場合 →座標番号を列数で割って 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には向いてないですね。 ⇒こんな感じ
スクリプトは ⇒こちらへどうぞ
2019/1
SUN MON TUE WED THU FRI SAT
    1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31   


 フォクすけ©2006 Mozilla Japan



制作:基礎から解るPHP入門講座 代表:FREEZE

Copyright © 2005/2/28 flzPHP.All Rights Riserved