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 Cup and Ball Game</title> <meta name="description" content="A fun version of the classic cup and ball game using HTML canvas. Playable on both desktop and mobile devices."> <meta name="keywords" content="cup and ball, game, HTML canvas, desktop, mobile"> <link href="https://fonts.googleapis.com/css?family=Pacifico|Permanent+Marker&display=swap" rel="stylesheet"> <script type="text/javascript"> var localStoragePrefix = "ct-168119015396677"; var lastSave = 0; // save to localstorage function saveLocal(data) { if (Date.now() - lastSave < 1000) { return; } // save to cookie 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(); } // load from localstorage 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"> // App Javascript Goes Here let canvas, ctx, cup, ball, ballRadius, cupWidth, cupHeight, mouseX, mouseY, touchX, touchY, score; function init() { canvas = document.getElementById("gameCanvas"); ctx = canvas.getContext("2d"); canvas.width = window.innerWidth * 0.8; canvas.height = window.innerHeight * 0.8; ballRadius = canvas.width * 0.03; cupWidth = canvas.width * 0.15; cupHeight = canvas.height * 0.15; cup = { x: (canvas.width - cupWidth) / 2, y: canvas.height - cupHeight }; ball = { x: Math.random() * (canvas.width - ballRadius), y: 0, speed: 3, caught: false }; score = 0; canvas.addEventListener("mousemove", mouseMoveHandler, false); canvas.addEventListener("touchmove", touchMoveHandler, false); setInterval(draw, 10); } function mouseMoveHandler(e) { mouseX = e.clientX - canvas.offsetLeft; mouseY = e.clientY - canvas.offsetTop; if (mouseY > canvas.height * 0.7) { cup.x = mouseX - cupWidth / 2; } } function touchMoveHandler(e) { e.preventDefault(); touchX = e.touches[0].clientX - canvas.offsetLeft; touchY = e.touches[0].clientY - canvas.offsetTop; if (touchY > canvas.height * 0.7) { cup.x = touchX - cupWidth / 2; } } function ballInCup() { return ball.x > cup.x && ball.x < cup.x + cupWidth && ball.y + ballRadius > cup.y && ball.y < cup.y + cupHeight; } function drawBall() { ctx.beginPath(); ctx.arc(ball.x, ball.y, ballRadius, 0, Math.PI * 2); ctx.fillStyle = "#32CD32"; ctx.fill(); ctx.closePath(); } function drawCup() { ctx.beginPath(); ctx.rect(cup.x, cup.y, cupWidth, cupHeight); ctx.fillStyle = "#FF8C00"; ctx.fill(); ctx.closePath(); } function drawScore() { ctx.font = "22px 'Pacifico', cursive"; ctx.fillStyle = "#000"; ctx.fillText("Score: " + score, 10, 30); } function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); drawBall(); drawCup(); drawScore(); if (!ball.caught) { ball.y += ball.speed; } else { ball.y -= ball.speed; } if (ball.y + ballRadius >= canvas.height - cupHeight && ballInCup()) { ball.caught = true; score++; } if (ball.y <= 0) { ball.caught = false; ball.x = Math.random() * (canvas.width - ballRadius); } } </script> <style> /* App CSS Goes Here */ body { font-family: 'Permanent Marker', cursive; background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } #main-container { text-align: center; } #gameCanvas { border: 5px solid #000; border-radius: 10px; } </style> <link rel="canonical" href="https://calculator.tools/prompt/220/"> <meta charset="utf-8"> </head> <body onload="init()"> <div id="main-container" class="container"> <!-- App HTML Goes Here --> <h1>🎉 Fun Cup and Ball Game 🎉</h1> <p>Move the cup to catch the ball! Play with your mouse or touch!</p> <canvas id="gameCanvas"></canvas> </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 Cup and Ball Game
Calculator Tools