Instead of making your json file around "boxes" you should design the json structure top down, first load game json, which contains level objects - which contain boxes arrays etc. ie. something like this
var json = {
"game_data": {
"some_global_settings" : {"game_speed": 30, "theme": "dark"},
"level1": {
"boxes": [
{
"x": 0,
"y": 115,
"width": 25,
"height": 25
},
{
"x": 25,
"y": 115,
"width": 25,
"height": 25
}
],
"stars": [
{
"x": 0,
"y": 50,
"width": 25,
"height": 25
},
{
"x": 125,
"y": 120,
"width": 25,
"height": 25
}
],
"player_position" : {"x": 0,"y": 50},
"victory_condition" : {"stars_required" : 5, "time_limit" : "10min"}
},
"level2": {"same structure as above with different data" : 1}
}
}
and then make a level builder function which picks a level object and creates everything in it. To reload a new level, check the number of stars remaining, if its 0, call your createLevel(gamelevel) with n+1 for building the next level.
below is pseudo code sample.
Every time user collects a star, you will check if it was the last star required, and if so, increment the level counter and call level builder function which could be something like this
function buildLevel( levelNr ) {
var gdata = json.game_data["level"+levelNr];
//check if next level exists in game_data object
if (!gdata) {
finishGame();
return false;
}
//next level data exists, so build whats in it
//clear level from previous stuff
clearLevel();//perhaps replace canvas with new one
createBoxes( gdata.boxes);
createStars( gdata.stars);
createPlayer( gdata.player_position);
//everything is ready, add listeners / timers etc, and start the game
}