Math Adventures for Kids body { margin: 0; font-family: Arial, sans-serif; background-color: #e0f7fa; overflow: hidden; } #banner { width: 100%; text-align: center; background-color: #f8f9fa; padding: 10px 0; } #banner img { max-width: 50%; height: 50; } canvas { display: block; margin: 20px auto; background: url(‘https://i0.wp.com/atomic-temporary-232657305.wpcomstaging.com/wp-content/uploads/2024/12/9.gif?resize=300%2C150&ssl=1’) no-repeat center; background-size: cover; border: 2px solid #0288d1; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); } #game-ui { width: 100%; text-align: center; background-color: rgba(255, 255, 255, 0.9); padding: 10px 0; position: fixed; bottom: 0; } #question { font-size: 22px; margin: 10px 0; } #answer-input { font-size: 18px; padding: 5px; width: 200px; margin: 9px 0; } #submit-btn { width: 100px; height: 100px; background: url(‘https://i0.wp.com/atomic-temporary-232657305.wpcomstaging.com/wp-content/uploads/2024/07/DALL%C2%B7E-2024-07-31-11.41.47-Create-a-3D-round-shaped-Submit-Quiz-button-with-large-bold-text-covering-the-maximum-area-in-the-circle.-The-text-should-be-in-dark-colors-for-str-1.webp?resize=800%2C800&ssl=1’); background-size: cover; border: none; cursor: pointer; } #scoreboard { font-size: 20px; margin-top: 10px; } #restart-btn { margin-top: 10px; font-size: 18px; padding: 10px 20px; background-color: #ff6f61; color: white; border: none; border-radius: 5px; cursor: pointer; } const canvas = document.getElementById(‘gameCanvas’); const ctx = canvas.getContext(‘2d’); // Set canvas size dynamically for better visibility canvas.width = Math.min(window.innerWidth – 40, 800); canvas.height = Math.min(window.innerHeight – 300, 400); const characterImg = new Image(); characterImg.src = ‘https://thelifenavigator.com/wp-content/uploads/2025/01/bb99a-3-boys-with-number-2-0-and-3-.png’; let character = { x: 50, y: canvas.height – 100, width: 80, height: 80 }; let obstacle = { x: canvas.width – 100, y: canvas.height – 80, width: 50, height: 50, color: ‘red’ }; const questionElement = document.getElementById(‘question’); const answerInput = document.getElementById(‘answer-input’); const submitButton = document.getElementById(‘submit-btn’); const scoreboardElement = document.getElementById(‘scoreboard’); let currentQuestion = {}; let score = 0; let wrongAnswers = 0; const operations = [‘+’, ‘-‘, ‘*’, ‘/’]; const generateQuestion = () => { const num1 = Math.floor(Math.random() * 10) + 1; const num2 = Math.floor(Math.random() * 10) + 1; const operation = operations[Math.floor(Math.random() * operations.length)]; let answer; switch (operation) { case ‘+’: answer = num1 + num2; break; case ‘-‘: answer = num1 – num2; break; case ‘*’: answer = num1 * num2; break; case ‘/’: answer = parseFloat((num1 / num2).toFixed(2)); break; } currentQuestion = { num1, num2, operation, answer }; questionElement.textContent = `What is ${num1} ${operation} ${num2}?`; }; const checkAnswer = () => { const playerAnswer = parseFloat(answerInput.value); if (playerAnswer === currentQuestion.answer) { character.x += 50; // Move the character forward score += 10; // Increase score } else { wrongAnswers += 1; // Count wrong answer } scoreboardElement.textContent = `Marks: ${score} | Wrong Answers: ${wrongAnswers}`; answerInput.value = ”; generateQuestion(); }; const drawCharacter = () => { ctx.drawImage(characterImg, character.x, character.y, character.width, character.height); }; const drawObstacle = () => { ctx.fillStyle = obstacle.color; ctx.fillRect(obstacle.x, obstacle.y, obstacle.width, obstacle.height); }; const restartGame = () => { score = 0; wrongAnswers = 0; character.x = 50; generateQuestion(); scoreboardElement.textContent = `Marks: ${score} | Wrong Answers: ${wrongAnswers}`; }; submitButton.addEventListener(‘click’, checkAnswer); const gameLoop = () => { ctx.clearRect(0, 0, canvas.width, canvas.height); drawCharacter(); drawObstacle(); if (character.x + character.width >= canvas.width) { alert(`You Win! Your score: ${score}`); restartGame(); } requestAnimationFrame(gameLoop); }; generateQuestion(); gameLoop();