I have started to recreate Doodle Jump in HTML using Canvas. Here's my current progress. As you can see, if you play it for a few seconds, some platforms will be out of the player's reach. I don't know why is this happening. Here's the code which is responsible for the re-spawning of platforms.

//Movement of player affected by gravity
if(player.y > (height / 2) - (player.height / 2)) {
    player.y += player.vy;
    player.vy += gravity;
}
else {
    for(var i = 0; i < platforms.length; i++) {
        var p = platforms[i];

        if(player.vy < 0) {
            p.y -= player.vy;
            player.vy += 0.08;
        }

        if(p.y > height) {
            position = 0;
            var h = p.y;
            platforms[i] = new Platform();
        }

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

Also, here's the platform class.

//Platform class
function Platform(y) {
    this.image = new Image();
    this.image.src = platformImg;

    this.width = 105;
    this.height = 25; 

    this.x = Math.random() * (width - this.width);
    this.y = y || position;

    position += height / platformCount;

    //Function to draw it
    this.draw = function() {
        try {
            ctx.drawImage(this.image, this.x, this.y, this.width, this.height);
        } catch(e) {}
    };
}

You can also see the whole code on the link I provided. Also, when a platform goes out of the view port, the jump animation becomes quirky. I am still trying to find out what's causing this but can't find any solution.