Impressum, Datenschutz

Real Jigsaw Puzzle v.2

Welcome to the new version of the Real Jigsaw Puzzle.

The idea was to simulate a real puzzle, with patterns where each tile looks different. Back in 2008 when I worked on the first version in Flash, most software puzzles had very monotone tile shapes.

If you like to support this project, you can do it here:

Playing:

  • Before starting the game, you can select a tile pattern, a background and an image. If you've done that, press "Start Game" to play.
    You can also use the "Randomize" button to let the computer randomly choose them for you. You can also select favourite items (heart symbol), and the random generator will only choose from those (per category).
  • To play, you can use your mouse or a touchscreen (or pen).
  • Tiles can be moved via drag'n'drop.
  • Tiles will merge, if they're close enough to each other
  • You can push a tile into the background by clicking/tapping on it without moving it
  • To multi-select, either double-click/tap on tiles or hold shif while clicking. Then, move one of the selected tiles. The other tiles will follow it like a snake ;)
    To unselect all, just tap one of the selected or any other tile.

Buttons:

  • "Arrange Tiles" will offer all kinds of how the tiles can be re-arranged on the playing fields, like:
    • Size - the default. This will distribute the tiles by size
    • Hue - arranged by the hue (on a color circle,
    • Luminosity - from bright to dark
    • Saturation - from colorful to pale
    • Borders - this will put border-tiles first
    • Middle distance - tiles will be ordered by their distance to the middle of their original position in the puzzle, farthest first. It's a bit similar to "borders", but uses the actual distance.
    • Chaotic - complete random generated positions. Almost as if you opened the box and let all tiles fall on the ground (except here, they're all facing upwards)
    • Solved - puts all tiles in their original position on the pattern. This is considered cheating, but hey, you're free to do what you like.
  • "preview" will show you the image again, filling up the whole area of the puzzle field. So you can get some orientation again.
  • "Start over" rips apart all the tiles and starts again with the current setup
  • "Other puzzle" goes back to the image/pattern/background selection screen
  • "fullscreen" will enter, "exit fullscreen" exit fullscreen
  • "Pause" halts the game and will also stop the clock. This also happens automatically, if you switch to another tab
  • 🔊 will mute or unmute the sound

To start playing, just open the "Puzzle" Section.

History

This project has been going on from 2008 when this was still a Flash Application. For some years there was an experimental version of this puzzle on facebook with daily tournaments for facebook Users to play. Facebook constantly changing the API and the lack of a proper documentation of the latter was getting tiresome at some point and also support for the Flash player was vanishing. So the decision was made to develop an HTML5 version of this puzzle.

Many techniques were used to find the best performing and satisfying "game engine", like SVG, WebGL, Canvas, combinations of some, and THIS one, which works best.

Tools used

Changelog

Order: ⯆

▸ Dienstag, 26. Mai 2020

  • Very small change: If 2 tiles match, the resultig tile won't move afterwards. I found this to be a little bit irritating. I hope this small change will improve the gameplay a lot!
  • Backgrounds have names now
  • Image titles are displayed in puzzle customizer

▸ Donnerstag, 21. Mai 2020

  • Translations now possible
  • Translation to German

▸ Mittwoch, 20. Mai 2020

  • Small bugfixes (mobile usage)

▸ Montag, 11. Mai 2020

  • Restore selection when lost
  • When dragging selection, tiles get ordered by position

▸ Sonntag, 10. Mai 2020

  • New images
  • New dynamic urls for each puzzle

▸ Sonntag, 3. Mai 2020

  • nasty bug that corrupted savegames on portrait mode images hopefully now fixed.
  • Save / Load now to DISK 💾. This actually means you can do multiple puzzles simultaneously and just load the one you like to finish. You can also send saved puzzle files to other people or open them on different browsers.
  • Slightly re-design of puzzle boxes
  • 5 new Images!
  • Settings / mouseover color selection now less stupid
  • Small design changes here and there

▸ Samstag, 2. Mai 2020

  • Big internal re-structuring of event flows, sub-modules, etc.

▸ Mittwoch, 29. April 2020

  • Added 3d Puzzle Box selection. This is so much easier for a quick start and new players!

▸ Donnerstag, 23. April 2020

  • New pattern: Big Circle. Almost 1000 tiles!
  • Regarding the pattern above, have fun with NASA's planet photos photos :)

▸ Montag, 20. April 2020

  • Fixed multiselect highlight bug.
  • New images!

▸ Samstag, 18. April 2020

  • Sharper tiles! I noticed, especially with smaller tiles, that they were sometimes quite not really sharp. Well I did the "mistake" of not projecting the image portion with rounded numbers, because coordinates like 0.4, 0.3 will try to interpolate all the pixels so they really look like they sit on exactly that coordinate, which, without all the nerdiness just means: blurry texture on some tiles. This should be gone now :) ...although this text was much more than the acual change from
    ctx.drawImage(this.image, -bbox.x, -bbox.y)
    to: 
    ctx.drawImage(this.image, Math.floor(-bbox.x), Math.floor(-bbox.y))
    also, this might make tile creation faster on some systems, because the interpolation can take up some time (although mostly not that noticeable).

▸ Montag, 13. April 2020

  • Multiselect!. Finally. To multi-select, either double-click/tap on tiles or hold shif while clicking. Then, move one of the selected tiles. The other tiles will follow it like a snake ;)
    To unselect all, just tap one of the selected or any other tile.
  • Moved some stuff into "game" menu, because of ∫ρ⋀C∈. Now there also is a direct, active "Save Game" and "Load Game" button. Hopefully makes this more transparent.
  • More visual noise & mess, yes I know. Now every image, background and pattern will get a "✔" if you have already used it in a game. So you get an overview about which images you didn't yet played (well, until now, of course).
  • Bugfixes:
    • Fullscreen change state got lost (no "exit fullscreen" option)
    • beforeUnload didn't fire (so some games wouldn't get autosaved then when closing the browser window)
    • visibilitychange didn't fire, so no auto-pause when changing to another tab
    • Not really a "bug", rather a misbehaviour fixed: Finally you now can drag'n'drop while dragging a tile without the tile getting horribly displaced. It will now stay in place when simultaneously zooming and moving a tile.

