Cara Membuat Game Pengenalan Angka Interaktif (HTML5) untuk Siswa SD Fase A
Ingin membuat media ajar seru? Simak cara membuat Game Pengenalan Angka SD berbasis HTML5 yang ringan dan interaktif. Lengkap dengan kode script siap pakai (copy-paste) untuk Kurikulum Merdeka. Cocok untuk belajar numerasi Fase A jadi lebih menyenangkan.
Game pengenalan angka adalah media pembelajaran digital yang dirancang khusus untuk siswa kelas rendah (Fase A: Kelas 1-2 SD). Fokus utama game ini adalah membantu siswa mengenali lambang bilangan, urutan angka, dan jumlah benda melalui interaksi visual yang menarik. Dibandingkan hanya melihat buku cetak, game ini memberikan instant feedback (umpan balik langsung) yang membuat siswa lebih bersemangat belajar.
.png)
1. Manfaat Game Pengenalan Angka bagi Siswa
.png)
Meningkatkan Literasi Numerasi: Mempercepat pemahaman konsep angka dasar.
Melatih Fokus & Konsentrasi: Siswa ditantang untuk mencari dan mencocokkan angka dengan benar.
Belajar Mandiri: Game ini bisa dimainkan berulang kali tanpa rasa bosan, sehingga siswa bisa belajar sesuai kecepatannya masing-masing.
Ramah Gadget: Sebagai media ajar modern yang bisa diakses dari HP orang tua sebagai alternatif hiburan positif.
2. Cara Menjalankan dan Membuat Game HTML5
Membuat game edukasi ini sangat mudah dan tidak memerlukan software berat. Bapak/Ibu hanya perlu mengikuti langkah praktis berikut ini untuk memulainya:
Buka Notepad atau Code Editor: Buka aplikasi Notepad (bawaan Windows) atau aplikasi seperti VS Code atau Sublime Text di komputer Anda.
Buat File Baru: Buat dokumen baru, lalu pilih menu Save As. Beri nama file tersebut
game-angka.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 (paste) ke dalam file tersebut.
Simpan (Save): Tekan tombol Ctrl + S untuk menyimpan perubahan.
Jalankan di Browser: Cari file
game-angka.htmltadi di folder komputer Anda, klik kanan, lalu pilih Open With > Google Chrome atau Microsoft Edge. Game sudah siap dimainkan!
3. Kode Game HTML5: "Tebak Angka Ceria"
Silakan Bapak copy-paste kode di bawah ini. Kode ini sudah saya buat sangat ringan dan responsif.
<!DOCTYPE html>
<html>
<head>
<title>Game Pengenalan Angka</title>
<style>
#game-container { font-family: 'Arial', sans-serif; text-align: center; background: #f0f9ff; padding: 20px; border-radius: 15px; border: 4px solid #3498db; max-width: 400px; margin: auto; }
.target-box { font-size: 48px; font-weight: bold; color: #2c3e50; margin: 20px; padding: 10px; background: white; border-radius: 10px; border: 2px dashed #3498db; }
.options { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.btn-angka { padding: 15px 25px; font-size: 24px; cursor: pointer; background: #e67e22; color: white; border: none; border-radius: 8px; transition: 0.2s; }
.btn-angka:hover { background: #d35400; transform: scale(1.1); }
#pesan { margin-top: 20px; font-weight: bold; min-height: 24px; }
.skor { color: #27ae60; font-size: 18px; }
</style>
</head>
<body>
<div id="game-container">
<h3>Tebak Angkanya!</h3>
<p class="skor">Skor: <span id="nilai">0</span></p>
<div class="target-box" id="target">?</div>
<p>Klik tombol angka yang sama di bawah ini:</p>
<div class="options" id="buttons"></div>
<div id="pesan"></div>
<button onclick="mulaiGame()" style="margin-top:20px; padding:5px 15px;">Main Lagi</button>
</div>
<script>
let angkaTarget;
let skor = 0;
function mulaiGame() {
angkaTarget = Math.floor(Math.random() * 10);
document.getElementById('target').innerText = angkaTarget;
document.getElementById('pesan').innerText = "";
buatTombol();
}
function buatTombol() {
const container = document.getElementById('buttons');
container.innerHTML = "";
let pilihan = [angkaTarget];
while(pilihan.length < 4) {
let r = Math.floor(Math.random() * 10);
if(pilihan.indexOf(r) === -1) pilihan.push(r);
}
pilihan.sort(() => Math.random() - 0.5);
pilihan.forEach(num => {
let btn = document.createElement('button');
btn.className = 'btn-angka';
btn.innerText = num;
btn.onclick = () => cekJawaban(num);
container.appendChild(btn);
});
}
function cekJawaban(n) {
if(n === angkaTarget) {
skor += 10;
document.getElementById('nilai').innerText = skor;
document.getElementById('pesan').innerText = "Hebat! Kamu Benar! 🎉";
document.getElementById('pesan').style.color = "green";
setTimeout(mulaiGame, 1000);
} else {
document.getElementById('pesan').innerText = "Coba lagi ya... 😊";
document.getElementById('pesan').style.color = "red";
}
}
mulaiGame();
</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 :
Tebak Angkanya!
Skor: 0
Klik tombol angka yang sama di bawah ini:
4. Kesimpulan
Game pengenalan angka bukan sekadar mainan, melainkan alat bantu (jembatan) bagi siswa untuk mencintai matematika sejak dini. Dengan teknologi HTML5, Bapak bisa menyajikan materi ajar yang interaktif, bisa diakses kapan saja, dan tentu saja membuat blog Bapak menjadi lebih unik dan bermanfaat bagi rekan guru lainnya.