Puzzle
Feladat: írjunk puzzle-t php segítségével. Legyen kirakandó például egy ismert festmény, mondjuk Szinyei Merse Pálnak a Majális című festménye:
A lap első letöltésekor az alap állapot, a kirakott kép jelenjen meg. Legyen parancsgomb a részek összekeverésére, és az alapállapot megjelenítésére is. Megfelelő grafikus program segítségével vágjuk szét a képet 16 egyforma darabra, 4x4-es felbontás szerint, melyet kevert állapotban egy 4x4-es táblázatban jelenítsünk meg. A kép alatt helyezzünk el 16 checkbox vezérlő elemet, szintén 4x4-es táblázatban. Rendezéshez a checkboxokat használjuk. Azt a két checkbox elemet kell bejelölni, amelynek megfelelő részeket cserélni szeretnénk a kirakandó képen. A második elem bejelölésekor automatikusan submit generálódjon, és hajtódjon végre a csere. A program minden csere után vizsgálja meg, hogy készen vagyunk-e. Ha befejeztük a kirakást, akkor jelenjen meg az eredeti kép.
A kép darabjainak az aktuális helyét egy adattáblában (puzzle) tároljuk. A tábla id mezőjét a hely meghatározására használjuk (sorfolytonosan 1-től 16-ig). A tábla KNev mezője lesz a kis képek operációs rendszerbeli file neve (01.JPG, 02.JPG, .. , 16.JPG). Töltsük fel ezeknek megfelelően a puzzle adattáblát, a phpMyAdmin felületet használva. Helyezzük el a php oldalunkkal azonos mappában 0.JPG névvel az eredeti képet és a 16 db kis képet a fentebbi nevekkel.
A kódolás menete: először oldjuk meg, hogy induláskor, azaz ha nem volt még semmilyen submit, akkor az eredeti kép jelenjen meg (ehhez még adattábla sem kell). Következő lépésként a képek összekeverését kell megoldani. Ehhez már az adattábla és sql kapcsolat szükséges. Ezért a php oldalunk elején includ-olnunk kell a config.php állományt.
A keverést véletlen cserével oldjuk meg. Először a táblát feltöltjük az kirakási sorrend szerint. Majd az adattáblából 100-szor véletlenül kiválasztunk két rekordot és a KNev mezőinek értékét kicseréljük. A cserét a cserel($a,$b) függvény végzi. A cserel függvény a vizsgal függvény hívásával fejeződik be, ha készen vagyunk, az eredeti képet mutatja a lapunk.
A csere megvalósítását javascript függvény segíti. A külön állományban (puzzle.js) leírt Kuld() függvény megszámolja, hogy a csere nevű form checkbox típusú elemei közül hánynak az állapota checked, ha ezek száma 2, akkor csere.submit() értéket ad vissza (különben false-t). Ez kerül minden checkbox onclick eseményébe, szükség esetén kiváltva a submit-ot.
A puzzle.js:
function Kuld(){
var elNum = document.csere.elements.length;
var n=0;
for (i=0; i<elNum; i++){
var type = csere.elements[i].type;
if (type=="checkbox"
&& csere.elements[i].checked){
n++;
}
}
if (n==2 ){
return csere.submit();
}
else{
return false;
}
}
A kép rendezetlen állapotban:
A php lap teljes listája:
http://gorbem.hu/PH/Puzzle.php
<?php
include("hconfig.php");
?>
<html>
<head>
<title>Puzzle - php</title>
<script language="JavaScript" type="text/javascript" src="puzzle.js"></script>
</head>
<body>
<form name="" action="Puzzle.htm" method="POST">
<input type="submit" name="vissza" value="Vissza" />
</form>
<center>
<h1>
<form name="" action="" method="POST">
<input type="submit" name="alap" value="Alap"/>
<u>Puzzle</u>
<input type="submit" name="kever" value="Kever"/>
</form>
</h1>
<?php
if (( !isset($_POST['alap'])
&& !isset($_POST['kever']) && !isset($_POST['csere']) ) || ( isset($_POST['alap']) )){
print "<img src=\"0.JPG\"
width=\"492\" height=\"368\">\n";
}
function onscreen(){
$k = 0;
$ered = mysql_query("SELECT *
FROM puzzle");
print "<table
border=\"1\" bordercolor=\"white\"
cellpadding=\"0\" cellspacing=\"0\"
>\n";
while ($sora = mysql_fetch_object($ered)){
$k++;
if ( ($k==1) || ($k==5) || ($k==9) || ($k==13) ){print "<tr>";}
print "<td><img src=\"$sora->KNev\"
width=\"123\" height=\"92\"></td>";
if ( ($k==4) || ($k==8) || ($k==12) || ($k==16) ){print "</tr>";}
}
print "</table>";
}
function cserel($a,$b){
$ered = mysql_query("SELECT *
FROM puzzle WHERE id='$a'");
$sora = mysql_fetch_object($ered); $p = $sora->KNev;
$ered = mysql_query("SELECT *
FROM puzzle WHERE id='$b'");
$sora = mysql_fetch_object($ered); $q = $sora->KNev;
mysql_query("UPDATE puzzle SET KNev='$q' WHERE id='$a'");
mysql_query("UPDATE puzzle SET KNev='$p' WHERE id='$b'");
}
function vizsgal(){
$kesz = true;
$ered = mysql_query("SELECT *
FROM puzzle");
while ($sora = mysql_fetch_object($ered)){
$n = $sora->id;
$n = $n+0;
$knev = $sora->KNev;
$k = substr($knev,0,2)+0;
if ( $n !== $k ){$kesz = false;}
}
return $kesz;
}
if ( isset($_POST['kever']) ){
for ($i=1; $i<=16; $i++){
$a = $i;
if ($i<10){
$a = '0'.$a;
}
$a = $a.'.JPG';
mysql_query("UPDATE
Puzzle SET KNev='$a' WHERE id='$i'
");
}
for ($i=0; $i<100; $i++){
cserel(rand(1,16),rand(1,16));
}
onscreen();
}
if ( isset($_POST['csere']) ){
$a = 0;
$b = 0;
for ($i=1; $i<=16; $i++){
$l = "ch";
$m = $l.$i;
if ( isset($_POST[$m]) ){
if ( $a==0 ){
$a = $i;
}
else $b = $i;
}
}
cserel($a,$b);
if ( vizsgal() ){
print "<img src=\"0.JPG\"
width=\"492\" height=\"368\">\n";
}
else onscreen();
}
print "<form
name=\"csere\" action=\"\"
method=\"POST\" >\n";
print "<table
border=\"1\" cellpadding=\"0\" cellspacing=\"0\" >\n";
for ($i=1; $i<=4; $i++){
print "<tr>\n";
for ($j=1; $j<=4; $j++){
print "<td align=\"center\">"; $k = 4*($i-1)+$j;
print "<input
type=\"checkbox\" name=\"ch$k\" onclick=\"Kuld()\"/></td>\n";
}
print "</tr>\n";
}
print "</table>\n";
print "<input
type=\"hidden\" type=\"submit\" name=\"csere\" value=\"\"/>\n";
print "</form>\n";
?>
</center>
</body>
</html>