▸ Freitag, 10. April 2020

  • New Arrange tile mode "Random". This is also the initial mode now. Like all the other "evenly distributed" modes, just sorted by random at first.
  • New tilesets! "Hexa2Huge" and "Hexa2Big"

▸ Sonntag, 5. April 2020

  • Tags for puzzle selection, lets you filter by category. Those selections are remembered.
  • More Photos!

▸ Montag, 30. März 2020

  • New tile set "cairo". Great. Huge. The best ever made.
  • Mouseover highlight for tiles more configurable ("auto", select color, or none)

▸ Sonntag, 29. März 2020

  • Puzzle state now gets saved when leaving the page, offering you to "Continue" when returning. This is all stored in localStorage (=in your browser). This was quite tricky, but seems to work now.
  • When putting some "async" in the Pattern-Previews (Tilesets), it now shows them as a build-up animation. Actually the goal was just that they shouldn't block the browser when getting painted. Looks nicer than expected.
  • Changed some async loops to be more adaptive to the current browser's performance
  • Yay, some new images!

▸ Samstag, 28. März 2020

  • There was some memory "wasting" going on, which I hopefully ended mostly. Especially not throwing away un-needed Canvases (thus stressing GPU memory the most). That could easily crash a mobile device.
  • New setting: Mouseover highlight tile (greenish). This will give you a hint if you're hovering the actual tile you want to grab. The mouseover effect will dissapear when dragging, so you can better find the matching edge. On touch devices, this will not be applied, because on touch devices, there is no hovering.

▸ Donnerstag, 26. März 2020

  • Use WebAudio API for sound, where available. I hope the sounds will come much more immediate, creating a better experience
  • As always, internal optimizations
  • Changed the modus operandi for tileStyle "outline". This is now actual fun, not just crazy. If you match 2 outline tiles, they'll become filled tiles! So in the end, you still have a nice image.
  • Mobile zoom was STILL quite iffy due to old relics when this puzzle was one big Javascript File
  • Settings! Yay. 4 Tile drawing modes. Match tolerance. Easings for animations.

▸ Mittwoch, 25. März 2020

  • "jump" buttons to go to tilesets(patterns), backgrounds and images faster, especially in mobile view
  • First 3 Tile sets polished, they look much nicer now. Also there was a "bug" in the 2nd, some kind of "micro-tile" that prevented you from finally solving this one.

▸ Dienstag, 24. März 2020

  • Better mobile zoom
  • New background image preview
  • New backgrounds
  • New pattern "hearts"

