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.

Membuat Game Matching Menggunakan Javascript Part 1

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.

12 September 2019

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat