Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Greg Stager

Classic Tile Puzzle

Recommended Posts

OK - Whew! This was a great challenge for me. I learned a lot and I think it is worth sharing.

I was initially inspired by the post about creating a sortable list. It reminded me of this classic tile puzzle that I am sure most of you have seen.

Of course, the idea is to put all of the tiles in order.

 

I certainly had a few challenges...

  1. Preventing the tiles from overlapping. Obviously, in the real puzzle you don't get to leap frog other tiles. I didn't truly accomplish this but have an acceptable workaround.
  2. Limiting drags to a single tile space at a time. I ended up utilizing the endDrag() to interrupt the dragging after a single snap which is a tile space value.
  3. Getting the "blank space" to move appropriately based on the tile that is being moved.
  4. My personal goal was to keep the code as minimal as possible. I reviewed many of the code pens related to dragging and boundaries and boy, were they complicated. I am very proud to say that I kept this all working in under 30 lines of JavaScript!

 

I call this Phase 1 because my next step will be to track the tiles in such a way that we can launch an animation for the winner.

In the meantime, enjoy this tile puzzle.

 

See the Pen jObOQdg by Arelwynn (@Arelwynn) on CodePen

  • Like 1
Link to post
Share on other sites

Wow! Finally figured this out. Adding the logic to track the tile movement brought me from under 30 lines of code to just under 400.

I suppose I could scrunch it up a bit but nonetheless, it was a lot of extra work. I am pretty sure there is an easier way to do this.

 

Now that I have it complete - I would be interested in any comments on perhaps how I might have made this much more efficient either with GSAP or JavaScript in general. It seems like I did  a lot individual movement logic that could have been wrapped up in a more elegant manner. I don't expect anyone to review it with a magnifying glass unless that sort of thing is as fun for you as figuring out how to make it was for me. Lots of lines there - but a lot of repetition with minor changes too.

 

Challenges I had in Phase II

  1. Figuring out how to tie the movement of a tile or position to a variable without specifically using a named object. I needed to slide a tile and move the blank space regardless of what tile was there to begin with. I needed to use some form of   (this.target)  but it didn't want to work.  A great tip from @Carl and one of his videos about how to change scope helped here.
  2.  Figuring out how to pass a variable - nay, the right variable - from function to function was giving me some headaches.
  3. I had originally started with trying to use an array to store the tile positions but eventually abandoned that. Seems like that could still be a viable option but I was not tapping the right ideas at the right time.

 

So now there is a prize at the end for any who complete it.

Most people here are better at this stuff than I am  - but I am happy to answer any questions about it.

Pretty sure I spent about 24 hours on this project. #professionalDevelopmentIsFun

 

See the Pen PoPqGBL by Arelwynn (@Arelwynn) on CodePen

  • Like 3
Link to post
Share on other sites

Good work! 

 

In response to phase 1:

This instance might be a good use case for using GSAP's global defaults to set the default duration: gsap.defaults({duration: 0.1});

 

In terms of detection of the solution, it's probably best to keep a data representation of the state. You could use nested arrays or just indexes to do that. You probably want to also keep track of the empty space to save on lookup time. 

 

To prevent the jumpiness you could use the knowledge of which space is the empty one and only allow dragging for the spaces next to it in the appropriate direction. It'd be more code but also more realistic. 

 

Thanks for sharing!

Link to post
Share on other sites

In response to phase 2:

If you find yourself repeating the same code and switching out names/variables, that's a good reason to use a function to generalize it to keep your code DRY (don't repeat yourself). I talk about that briefly in my article on writing animation code efficiently.

Link to post
Share on other sites

Thanks for the feedback!

23 minutes ago, ZachSaucier said:

You probably want to also keep track of the empty space to save on lookup time.

Yeah - keeping track of the empty space was what I needed to do but perhaps there was a better way than updating my variable. I started out with the idea of using an array but didn't find the right way to pull it off at the time. Once I landed on something that was working, I just stuck with it.

34 minutes ago, ZachSaucier said:

To prevent the jumpiness you could use the knowledge of which space is the empty one and only allow dragging for the spaces next to it in the appropriate direction. It'd be more code but also more realistic.

I really wanted to do this but couldn't figure out how to prevent dragging all over the place. This is what my original question was about last week regarding boundaries. I didn't want any tiles to overlap but I could not figure out how to only allow movement to the constantly moving empty space.

Link to post
Share on other sites
9 minutes ago, Greg Stager said:

This is what my original question was about last week regarding boundaries. I didn't want any tiles to overlap but I could not figure out how to only allow movement to the constantly moving empty space.

Ya, collision detect is usually the harder way to go. I would likely just create new draggables (or modify or enable/disable old ones) for the relevant ones next to the empty space. 

Link to post
Share on other sites

You might find some useful stuff in this thread.

 

 

I use a 2d array to keep track of where everything is in a grid.

 

See the Pen NrRJwm by osublake (@osublake) on CodePen

 

 

 

  • Like 5
Link to post
Share on other sites
On 4/14/2020 at 3:35 AM, OSUblake said:

You might find some useful stuff in this thread.

 

 

I use a 2d array to keep track of where everything is in a grid.

 

 

hello
how to undraggable one item when is true position?

 

 

 

 

Link to post
Share on other sites

Hey @pouya and welcome to the GreenSock forums. I don't understand your question. I think it would be helpful if you created a new thread along with a minimal demo that shows the issue that you're running into. You can learn more about doing that here:

 

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×