Bayu Abdillah: Membuat Game Puzzle Sederhana dengan HTML, CSS dan JavaScript (part1)

Kali ini kita akan membuat semacam game puzzle gambar dengan memanfaatkan css clip yang pernah saya posting sebelumnya di sini, dan juga sedikit javascript yang saya dapatkan dari w3shcools.com di sini.

Kenapa kita memerlukan css clip? Ada yang bertanya seperti itu? Kalau ada, maka jawaban saya adalah tentu saja untuk memotong gambar. Agar cukup satu gambar saja yang kita gunakan pada game ini. Tapi, jika kalian tidak menggunakan css clip juga tidak masalah. Asalkan mau memotong gambar yang akan kalian gunakan menjadi beberapa bagian.

Lalu gunanya javascript itu buat apa? Ya buat nge-drag and nge-drop gambarlah. Ini adalah bagian pentingnya. Tanpa javasript ini, gambar tidak akan bisa di-drag maupun di-drop. Tenang saja, javascript-nya gak banyak kok. Cuma se-di-kit aja.

Baiklah, mari kita buat puzzle-nya!

Pertama, kita akan memilih gambar yang akan kita gunakan. Di sini, saya akan menggunakan gambar di bawah.

Kedua, buat tiga buah file kosong dengan nama game.html, game.css dan game.js. Pada game.html, kita tulis :


<!doctype html>
<html>
<head>
  <title>puzzle</title>
  <link rel="stylesheet" type="text/css" href="game.css">
  <script type="text/javascript" src="game.js"></script>
</head>
<body>

</body>
</html>

Setelah itu, buat tiga buah div di dalam body dengan class all dan gbr. Jangan lupa masukkan gambar kita ke dalam div yang class-nya gbr.


<div class="all"></div>
<div class="gbr">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWLJ4GXFO9YYPWxS9MpaA5LqzYNk3gEpWZw19RwJSptZR_IMzeVQcKIpvD5-gMFW_8xk4USJAYWIM8G2A2Y7gkZRWFmuPdzQXB3iWsl_b1g1w6yESdeciMEfL7M2vfwc7udt3Lyqny-Vmy/s1600/photo.jpg">
</div>

Kemudian buat sebuah tabel dengan 5 kolom dan 2 baris di bawah kedua div sebelumnya. Pastikan cellspacing dan cellpadding bernilai nol. Biar kelihatan, nilai border dibuat menjadi 1.


<table cellspacing="0" cellpadding="0" border="1">
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

Lalu kita buka game.css dan tulis :

.all{
  position: absolute;
  width: 100%;
  height: 100%;
}
.gbr{
  float: left;
}
.gbr img{
  width: 400px;
  height: 400px;
  border: 2px solid black;
  opacity: .5;
}
table{
  float: left;
  position: absolute;
}

Kali ini kita akan menyusutkan gambarnya sehinggal panjang dan lebar gambar menjadi 400px (lihat yang di-mark di atas). Jadi, akan lebih baik jika kalian menggunakan gambar yang nilai panjang dan lebarnya sama. Agar gambar tetap kelihatan bagus.

Masukkan div dengan class box dan juga id mulai d1 sampai d4 ke dalam cell atau td, kecuali td urutan yang ketiga. Sekalian drag event dan drop event juga. Nanti hasilnya akan seperti ini :


<table cellspacing="0" cellpadding="0" border="1">
  <tr>
    <td>
      <div class="box" id="d1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    </td>
    <td>
      <div class="box" id="d2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    </td>
    <td></td>
    <td>
      <div class="box" id="d3" ondrop="drop(event)" ondragover="allowDrop(event)">
        <img draggable="true" ondragstart="drag(event)" class="k21" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWLJ4GXFO9YYPWxS9MpaA5LqzYNk3gEpWZw19RwJSptZR_IMzeVQcKIpvD5-gMFW_8xk4USJAYWIM8G2A2Y7gkZRWFmuPdzQXB3iWsl_b1g1w6yESdeciMEfL7M2vfwc7udt3Lyqny-Vmy/s1600/photo.jpg">
      </div>
    </td>
    <td>
      <div class="box" id="d4" ondrop="drop(event)" ondragover="allowDrop(event)">
        <img draggable="true" ondragstart="drag(event)" class="k11" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWLJ4GXFO9YYPWxS9MpaA5LqzYNk3gEpWZw19RwJSptZR_IMzeVQcKIpvD5-gMFW_8xk4USJAYWIM8G2A2Y7gkZRWFmuPdzQXB3iWsl_b1g1w6yESdeciMEfL7M2vfwc7udt3Lyqny-Vmy/s1600/photo.jpg">
      </div>
    </td>
  </tr>
  <tr>
    <td>
      <div class="box" id="d5" ondrop="drop(event)" ondragover="allowDrop(event)"&  gt;</div>
    </td>
    <td>
      <div class="box" id="d6" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    </td>
    <td></td>
    <td>
      <div class="box" id="d7" ondrop="drop(event)" ondragover="allowDrop(event)">
        <img draggable="true" ondragstart="drag(event)" class="k22" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWLJ4GXFO9YYPWxS9MpaA5LqzYNk3gEpWZw19RwJSptZR_IMzeVQcKIpvD5-gMFW_8xk4USJAYWIM8G2A2Y7gkZRWFmuPdzQXB3iWsl_b1g1w6yESdeciMEfL7M2vfwc7udt3Lyqny-Vmy/s1600/photo.jpg">
      </div>
    </td>
    <td>
      <div class="box" id="d8" ondrop="drop(event)" ondragover="allowDrop(event)">
        <img draggable="true" ondragstart="drag(event)" class="k12" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWLJ4GXFO9YYPWxS9MpaA5LqzYNk3gEpWZw19RwJSptZR_IMzeVQcKIpvD5-gMFW_8xk4USJAYWIM8G2A2Y7gkZRWFmuPdzQXB3iWsl_b1g1w6yESdeciMEfL7M2vfwc7udt3Lyqny-Vmy/s1600/photo.jpg">
      </div>
    </td>
  </tr>
</table>

Kemudian masukkan gambar pada 2 div terakhir masing-masing tr. Lihat script atas.


<img draggable="true" ondragstart="drag(event)" class="k11" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWLJ4GXFO9YYPWxS9MpaA5LqzYNk3gEpWZw19RwJSptZR_IMzeVQcKIpvD5-gMFW_8xk4USJAYWIM8G2A2Y7gkZRWFmuPdzQXB3iWsl_b1g1w6yESdeciMEfL7M2vfwc7udt3Lyqny-Vmy/s1600/photo.jpg">

Pastikan gambar mempunyai class mulai dari k11, k12, k21 dan k22. Gambar yang mempunyai class k11 akan kelihatan pojok kiri atas, k12 pojok kanan atas, k21 pojok kiri bawah dan k22 pojok kanan bawah. Jadi, jangan sampai ada gambar dengan class yang sama ataupun double. kalau sampai ada, nanti gambarnya gak bisa diselesaikan.

Di game.css tambahkan script css ini dibawahnya.


.box{
  width: 200px;
  height: 200px;
}
.box img{
  position: absolute;
  width: 400px;
  height: 400px;
}
.k11{
  clip: rect(0px, 200px, 200px, 0px);
}
.k12{
  clip: rect(0px, 400px, 200px, 200px);
  margin-left: -200px;
}

.k21{
  clip: rect(200px, 200px, 400px, 0px);
  margin-top: -200px;
}
.k22{
  clip: rect(200px, 400px, 400px, 200px);
  margin-top: -200px;
  margin-left: -200px;
}

Script css di ataslah yang berperan penting dalam pemotongan gambar.
Buka gambar.js dan tulis.


function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}

Hasilnya :

