CSSPLAY

CSS DEMOS › The Right Move - Puzzle

Date : 12th January 2012

For all modern browsers

This demo is too wide for your mobile screen.
Please view on a tablet or PC.

No more moves - click to try again Congratulations that was The Right Move - click to have another go

Instructions

The object of the puzzle is to move all the green vans to the green house and all the red vans to the red house.

Green vans can only move to the left and red vans can only move to the right (no reversing).
You can click a van to move it to an adjacent space as long as the space is in the direction of travel.
You can overtake a van of the same color if there is a space in front of the van you are overtaking.
You can pass by an oncoming van if there is a space behind the oncoming van.

Information

About a week ago I had an email from 'bob-the-frog' who had taken my Tower of Hanoi demo and used this to produce a frog hopping puzzle which can be seen here frog jump.

Now this and the Tower of Hanoi demo use very early :target orientated styling and a large amount of coding. So, with 'bob-the-frogs's' permission, I have used the frog jump puzzle and converted it into much simpler code and a lot less styling and produced the above version which now has animated moves in Firefox, Chrome, Safar, Opera, iPad, iPhone and iPod Touch (and hopefully in IE10 when it finally arrives).

However, solving the puzzle is not any easier.

I have also added a small jQuery/javascript routine to remove the click history so that the browser back button does not cycle back through the :target clicks. This works in Firefox, Chrome and Safari.

Copyright

Because of all the time and effort spent in producing this demonstration I would ask that you respect my copyright.

1. If you are using this on a personal web site then please retain the copyright comment in the stylesheet.
   A support donation is now required for this demonstration.
2. If you are using this on a commercial web site, or as a paying job for a client, then please email me asking for permission - stu{at}cssplay.co.uk and again a support donation is required.
3. If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced. Please email me for more information.