Ball Escape Game - Copy this React, Tailwind Component to your project
<!DOCTYPE-html>-<html-lang="en">-<head>-<meta-charset="UTF-8">-<meta-name="viewport"-content="width=device-width,-initial-scale=1.0">-<title>Controlled-Ball-Escape</title>-<style>-body-{-margin:-0;-overflow:-hidden;-display:-flex;-justify-content:-center;-align-items:-center;-background:-#121212;-height:-100vh;-}-canvas-{-display:-block;-}-</style>-</head>-<body>-<canvas-id="gameCanvas"></canvas>-<script>-const-canvas-=-document.getElementById("gameCanvas");-const-ctx-=-canvas.getContext("2d");-canvas.width-=-window.innerWidth;-canvas.height-=-window.innerHeight;-const-centerX-=-canvas.width-/-2;-const-centerY-=-canvas.height-/-2;-const-circleRadius-=-200;-const-gapAngle-=-Math.PI-/-6;-//-Gap-size-in-radians-const-ballRadius-=-10;-const-circleLineWidth-=-10;-const-gravity-=-0.1;-//-Gravity-pulling-the-ball-downward-const-friction-=-0.99;-//-Friction-applied-to-ball's-movement-(slows-down-over-time)-let-balls-=-[-{-x:-centerX,-y:-centerY,-dx:-randomVelocity(),-dy:-randomVelocity(),-color:-randomColor(),-escaped:-false-//-Track-if-this-ball-has-escaped-},-];-let-circleRotation-=-0;-//-Angle-of-rotation-for-the-circle-//-Helper:-Generate-a-random-velocity-(random-direction-and-speed)-function-randomVelocity()-{-return-(Math.random()-*-4---2);-//-Random-velocity-between--2-and-2-}-//-Helper:-Generate-a-random-color-function-randomColor()-{-const-r-=-Math.floor(Math.random()-*-256);-const-g-=-Math.floor(Math.random()-*-256);-const-b-=-Math.floor(Math.random()-*-256);-return-rgb(${r},-${g},-${b});-}-//-Draw-the-rotating-circle-with-a-gap-function-drawRotatingCircle()-{-ctx.save();-ctx.translate(centerX,-centerY);-ctx.rotate(circleRotation);-ctx.beginPath();-ctx.arc(-0,-0,-circleRadius,-gapAngle-/-2,-2-*-Math.PI---gapAngle-/-2-);-ctx.lineWidth-=-circleLineWidth;-ctx.strokeStyle-=-"white";-ctx.stroke();-ctx.restore();-}-//-Draw-a-single-ball-function-drawBall(ball)-{-ctx.beginPath();-ctx.arc(ball.x,-ball.y,-ballRadius,-0,-Math.PI-*-2);-ctx.fillStyle-=-ball.color;-ctx.fill();-}-//-Update-a-single-ball's-position-and-handle-escape-logic-function-updateBall(ball,-index)-{-ball.dy-+=-gravity;-//-Apply-gravity-to-the-vertical-velocity-(dy)-ball.x-+=-ball.dx;-ball.y-+=-ball.dy;-//-Apply-friction-to-slow-down-the-ball's-movement-over-time-ball.dx-*=-friction;-ball.dy-*=-friction;-//-Calculate-distance-from-the-center-of-the-circle-const-distX-=-ball.x---centerX;-const-distY-=-ball.y---centerY;-const-distFromCenter-=-Math.sqrt(distX-**-2-+-distY-**-2);-//-Check-if-the-ball-has-reached-or-exceeded-the-circle's-boundary-if-(distFromCenter->=-circleRadius---ballRadius---circleLineWidth-/-2)-{-const-angle-=-Math.atan2(distY,-distX)---circleRotation;-const-normalizedAngle-=-(angle-+-Math.PI-*-2)-%-(Math.PI-*-2);-if-(-normalizedAngle->-gapAngle-/-2-&&-normalizedAngle-<-2-*-Math.PI---gapAngle-/-2-&&-!ball.escaped-//-Ensure-the-ball-hasn't-already-escaped-)-{-//-Ball-escapes-through-the-gap-ball.escaped-=-true;-//-Mark-the-ball-as-escaped-spawnNewBalls();-//-Spawn-two-new-balls-at-the-center-balls.splice(index,-1);-//-Remove-the-escaped-ball-}-else-{-//-Reflect-the-ball-(bounce-back-inside)-const-normalAngle-=-Math.atan2(distY,-distX);-const-normalDx-=-Math.cos(normalAngle);-const-normalDy-=-Math.sin(normalAngle);-const-dotProduct-=-ball.dx-*-normalDx-+-ball.dy-*-normalDy;-ball.dx--=-2-*-dotProduct-*-normalDx;-ball.dy--=-2-*-dotProduct-*-normalDy;-}-}-}-//-Spawn-two-new-balls-at-the-center-with-random-directions-function-spawnNewBalls()-{-for-(let-i-=-0;-i-<-2;-i++)-{-balls.push({-x:-centerX,-y:-centerY,-dx:-randomVelocity(),-dy:-randomVelocity(),-color:-randomColor(),-escaped:-false-//-New-balls-are-not-escaped-yet-});-}-}-//-Main-animation-loop-function-animate()-{-ctx.clearRect(0,-0,-canvas.width,-canvas.height);-drawRotatingCircle();-balls.forEach((ball,-index)-=>-{-drawBall(ball);-updateBall(ball,-index);-});-circleRotation-+=-0.02;-//-Faster-rotation-to-make-the-game-more-dynamic-requestAnimationFrame(animate);-}-animate();-//-Start-the-animation-</script>-</body>-</html>-This-code-should-meet-my-requirements-1.there-will-be-circle-with-escaping-gap-2.one-ball-will-bounce-according-to-bouncing-Physics-and-gravitational-forces-3.if-the-ball-escapes-the-circle-from-the-escaping-gap-of-the-circle-only-then-two-new-balls-will-be-spawned