Lho? Kok gak bisa digerakin sih? Ada yang tahu penyebabnya? Kita lupa menambahkan id pada gambar. Ok, kita tambahkan id. Id gak boleh ada yang sama ya! Kita kasih id g1 sampai g4 aja.

Jadi...

<!doctype html>
<html>
<head>
 <title>puzzle</title>
 <link rel="stylesheet" type="text/css" href="game.css">
 <script type="text/javascript" src="game.js"></script>
</head>
<body>
 <div class="all"></div>
 <div class="gbr">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWLJ4GXFO9YYPWxS9MpaA5LqzYNk3gEpWZw19RwJSptZR_IMzeVQcKIpvD5-gMFW_8xk4USJAYWIM8G2A2Y7gkZRWFmuPdzQXB3iWsl_b1g1w6yESdeciMEfL7M2vfwc7udt3Lyqny-Vmy/s1600/photo.jpg">
 </div>
 <table border="0" cellspacing="0" cellpadding="0">
  <tr>
   <td>
    <div class="box" id="d1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
   </td>
   <td>
    <div class="box" id="d2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
   </td>
   <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
   <td>
    <div class="box" id="b1" ondrop="drop(event)" ondragover="allowDrop(event)">
     <img id="g4" draggable="true" ondragstart="drag(event)" class="k22" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWLJ4GXFO9YYPWxS9MpaA5LqzYNk3gEpWZw19RwJSptZR_IMzeVQcKIpvD5-gMFW_8xk4USJAYWIM8G2A2Y7gkZRWFmuPdzQXB3iWsl_b1g1w6yESdeciMEfL7M2vfwc7udt3Lyqny-Vmy/s1600/photo.jpg">
    </div>
   </td>
   <td>
    <div class="box" id="b2" ondrop="drop(event)" ondragover="allowDrop(event)">
     <img id="g3" draggable="true" ondragstart="drag(event)" class="k21" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWLJ4GXFO9YYPWxS9MpaA5LqzYNk3gEpWZw19RwJSptZR_IMzeVQcKIpvD5-gMFW_8xk4USJAYWIM8G2A2Y7gkZRWFmuPdzQXB3iWsl_b1g1w6yESdeciMEfL7M2vfwc7udt3Lyqny-Vmy/s1600/photo.jpg">
    </div>
   </td>
  </tr>
  <tr>
   <td>
    <div class="box" id="d3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
   </td>
   <td>
    <div class="box" id="d4" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
   </td>
   <td></td>
   <td>
    <div class="box" id="b3" ondrop="drop(event)" ondragover="allowDrop(event)">
     <img id="g2" draggable="true" ondragstart="drag(event)" class="k12" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWLJ4GXFO9YYPWxS9MpaA5LqzYNk3gEpWZw19RwJSptZR_IMzeVQcKIpvD5-gMFW_8xk4USJAYWIM8G2A2Y7gkZRWFmuPdzQXB3iWsl_b1g1w6yESdeciMEfL7M2vfwc7udt3Lyqny-Vmy/s1600/photo.jpg">
    </div>
   </td>
   <td>
    <div class="box" id="b4" ondrop="drop(event)" ondragover="allowDrop(event)">
     <img id="g1" draggable="true" ondragstart="drag(event)" class="k11" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWLJ4GXFO9YYPWxS9MpaA5LqzYNk3gEpWZw19RwJSptZR_IMzeVQcKIpvD5-gMFW_8xk4USJAYWIM8G2A2Y7gkZRWFmuPdzQXB3iWsl_b1g1w6yESdeciMEfL7M2vfwc7udt3Lyqny-Vmy/s1600/photo.jpg">
    </div>
   </td>
  </tr>
 </table>
</body>
</html>

Tapi, kalau gambarnya di drag n drop ke gambar kok ngilang?
Kita akan mengatasi masalah itu di part2. Silahkan klik di sini untuk menuju part2. Tunggu besok ya...

Bayu Abdillah

Selasa, 11 Agustus 2015

Membuat Game Puzzle Sederhana dengan HTML, CSS dan JavaScript (part1)

2 komentar: