Tugas Kelas 12

By /

Untuk pelaksanaannya menggunakan browser : Google Chrome, Mozilla Firefox, Opera. Jangan sekali-kali menggunakan browser bawaan android.

Silakan buka codepen.io kemudian salin script dibawah ini dan paste ke masing-masing tab. Bagian html dipaste/ditempel ke bagian html, bagian CSS ke tab CSS begitu pula dengan JavaScript ke tab JavaScript/JS.

1. HTML

<h1>Memory Game</h1>
<div class="game-container" id="game-container"></div>
<p id="message"></p>

2. CSS

body {
    font-family: Arial, sans-serif;
    text-align: center;
    background-color: #f4f4f4;
}

h1 {
    margin-top: 20px;
}

.game-container {
    display: grid;
    grid-template-columns: repeat(4, 100px);
    grid-gap: 10px;
    justify-content: center;
    margin-top: 30px;
}

.card {
    width: 100px;
    height: 100px;
    background-color: #3498db;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 40px;
    color: white;
    cursor: pointer;
    border-radius: 8px;
    user-select: none;
    transition: transform 0.3s;
}

.card.flipped {
    background-color: #2ecc71;
    transform: rotateY(180deg);
}

3. JavaScript

const gameContainer = document.getElementById("game-container");
const message = document.getElementById("message");

// Emoji sebagai "gambar" kartu
const cardsArray = ["🍎","🍌","🍇","🍓","🍎","🍌","🍇","🍓"];
let flippedCards = [];
let matchedCount = 0;

// Acak kartu
cardsArray.sort(() => 0.5 - Math.random());

// Buat kartu di DOM
cardsArray.forEach((emoji, index) => {
    const card = document.createElement("div");
    card.classList.add("card");
    card.dataset.emoji = emoji;
    card.addEventListener("click", flipCard);
    gameContainer.appendChild(card);
});

// Fungsi flip kartu
function flipCard() {
    if (flippedCards.length < 2 && !this.classList.contains("flipped")) {
        this.classList.add("flipped");
        this.textContent = this.dataset.emoji;
        flippedCards.push(this);

        if (flippedCards.length === 2) {
            setTimeout(checkMatch, 500);
        }
    }
}

// Cek apakah kartu cocok
function checkMatch() {
    const [card1, card2] = flippedCards;
    if (card1.dataset.emoji === card2.dataset.emoji) {
        matchedCount += 2;
        if (matchedCount === cardsArray.length) {
            message.textContent = "Selamat! Kamu menyelesaikan game!";
        }
    } else {
        card1.classList.remove("flipped");
        card2.classList.remove("flipped");
        card1.textContent = "";
        card2.textContent = "";
    }
    flippedCards = [];
}
    1. Tambahkan 2 buah tag h3 dibawah tag h1 pada bagian HTML, kemudian isi dengan :
      • Nama siswa
      • Kelas
    2. Pada bagian css, tambahkan 2 class baru :
      • Berikan nama class “nama” untuk tag h3 yang berisi nama siswa, berikan property untuk mengubah warna dengan value = “crimson”
      • Berikan nama class “kelas” untuk tag h3 yang berisi kelas siswa, berikan property untuk mengubah warna dengan value = warna = “chocolate”
    3. Jalankan gamenya hingga semua kotak terbuka yang ditandai dengan munculnya notifikasi “Selamat! Kamu menyelesaikan game!“
    4. Screenshot bagian HTML, CSS, JS dan result (hasil tampilannya)
    5. Edit hasil 4 screenshot tadi menjadi 1 file gambar
    6. Kirimkan via WhatsApp ke nomor 088229438762 dengan Attach -> Document agar gambar yang diterima tetap jelas, tidak di-compress oleh WhatsApp. Jangan mengirimkan gambar langsung dari galeri atau Attach -> Photos & videos karena gambar yang dikirim akan mengalami kompresi yang membuat gambar menjadi buram.

Note : Gambar emot boleh diganti dengan catatan urutan pasangannya harus sama

 

Scroll to Top