GAME INTERAKTIF “MENGENAL WARNA”
GAME INTERAKTIF “MENGENAL WARNA”
Oleh: Jarot Susilo [ https://media-slb1.my.canva.site/game-mengenal-warna ]
Prompt:
Buatkan media interaktif edukatif bertema “Mengenal Warna” menggunakan Canva Code, dirancang untuk siswa SD kelas 1–3. Media ini harus memiliki desain ceria, ramah anak, penuh warna, dan tampilan sederhana yang mudah dipahami.
Gunakan gaya visual kartun, ikon warna-warni, dan teks besar. Pastikan layout responsif untuk layar presentasi maupun tablet. Sertakan animasi klik, tombol navigasi, dan efek suara ringan saat jawaban benar/salah.
STRUKTUR SLIDE
1. Halaman Judul
Judul besar: “Game Interaktif: Mengenal Warna!”
Gaya ceria dengan ilustrasi kartun cat, kuas, dan palet warna.
Tombol besar: Mulai → menuju halaman petunjuk.
Animasi sederhana (misalnya melompat atau bergetar halus).
2. Halaman Petunjuk
Berisi teks sederhana:
“Ikuti petunjuk di layar.”
“Klik warna atau gambar sesuai perintah.”
“Jika benar → muncul animasi senang!”
“Jika salah → muncul ekspresi lucu dan tombol ‘Coba Lagi’.”
Gunakan ikon ⭐, ✔️, ❌, cat tumpah, dan karakter kartun kecil.
Tombol: Mulai Bermain → Level 1.
LEVEL PERMAINAN
🎮 Level 1 – Pilih Warna yang Disebutkan
Contoh instruksi: “Klik warna MERAH!”
Tampilkan 6–8 lingkaran warna-warni ukuran besar (merah, kuning, biru, hijau, ungu, oranye).
Saat pemain klik warna benar:
Munculkan animasi “pop”, ikon ✔️, dan suara ringkas ding!
Tombol besar Lanjut → Level 2.
Jika salah:
Munculkan ekspresi kartun sedih, suara boop, dan tombol Coba Lagi (reload slide).
Tambahkan animasi hover atau klik kecil pada setiap lingkaran warna.
🎮 Level 2 – Cocokkan Warna dengan Benda
Instruksi contoh:
“Pilih benda yang berwarna HIJAU.”
Tampilkan 4–6 gambar kartun (misalnya: apel hijau, pisang kuning, bola merah, daun hijau, jeruk oranye).
Ketika pemain klik benda yang warnanya cocok:
Animasi melompat/berputar.
Suara ringan ting!
Muncul tombol Lanjut ke Level 3.
Jika salah:
Benda bergoyang atau memudar sedikit.
Tampilkan teks: “Belum tepat! Coba lagi ya!”
🎨 Level 3 – Campur Dua Warna
Instruksi contoh:
“Apa hasil dari MERAH + KUNING?”
Tampilkan dua ember warna (merah & kuning).
Tampilkan pilihan jawaban warna besar: ORANYE, HIJAU, UNGU.
Interaksi:
Jika memilih jawaban benar:
Animasi percikan cat.
Suara happy chime.
Muncul teks besar: “Hebat! Kamu benar!”
Tombol Selesai / Ulangi.
Jika salah:
Animasi tumpahan cat lucu.
Teks: “Salah warna! Coba lagi yuk.”
Tombol Coba Lagi.
⚙️ KOMPONEN TEKNIS CANVA CODE
Gunakan Canva Code untuk:
Event klik (onClick) pada warna dan objek.
Menampilkan popup “Benar” atau “Salah”.
Navigasi antar slide menggunakan fungsi goToPage().
Animasi kecil (pop, bounce, fade).
Memutar efek suara pendek saat benar/salah.
Pastikan:
Semua tombol besar (minimal 180–250px).
Layout responsif untuk laptop/tablet.
Semua warna ditampilkan sebagai elemen visual besar (lingkaran/ember).
🎉 GAYA VISUAL
Kartun ceria, warna cerah, outline tebal.
Gunakan font besar 48–64pt (misal: Comic-ish, Rounded style).
Karakter kartun kecil seperti kuas, ember cat, atau maskot warna.
Background lembut (biru muda/kuning pastel).
⭐ HASIL AKHIR
Sebuah game interaktif edukatif lengkap yang terdiri dari:
Halaman judul
Petunjuk bermain
Level 1, Level 2, Level 3 interaktif
Feedback benar/salah animatif
Tombol navigasi
Audio feedback
Desain ceria, jelas, mudah dimainkan, dan mendukung pembelajaran warna untuk siswa SD kelas 1–3.