在 p5.js 中使计算器正常运行

Question

所以我正在构建一个仅使用 p5.js 的计算器。我已经使数字正确显示，但我不知道如何使其正常运行，例如我单击 5，然后单击 obelus，然后单击 5。然后会显示 1。有谁知道如何做到这一点。非常感谢您的帮助。非常感谢愿意提供帮助的人。

let number = 0;
function setup() {
  createCanvas(400, 400);
  let one = createButton('1');
  one.mousePressed(clickedOne);
  let two = createButton('2');
  two.mousePressed(clickedTwo);
  let three = createButton('3');
  three.mousePressed(clickedThree);
  let four = createButton('4');
  four.mousePressed(clickedFour);
  let five = createButton('5');
  five.mousePressed(clickedFive);
  let six = createButton('6');
  six.mousePressed(clickedSix);
  let seven = createButton('7');
  seven.mousePressed(clickedSeven);
  let eight = createButton('8');
  eight.mousePressed(clickedEight);
  let nine = createButton('9');
  nine.mousePressed(clickedNine);
  let zero = createButton('0');
  zero.mousePressed(clickedZero);
  let equals = createButton('=');
  let clear = createButton('AC');
  let divide = createButton('÷');
  let multiply = createButton('x');
  let add = createButton('+');
  let minus = createButton('-');
  one.position(100, 150);
  one.size(45, 45);
  two.position(144, 150);
  two.size(45, 45);
  four.position(100, 194);
  four.size(45, 45);
  six.position(188, 194);
  six.size(45, 45);
  three.position(188, 150);
  three.size(45, 45);
  five.position(144, 194);
  five.size(45, 45);
  seven.position(100, 238);
  seven.size(45, 45);
  eight.position(144, 238);
  eight.size(45, 45);
  nine.position(188, 238);
  nine.size(45, 45);
  zero.position(100, 282);
  zero.size(89, 45);
  equals.position(188, 282);
  equals.size(45, 45);
  divide.position(232, 150);
  divide.size(45, 45);
  multiply.position(232, 194);
  multiply.size(45, 45);
  add.position(232, 238);
  add.size(45, 45);
  minus.position(232, 282);
  minus.size(45, 45);
  clear.position(100, 106);
  clear.size(177, 45);

}

function clickedOne(){
  number = number * 10 + 1;
}

function clickedTwo(){
  number = number * 10 + 2;
}

function clickedThree(){
  number = number * 10 + 3;
}

function clickedFour(){
  number = number * 10 + 4;
}

function clickedFive(){
  number = number * 10 + 5;
}

function clickedSix(){
  number = number * 10 + 6;
}

function clickedSeven(){
  number = number * 10 + 7;
}

function clickedEight(){
  number = number * 10 + 8;
}

function clickedNine(){
  number = number * 10 + 9;
}

function clickedZero(){
  number = numer * 10 + 0;
}

function draw() {
  background(220);
  noStroke();
  fill(20, 255, 255, 30);
  rect(100, 53, 177, 54, 5);
  strokeWeight(6);
  stroke(0);
  noFill();
  rect(97, 50, 183, 280, 5);
  strokeWeight(1);
  stroke(0);
  fill(0);
  textSize(25);

  text(number, 110, 100);
}

Answer 1

您必须添加 2 个新变量 number1 和 operation:

let number = 0;
let operation = "";

并且您必须为操作添加新的回调（例如 clickedAdd 用于 +）和 clickedEquals 用于 =.

当一个操作被点击时（+, -, ...）然后 number1 由 number 和 number 被设置为 0。此外 operation 被设置。例如：

function clickedAdd(){ 
    number1 = number;
    number = 0;
    operation = "+";
}

function clickedMinus(){ 
    number1 = number;
    number = 0;
    operation = "-";
}

function clickedMultiply(){ 
    number1 = number;
    number = 0;
    operation = "x";
}

function clickedDivide(){ 
    number1 = number;
    number = 0;
    operation = "÷";
}

注意，按下一个操作后，当前数字被存储在变量number1中，而number被设置为0，因此可以输入下一个数字。

当 = 时，必须执行正确的 operation。例如：

function clickedEquals(){
    if (operation == "+") {
        number = number1 + number;
    } else if (operation == "-") {
        number = number1 - number;
    } else if (operation == "x") {
        number = number1 * number;
    } else if (operation == "÷") {
        number = number1 / number;
    }
}

在 p5.js 中使计算器正常运行

making a calculator function properly in p5.js

javascript

processing

p5.js