使用按钮更改屏幕答案

【问题标题】：Use button to change screens使用按钮更改屏幕
【发布时间】：2021-05-13 00:50:56
【问题描述】：

我正在制作一个简单的银行系统，但我在创建一个更改屏幕的按钮时遇到了问题，并且它会在按下按钮时更改屏幕。我曾尝试在问题中使用诸如screen = 1; 之类的代码，但它似乎不起作用

    let sumbit;
let input;
    let fullScreen;
let element, sizeback;
    let clear;
let check = 2;
let mainScreen;
let screen = 0;


//if(!alert('Alert For your User!')){window.location.reload();}

function begining() {
  createCanvas(1000, 500);
background(100,250);
//sizeback = background(100,200,250);
      sumbit = createButton('Submit');
  sumbit.mousePressed(button);
      sumbit.position(190, 60);

  input = createInput();
      input.position(20, 60);

  element = createElement('h2', 'What is the password : ');
      element.position(5, 10);

  fullScreen = createButton('FullScreen');
  fullScreen.mousePressed(full);
  fullscreen.noLoop()


  textAlign(CENTER);
      textSize(32);
}

function draw() {
  if(screen == 0) {
    begining()
  } else if(screen == 1) {
    bankScreen()
  } else if(screen == 2) {
    logout()
  }
}
//FullScreen button
function full() {
    let fs = fullscreen();
      fullscreen(!fs);
}

//Submit button 
function button() {
  const password = input.value();
  if(password == 2021) {
        element.html('Your Correct! ' + ' The answer was ' + password);
    for(var i = 0; i < 200; i++) {
      push();
        fill(random(255), random(255), random(255));
        translate(random(height), random(width));
            rotate(random(2 * PI));
        text(password, 20, 20);
      pop();
      let next = createButton('Next');
      next.mousePressed(nextpage);
      next.noLoop();
    }
    screen = 1;
  } else {
    if(!alert('Would you like to try again ?')){window.location.reload();}
  }  
 input.value('');
}

function bankScreen() {
  background(100,200,250);
  text("Login", 10, 50);
  
}

function nextpage() {
  screen = 1;
//Problem!!
}

html, body {
  margin: 0;
  padding: 0;
}

canvas {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.min.js"></script>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Sketch</title>

    <link rel="stylesheet" type="text/css" href="style.css">

    <script src="libraries/p5.min.js"></script>
    <script src="libraries/p5.sound.min.js"></script>
  </head>

  <body>
    <script src="sketch.js"></script>
  </body>
</html>

感谢您的帮助。

【问题讨论】：

请具体说明您的“问题”是什么。
@user1599011 我的问题是，在输入正确的密码并单击下一步后，它应该切换到function bankscreen()，但它没有。
来自draw()?当draw() 被调用时，screen 的值是多少？
screen中screen的值是当screen的值改变屏幕变化时。最初我使用了mousePressed() 函数，但它不适合按钮。
如果您使您的代码成为可运行的 sn-p 并且更具体地了解预期/期望的行为是什么，那么人们会更容易帮助您：stackoverflow.com/questions/67410651/…

标签： javascript p5.js

【解决方案1】：

贴出的代码有很多问题，很难分辨哪些是因为这段代码不完整，哪些是错误。然而，这里有一些突出的问题。

你没有setup函数
每次调用 begining 时，您都会创建一个新画布，这没有多大意义。
您正在draw 中调用的函数中创建 HTML 元素
- 除非禁用循环，否则不应这样做，因为 HTML 元素是持久的。
您在多个地方调用noLoop 作为p5.Element 的实例方法，这是无效的。
在按钮功能中，您创建了 200 个“下一步”按钮，这可能不是您想要做的。
在button 函数中，您会进行大量绘图，但除非禁用循环，否则这将立即被在下次执行draw 时在bankScreen 中调用background 所掩盖
单击提交按钮并尝试移动到“bankScreen”时，您没有从“开始”屏幕中删除元素
单击下一页时，您已经在屏幕 = 1 上，因此该功能无效。

我已尝试解决您的代码的问题：

let sumbit;
let input;
let fullScreen;
let element, sizeback;
let clear;
let check = 2;
let mainScreen;
let screen = 0;

function setup() {
  createCanvas(windowWidth, windowHeight);
  noLoop();
}

function begining() {
  background(100, 250);
  //sizeback = background(100,200,250);
  sumbit = createButton('Submit');
  sumbit.mousePressed(button);
  sumbit.position(190, 60);

  input = createInput();
  input.position(20, 60);

  element = createElement('h2', 'What is the password : ');
  element.position(5, 10);

  fullScreen = createButton('FullScreen');
  fullScreen.mousePressed(full);
  // ???? This isn't a function on p5.Element
  // fullscreen.noLoop()


  textAlign(LEFT);
  textSize(32);
}

function draw() {
  if (screen == 0) {
    begining()
  } else if (screen == 1) {
    bankScreen()
  } else if (screen == 2) {
    logout()
  }
}

//FullScreen button
function full() {
  let fs = fullscreen();
  fullscreen(!fs);
}

//Submit button 
function button() {
  const password = input.value();
  if (password == 2021) {
    element.html('Your Correct! ' + ' The answer was ' + password);
    sumbit.remove();
    input.remove();
    // All of this drawing is pointless because it will be overridden in bankScreen();
    for (var i = 0; i < 200; i++) {
      push();
      fill(random(255), random(255), random(255));
      translate(random(height), random(width));
      rotate(random(2 * PI));
      text(password, 20, 20);
      pop();
      // Why are you making 200 Next buttons?
      let next = createButton('Next');
      // Don't forget to position your buttons
      next.position(width / 2, height / 2);
      next.mousePressed(nextpage);
      // ????? noLoop isn't a method on p5.Element
      // next.noLoop();
    }
    screen = 1;
    // Need to redraw since we disabled looping
    redraw();
  } else {
    if (!alert('Would you like to try again ?')) {
      window.location.reload();
    }
  }
  input.value('');
}

function bankScreen() {
  background(100, 200, 250);
  text("Login", 10, 150);
}

function nextpage() {
  // This does nothing because when it runs screen is already equal to 1 
  screen = 1;
  // Need to redraw since we disabled looping
  redraw();
  // What Problem?
}

&lt;script src="https://cdn.jsdelivr.net/npm/p5@1.3.1/lib/p5.js"&gt;&lt;/script&gt;

【讨论】：