Por el momento tengo este código. la función renderplat repite el mismo código para cada coordenada de plataforma, ¿cómo puedo iterar sobre la longitud del objeto para que sea un poco más automático?
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); }Usando el método forEach por ejemplo:
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(px, py, 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); }Hay varias formas de hacerlo, personalmente recomendaría usar forEach. Puede obtener más información al respecto aquí .
Entonces tu código se convierte en
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) }); }