Patch and Pop | HTML5 Match3 Puzzle Game

Patch & Pop – HTML5 Match-3 Puzzle Game

Patch & Pop is a cozy match-3 puzzle game featuring soft felt pieces, woven fabric textures, stitched interface details, and playful animations.

Enjoy 30 carefully designed levels, race against the clock in timed challenges, or chase your personal best in Endless mode.

Built with HTML5, CSS, JavaScript, and Phaser, the game includes ready-to-use website files and complete editable source code. Use it as-is, customize the settings, or create a completely new theme with your own artwork.

How to Play

• Swap adjacent patches to match three or more of the same type.
• Match four patches in a straight line to create a Stitch Line that clears an entire row or column.
• Create an L-shaped or T-shaped match to trigger a Button Burst that clears a 3 × 3 area.
• Match five patches in a straight line to create a Rainbow Spool. Swap it with a patch to clear every piece of that color.
• Combine special powers to create bigger effects and earn higher scores.
• Complete objectives within the move limit, beat the timer, or keep playing to achieve a higher Endless score.

Game Features

• Three Game Modes: Move-limited levels, timed challenges, and Endless mode for chasing personal bests.
• 30 Designed Levels: Complete collection, score, and fabric-clearing objectives.
• Distinctive Fabric Theme: Soft felt pieces, woven textures, stitched panels, and coordinated interface details.
• Special Powers & Combinations: Directional Stitch Lines, L/T Button Bursts, and color-clearing Rainbow Spools.
• Animated Game Pieces: Idle rocking, smooth falling, and springy landing animations.
• Fabric-Inspired Effects: Colored fabric offcuts, peeling fabric layers, and colorful thread connections.
• Combo Rewards: Build match chains to earn score multipliers and trigger increasingly rich match sounds.
• Music & Sound Controls: Separate background music and sound effect settings, plus a gentle-motion option.
• Local Progress Saving: Remembers progress, stars, preferences, and personal bests in the player’s browser.
• Multiple Input Options: Supports touch, mouse, and keyboard controls.
• Responsive Layout: Adapts to mobile, tablet, and desktop screens in both portrait and landscape orientations.
• Mobile Screen Fit: Menu and gameplay fit within the visible phone screen without page scrolling, with the puzzle board centered.
• Easy Customization: Change branding, colors, text, audio, and gameplay settings through a central configuration file.
• Easy Reskinning: Replaceable artwork, including the logo, is organized in a dedicated skin folder.
• Readable Source Code: Edit the game directly without a preparation or compilation step.
• Clear Documentation: Includes step-by-step instructions for replacing artwork, editing levels, customizing the game, and publishing it.

Technical Requirements

• A modern web browser is required to play. Internet Explorer is not supported.
• The source code uses HTML, CSS, and JavaScript with the included Phaser framework.
• A standard code editor can be used to edit and customize the source files.
• No build step, Node.js installation, or asset-preparation tool is required.
• Upload the Game folder to standard static website hosting and access it through HTTP or HTTPS.
• The framework, fonts, and artwork are included locally. No CDN connection is required.

Items Included

• Ready-to-use HTML5 game files.
• Complete editable HTML, CSS, and JavaScript source code.
• 30 level definitions.
• Felt patch artwork, game logo, interface graphics, and visual effect assets.
• Central customization configuration file.
• HTML documentation covering installation, customization, reskinning, and hosting.
• Bundled Phaser runtime, local font, and required license notices.

Support

If you need help with customization or encounter a problem, feel free to send me a message or leave a comment. I’ll be happy to assist and will reply as quickly as possible.

Need More Features?

I’m available for hire! Contact me with your requirements for custom branding, additional features, or a complete reskin tailored to your project.