Puzzle slide sederhana dengan JS (Java Script)

Tau permainan yang jadul and asah otak ini gan?

Betul nih puzzle slide (sliding puzzle) yang biasa di mainin anak-anak, tapi belum tentu orang dewasa juga bisa selesaikan permainan ini. karena lumayan menguras otak sih gan.. hehehe...

Ada pengalaman nih ane tentang game ini. Pas waktu ane masih SMA dulu kerja suatu event organizer di Sidoarjo, Jawa Timur, Indonesia. Ane di tantang ama pemilik EO untuk selesaikan permainan ini dengan waktu 5-10 menit dengan dikasih imbalan Rp.100.000. ane trima tantangan itu. Pemilik EO ane mengutak atik meng acak acak puzzle slide itu berharap ane gak bisa selesaikan puzzle itu seakan gak mau merelakan uangnya yang Rp.100.000 jatuh ke tangan ane. Tapi ane duduk and menunggu dengan santai..

Tibalah ane untuk beraksi, berubah jadi dektektif conan. tet teret tet tet,,, akhirnya ane berhasil sebelum waktunya, aha.. uang Rp.100.000 ane dapatkan.. hahhahaaa... MANTAP!!

karena kenangan itu ane belajar- belajar, searching-searching akhirnya ane dapatkan formulanya.. hohohoo..

nih ane coba buat game puzzle slide berbasis HTML dan Java Script yang sederhana..

Pertama nih simpan format index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head>
   <title>Bagus Romadhon (461114002)</title>
   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   <link rel="stylesheet" href="c/puzzle.css" media="all" type="text/css" />
   <script src="j/mootools.v1.00.js" type="text/javascript"></script>
   <script src="j/puzzle-not-compressed.js" type="text/javascript"></script> </head> <body onload="return Puzzle.make(3)"> <div id="content">
<h1></h1>
<table >
<tr>
    <td> </td>
    <td><h2>Puzzle</h2></td>
    <td> </td>
    <td> </td>
</tr>
<tr>
    <td> </td>
    <td rowspan="2"><div id="puzzle"><img src="i/red-stripe.jpg" alt="" width="350" height="263" /></div></td>
    <td> </td>
    <td><h2>Hasil Akhir</h2><img src="i/red-stripe.jpg" alt="" width="158" height="125" /></td>
</tr>
<tr>
    <td> </td>
    <td> </td>
    <td>
      <input name="acak" id="jalan" value="Acak" type="submit" onclick="return Puzzle.shuffle()" />
      <br />
      <input name="jalan" id="jalan" value="Hasil" type="submit" onclick="return Puzzle.fix()" /></td>
</tr>
</table>
   </div> <div id="footer">
   <p><a href="http://bagusromadhon.blogspot.com/">© Bagus Romadhon </a></p> </div> </body> </html>

Selanjutnya nih program CSSnya simpan dengan puzzle.css

*, td, img    {margin : 0; padding : 0;}
    img { border: 0; }
    form, fieldset    {font: 100%/120% verdana, arial, sans-serif}
    p    {padding: 0 0 0 0; margin: 0 0 1em 0}
    form label    {cursor: pointer}
    fieldset    {border: none}
    input, select, textarea {font-size: 100%}
    body    {
        background-color: #E0E6F2;
        color: #333436;
        font-family: "Lucida Sans Unicode", "Trebuchet MS", Helvetica, Sans-Serif;
        font-size: 13px;
        line-height: 1.6em;
        padding: 1px 0 3em 50px;
        width: 1000px;
    }
h1{
    font-weight: 700;
    font-size: 18px;
    line-height: 1.2em;
    border-bottom: 1px double #6b9ef1;
    color: #5f95ef;
    margin-bottom: 1em;
}
h2{
    font-weight: 700;
    font-size: 18px;
    line-height: 1.2em;
    border-bottom: 1px double #6b9ef1;
    color: #5f95ef;
}
    #content {
        padding: 20px 0 0 50px;
    }
    #content table{
        width:200px;
    }
    #content h1 {
        margin-bottom: 1em;
        color: #7F222B;
    }
    p {
        color: #999;
        font-size: .9em;
        margin-top: 2em;
    }
    #footer {
        color: #999;
        clear: both;
        font-size: 12px;
        line-height: 20px;
        letter-spacing: 1px;
        padding: 0 0 1px 50px;
        height: 6em;
        overflow: hidden;
        border-bottom: 1px double #6b9ef1;
    }
#puzzle {
    width:350px;
    height:263px;
    border: 1px double #F30;
}
#puzzle2 {
    background-color:#000;
    width:350px;
}
#jalan{
    background: #6f9ff1;
    color: #fff;
    font-weight: 700;
    font-style: normal;
    border: 0;
    cursor: pointer;
}
        a:link,
        a:visited    {color: #cf852c; text-decoration: underline;}
        a:hover,

Hasilnya di sini

Dari postingan ku yang dulu http://bagusromadhon.blogspot.com/2012/02/puzzle-slide-sederhana-dengan-js-java.html