Platforming Game

Early Philosophy

When I first started this project I knew exactly what I wanted to do. I have used object position and timers before my philosophy was to attach a timer to change the position-relative value of an html object.

Controlling Movement

For movement I began researching how I could bind a key to the movement that I wanted. There was one small issue though, how can I modify position relative when it is considered a string when modifying with jQuery? So what I did was turn the current value into an integer, calculate the new coordinates based on the binding pressed and then re-parsed the number into a string with "px" added after to ensure CSS could read the new position.

After some testing I got it to work but it would only move once when I pressed it. I added the timer and set it to update every 20ms. This worked and allowed my square to move fluidly and continuously as long as a key was held down.

‍

Gravity and Collision

With movement out of the way I now needed to focus on gravity, jumping and how I would detect collisions. Now the biggest issue I had with this project was finding the right formula for object collision. It took me a couple hours but the solution I ended on was to detect whether the square's position + it's thickness touches an area inside the object's size.

As for gravity it wasn't too hard, when the player was considered "grounded" it would apply the same amount of force as the gravity but in the opposite direction so that the object would appear to be moving still.

Score and Levels

To wrap it up I added a score system, a game over message, and if a level was passed your position would be changed back to the beginning. The final touch was giving the height of the obstacles a value that incremented over each successful level completed.