Symmetry Puzzle | HTML5 Puzzle Game

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.