Go back to homepage

Gaming

JOEY JUMPS's cover image

OVERVIEW

A platformer game for fun and lols.

FEATURES

  • No libraries used. No gimmicks. Just plain old HTML, CSS and JS.
  • Amazing sprite animations.

PROBLEM

Challenged myself to make a platformer game without using any game engine, any frameworks or html canvas. Just plain old html, css and javascript.

SOLUTION

Achieved this by using html divs for the character sprite and the shooting blast. For the running and jumping of the sprite, css animations were used. Shooting blast divs were randomly generated at random intervals of time and appended to the document. Then calculated if the character and the blast intersects (which means the character dies) by using the getBoundingClientRect method, which returns a DOMRect object providing information about the size of an element and its position relative to the viewport.

TECH STACK

Frontend:

  • HTML
  • CSS
  • Javascript

SCREENSHOT

JOEY JUMPS's 1 screenshot