使用按钮切换屏幕

Question

我正在制作一个简单的银行系统，但我在创建一个改变屏幕的按钮时遇到了麻烦，它会在按下按钮时改变屏幕。我曾尝试在问题中使用 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>

感谢您的帮助。

Answer 1

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

你没有setup功能
您在每次调用 begining 时都会创建一个新的 canvas，这没有多大意义。
您正在 draw 中调用的函数中创建 HTML 个元素
- 除非你禁用循环，否则你不应该这样做，因为 HTML 元素是持久的。
您在多个地方调用 noLoop 作为 p5.Element 上的实例方法，这是无效的。
在按钮函数中，您创建了 200 个“下一步”按钮，这可能不是您想要的。
在 button 函数中你做了一堆绘图，但是除非循环被禁用，否则这将在下一次执行时立即被 bankScreen 中对 background 的调用覆盖共 draw
当点击提交按钮并尝试移动到“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?
}

<script src="https://cdn.jsdelivr.net/npm/p5@1.3.1/lib/p5.js"></script>

使用按钮切换屏幕

Use button to change screens

javascript

p5.js