CSS

play

Experiments with Cascading Style Sheets

CSS play - The Right Move - Puzzle

12th January 2012

IE9, IE10, Firefox, Chrome, Safari, Opera, iPad, iPhone and iPod Touch

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.

copyright © stu nicholls - CSS play

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

You may use this method on your personal 'non-profit' web site without seeking my permission. A link back to CSSplay is always appreciated.

Commercial usage is also permitted without seeking approval, but I would ask that a donation is considered to support my work on CSSPlay.

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.

Please ask permission before using or copying this example to your web site.