Mega Man screen scrolling in JavaScript [duplicate]

Question

I'm trying to create screen transitions similar to those found in Mega Man or Legend of Zelda (i.e. the active elements of the first screen are stopped as the screen scrolls in the direction of the new screen then the active elements of the new screen become active again). I'm making this for a 2D browser game written in JavaScript.
Right now, I can only make the screen scroll as long as the player remains on the edge of the screen; the player can still move when the transition is taking place, which stops the scrolling midway through transition. Below is the code I'm using to make this happen. If anyone can help me with this, I would really appreciate it.

//checks if player has touched right side of screen
//*used to change screen color
if(this.rightX == gameWidth){
    screenShift = true;
    if(bgDrawX2 > 600){
        bgDrawX-=5;
        bgDrawX2-=5;
        drawBg();
    }
    screenShift = false;
}

if(this.leftX == 0){
    screenShift = true;
    if(bgDrawX2 < 1200){
        bgDrawX+=5;
        bgDrawX2+=5;
        drawBg();
    }
    screenShift = false;
}

Answer 1

I don't know most of your code but, apparently you have already a global variabel to hold the scrolling-state (screenShift). Why not simply ignore all incoming key/control-events until the variable screenShift is false again?

Answer 2

The way that I solved this in Hikari (a Mega Man clone) is by using different game "substates" and triggers to start the transitions.

There are triggers, called "transition regions" which sit at the sides of each room where the player can transition to another room. When the player enters the region, the game substate is set to "transitioning".

When the "transitioning" state is entered, all of the enemies in the current room are removed and the player controls are disabled. The transition takes place, moving the player and the camera into the next room. After the transition finishes, new enemies are spawned and the player's controls are restored.

Here's some pseudo C++-style code that describes the basic flow I'm using:

class SubState {
  void enter();
  void update(dt);
  void exit();
}

class TransitionSubState : public SubState {
  void enter() {
    // 1) Remove all enemies
    // 2) Disable player controls
  }

  void update(dt) {
    // 1) Move the camera and the player into the new room
    // 2) Check to see if we're done

    if(in new room) {
      exit();
      // Set the substate back to something else, we're done transitioning
    }
  }

  void exit() {
    // 1) Restore player controls
    // 2) Spawn enemies in the new room
  }
}

This can all be implemented in JavaScript as well. The key is that you have some kind of enter/update/exit set of functions you call to complete the lifecycle of the transition.

The code in Hikari is actually a bit more complex, but at a high level that same thing is happening.