H-Puzzle Game

A puzzle game built with HTML5 Canvas and JavaScript that allows players to upload their own images and solve them as puzzles.

Features

• Image Upload: Drag and drop or click to upload any image file
• Multiple Difficulties: Choose from multiple difficulty levels
• Free Movement Area: Move puzzle pieces anywhere on the screen for organization
• Smart Move Counting: Only counts moves when pieces are dropped in the puzzle frame
• Drag & Drop Gameplay: Intuitive piece movement with mouse
• Real-time Timer: Track your solving time
• Move Counter: Count the number of moves made
• Win Detection: Automatic detection when puzzle is complete
• Responsive Design: Works on desktop and mobile devices
• 14 difficulty level, 60 levels

Supporters bonus (itch/patreon)

• Moddable: Easily add new images and levels—just drop them in the folders and run the generator. (supporters version)
• 36 difficulty level, 250 levels
• Patreon Support: Support the game and unlock exclusive content at patreon.com/HornyMonkeyDreamer

How to Play

1. Click on "Play"
2. Choose Difficulty
3. Use your starting gold to buy a level and complete it to earn more gold

or

1. Click on "Create Custom Level"
2. Upload an Image: Click the upload area or drag and drop an image file
   
3. Choose Difficulty: Select the number of puzzle piece to generate (Grid)
4. Check the preview
5. Click on "Create & Play" and enjoy

Game Controls

• Zoom: Zoom in and out with scroll or control bar
• Show: Display the final picture next to the puzzle frame for a certain price
• Pause System: The timer can be paused at any time. While paused, puzzle pieces cannot be moved and a visual overlay is shown.
• Preview Feature: Players can pay gold to temporarily reveal the completed image as a hint.

Puzzle Mechanics

• Free Movement: Pieces can be moved anywhere on the canvas for organization, not just within the puzzle frame.
• Snapping & Swapping: Dragging a piece into the puzzle frame snaps it to the nearest slot. If a slot is already occupied, the pieces swap places.
• Overlapping Pieces Handling: If multiple pieces occupy the same slot, only the correct piece (if present) remains; others are moved out when using the "Move Unplaced" button. If none are correct, all are moved out.
• Move Counting: Moves are only counted when a piece is dropped into the puzzle frame and its position changes.
• Gold & Rewards: Completing puzzles earns gold based on time, moves, and difficulty. Gold can be spent on previews and unlocking new puzzles.
• Accessibility & UX: Keyboard, mouse, and touch controls are supported. UI is bold, readable, and includes theme and sound options. Progress and settings are saved automatically.

Technical Details

Technology Stack

• HTML5 Canvas: For image rendering and puzzle piece display
• Vanilla JavaScript: For game logic and interactivity
• CSS3: For modern styling and animations
• File API: For image upload and processing