Infinite Stairmaster

How the game is supposed to look. But my branch (nico) didn't have a working reset button so we had to use a previous version.
The current version being used because it has a working reset button.

CONTROLS

SPACE to go up CTRL to spin around

Inspiration

The game is a remake of a custom game that I made in Overwatch. It gained popularity in Overwatch so I decided to make it outside of Overwatch so more people could play it.

What it does

You play as a frog jumping from lily pad to lily pad with limited controls. SPACE will jump you forward once in the direction you're facing. CTRL will flip you around to face the other direction and jump you up once.

How we built it

This game is built entirely using HTML/CSS and Vanilla JavaScript. The core foundation of the game is built around CSS grid. All platforms, the player, and their positions revolve around the grid. We made a simple platform generator that will move a platform that reaches the bottom to the top, to another random position. This "random" position will either be the left or right grid cell of the previous platform to avoid any big jumps that our frog cannot make.

Challenges we ran into

When checking to see if our frog landed in a valid grid cell, we ran into a problem. You cant directly select a CSS grid cell, like an element, and we were too far along in development to put a div within each cell. Instead, we created a queue, implemented with a linked list, that tracks if the platforms are on the left or right of the platform before it. We can then compare this value (left or right) with the direction the player is facing (left or right) to validate if the player has made a legal move.

Accomplishments that we're proud of

We are happy with how the game looks and feels, but most importantly, we are happy it is playable. There are still some things we would like to update and change, but that will be done soon after.