/*ketikkan source code di sini*/
1. Apa itu puzzle
Kata puzzle berasal dari bahasa Inggris = teka-teki atau bongkar pasang, puzzle adalah media yang dimainkan dengan cara bongkar pasang.
2. Fungsi Puzzle
Umumnya sisi edukasi permainan puzzle ini berfungsi untuk:
Melatih konsentrasi, ketelitian dan kesabaran
Melatih koordinasi mata dan tangan.
Melatih logika.
Memperkuat daya ingat
Mengenalkan anak pada konsep hubungan
Dengan memilih gambar/bentuk, dapat melatih berfikir matematis (menggunakan otak kiri)
3. Macam-macam Puzzle
a. Puzzle konstruksi
gambar:turbosquid.com
b. Puzzle batang (stick)
gambar: mampang-shop.onigi.com
c. Puzzle lantai
d. Puzzle angka
e. Puzzle transportasi
f. Puzzle logika
g. Puzzle geometri
h. Puzzle Penjumlahan dan Pengurangan
Oke kali ini saya akan membagikan source code puzzle
laangkah -langkah
1. buka xampp, klik start pada appache modul dan mysql sampai muncul tanda berwarna hijau
2. Buatkan folder chop.php pada notped anda
<?php
define('TOP', 0);
define('BOTTOM', 1);
define('LEFT', 2);
define('RIGHT', 3);
$d = $_GET['d'];
$r = $_GET['r'];
$c = $_GET['c'];
$rr = $_GET['rr'];
$cc = $_GET['cc'];
$g = str_pad(decbin(ord($_GET['g']) - 65), 4, '0', STR_PAD_LEFT);
if($r == 0) $g{TOP} = '0';
if($r == $rr - 1) $g{BOTTOM} = '0';
if($c == 0) $g{LEFT} = '0';
if($c == $cc - 1) $g{RIGHT} = '0';
$img = imagecreatefromjpeg('images/' . $_GET['img']);
$w = floor(imagesx($img) / $cc);
$h = floor(imagesy($img) / $rr);
$x = $c * $w;
$y = $r * $h;
$width = 2 * $d + $w;
$height = 2 * $d + $h;
$ie = (strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE') !== false && strpos($_SERVER['HTTP_USER_AGENT'], 'Opera') === false) ? true : false;
if($ie)
{
$chop = imagecreate($width, $height);
$trans = imagecolorallocate($chop, 255, 255, 255);
imagecolortransparent($chop, $trans);
imagetruecolortopalette($img, false, 250);
}
else
{
$chop = imagecreatetruecolor($width, $height);
imageSaveAlpha($chop, true);
imageAlphaBlending($chop, false);
$trans = imagecolorallocatealpha($chop, 0, 0, 0, 127);
imagefill($chop, 0, 0, $trans);
}
imagecopy($chop, $img, 0, 0, $x - $d, $y - $d, $width, $height);
if($c == 0 || !$g[LEFT]) imagefilledrectangle($chop, 0, 0, $d - 1, $height, $trans);
if($c != 0)
{
if($g[LEFT]) overlay($chop, 0, 0, $d, $height, 1, $trans);
else overlay($chop, $d, 0, $d, $height, 0, $trans);
}
if($c == $cc - 1 || !$g[RIGHT]) imagefilledrectangle($chop, $width - $d, 0, $width, $height, $trans);
if($c != $cc - 1)
{
if($g[RIGHT]) overlay($chop, $width - $d, 0, $d, $height, 1, $trans);
else overlay($chop, $width - 2 * $d, 0, $d, $height, 0, $trans);
}
if($r == 0 || !$g[TOP]) imagefilledrectangle($chop, 0, 0, $width, $d - 1, $trans);
if($r != 0)
{
if($g[TOP]) overlay($chop, 0, 0, $width, $d, 1, $trans);
else overlay($chop, 0, $d, $width, $d, 0, $trans);
}
if($r == $rr - 1 || !$g[BOTTOM]) imagefilledrectangle($chop, 0, $height - $d, $width, $height, $trans);
if($r != $rr - 1)
{
if($g[BOTTOM]) overlay($chop, 0, $height - $d, $width, $d, 1, $trans);
else overlay($chop, 0, $height - 2 * $d, $width, $d, 0, $trans);
}
if($ie)
{
header('Content-type: image/gif');
imagegif($chop);
}
else
{
header('Content-type: image/png');
imagepng($chop);
}
function overlay($img, $x, $y, $w, $h, $z, $trans)
{
$mask = imagecreatetruecolor($w, $h);
$c[0] = imagecolorallocate($mask, 255, 0, 255);
$c[1] = imagecolorallocate($mask, 0, 0, 127);
imagefilledrectangle($mask, 0, 0, imagesx($mask), imagesy($mask), $c[1-$z]);
imagefilledellipse($mask, $w / 2, $h / 2, min($w, $h), min($w, $h), $c[$z]);
imagecolortransparent($mask, $c[1]);
imagecopymerge($img, $mask, $x, $y, 0, 0, $w, $h, 100);
if($z)
{
imagefill($img, $x, $y, $trans);
imagefill($img, $x + imagesx($mask) - 1, $y + imagesy($mask) - 1, $trans);
}
else
imagefill($img, $x + $w / 2, $y + $h / 2, $trans);
imagedestroy($mask);
}
?>
2. Buatkan folder index.php
<?php
?>
<script type="text/javascript" src="wz_dragdrop.js"></script>
<table width="600" height="600"><tr><td valign="top">
<?php for($i = 1; $i <= 5; $i++) echo "<a href=\"index.php?level=$i\">Level $i</a><br/>\n"; ?>
</td></tr></table>
<?php
$rows = $cols = max(2, min(10, 2 * (isset($_GET['level']) ? $_GET['level'] : 2)));
for($r = 0; $r < $rows; $r++)
{
for($c = 0; $c < $cols; $c++)
{
$h[$r][$c] = (rand(0, 100) > 50) ? 1 : 0;
$v[$r][$c] = (rand(0, 100) > 50) ? 1 : 0;
}
}
$files = glob('images/*.jpg');
$img = $files[rand(0, count($files) - 1)];
list($width, $height) = getimagesize($img);
$d = floor(min($width / $cols, $height / $rows) / 5);
$vw = floor($width / $cols);
$vh = floor($height / $rows);
$iw = $vw + 2 * $d;
$ih = $vh + 2 * $d;
$xinc = $vw;
if($xinc % 4 == 0) $xinc /= 4;
elseif($xinc % 3 == 0) $xinc /= 3;
elseif($xinc % 2 == 0) $xinc /= 2;
$yinc = $vh;
if($yinc % 4 == 0) $yinc /= 4;
elseif($yinc % 3 == 0) $yinc /= 3;
elseif($yinc % 2 == 0) $yinc /= 2;
$img = urlencode(basename($img));
unset($files);
for($r = 0; $r < $rows; $r++)
{
for($c = 0; $c < $cols; $c++)
{
$g = chr(65+bindec($v[$r][$c] . (1-$v[$r+1][$c]) . $h[$r][$c] . (1-$h[$r][$c+1])));
$src = "chop.php?img=$img&r=$r&c=$c&cc=$cols&rr=$rows&d=$d&g=$g";
echo "<img style=\"position:absolute\" name=\"t_{$r}_{$c}\" src=\"$src\" alt=\"\" width=\"$iw\" height=\"$ih\"/>\n";
$list[] = "t_{$r}_{$c}";
}
}
$list = '"' . join('","', $list) . '"';
?>
<script type="text/javascript">
SET_DHTML(<?=$list?>);
var cluster = new Array();
for(r = 0; r < <?=$rows?>; r++)
{
for(c = 0; c < <?=$cols?>; c++)
{
id = 't_' + r + '_' + c;
obj = dd.elements[id];
obj.moveTo(<?=$xinc?> * Math.round(Math.random() * 800 / <?=$xinc?>), <?=$yinc?> * Math.round(Math.random() * 600 / <?=$yinc?>));
obj.row = r;
obj.col = c;
obj.cluster = id;
cluster[id] = new Array();
cluster[id][id] = id;
}
}
function merge_cluster(a, b)
{
for(i in cluster[b])
{
obj = dd.elements[cluster[b][i]];
cluster[a][obj.name] = obj.name;
obj.cluster = a;
}
}
function align_cluster(a)
{
for(i in cluster[a])
{
obj = dd.elements[cluster[a][i]];
obj.moveTo(<?=$xinc?> * Math.round(obj.x / <?=$xinc?>), <?=$yinc?> * Math.round(obj.y / <?=$yinc?>));
}
}
function my_DragFunc()
{
for(i in cluster[dd.obj.cluster])
{
obj = dd.elements[cluster[dd.obj.cluster][i]];
if(obj.name != dd.obj.name)
{
ox = dd.obj.x + (obj.col - dd.obj.col) * <?=$vw?>;
oy = dd.obj.y + (obj.row - dd.obj.row) * <?=$vh?>;
obj.moveTo(ox, oy);
}
}
}
function my_DropFunc()
{
align_cluster(dd.obj.cluster);
for(r = -1; r <= 1; r++)
{
for(c = -1; c <= 1; c++)
{
if(c != 0 || r != 0)
{
obj = dd.elements['t_'+(dd.obj.row + r)+'_'+(dd.obj.col + c)];
if(obj)
{
if(dd.obj.x + c * <?=$vw?> == obj.x && dd.obj.y + r * <?=$vh?> == obj.y)
{
merge_cluster(dd.obj.cluster, obj.cluster);
}
}
}
}
}
}
</script>
3. Run aplikasi anda pada locahot broswer seperti berikut:
localhhost/folderaplikasi anda/index.php
-----------------------------------TERIMAKASIH SEMOGA BERMANFAAT-----------------------
0 komentar: