20 April 2009 |

Membuat Puzzle dengan jQuery

Kadang kalau sudah suntuk saya suka bermain Puzzle. Tapi alangkah menyenangkannya jika gambar puzzle tersebut adalah gambar keluarga, orang terkasih maupun tempat-tempat yang memiliki kenangan tersendiri :D.

Kamu dapat membuat puzzle sederhana dengan bermodalkan notepad saja.


Berikut langkah-langkahnya:
  1. Download jQuery
  2. Download jQPuzzle
  3. Ekstrak file jqPuzzle.zip *letakkan dalam satu folder agar mempermudah*
  4. Masukkan file jquery-1.3.2.min.js dan hasil ekstrak jqPuzzle ke dalam satu folder
  5. Masukkan gambar yang kamu inginkan ke dalam folder yang telah dibuat
Buka Notepad dan tuliskan
<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.jqpuzzle.full.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.jqpuzzle.css" />
</head>
<body>

<center>
<img src="nama_gambar.jpg" alt="keterangan_gambar" class="jqPuzzle jqp-r3-c5-h5" />
</center>

</body>
</html>

      6. Simpan dengan nama index.htm pada folder tersebut

      7. Jalankan file index.htm :D

Kalau kamu merasa puzzle kurang tertantang seru, kamu dapat menambah jumlah kotak puzzle yang akan dijelaskan dibawah ini.

Kamu cukup mengganti bagian ini class="jqPuzzle jqp-r3-c5-h5"
r3: jumlah baris
c5: jumlah kolom
h5: kotak kosong pada kotak nomor 5

Jadi jika kamu ingin membuat puzzle dengan 5 baris, 6 kolom dan kotak kosong pada nomor 10 maka kamu cukup mengganti kode diatas menjadi:

class="jqPuzzle jqp-r5-c6-h10"

Selamat menikmati puzzlemu :D

Sumber: jQPuzzle

Share on Facebook
 
© 2008-2016 - AnggaRifandi
#Arsenal #London #TechStartup #WebAddict #GrowthHacker