At the moment I have this code. the function renderplat is repeating the same code for each platform coordinate, how can I iterate over the object lenght to make it a bit more automatic?
platforms=[{"x":0,"y":570,"width":1000,"height":25},{"x":350,"y":100,"width":250,"height":25},{"x":750,"y":60,"width":150,"height":25},{"x":0,"y":60,"width":150,"height":25},{"x":0,"y":390,"width":90,"height":25},{"x":100,"y":440,"width":90,"height":25},{"x":200,"y":490,"width":90,"height":25},{"x":800,"y":390,"width":90,"height":25},{"x":710,"y":440,"width":90,"height":25},{"x":620,"y":490,"width":90,"height":25},{"x":392,"y":262,"width":90,"height":25},{"x":414,"y":201,"width":90,"height":25},{"x":133,"y":210,"width":90,"height":25}]
function renderplat(){
ctx.fillStyle = "#45597E";
ctx.fillRect(platforms[0].x, platforms[0].y, platforms[0].width, platforms[0].height);
ctx.fillRect(platforms[1].x, platforms[1].y, platforms[1].width,platforms[1]. height);
ctx.fillRect(platforms[2].x, platforms[2].y, platforms[2].width,platforms[2]. height);
ctx.fillRect(platforms[3].x, platforms[3].y, platforms[3].width,platforms[3]. height);
}
By using the forEach-method for example:
const platforms=[{"x":0,"y":570,"width":1000,"height":25},{"x":350,"y":100,"width":250,"height":25},{"x":750,"y":60,"width":150,"height":25},{"x":0,"y":60,"width":150,"height":25},{"x":0,"y":390,"width":90,"height":25},{"x":100,"y":440,"width":90,"height":25},{"x":200,"y":490,"width":90,"height":25},{"x":800,"y":390,"width":90,"height":25},{"x":710,"y":440,"width":90,"height":25},{"x":620,"y":490,"width":90,"height":25},{"x":392,"y":262,"width":90,"height":25},{"x":414,"y":201,"width":90,"height":25},{"x":133,"y":210,"width":90,"height":25}]
function renderplat(){
ctx.fillStyle = "#45597E";
platforms.forEach(p => ctx.fillRect(p.x, p.y, p.width, p.height);
}
for(let i=0; i<platforms.length; i++){
ctx.fillRect(platforms[i].x, platforms[i].y, platforms[i].width, platforms[i].height);
}
There are various ways to do it, personally, I would recommend using forEach. You can learn more about it here.
So your code becomes
platforms=[{"x":0,"y":570,"width":1000,"height":25},{"x":350,"y":100,"width":250,"height":25},{"x":750,"y":60,"width":150,"height":25},{"x":0,"y":60,"width":150,"height":25},{"x":0,"y":390,"width":90,"height":25},{"x":100,"y":440,"width":90,"height":25},{"x":200,"y":490,"width":90,"height":25},{"x":800,"y":390,"width":90,"height":25},{"x":710,"y":440,"width":90,"height":25},{"x":620,"y":490,"width":90,"height":25},{"x":392,"y":262,"width":90,"height":25},{"x":414,"y":201,"width":90,"height":25},{"x":133,"y":210,"width":90,"height":25}]
function renderplat(){
ctx.fillStyle = "#45597E";
platforms.forEach(platform => {
ctx.fillRect(platform.x, platform.y, platform.width, platform.height)
});
}