So basically I made 3 grids:
- The base layer is not needed but is more a tool to map it out but could be used for fun interactions later.
- The path layer is made in the grid as the base layer but only the boxes that will be apart of the correct path.
- The choice layer is made in the same grid as the base layer but only the boxes that could be a choice for the player.
Once you have the grids made then comes the interactions:
- Display hidden all the boxes with hide/show as initial on page load through the class “box”
- Display the first choice box through the page load animation
On click of the correct choice box display hidden that box
Display the “Path Layer” box equivalent to the chosen box
Display the new choice boxes in the choice layer
Move the “Ground” to replicate motion of the “camera”
If the wrong box is chosen call reset animation which moves “Ground” back to original position and re-hides all boxes through the class
On the last correct box choice make some some fancy animations and Show the congrats screen
Hopefully this gives you a better idea