Sebuah puzzle seperti umumnya games lain dikontrol oleh kode javascript, dan dibangun dalam satu sistem server. Tampilan interface dibentuk menggunakan software yang bisa mengolah gambar seperti adobe flash, macromedia, photoshop dan lain-lain. Puzzle adalah games kecil berupa kumpulan bentuk atau gambar yang acak untuk dirangkai menjadi satu kesatuan yang sempurna, layaknya sebuah kaca yang dipecahkan berkeping-keping kemudian disatukan kembali ke wujud aslinya.
Puzzle Jigzaw kecil ini memberi hiburan, mengasah inteligensi, dan sekaligus membuat tampilan blog menjadi indah. Rangkain photo yang disusun kedalam sebuah tabel maupun div bisa disematkan link ke halaman lain menjadi banner atau apapun namanya. Puzzle ini bisa ditampilkan di sidebar agar blog menjadi lebih indah.
Ini Puzzle yang kita maksud:
PUZZLE JIGZAW
Susun gambar ini menjadi gambar yang utuh! Drag dan drop satu gambar ke posisi yang sebenarnya.
(Belum Ada Pergerakan)
Puzzle ini sebetulnya bisa diperkecil ukurannya, caranya gambar mesti diperkecil. Gambar bisa anda sesuaikan dengan selera dan disarankan memotong sebuah gambar utuh dengan Adobe Photoshop, atau Adobe Image Ready.
Jika ingin menampilkan script puzzle ini ke blog anda, inilah kodenya:
<script type="text/javascript" src="http://script.aculo.us/prototype.js"></script><script type="text/javascript" src="http://script.aculo.us/scriptaculous.js"></script>
<style>
#puzzle { width:450px; }
.congrats { color: #fff; background: #080 }
</style>
<div id="puzzle" style="width: 450px">
<img id="image_5" src="http://script.aculo.us/images/puzzle5.jpg" alt="" />
<img id="image_1" src="http://script.aculo.us/images/puzzle1.jpg" alt="" />
<img id="image_9" src="http://script.aculo.us/images/puzzle9.jpg" alt="" />
<img id="image_7" src="http://script.aculo.us/images/puzzle7.jpg" alt="" />
<img id="image_4" src="http://script.aculo.us/images/puzzle4.jpg" alt="" />
<img id="image_8" src="http://script.aculo.us/images/puzzle8.jpg" alt="" />
<img id="image_3" src="http://script.aculo.us/images/puzzle3.jpg" alt="" />
<img id="image_6" src="http://script.aculo.us/images/puzzle6.jpg" alt="" />
<img id="image_2" src="http://script.aculo.us/images/puzzle2.jpg" alt="" />
</div>
<p>
<span id="puzzleinfo">(no move made yet)</span>
</p>
<script type="text/javascript">
(function(){
var p = $('puzzle'), info = $('puzzleinfo'), moves = 0;
Sortable.create('puzzle', {
tag:'img',overlap:'horizontal',constraint: false,
onUpdate:function(){
info.update('You\'ve made ' + (++moves) + ' move' + (moves>1 ? 's' : ''));
if(Sortable.sequence('puzzle').join('')=='123456789')
info.update('You\'ve solved the puzzle in ' + moves + ' moves!').morph('congrats');
}
});
})();
</script>
</div>
</div></div>
Thank U Acullo Us.
