按钮不会隐藏在 p5 javascript

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'，quit 按钮仍然存在。

Answer 1

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

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

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

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

按钮不会隐藏在 p5 javascript

Button won't hide in p5 javascript

javascript

button

p5.js