I am having a lot of trouble with adding objects to a canvas, but it's a lot more complicated than that

Question

I use a "setInterval" method to run my game at 60 frames per second, and the first set of objects load normally. What I am trying to do is have another set of objects load when the player moves to a certain part of the gameboard (when it reaches the goal) but for whatever reason, the new set of objects load for the 1 frame the player is in the end goal, and they disappear again.

I tried using a "while loop" for the levels, but that crashes it. An if statement for each level also does not work. What I found out is that when the player is inside of the goal area, the new objects load, but only while the player is in the end goal.

Code that starts the game at 60 fps:

setInterval(doSomething,1000/fps);

Code that runs the entire game:

function doSomething(){
  //framecount = 0;
  gameboard.clearRect(0,0,500,300);
  gameboard.fillRect(player_x,player_y,player_width, player_height);
  gameboard.font = "6vh Black";
  gameboard.fillText(deaths,10,30); 

  //how the player moves
  player_x += player_x_speed;
  player_y += player_y_speed;

  levelcounter = 1;
  level1();

// Code that runs each level:
  function level1(){
    gameboard.fillStyle = gamecolor;
    gameboard.fillRect(280,175,5,5);

    if (player_x>=(280-9) && player_x <= (280+4) && player_y >= (175-9) && player_y <= (175+4)) {
      player_x = player_x_initial;
      player_y = player_y_initial;
      deaths += 1;
    }
    gameboard.fillRect(180,75,10,10);

    if (player_x>=(180-9) && player_x <= (180+9) && player_y >= (75-9) && player_y <= (75+9)) {
      player_x = player_x_initial;
      player_y = player_y_initial;
      deaths += 1;
    }
    gameboard.fillStyle = playercolor;
    gameboard.fillRect(480,100,20,100);

    if (player_x>=(480-9) && player_y >= (100-8) && player_y <= (100+99) && levelcounter == 1) {
      levelcounter = 2;
      player_x = player_x_initial;
      player_y = player_y_initial;
      level2();
    }
    // end of level 1
  }

  function level2() {
    gameboard.fillRect(150,55,100,100)

    if (player_x>=(150-9) && player_x <= (150+9) &&  player_y >= (55-9) && player_y <= (55+9)) {
      player_x = player_x_initial;
      player_y = player_y_initial;
      deaths += 1;    
    }
    //end of level 2  
  }

  framecount++;
  //end of do something  
}

Here is the code that I figured out was the problem:

     if (player_x>=(480-9) && player_y >= (100-8) && player_y <= (100+99) && levelcounter == 1) {
        levelcounter = 2;
        player_x = player_x_initial;
        player_y = player_y_initial;
        level2();
      }

What that code is supposed to do is run the level 2 function when the player reaches that spot in the canvas, but for whatever reason it only does it for 1 frame, and the code acts like it never left level 1. I know this problem is extremely specific, but it has been bothering me for weeks and I have no idea what the issue is. If anyone could give some feedback that would be fantastic.

Answer 1

Welcome to stackoverflow!

It looks like level2() is only called once, since you set levelcounter = 2 in:

if (player_x>=(480-9) && player_y >= (100-8) && player_y <= (100+99) && levelcounter == 1) {
  levelcounter = 2;
  player_x = player_x_initial;
  player_y = player_y_initial;
  level2();
}

but check beforehand if the levelcounter is 1. That way this if-statement is true only once.

You want to add a path where levelcounter is 2 and level2() is called. As suggested in the comments you might want to change your setInterval to call the current level instead of starting at doSomething().