▸ Donnerstag, 19. März 2020

  • Again optimizations in the tile arrangement code
  • Update of game instructions
  • More styling for mobile, also for smartphone in landscape mode (buttons will then be on the left side)
  • Selecting the puzzle: Now there is a "Start" button, that let's you start, when all necessary items are selected.

▸ Mittwoch, 18. März 2020

  • Favourites & randomize available for all images, patterns & backgrounds. You can now select your favourite patterns or images, not only for more oversight, but also so the random generator knows your preferences. These favourites will be stored in your browser's localStorage.
  • "new" badges for new additions. So you know what to try out next.
  • Game Log. Here you have an overview about all the games you played so far. Also stored in the localStorage, but you can clear it any time.

▸ Sonntag, 15. März 2020

  • New, sortable and expandable changelog (sorted ascending by default)
  • Portrait format Puzzles! Sounds super simple, but the challenge was to rotate just the pattern by 90° before applying it (without recalculating all the path data), so that the tiles won't look terribly distorted. So all the tile coordinates get flipped (x=y, y=x, width=height, height=width) and then the shapes are just transformed on the fly, by a simple "rotate(-Math.PI*0.5) and a scale(-1,1)"
    Why portrait format? It aimes for tablet and smartphone usage, as they're often used in portrait modes. And it would be nice to have some images that are actually in that handy format.
  • With portrait format puzzle of course come portrait images ;)
  • Pause mode!
    Not wanting to ruin your play time, but also want to go to pee or get some coffee or you get interrupted? No problem, now you can pause the game. And if you switch to another tab or window, the game even automatically pauses itself. So you won't lose valuable time. Since now, the time is not stored anyway, but when finishing the game, you might still want to know how fast you were.

▸ Freitag, 13. März 2020

  • Start background image is now random
  • Hopefully better Pattern, Background & Image chooser. I didn't really like the scrollbars. Still don't completely like it, but I think it's a bit better now.
  • Slightly smaller puzzle pattern file format, should be more gzip-friendly. (About 10%)
  • More Photos!
  • Pattern "Chaos3"

▸ Donnerstag, 12. März 2020

  • Don't use shadow style via css anymore when dragging tile, re-rendering tile might be faster and avoid "pick-up lag"
  • We now have a "status panel" showing us loading and processing of creating the tiles
  • As we're at it, creating the tiles now happens asynchronously, it's not blocking the browser anymore so much and letting you witness the progress (via the nice panel mentioned above)
  • More use of the event system rather than räudige callbacks
  • Leaving the puzzle page now has a nicer confirm window
  • Moving the tiles is now refreshed at browser's framerate instead of move event firing rate. That should also make things less jaggy. Like, the program is politely asking for another frame instead of bombarding it with transform updates that won't do anyhting than clogging the pipeline

▸ Mittwoch, 11. März 2020

  • New pattern "amoeba" with 390 tiles

▸ Dienstag, 10. März 2020

  • Super huge performance improvements
  • Found a "paired" tile in "warpedclassic" pattern and disjoined that siamese twin of a puzzle piece

▸ Montag, 9. März 2020

  • Small optimizations in binpacking (arrange tiles)
  • New arrange mode: borders
  • New arrange mode: middledistance - how far from the middle?
  • Icons for arrange-buttons
  • lots of invisible internal stuff
  • After lots of experiments a new classic pattern: warpedclassic. almost 400 tiles! (397) enjoy :)
  • Set "snap-sensitivity" from 7 to 10 pixels

▸ Samstag, 7. März 2020

  • More Pictures!
  • Arrange tiles also by: Hue, Lightness & Saturation
  • New confirmation panel

▸ Freitag, 6. März 2020

  • Better preview
  • Renamed backgrounds (some had problematic characters in file name)
  • Lazy loading on preview images

▸ Mittwoch, 4. März 2020

  • Added different background textures (thanks to http://www.texturise.club)
  • Background texture can also be selected, but this is optional. Selecting an image and a pattern will right away start the puzzle
  • Added Preview button to see whole image
  • Internal re-ordering and cleanup like the Components ItemSelect and Button, moved Timer Component up a folder, etc.

▸ Montag, 2. März 2020

  • Moved the puzzle to to nuxt.js.
  • Enabled image selection per query param
  • Fancier Start page
  • Nicer pattern previews

©2020 Nina Cording