Game Perkalian dan Pembagian Interaktif SD: Solusi Belajar Matematika Anti Bosan (Berbasis HTML5)
Cara mudah membuat game perkalian dan pembagian interaktif untuk anak SD Kelas 3-6. Menggunakan kode HTML5 siap pakai, cocok untuk media ajar numerasi Kurikulum Merdeka. Yuk coba sekarang!
1. Mengubah Ketakutan Matematika Menjadi Keseruan
Bagi sebagian besar siswa Sekolah Dasar (SD), materi perkalian dan pembagian seringkali dianggap sebagai "momok" yang menakutkan. Menghafal angka secara manual bisa membuat anak cepat jenuh dan stres. Sebagai pendidik di era Kurikulum Merdeka, kita perlu menghadirkan inovasi. Salah satunya adalah dengan menggunakan Game Perkalian dan Pembagian Interaktif.
Dengan pendekatan Game Based Learning, siswa diajak untuk memecahkan soal matematika layaknya sedang menyelesaikan misi dalam sebuah permainan.
2. Manfaat Game Matematika Interaktif bagi Siswa
Meningkatkan Kemampuan Numerasi: Melatih kecepatan dan ketepatan siswa dalam berhitung (perkalian dan pembagian dasar 1-100).
Menghilangkan Stres Belajar: Desain yang penuh warna dan umpan balik (feedback) instan membuat siswa tidak takut salah.
Mendukung Belajar Mandiri: Game ini menghasilkan soal secara acak (random), sehingga siswa bisa memainkannya berulang kali dengan soal yang selalu baru.
Aksesibilitas Tinggi: Berbasis web ringan, bisa dimainkan kapan saja lewat HP, tablet, atau laptop tanpa menghabiskan kuota besar.
3. Cara Menjalankan dan Membuat Game HTML5 (Langkah demi Langkah)
Bapak/Ibu guru tidak perlu mahir coding untuk menggunakan game ini. Cukup ikuti langkah praktis berikut ini:
Buka Notepad atau Code Editor: Buka aplikasi Notepad (bawaan Windows) atau aplikasi teks editor lainnya di komputer Anda.
Buat File Baru: Buat dokumen baru, lalu pilih menu Save As. Beri nama file tersebut
game-matematika.html(pastikan akhiran filenya adalah .html, bukan .txt).Salin Kode (Copy-Paste): Salin seluruh kode HTML, CSS, dan JavaScript yang saya sediakan di bawah ini, lalu tempelkan ke dalam file tersebut.
Simpan (Save): Tekan tombol Ctrl + S untuk menyimpan.
Jalankan di Browser: Cari file
game-matematika.htmldi komputer Anda, klik kanan, lalu pilih Open With > Google Chrome atau Microsoft Edge. Game sudah siap dimainkan oleh siswa!
Tips untuk Blogger/Webmaster: Jika ingin memasang game ini di artikel blog atau website sekolah, Anda cukup masuk ke mode Tampilan HTML (bukan mode Compose/Menulis) saat membuat postingan, lalu tempelkan kode di bawah ini.
4. Script Kode Game HTML5: "Tantangan Matematika"
Silakan salin kode berikut ini. Game ini sudah dirancang agar pembagiannya selalu menghasilkan angka bulat (tidak desimal) sehingga cocok untuk anak SD.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Game Perkalian dan Pembagian Interaktif</title>
<style>
#math-game { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; text-align: center; background: #e8f5e9; padding: 25px; border-radius: 15px; border: 5px solid #4caf50; max-width: 450px; margin: 20px auto; box-shadow: 0 8px 16px rgba(0,0,0,0.15); }
.judul-game { color: #2e7d32; margin-top: 0; }
.soal-box { font-size: 50px; font-weight: bold; color: #1b5e20; margin: 20px 0; background: #fff; padding: 15px; border-radius: 10px; border: 3px dashed #81c784; letter-spacing: 2px; }
.btn-jawaban { padding: 15px 10px; font-size: 26px; font-weight: bold; cursor: pointer; background: #1976d2; color: white; border: none; border-radius: 10px; width: 45%; margin: 5px; box-shadow: 0 5px #0d47a1; transition: 0.1s; }
.btn-jawaban:active { transform: translateY(5px); box-shadow: 0 0 #0d47a1; }
.btn-jawaban:hover { background: #2196f3; }
.info-skor { font-size: 20px; font-weight: bold; color: #e65100; background: #ffe0b2; padding: 5px 15px; border-radius: 20px; display: inline-block; }
.feedback { font-size: 22px; font-weight: bold; margin-top: 20px; min-height: 35px; }
.pilihan-container { display: flex; flex-wrap: wrap; justify-content: center; }
</style>
</head>
<body>
<div id="math-game">
<h2 class="judul-game">Tantangan Matematika!</h2>
<div class="info-skor">Skor Kamu: <span id="skor-math">0</span> ⭐</div>
<div class="soal-box" id="soal-teks">?</div>
<div class="pilihan-container" id="opsi-jawaban"></div>
<div class="feedback" id="pesan-math"></div>
</div>
<script>
let skorMath = 0;
let jawabanBenar = 0;
function buatSoal() {
// Mengacak jenis soal: perkalian atau pembagian
let jenis = Math.random() > 0.5 ? 'kali' : 'bagi';
let angka1, angka2, teksSoal;
if (jenis === 'kali') {
angka1 = Math.floor(Math.random() * 10) + 1; // 1 sampai 10
angka2 = Math.floor(Math.random() * 10) + 1;
jawabanBenar = angka1 * angka2;
teksSoal = `${angka1} x ${angka2} = ...`;
} else {
// Logika agar pembagian selalu menghasilkan bilangan bulat (1-10)
jawabanBenar = Math.floor(Math.random() * 10) + 1;
angka2 = Math.floor(Math.random() * 10) + 1;
angka1 = jawabanBenar * angka2; // Hasil perkalian dijadikan angka pembagi
teksSoal = `${angka1} : ${angka2} = ...`;
}
document.getElementById('soal-teks').innerText = teksSoal;
document.getElementById('pesan-math').innerText = "";
// Membuat pilihan jawaban (1 benar, 3 pengecoh)
let pilihan = [jawabanBenar];
while(pilihan.length < 4) {
// Pengecoh dibuat mendekati jawaban benar
let salah = jawabanBenar + Math.floor(Math.random() * 15) - 7;
if(salah !== jawabanBenar && salah > 0 && !pilihan.includes(salah)) {
pilihan.push(salah);
}
}
pilihan.sort(() => Math.random() - 0.5); // Acak urutan tombol
const container = document.getElementById('opsi-jawaban');
container.innerHTML = "";
pilihan.forEach(num => {
let btn = document.createElement('button');
btn.className = 'btn-jawaban';
btn.innerText = num;
btn.onclick = () => cekJawabanMath(num);
container.appendChild(btn);
});
}
function cekJawabanMath(tebakan) {
if(tebakan === jawabanBenar) {
skorMath += 10;
document.getElementById('skor-math').innerText = skorMath;
document.getElementById('pesan-math').innerHTML = "<span style='color:#2e7d32'>Tepat Sekali! Bagus! 🎉</span>";
// Jeda sejenak sebelum soal baru muncul
setTimeout(buatSoal, 1200);
} else {
document.getElementById('pesan-math').innerHTML = "<span style='color:#d32f2f'>Tetap Semangat, Coba Lagi! 💪</span>";
}
}
// Mulai game pertama kali
buatSoal();
</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 :
Tantangan Matematika!
5. Kesimpulan
Game perkalian dan pembagian ini adalah bukti bahwa media pembelajaran interaktif tidak selalu rumit dan mahal. Dengan memanfaatkan HTML5, guru dapat menciptakan pengalaman belajar yang menyenangkan, adaptif, dan mendukung pencapaian Profil Pelajar Pancasila di bidang numerasi. Jangan ragu untuk membagikan halaman ini kepada rekan guru lainnya!