How I Created My Version of Doodle Jump in HTML5

I’ll try to take you through my process of re-creating the famous Doodle Jump (which was originally released for mobile platforms) in HTML5 from scratch. The entire write up might help you with creating your own games from scratch!


A few months back, I started experimenting with HTML5 canvas (one of the most awesome part of HTML5 that lets you draw anything). Using Canvas you can create simple to complex animations and even games! Along my learning process, I ended up producing some cool experiments. Some of them include Ping Pong Game, Snake Game and my recent HTML Doodle Jump Game.

The Graphics

Before creating any game, I think about the graphics first. For Doodle Jump, I decided to create graphics similar to the original game. So, I took my notebook and started drawing some doodles until I got it perfect (Yes, I suck at sketching :P). After scanning the image, I put some colors in it using Photoshop with the help of brush tool. These are the finished graphics in action.

You might have noticed that my coloring looks like if its been done using crayons. But, it was all done in Photoshop using a 75% opaque brush and with the help of burn and dodge tool. It all came along nice and clean. So I also made some quick springs, platforms and player states (jumping, left facing, right facing etc).

The Logic

After, the graphics were done, it was the time to think about the logic that would actually make the game work. The first few things that I focused upon were:

  • Make the player jump as soon as it touches the platform while falling down.
  • Acceleration based movements to make the controls fun.
  • Custom physics including gravity and collisions.

These were easy and implemented using some quick if...else conditional statements. Here’s an example of how I performed the jump on collision with the platforms.

platforms.forEach(function(p, i) {
	if (player.vy > 0 &&
			p.state === 0 &&
			(player.x < p.x + p.width) &&
        (player.x + player.width > p.x) &&
			(player.y + player.height > p.y) &&
			(player.y + player.height < p.y + p.height)) {

		if (p.type == 3 && p.flag === 0) {
			p.flag = 1;
			jumpCount = 0;
			return;
		}

		else if (p.type == 4 && p.state === 0) {
			player.jump();
			p.state = 1;
		}

		else if (p.flag == 1) return;

		else {
			player.jump();
		}
	}
});

Explanation: In the snippet above, I compared the attributes of player with the attributes of platform to detect when the player is just touching the platform. Here, x and y are the coordinates of the player and platforms starting from top left. The 3rd and 4th conditions compares the x-position of the player with the platform while the 5th and 6th conditions compare the y-positions of both. If all of them are true, then check whether the platform is “jumpable” and make the player jump if that’s also true. Also, the 1st condition is responsible for checking whether the player is falling down or going up, because we don’t to make the player jump if it collides with the platform when he’s going up.

After doing this easy stuff, it was time to code the main logic behind the game, i.e., scrolling platforms as the player jumps which was quite tricky. If you notice the actual game, the platforms only scroll down as the player reaches mid screen. Also, the player stops after reaching mid screen until its speed becomes positive again under the action of gravity.

So, what I did was transfer the inverted speed of the player to platforms when it reaches the middle of the screen vertically and keep it there until the speed becomes zero. After that, return the speed to the player and repeat. It sounds hard but it was done easily, here’s the code responsible for this part.

platforms.forEach(function(p, i) {

	if (player.vy < 0) {
 		p.y -= player.vy;
 	}
 	 	if (p.y > height) {
		platforms[i] = new Platform();
		platforms[i].y = p.y - height;
	}

});

player.vy += gravity;

if (player.vy >= 0) {
	player.y += player.vy;
	player.vy += gravity;
}

Also note that I am using a limited sized array for platforms to keep the performance and fps good. Lines 7-10 are used to create a new platform at the place of a previous platform as soon as it moves out of the view to keep recycling the array.

Now, it was time to implement scores and levels. The scoring was easy, just increment the score as the platforms move downwards like in the original game. But the leveling was a bit hard. I spent hours thinking how to make sure that specific type of platforms would show as the score increases and then the concept of probability striked my head. So my next question was, is it possible to implement probability practically in canvas? The answer seemed to be yes. Check out the following piece of code:

// Platform types
// 1: Normal
// 2: Moving
// 3: Breakable (Go through)
// 4: Vanishable

if (score >= 5000)
   this.types = [2, 3, 3, 3, 4, 4, 4, 4];

else if (score >= 2000 && score < 5000)
     this.types = [2, 2, 2, 3, 3, 3, 3, 4, 4, 4, 4];

else if (score >= 1000 && score < 2000)
     this.types = [2, 2, 2, 3, 3, 3, 3, 3];

else if (score >= 500 && score < 1000)
     this.types = [1, 1, 1, 1, 1, 2, 2, 2, 2, 3, 3, 3, 3];

else if (score >= 100 && score < 500)
   this.types = [1, 1, 1, 1, 2, 2];

else this.types = [1];

this.type = this.types[Math.floor(Math.random()*this.types.length)];

Explanation: You’ll clearly see that if the score is between 100 and 500, then only use 1st and 2nd type of platforms with probability of 1st and 2nd being 4/6 and 2/6 respectively. It worked great and exactly how I wanted it to be. Now most of the things were completed including keyboard controls, scoring system, platform scrolling, physics and transition between different player states.

Wrapping it up

So, the logic and graphics were completed which worked great as expected. Now, it was the time to add splash screen, menus and game over screen. This all was done using basic HTML and CSS, check out the code on CSSDeck to see how I did it. I finally added some share buttons so that people can flaunt about their high scores on facebook and twitter ;).

A final touch was to add the jumping doodle on the main menu screen controllable by keyboard which added up a lot of fun factor to the game. It’s fun to move him around in the menu and test the controls before moving on to the real game :D.

So this is how I create games in HTML5 without using any frameworks. In the future, I want to create better, bigger and more fun games with multiplayer functionalities and realtime scoring.

Now why don’t you share your game creation process or help improve mine ?

Share:

8 thoughts on “How I Created My Version of Doodle Jump in HTML5

  1. Madhur

    I remember trying this game out a while back and i loved it ! Thanks for sharing the process of building it. On first look it seemed too complex but on reading this post it sounds achievable :) Will give a try to canvas soon.. Thanks again :)

    Reply
  2. Yatin Maan

    @Kushagra I assume u place the the platforms randomly…
    But in the actual game what the developers did was that they made some pre-fabricated platform placements like making a platform with a spring and and and a vanishable platform only , if you jump on the spring platform you go high up where there is a platform just within the reach and if you jump on the Vanishable platform you jump high enough to remove the spring platform from view (and the array) but not high enough to reach the next platform and you die so to go up you have no option to other that to jump on the spring platform.
    My point here is that the game not just uses 4 types of platforms and randomly places them but has some platform placements hard-coded which appear according to your score/level. If you randomly place aliens/monsters , you may reach a stage where you cannot go up without colliding with the alien (thus dying) but the developers placed the alien and some platforms around it so that you can get through and all this is hard-coded not randomly generated.
    The game places these packs of pre-coded platforms according to the score/level and adds randomly generated bits between them.

    BTW, the Doodle/Player appears on the other side once it fully passes the first side thus there is a place where the player is completely off-screen what the original game does is that as soon as the player is 50% through on one side it places it on the other side. Lets assume your Doodle sprite is 10px wide and you have 10px buffer space on each side , then there is a time when the sprite is not visible as it is on the side but not completely through to the other side. The solution to this is that reduce the buffer space to 1/2 the size of the sprite , as soon as the player is half way through , he appears on the other side.

    Reply
  3. Rangarajan

    Awesome work – excellent thought to share knowledge.
    We are coming up with an HTML5 tutorial package for students,
    Objective of the package is to train them on creating a game,an app and a case study using HTML5.
    your thoughts on this are most welcome and if you are willing to partner with us, just drop me a reply

    Reply
  4. Julia

    Hey, it looks like your code could be really helpful to my project. Unfortunately, your code on cssdeck.com isn’t working anymore :( Do you still have it?
    I hope you’ll read this!

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *


*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>