如何从菜单画面切换到实际游戏？ p5.js

Question

所以我尝试在 p5.js 中的菜单屏幕（当前只是带有一行文本的空白画布）和实际游戏屏幕之间切换。我目前尝试的是使用一个名为“state”的变量，该变量根据其值在菜单代码和实际游戏代码之间进行分支（菜单的状态 = 1，游戏的状态 = 2）。当状态从1变为2时，确实会切换到游戏画面，但只是静止的一帧，无法玩。

正如我上面所说，我尝试使用名为“state”的变量在不同的游戏状态之间进行分支。我编写的代码如下，不包括类。

  var state;
  var character;
  var platform;

  function setup() {
    state = 1;
    createCanvas(800, 400);
  }

  function draw() {
    background(220);
    if(state == 1){
      text("press enter to start",20,20);
    }
    else if(state == 2){
      enemy = new Enemy(50, 0)
      character = new Player(200, 200);
      platform = new Platform(0, 350, width, 50);
      
      character.update();
      platform.update();
      enemy.update();

      enemy.show();
      character.show();
      platform.show();
    }
    if (keyIsDown(UP_ARROW)) 
    {
      if (!character.jumping && character.grounded) {
        character.jumping = true;
        character.grounded = false;
        character.velY = -character.speed * 3;
      }
    }
    if (keyIsDown(LEFT_ARROW)) {
      character.velX = -character.speed;
    }
    if (keyIsDown(RIGHT_ARROW)) {
      character.velX = character.speed;
    }
  }
  
  function keyPressed(){
  if(keyCode === ENTER)
    state = 2
  }

我认为问题在于，每次重复绘制循环时，它都会创建所有类的新实例，使得游戏看起来像静止的帧，因为每个循环都替换了对象。虽然我认为这就是问题所在，但我不知道如何解决它。任何帮助将不胜感激，不仅针对这个问题，而且针对我的代码。

附：该图像显示了静止帧的样子。由于存在“重力”，因此两个方块都应该下落。

Answer 1

循环中检查场景编号的分支应该只是绘制，而不是初始化。只有从菜单“退出”到游戏屏幕的代码才应该使用

new

。否则，您将每秒创建 60 次新的敌人、玩家和平台，并且始终处于其初始位置。换句话说，将诸如

enemy =

之类的作业移至

if(keyCode === ENTER)

分支。

相关：使用 p5.js 从一个场景过渡到下一个场景，这显示了更稳健的设计。

1

和

2

是幻数，可以改进为至少是描述性字符串，或者可能是布尔值

let menuActive = true; // or false

。