Membuat Game Matching Menggunakan Javascript Part 1

Pada kesempatan kali ini saya akan membahas tentang cara Membuat Game Matching Menggunakan Javascript Part 1. Game matching adalah game yang melatih memori seseorang untuk mengingat posisi atau letak suatu objek untuk dapat menemukan pasangannya.

Langkah pertama untuk dapat Membuat Game Matching Menggunakan Javascript Part 1teman-teman buat struktur html yang berisi beberapa div untuk menampilkan gambar-gambar yang akan di tampilkan.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Membuat Game Matching Menggunakan Javascript</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <section class="memory-game">
    <div class="memory-card" data-framework="apel">
      <img class="front-face" src="img/apel.png" alt="Aurelia" />
      <img class="back-face" src="img/dumet.png" alt="JS Badge" />
    </div>
    <div class="memory-card" data-framework="apel">
      <img class="front-face" src="img/apel.png" alt="Aurelia" />
      <img class="back-face" src="img/dumet.png" alt="JS Badge" />
    </div>

    <div class="memory-card" data-framework="strawberry">
      <img class="front-face" src="img/strawberry.png" alt="Vue" />
      <img class="back-face" src="img/dumet.png" alt="JS Badge" />
    </div>
    <div class="memory-card" data-framework="strawberry">
      <img class="front-face" src="img/strawberry.png" alt="Vue" />
      <img class="back-face" src="img/dumet.png" alt="JS Badge" />
    </div>

    <div class="memory-card" data-framework="jeruk">
      <img class="front-face" src="img/jeruk.png" alt="Angular" />
      <img class="back-face" src="img/dumet.png" alt="JS Badge" />
    </div>
    <div class="memory-card" data-framework="jeruk">
      <img class="front-face" src="img/jeruk.png" alt="Angular" />
      <img class="back-face" src="img/dumet.png" alt="JS Badge" />
    </div>

    <div class="memory-card" data-framework="kiwi">
      <img class="front-face" src="img/kiwi.png" alt="Ember" />
      <img class="back-face" src="img/dumet.png" alt="JS Badge" />
    </div>
    <div class="memory-card" data-framework="kiwi">
      <img class="front-face" src="img/kiwi.png" alt="Ember" />
      <img class="back-face" src="img/dumet.png" alt="JS Badge" />
    </div>

    <div class="memory-card" data-framework="papaya">
      <img class="front-face" src="img/papaya.png" alt="Backbone" />
      <img class="back-face" src="img/dumet.png" alt="JS Badge" />
    </div>
    <div class="memory-card" data-framework="papaya">
      <img class="front-face" src="img/papaya.png" alt="Backbone" />
      <img class="back-face" src="img/dumet.png" alt="JS Badge" />
    </div>

    <div class="memory-card" data-framework="rambutan">
      <img class="front-face" src="img/rambutan.png" alt="React" />
      <img class="back-face" src="img/dumet.png" alt="JS Badge" />
    </div>
    <div class="memory-card" data-framework="rambutan">
      <img class="front-face" src="img/rambutan.png" alt="React" />
      <img class="back-face" src="img/dumet.png" alt="JS Badge" />
    </div>
  </section>
  <script src="script.js"></script>
</body>
</html>

Untuk gambar yang ditampilkan didalam div tersebut ada 6 gambar setiap gambar di tampilkan dua kali pada div yang berbeda. Dan berikut ini gambar yang ditampilkan untuk membuat game matching menggunakan javascript.

Demikian artikel tentang cara Membuat Game Matching Menggunakan Javascript Part 1. Untuk artikel Membuat Game Matching Menggunakan Javascript Part 2 kita akan melanjutkannya dengan membuat style css dan javascript.