Making a jig-saw type puzzle in Hype

Animation
1

I have been asked to try and convert some interactive puzzles from Flash to HTML5 and of course, my first thought was to use Hype. Each puzzle may have up to 20 pieces (some less), where each piece needs to be able to be rotated (in 90 degree increments), and due to the non-symmetrical aspect of the pieces they may need to be flipped over. These elements are easy using Hype. Where I am running into trouble is making sure the user does not ‘drop’ a piece so that it overlaps another piece. If the pieces were pure rectangles, it would be simpler, but unfortunately, the pieces are anything but rectangular.
rounds
The top example is incorrect since the pieces overlap. The bottom example is a valid piece placement. Any advice or suggestions would be greatly appreciated.
ArtB

2

That looks like an interesting collision detection task. May I ask how you were previously doing it in Flash?

3

Unfortunately, I was not the person who created the original Flash version and that person has long since left the scene, taking the knowledge and code with him. I was asked to take a look at the conversion, since I am one of the few people associated with this (very small) company that understands programming.

To see the flash version, the URL is:

http://www.gamepuzzles.com/pparlor/puzzleparlmm.html

Any assistance would be greatly appreciated.

4

Many years ago, I had a Flash puzzle game on my website. If I'm remembering correctly, it was from the book "Macromedia Flash MX Game Design Demystified".

It was a very good book!

I'm actually planning to launch a Jigsaw puzzle with Hype. Heh, well, it's on the list of things to do. I imagine it's going to be a fairly challenging project. Are you in a huge rush to solve this problem?

It seems that your main problem is that you want the shapes to be selectable when the image itself is selected – not an invisible bounding box rectangle – correct?

5

It looks like the board has specific placements, and each piece has attributes on how it affects neighbor placements. I think this is simply a programming-heavy task to determine valid shape placement and puzzle completion.

The Hype v4 beta might help in making shapes though; feel free to sign up for it.

6

The Jigsaw puzzle is finally online...

...it has pieces that can be rotated 90 degrees. To handle the overlap, the piece moves to the top when it is clicked. The pieces also have starting points, so they can snap into place when the player moves the piece to the right location — and piece orientation.

3 Likes
7

Thanks, Photics, but I ended up using a different product (GDevelop) to create my first puzzle. There are some things that GDevelop has built in that would be a pain to emulate in Javascript / Hype:

  • piece collision / overlapping

  • “in tray” vs out of tray, and pieces half in/out of the tray (collision with tray border)

  • multiple graphics states per piece (normal, selected, overlapping, selected and overlapping)

  • the ability to create a group of objects (pieces) and execute a subroutine that loops through each piece in the goup

If you are interested in the final product you can view it on my test site:

http://www.homeonrange.net/puzzles/tenyen

Thanks for keeping me in mind.