Symmetry Puzzle | HTML5 Puzzle Game

Symmetry Puzzle is a polished HTML5 logic puzzle game where players reflect geometric shapes across edges to match the target pattern. The game combines simple controls with increasingly challenging shape-building puzzles, making it suitable for casual puzzle players and mobile-friendly web game portals.

Game Features

Unique reflection-based puzzle gameplay
33 handcrafted levels
Basic Reflection and Vanishing Tiles level types
Target shape and interactive play board
Limited-move puzzle structure
Hint system
Undo and restart options
Level select screen with locked/unlocked progress
Tutorial flow for new players
Responsive layout for desktop and mobile devices
Touch and mouse controls
Animated start screen and animated background
Win, fail, and unlock feedback effects
Background music and generated sound effects
Local progress saving using browser localStorage

Included Files

Complete HTML5 game source
Readable JavaScript source code
CSS styles and theme customization
Local font file
Background audio file
Documentation file

Technical Requirements

No server required
No database required
No Node.js or NPM build process required
Runs directly in modern browsers
Recommended browsers: Chrome, Firefox, Safari, Edge, and Opera
Built with HTML5, CSS, JavaScript, and Canvas

Customization

Change game title and start screen text in index.html
Change theme colors, UI colors, and start screen styles in css/app.css
Change board shape colors using CSS variables and the canvas theme color helper
Edit levels and puzzle data in js/app.js
Replace background music in assets/audio/bg.ogg

Controls

Click or tap a shape edge to reflect/fold the shape
Drag across pieces to select multiple shapes
Use Undo to reverse the last move
Use Restart to replay the current level
Use Hint when available

Notes

The main source code is located in js/app.js. It is clean, readable, and not minified. The project is ready to upload to a standard web hosting environment.