时间戳

首页 > 解决方案 > 使用按钮更改屏幕

javascript - 使用按钮更改屏幕

问题描述

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

感谢您的帮助。

标签： javascriptp5.js

解决方案

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

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

推荐阅读