Just CSS. Absolutely NO jQuery/javascript or any other programming language.

This is an update to a demonstration I produced back on the 12th January 2012.

Back then all we had to work with was :target which had problems and took a lot of lines of CSS to make it work.

Now in 2022 it has become a lot easier.

The original CSS took 774 lines, but this new version has taken just 140 lines.

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.

1. Green vans can only move to the left and red vans can only move to the right (no reversing).

2. You can click a van to move it to an adjacent space as long as the space is in the direction of travel.

3. You can overtake a van of the same color if there is a space in front of the van you are overtaking.

4. You can pass by an oncoming van if there is a space behind the oncoming van.

The stylesheet for this demonstration is in the page head, but if you use this, please keep my copyright comment with the stylesheet.