Fruit Connect | HTML5 (Phaser 3) Game

Fruit Connect is a polished HTML5 “connect & match” tile puzzle built with Phaser 3. Match pairs of identical tiles to clear the board before the timer ends. The project comes with a full playable build, assets, and cleanly separated scenes/UI components.

Gameplay

• Goal: clear all tiles by matching identical pairs.
• Challenge: beat the countdown timer and avoid getting stuck.
• Boosters: hint, shuffle, and wizard to help you finish levels.

Features

• 40 levels with different layouts and board sizes.
• Level select with paging and progress saving (localStorage).
• Timer UI (layout adapts to portrait/landscape).
• Boosters: Hint / Shuffle / Wizard (limited uses, stored with progress).
• Pause, game over, level complete panels.
• Music & SFX toggles (separate controls).
• Responsive portrait + landscape support.

What’s Included

• HTML5 playable build inside the source/ folder.
• Full source code (Phaser scenes, UI sprites, utilities).
• Game assets (sprites atlas, tile sheet, UI images, audio).
• Developer documentation: see source/docs.html.

Run / Setup

Serve the source/ folder using any static web server and open index.html. (Avoid file:// to prevent browser restrictions on audio/asset loading.)

Technical Details

• Engine: Phaser 3
• Renderer: Canvas (Phaser.CANVAS)
• Resolution: 1280×720 (landscape) / 720×1280 (portrait) with FIT scaling
• Browser support: Chrome, Firefox, Safari, Edge + mobile browsers

Monetization / Ads

The gameplay scene contains optional ad flow hooks (e.g. reward for extra actions/time). You can connect your portal SDK by implementing the referenced callbacks (see source/index.html and source/js/scenes/MainScene.js). If you don’t use ads, disable the flow via the provided global flags.

Customization

• Reskin tiles: replace the tile sheet / atlas frames used to build the fruits spritesheet.
• Change audio: replace source/audio/background.mp3 and update source/assets/sounds/all.json / all.mp3.
• Game logic & level flow: edit source/js/scenes/MainScene.js.

Ready to reskin, integrate, and publish.