Source Code Game Matematika dengan HTML, CSS dan Javascript
iPunx February 16, 2023 4:10 pm . 4 min read 
Source code game matematika – Belajar matematika sering menjadi momok yang menakutkan. Namun, bagaimana apabila belajar matematika dengan game? Tentu akan lebih menarik dan menyenangkan untuk anak-anak kita.
Lebih seru lagi kalau kita buat sendiri game matematika. Bagaimana caranya? Kali ini akan kami bagikan source code game matematika dengan menggunakan html, css dan javascript. Sehingga game matematika ini dapat kita buka dengan mudah hanya dengan aplikasi web browser seperti Chrome, Mozila, Opera, Microsoft Edge atau aplikasi web browser lainnya.
Di bawah ini adalah source code membuat aplikasi game matematika sederhana untuk anak-anak. Pastinya anda tinggal copy paste script html, css dan javascript di bawah ini.
Source Code Game
Langkah pertama adalah persiapkan terlebih dahulu folder yang akan menampung tiga file. Ketiga file yang disiapkan dalam satu folder yang sama adalah index.html, style.css dan script.js.
1. HTML
HTML (Hypertext Markup Language) adalah bahasa markup yang digunakan untuk membuat struktur dan konten dari halaman web. Fungsi utama HTML adalah untuk menyediakan tag atau tanda yang mendefinisikan bagaimana sebuah dokumen web akan ditampilkan di browser.
Setelah kita memahami fungsi dari html, maka copy dan pastekan script di bawah ini pada file index.html yang telah kita buat seperti langkah di atas. Jangan lupa klik save untuk menyimpan script yang sudah kita pastekan.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Game Matematika untuk Anak-Anak</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Game Matematika untuk Anak-Anak</h1>
<div id="question"></div>
<form>
<input type="number" id="answer">
<button type="submit">Jawab</button>
</form>
<div id="result"></div>
<button id="next">Selanjutnya</button>
<script src="script.js"></script>
</body>
</html>
2. CSS
CSS (Cascading Style Sheets) adalah bahasa stylesheet yang digunakan untuk mengatur tampilan dan tata letak halaman web yang dibuat menggunakan HTML. Fungsi utama CSS adalah untuk memisahkan presentasi tampilan halaman web dari struktur dan konten halaman.
Dari penjelasan fungsi css di atas, maka kita memahami bahwa agar tampilan game matematika ini lebih menarik maka kita tambahkan file style.css. Silahkan adan copy dan pastekan script css di bawah ini pada file style.css.
Setelah kita pastekan, kemudian save (simpan) file tersebut. Anda dapat pula memodifikasi css di bawah agar lebih sesuai dengan selera anda masing-masing.
#question {
font-size: 24px;
margin-bottom: 20px;
}
#answer {
font-size: 24px;
width: 100px;
}
#result {
font-size: 24px;
margin-top: 20px;
}
#next {
font-size: 24px;
display: none;
}
3. JavaScript
JavaScript adalah bahasa pemrograman yang digunakan untuk membuat interaksi dan efek dinamis pada halaman web. Fungsi utama JavaScript adalah untuk memberikan interaksi pengguna pada halaman web dan meningkatkan pengalaman pengguna.
Nah, logic atau kendali dari aplikasi game matematika sederhana ini ada pada file script.js. Karena file javascript ini adalah pengendali dari aplikasi game matematika yang akan kita buat.
let question = document.getElementById("question");
let answer = document.getElementById("answer");
let result = document.getElementById("result");
let next = document.getElementById("next");
let num1, num2, op, correctAnswer;
generateQuestion();
document.addEventListener("submit", function(event) {
event.preventDefault();
if (parseInt(answer.value) == correctAnswer) {
result.innerHTML = "Jawaban benar!";
next.style.display = "inline";
} else {
result.innerHTML = "Jawaban salah. Coba lagi!";
}
});
document.addEventListener("click", function(event) {
if (event.target.id == "next") {
generateQuestion();
answer.value = "";
result.innerHTML = "";
next.style.display = "none";
}
});
function generateQuestion() {
num1 = Math.floor(Math.random() * 10) + 1;
num2 = Math.floor(Math.random() * 10) + 1;
op = Math.floor(Math.random() * 2);
if (op == 0) {
question.innerHTML = num1 + " + " + num2 + " = ?";
correctAnswer = num1 + num2;
} else {
question.innerHTML = num1 + " - " + num2 + " = ?";
correctAnswer = num1 - num2;
}
}
Disclaimer
Game matematika yang farazinux.com bagikan ini masih sangat sederhana. Silahkan anda modifikasi lebih lanjut untuk lebih seru dan menariknya permainan game matematika ini. Selamat mencoba dan happy coding.
Baca Juga:
