Game Membaca Suku Kata Interaktif: Solusi Seru Belajar Membaca Siswa Kelas 1 SD
Download dan gunakan Game Membaca Suku Kata SD Kelas 1 gratis! Media interaktif HTML5 yang ringan, seru, dan cocok untuk meningkatkan literasi numerasi Kurikulum Merdeka. Copy-paste kodenya sekarang!
1. Pentingnya Media Interaktif untuk Belajar Membaca
Belajar membaca seringkali menjadi tantangan bagi siswa Fase A (Kelas 1-2 SD). Metode konvensional terkadang membuat siswa jenuh. Dengan Game Membaca Suku Kata, kita mengubah proses mengeja yang kaku menjadi petualangan visual. Media ini sangat efektif untuk melatih pelafalan kosakata sederhana seperti "Bo-la", "Bu-ku", dan "Ma-ma" secara berulang tanpa membuat anak bosan.
2. Manfaat Game Suku Kata bagi Perkembangan Anak
Mempercepat Kelancaran Membaca: Fokus pada pola suku kata terbuka (KV - Konsonan Vokal) yang merupakan dasar membaca.
Meningkatkan Kepercayaan Diri: Anak mendapatkan apresiasi instan (suara atau teks benar) setiap kali berhasil menebak.
Literasi Digital Dini: Mengenalkan cara menggunakan perangkat teknologi untuk tujuan belajar yang positif.
Fleksibel: Bisa digunakan sebagai Ice Breaking di kelas atau tugas mandiri di rumah melalui HP orang tua.
3. Cara Membuat dan Menjalankan Game HTML5 di Blog
Bapak/Ibu tidak perlu ahli coding untuk menghadirkan game ini di kelas. Cukup ikuti langkah sederhana berikut:
Siapkan File: Buka aplikasi Notepad di komputer atau laptop.
Copy-Paste: Salin seluruh kode script yang saya sediakan di bawah ini.
Simpan: Pilih Save As, beri nama
game-baca-sukukata.html. Pastikan formatnya adalah All Files agar ekstensinya benar-benar .html.Uji Coba: Klik dua kali pada file tersebut untuk membukanya di browser (Chrome/Edge).
Pasang di Blogger: Di panel Blogger, buat postingan baru, pindah ke Tampilan HTML, lalu tempelkan kodenya di sana.
4. Script Game HTML5: "Petualangan Suku Kata"
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#game-box { font-family: 'Comic Sans MS', cursive; text-align: center; background: #fff4e6; padding: 25px; border-radius: 20px; border: 5px solid #ff922b; max-width: 450px; margin: 20px auto; box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
.kata-lengkap { font-size: 40px; color: #d9480f; margin-bottom: 10px; font-weight: bold; letter-spacing: 5px; }
.instruksi { font-size: 18px; color: #868e96; margin-bottom: 20px; }
.pilihan-container { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.btn-suku { padding: 20px; font-size: 24px; cursor: pointer; background: #fab005; color: #fff; border: none; border-radius: 12px; box-shadow: 0 5px #f08c00; transition: 0.1s; }
.btn-suku:active { transform: translateY(4px); box-shadow: 0 1px #f08c00; }
#hasil { margin-top: 20px; font-size: 20px; font-weight: bold; min-height: 30px; }
.skor-box { background: #ffd8a8; padding: 5px 15px; border-radius: 50px; display: inline-block; margin-bottom: 15px; }
</style>
</head>
<body>
<div id="game-box">
<div class="skor-box">Bintang: <span id="skor">0</span> ⭐</div>
<div class="instruksi">Lengkapi Suku Kata Berikut:</div>
<div class="kata-lengkap" id="tampilan-kata">BO - ...</div>
<div class="pilihan-container" id="opsi-jawaban"></div>
<div id="hasil"></div>
<button onclick="resetGame()" style="margin-top:25px; cursor:pointer;">Mulai Baru</button>
</div>
<script>
const bankKata = [
{ awal: "BO", benar: "LA", salah: ["KA", "TA", "MA"] },
{ awal: "BU", benar: "KU", salah: ["RI", "LI", "SA"] },
{ awal: "MA", benar: "TA", salah: ["KA", "NA", "PI"] },
{ awal: "PI", benar: "PI", salah: ["PU", "PA", "PO"] },
{ awal: "SA", benar: "PU", salah: ["TU", "KU", "MU"] }
];
let skor = 0;
let indexSekarang = 0;
function mainkan() {
const soal = bankKata[indexSekarang];
document.getElementById('tampilan-kata').innerText = soal.awal + " - ...";
document.getElementById('hasil').innerText = "";
let tombols = [soal.benar, ...soal.salah.slice(0, 3)];
tombols.sort(() => Math.random() - 0.5);
const container = document.getElementById('opsi-jawaban');
container.innerHTML = "";
tombols.forEach(teks => {
const btn = document.createElement('button');
btn.className = 'btn-suku';
btn.innerText = teks;
btn.onclick = () => cek(teks, soal.benar);
container.appendChild(btn);
});
}
function cek(dipilih, kunci) {
if(dipilih === kunci) {
skor += 5;
document.getElementById('skor').innerText = skor;
document.getElementById('hasil').innerHTML = "<span style='color:green'>Hebat! " + bankKata[indexSekarang].awal + kunci + " 🎉</span>";
indexSekarang = (indexSekarang + 1) % bankKata.length;
setTimeout(mainkan, 1500);
} else {
document.getElementById('hasil').innerHTML = "<span style='color:red'>Coba lagi ya... 😊</span>";
}
}
function resetGame() {
skor = 0; indexSekarang = 0;
document.getElementById('skor').innerText = "0";
mainkan();
}
mainkan();
</script>
</body>
</html>"Jika Bapak/Ibu guru mengalami kendala saat mencoba menjalankan kode ini, silakan tuliskan kendalanya di kolom komentar di bawah ya!"
Jika Ingin memainkan langsung geme ini bisa memulainya pada tampilan di bawah ini :
5. Kesimpulan
Mengajarkan membaca tidak harus membosankan. Dengan integrasi teknologi sederhana berbasis HTML5, kita dapat menciptakan ekosistem belajar yang interaktif bagi siswa SD. Game ini tidak hanya melatih kognitif, tetapi juga koordinasi mata dan tangan anak dalam menggunakan media digital secara bijak.