有没有办法让代码循环的一部分,而不是另一部分? (p5)

时间:2019-12-06 16:27:29

标签: javascript processing p5.js

我正在尝试创建一个设置屏幕,您可以在其中更改您的名称和屏幕颜色,但是为了使输入框可编辑,我必须运行noLoop(),这使函数I进行更改的颜色将无法运行。有没有办法只循环一个方法的一部分而不循环另一个?

var screen1;
var settingsScreen;

function setup()
{
createCanvas(650, 500);
  bgcolor = [102, 223, 211];
  background(bgcolor);
  enterName = createInput();
  nameButton = createButton('Enter');
  var name = enterName.value();
  settingsName = createInput();
  declareBooleans();
}

function draw() 
{
  if (screen1 == true)
  {
    drawScreen1();
  }
  else if (settingsScreen == true)
  {
    drawSettingsScreen();
  }
}

declare booleans()
{
screen1 = true;
settingsScreen = false;
}

function drawScreen1()
{
  textSize(80);
  fill(255);
  text("What's Your \n    Name?", 120, 200);
  enterName.position(213, 350);
  enterName.size(170, 30);
  enterName.style('font-size', '21px');
  nameButton.position(enterName.x + enterName.width, 350);
  nameButton.size(70, 36);
  nameButton.style('font-size', '21px');
  nameButton.mousePressed(screen1MousePressed);
}

function drawSettingsScreen()
{
  textAlign(LEFT);
  fill(255);
  enterName.remove();
  nameButton.remove();
  background(bgcolor);
  var name = correctName.value();
  settingsName.value(name);
  textSize(70);
  text("Settings", 207, 110);
  textSize(30);
  text("Name:", 20, 190);
  settingsName.position(120, 150);
  settingsName.size(150, 50);
  settingsName.style('font-size', '26px');
  text("Background Color:", 20, 350);
  fill(240, 108, 108);
  strokeWeight(2);
  rect(30, 370, 85, 85);
  fill(255, 194, 89);
  rect(130, 370, 85, 85);
  fill(249, 239, 98);
  rect(230, 370, 85, 85);
  fill(30, 219, 137);
  rect(330, 370, 85, 85);
  fill(102, 223, 211);
  rect(430, 370, 85, 85);
  fill(200, 157, 209);
  rect(530, 370, 85, 85);
  if (mouseIsPressed && mouseX >= 30 && mouseX <= 115 && mouseY >= 370 && mouseY <= 455)
  {
    loop();
    bgcolor = [240, 108, 108];
  }
  else if (mouseIsPressed && mouseX >= 130 && mouseX <= 215 && mouseY >= 370 && mouseY <= 455)
  {
    loop();
    bgcolor = [255, 194, 89]
  }
  else if (mouseIsPressed && mouseX >= 230 && mouseX <= 315 && mouseY >= 370 && mouseY <= 455)
  {
    loop();
    bgcolor = [249, 239, 98];
  }
  else if (mouseIsPressed && mouseX >= 330 && mouseX <= 415 && mouseY >= 370 && mouseY <= 455)
  {
    loop();
    bgcolor = [30, 219, 137];
  }
  else if (mouseIsPressed && mouseX >= 430 && mouseX <= 515 && mouseY >= 370 && mouseY <= 455)
  {
    loop();
    bgcolor = [102, 223, 211];
  }
  else if (mouseIsPressed && mouseX >= 530 && mouseX <= 615 && mouseY >= 370 && mouseY <= 455)
  {
    loop();
    bgcolor = [200, 157, 209];
  }

1 个答案:

答案 0 :(得分:2)

您可以在循环中使用另一个if()并设置一些布尔值,仅当您希望此循环运行时,才为真。