Recreating Doodle Jump in Canvas - Platforms spawning out of reach
- by kushsolitary
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.
