Heart Match Up

by بن طلال

Check out "Heart Match Up" by بن طلال - featuring Canvas API, Sprite Manager, Sprite Store and more. 1.12m views. Try this Snapchat Lens on Easy Lens.

1.12m views

Features

• Canvas API: Procedurally renders the full 2D game UI: card shadows, matched pink glow outlines, the bottom rounded Restart button background with subtle press animation, floating pastel hearts behind the completion message (no background panel/box), and a continuous background layer of tiny glowing hearts behind the entire game UI. Update: add red hearts mixed in with the existing pink background hearts (same heart silhouette, soft glow, clearly readable as hearts).
• Sprite Manager: Displays and manages sprites for the 12 card faces and 12 card backs, aligned to the responsive 3x4 grid, and performs hit testing for taps.
• Sprite Store: Provides textures for the 6 uploaded candy-heart images used as the matching pairs, plus the custom card-back image. Texture names must be exactly: heart_text_me, heart_hug_me, heart_be_mine, heart_love_you, heart_miss_you, heart_kiss_me, card_back_pink.
• Touch Events: Captures touch down/up for card flipping and the Restart button; gameplay input is gated in code to prevent spam during flips and match evaluation.
• Text On Screen: Top-center timer text reading "00.0s" in white bold rounded styling with soft pink glow; counts up once the first card is successfully tapped and stops at completion. Hidden when the completion message is shown to avoid overlap.
• Text On Screen: Bottom-center button label reading "Restart 💞" (white, bold). Keep the text size unchanged and keep it positioned at the exact center of the Canvas-drawn pill button so it sits inside the button during all states, including press animation.
• Text On Screen: Shareable completion message shown only after all pairs are matched: "I finished in {finalTime}s 💘\n{challengeLine}" with white bold rounded text and soft pink glow; positioned directly underneath where the timer appears, centered, and kept above the card grid.
• Sparkles: Subtle sparkle particles enabled only during the completion state, behind the completion message.