0 + 0 = ?
Skor: 0
<div id="game-container" style="position: relative; width: 100%; max-width: 400px; margin: 20px auto; border: 2px solid #ccc; border-radius: 10px; overflow: hidden; background: #e0f7fa;">
<canvas id="bgCanvas" width="400" height="300" style="width:100%; height:300px; display:block;"></canvas>
<div id="quiz-box" style="position: absolute; top: 10px; left: 0; width: 100%; text-align: center; color: #000; font-family: sans-serif;">
<h3 id="question">0 + 0 = ?</h3>
</div>
<input type="number" id="answer" style="width:60px; text-align:center; font-size:16px;">
<button id="submitBtn" style="padding:5px 10px; margin-left:5px;">Jawab</button>
<p id="feedback" style="margin-top:50px;"></p>
<p>Skor: <span id="score">0</span></p>
</div>
<script>
const canvas = document.getElementById('bgCanvas');
const ctx = canvas.getContext('2d');
// gambar karakter
const guruImg = new Image();
guruImg.src = 'https://cdn.pixabay.com/animation/2025/10/08/10/58/10-58-05-213_512.gif'; // ganti dengan link PNG guru
const muridImg = new Image();
muridImg.src = 'https://png.pngtree.com/element_our/20200703/ourmid/pngtree-cartoon-elementary-school-student-thinking-about-problems-png-transparent-background-image_2300340.jpg'; // ganti dengan link PNG murid
function drawScene() {
ctx.fillStyle = '#aee1f9';
ctx.fillRect(0,0,canvas.width,canvas.height);
// misal papan tulis & latar
ctx.fillStyle = '#fff';
ctx.fillRect(120, 20, 160, 100);
ctx.strokeStyle = '#000';
ctx.strokeRect(120,20,160,100);
// gambar guru & murid
// tunggu gambar selesai load dulu
if (guruImg.complete) {
ctx.drawImage(guruImg, 180, 50, 80, 120);
}
if (muridImg.complete) {
ctx.drawImage(muridImg, 60, 150, 60, 90);
ctx.drawImage(muridImg, 140, 150, 60, 90);
ctx.drawImage(muridImg, 220, 150, 60, 90);
}
requestAnimationFrame(drawScene);
}
drawScene();
// — sama logika soal & skor seperti sebelumnya —
let score = 0;
let currentAnswer = 0;
function generateQuestion() {
const a = Math.floor(Math.random()*20);
const b = Math.floor(Math.random()*20);
const ops = ['+','-','*'];
const op = ops[Math.floor(Math.random()*ops.length)];
let q = `${a} ${op} ${b}`;
currentAnswer = eval(q);
document.getElementById('question').textContent = q + " = ?";
document.getElementById('answer').value = '';
document.getElementById('feedback').textContent = '';
}
document.getElementById('submitBtn').addEventListener('click',()=>{
const userAns = parseInt(document.getElementById('answer').value);
if(userAns === currentAnswer){
score += 10;
document.getElementById('feedback').textContent = '✅ Benar!';
// bisa tambahkan animasi confetti di sini
} else {
score -= 5;
document.getElementById('feedback').textContent = '❌ Salah!';
}
document.getElementById('score').textContent = score;
generateQuestion();
});
generateQuestion();
</script>
No comments:
Post a Comment