Javascript, HTML, CSS Code
<html> <head> <script type="text/javascript"> window.addEventListener('error', function(event) { var message = JSON.parse(JSON.stringify(event.message)); var source = event.filename; var lineno = event.lineno; var colno = event.colno; var error = event.error; window.parent.postMessage({ type: 'iframeError', details: { message: message, source: source, lineno: lineno, colno: colno, error: error ? error.stack : '' } }, '*'); }); window.addEventListener('unhandledrejection', function(event) { window.parent.postMessage({ type: 'iframePromiseRejection', details: { reason: event.reason } }, '*'); }); </script> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Fun Math Game for Kids</title> <meta name="description" content="A fun math game for kids to learn addition and subtraction."> <meta name="keywords" content="math, game, kids, addition, subtraction"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <script type="text/javascript"> var localStoragePrefix = "ct-168126786424324"; var lastSave = 0; function saveLocal(data) { // ... } function loadLocal() { // ... } </script> <script type="text/javascript"> function getRandomNum(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; } function generateEquation() { let num1 = getRandomNum(0, 15); let num2 = getRandomNum(0, 15); let operation = getRandomNum(0, 1) === 0 ? "+" : "-"; if (operation === "-" && num1 < num2) { [num1, num2] = [num2, num1]; } return { num1, num2, operation }; } function generateAnswers(correctAnswer) { let answers = [correctAnswer]; while (answers.length < 3) { let randomAnswer = getRandomNum(1, 30); if (!answers.includes(randomAnswer)) { answers.push(randomAnswer); } } return answers.sort(() => Math.random() - 0.5); } function checkCollision($div1, $div2) { const x1 = $div1.offset().left; const y1 = $div1.offset().top; const h1 = $div1.outerHeight(true); const w1 = $div1.outerWidth(true); const b1 = y1 + h1; const r1 = x1 + w1; const x2 = $div2.offset().left; const y2 = $div2.offset().top; const h2 = $div2.outerHeight(true); const w2 = $div2.outerWidth(true); const b2 = y2 + h2; const r2 = x2 + w2; return !(b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2); } function resetGame() { setTimeout(() => { $("#main-container").empty(); startGame(); }, 3000); } function startGame() { const equation = generateEquation(); const correctAnswer = equation.operation === "+" ? equation.num1 + equation.num2 : equation.num1 - equation.num2; const answers = generateAnswers(correctAnswer); const html = ` <div class="equation"> <span class="number">${equation.num1}</span> <span class="operation">${equation.operation}</span> <span class="number">${equation.num2}</span> </div> <div class="answers"> ${answers.map((answer, index) => ` <div class="answer" data-correct="${answer === correctAnswer}"> <span class="answer-text">${answer}</span> </div> `).join("")} </div> <div class="tractor"> 🚜 </div> `; $("#main-container").append(html); $("body").on("keydown", (event) => { const $tractor = $(".tractor"); const currentPosition = $tractor.position(); switch (event.key) { case "ArrowUp": $tractor.css("top", currentPosition.top - 5); break; case "ArrowDown": $tractor.css("top", currentPosition.top + 5); break; case "ArrowLeft": $tractor.css("left", currentPosition.left - 5); break; case "ArrowRight": $tractor.css("left", currentPosition.left + 5); break; } $(".answer").each((index, element) => { if (checkCollision($tractor, $(element))) { if ($(element).data("correct")) { $(element).html("⭐"); $("body").off("keydown"); const audio = new Audio("https://ssl.gstatic.com/dictionary/static/sounds/20180430/cheer--_us_1.mp3"); audio.play(); resetGame(); } else { $(element).html("❌"); } } }); }); } $(document).ready(() => { startGame(); }); </script> <style> body { background: linear-gradient(to top right, #56ccf2, #2f80ed); font-family: 'Comic Sans MS', cursive, sans-serif; overflow: hidden; } #main-container { position: relative; height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; } .equation { display: flex; font-size: 5rem; color: #9b59b6; font-weight: bold; } .number { cursor: default; } .operation { margin: 0 1rem; } .answers { display: flex; justify-content: space-around; width: 100%; padding: 2rem 0; } .answer { font-size: 3rem; width: 200px; height: 200px; display: flex; justify-content: center; align-items: center; position: relative; } .answer-text { cursor: default; } .tractor { font-size: 3rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } </style> <link rel="canonical" href="https://calculator.tools/prompt/305/"> <meta charset="utf-8"> </head> <body> <div id="main-container" class="container"> </div> <script type="text/javascript"> var localStoragePrefix = "ct-{{ cachebreaker }}"; var lastSave = 0; function saveLocal(data) { if (Date.now() - lastSave < 1000) { return; } let cookie = localStoragePrefix + "=" + JSON.stringify(data) + "; path=" + window.location.pathname + "'; SameSite=Strict"; cookie += "; expires=" + new Date(Date.now() + 1000 * 60 * 60 * 24 * 365 * 1000).toUTCString(); document.cookie = cookie; lastSave = Date.now(); } function loadLocal() { var cookiePrefix = localStoragePrefix + "="; var cookieStart = document.cookie.indexOf(cookiePrefix); if (cookieStart > -1) { let cookieEnd = document.cookie.indexOf(";", cookieStart); if (cookieEnd == -1) { cookieEnd = document.cookie.length; } var cookieData = document.cookie.substring(cookieStart + cookiePrefix.length, cookieEnd); return JSON.parse(cookieData); } } </script> <script type="text/javascript"> window.addEventListener('load', function() { var observer = new MutationObserver(function() { window.parent.postMessage({height: document.documentElement.scrollHeight || document.body.scrollHeight},"*"); }); observer.observe(document.body, {attributes: true, childList: true, subtree: true}); window.parent.postMessage({height: document.documentElement.scrollHeight || document.body.scrollHeight},"*"); }); </script> </body> </html>
Fun Math Game for Kids
Calculator Tools