Question

我在尝试隐藏我使用p5.js创建的按钮时出现问题：

var quit_button;
var pause = false;

function keyPressed() {
  if (keyCode == '80') { // If p is pressed on the keyboard
    if (pause === true) {
      quit_button.hide()
      pause = false;
    } else {
      pause = true;
    }
  }
}

function restart() {
  quit_button.hide() // This isn't working
  pause = false;
  setup()
}

function setup() { //Start-up screen
  createCanvas(600, 400);
}

function draw() {
  background('#fae'); //This creates a new canvas
  if (pause === true) {
      quit_button = createButton('quit')
      quit_button.position(300,200)
      quit_button.mousePressed(restart)
      text("Game has been paused. Press P to resume.", 100, 100)
    } else {
    }
}

当我运行代码并按p暂停我的蛇游戏时，游戏会暂停（如预期的那样）。但是，如果我按p取消暂停，或者点击“退出”，则quit按钮仍然存在。

Answer 1

如果游戏暂停，则每个帧都会创建一个新按钮。那是每秒60个按钮。所以你有一堆按钮只是坐在彼此的顶部。要查看我的意思，请右键单击按钮，然后单击inspect element并查看页面上的所有按钮。

因此，您需要确保只创建一个按钮。您可以通过检查quit_button是否已经初始化，以及是否已经跳过创建步骤来执行此操作：

if(!quit_button){
  quit_button = createButton('quit')
}

您也可以将此创建代码移至开头，然后默认隐藏它。

按钮不会隐藏在p5 javascript中

1 个答案: