如何为这个 p5 Javascript sketch 创建一个工作菜单屏幕？

Question

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

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，您会看到癫痫症按钮会生成癫痫症版本的游戏。

如何为这个 p5 Javascript sketch 创建一个工作菜单屏幕？

How do I create a working menu screen for this p5 Javascript sketch?

html

javascript

processing

p5.js