javascript - 如何为此 p5 Javascript 草图创建工作菜单屏幕？

Question

我创建了几个不同版本的 Pong，并将它们存储为不同的函数。然后，我尝试使用屏幕上的按钮访问这些功能，每个按钮按下都会映射到其相应的功能。但是，当我单击其中一个按钮时，不会加载任何功能，用户只能看到菜单屏幕；基本上什么也没发生。

Answer 1

你非常接近，你的想法是正确的。我所做的是仅使用您的 Epilepsymode 代码设置如何执行此操作(主要是因为我很好奇它是什么样子):D

我添加了一个标志，以便您可以知道哪个游戏当前处于事件状态，您必须对所有游戏执行类似的操作，并在它们不活动时禁用相应的标志。

let isEpilepsyMode = false;
let epilepsyMode;  // represents the epilepseMode object
function setup() {
  createCanvas(400,400)
  background(0)
  menu();
}

function draw() {
  if (isEpilepsyMode) {
    epilepsyMode.draw();
  }
}

我添加了一个新的处理程序，供您单击按钮时使用:

  button5.mousePressed(beginEpilepsyMode);

处理程序:

function beginEpilepsyMode() {
    isEpilepsyMode = true;
    epilepsyMode = new Epilepsymode();
    epilepsyMode.setup();
}

Setup 和 Draw 是 Epilepsymode 对象的方法，因此要编写 epilepsyMode.setup():

function Epilepsymode() {
    clear();
    hideButtons();
    let Lscore = 0;
    let Rscore = 0;
    let r2 = 0;
    let b2 = 255;
    let button;
    balls = []

    this.setup = function() {
        createCanvas(800, 400);
        menu();
        ball = new Ball();
        left = new Paddle(true);
        right = new Paddle(false);

        for (let i = 0; i <= 1000; i++) {
            balls[i] = new Ball()
        }
    }

    this.draw = function() {
        background(0);
        r2 = map(right.y, 0, 400, 255, 0)
        b2 -= map(left.y, 400, 800, 0, 255)
        background(r2, 0, b2)

        for (let i = 0; i < balls.length; i++) {
            balls[i].update();
            balls[i].edges();
            balls[i].show();
            balls[i].checkPaddleRight(right)
            balls[i].checkPaddleLeft(left)
        }
        ball.checkPaddleRight(right);
        ball.checkPaddleLeft(left);

        left.show();
        right.show();
        left.update();
        right.update();

        ball.update();
        ball.edges();
        ball.show();

        fill(255);
        textSize(32);
        text(Lscore, 32, 40);
        text(Rscore, width - 64, 40);

    }

所以如果你去this sketch您会看到癫痫按钮会生成游戏的癫痫版本。