Frog Feeding Arcade Game: Create a standalone HTML file containing CSS and JavaScript to generate a Frog-eats-Fly arcade game based on Canvas.

Frog Feeding Arcade Game: Create a standalone HTML file containing CSS and JavaScript to generate a Frog-eats-Fly arcade game based on Canvas.
The game must display the following core modules through keyboard control and a game loop:
Canvas Rendering System: Use HTML5 Canvas as the primary rendering surface, drawing basic shapes such as the frog (player) and flies (targets) using methods like fillRect.
Object-Oriented Design: Define game objects (e.g., Frog, Fly) using JavaScript classes or constructor functions, encapsulating properties such as position, velocity, state, and drawing methods.
Game Loop & State Management: Utilize requestAnimationFrame to implement a smooth main game loop that updates object positions, detects collisions, and redraws the scene. Manage global states such as score and lives.
Keyboard Interaction & Collision Detection: Listen for left and right arrow key events to control the frog's horizontal movement. Implement simple rectangular bounding box collision detection to determine if the frog has eaten a fly, updating the score or lives accordingly.
Core Game Logic: Flies spawn at random positions at the top of the canvas and fall downwards. The player must control the frog to catch them. The score increases for each fly caught, while lives decrease if a fly is missed. The game ends when lives are depleted.
The interface should adopt a minimalist Canvas graphics style, with all code consolidated into a single file. JavaScript should focus on object management, physics simulation, and event response to achieve a lightweight feeding challenge experience.