Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


Welcome to the jumpinjellyfish readme!




jumpinjellyfish is strategy game that also requires skilled timing. The goal is for the player to reach the lady friend on the platform on the right side of the screen. Each board starts with the player on a small platform on the left side of the screen. There are flying jellyfish objects that move in straight lines or circles (or are stationary) in the empty space between the start and end platforms. To complete a level, the player must use the jellyfish as jumping points to bounce off of to reach the goal. A player may click on the jellyfish to stop them until unclicked, which will allow the player to 'set' the board.

How it works

I used vanilla JavaScript with canvas for my game. The game is centered around collision detection, which was a bit of a challenge, since the objects are animated. Each object had a unique size at any given time using its current velocity, so there were a lot of specifics based on what the hero and jellyfish looked like at the moment of collision. Another tough but fun challenge was getting the jellyfish to freeze on being clicked, which was tough because they are not technically objects, they are a part of the canvas object. I did this using an event listener for click and recognizing (through a debugger) that each event actually has a pageX and pageY location, which I was able to match up with the jellyfish's location similarly to the collision detection with the hero:

canvas.addEventListener('mousedown', function(event) {
  const x = event.pageX - canvasLeft;
  const y = event.pageY - canvasTop;
  clickpos = [x,y];
  canvas.addEventListener('mouseup', function() {
    clickpos = [1000, 1000];
  }, false);
}, false);

if (clickpos[0] > this.pos[0] && clickpos[0] < this.pos[0] + this.width + 60 &&
  clickpos[1] > this.pos[1] - 5 && clickpos[1] < this.pos[1] + 60
) {
  this.isClicked = true;
  this.color = '#f80aff'; ...


I intentionally designed the levels to have increasing difficulty, and the second to last level suggests clicking the jellyfish but it isn't essential to complete the level. The final level however is very difficult and requires clicking and planning.


I was able to have the user press enter after completing a level which would start the next level. I accomplished this by having the levels be in an array and the animate function is constantly drawing the level, but by pressing enter once the level completed modal pops up would call shift on the levels array.


No description, website, or topics provided.






No releases published


No packages published