JS安全盒组合拨号逻辑问题

Question

我正在尝试创建组合式拨号锁，它可以在mouseMoved时被打开，当我将每个键的值赋值为mouseX或mouseY的坐标时，它会完美地工作，但是当我每次在mouseMoved时将值分配给加/减一个数字时，它就无法工作了。

简化的问题是，以下两个代码之间的区别是什么：

///////////--------code 1,works as expected-------------///////////
var keyA=0;
keyA=mouseY;
keyA=min(keyA,9);
//////////------code 2,doesn't work as expected---------////////
var keyA=0;
keyA-=3;
keyA=min(keyA,9);

对于代码1，keyA不会超过9，而对于代码2，keyA可以超过9，它们都是圆形拨号锁。

为了更好地理解，我在下面附上了完整的代码和画布输出：

//declare the variables

var keyA;
var keyB;
var keyC;
var keyD;

function setup() {
    createCanvas(512,512);

    //initialise the variables
    keyA = 0;
    keyB = 0;
    keyC = 0;
    keyC = 0;
    keyD = 0;
}

///////////////////EVENT HANDLERS///////////////////
function mouseMoved(){
    //only keyB and keyC work incorrectly,the min() max() methods not working here
    //Decrement keyB by 3, use the 'min' function to prevent keyB from going above 9
    keyB-=3;
    keyB=min(keyB,9);

    //Increment keyC by 1, use the 'max' function to prevent keyC from falling below 5
    keyC+=1;
    keyC=max(keyC,5);

    //keyA and keyD work correctly, I included here in order to contrast the difference
    //keyA equal to the value of mouseY, use 'min' function to prevent keyA from going above 16
    keyA=mouseY;
    keyA=min(16,keyA);

    //Make keyD equal to value of mouseY, use 'min' function to prevent keyD from going above 76
    keyD=mouseY;
    keyD=min(keyD,76);

    //the output value seems fine, for all 4 keys, they all heading to positive or negative infinite.
    console.log('B is '+keyB);
}

///////////////Draw the cobination dials and door lever///////////////////

function draw() {
    //Draw the safe door
    background(10);
    noStroke();
    fill(129,110,16);
    rect(26,26,width-52,width-52);

    //Draw the combination dials
    //keyA
    push();
    translate(120,170);
    drawDial(140,keyA, 21);
    pop();
    //keyB
    push();
    translate(120,380);
    drawDial(140,keyB, 14);
    pop();
    //keyC
    push();
    translate(280,380);
    drawDial(140,keyC, 13);
    pop();

    //keyD, the lever
    push();
    translate(width - 225,136);
    drawLever(keyD);
    pop();

    //put text next to each key, so we know which key is which
    fill(0);
    text('A',35,200);
    text('B',35,400);
    text('C',355,400);
    text('D',395,200);
}

//drawDial function
function drawDial(diameter,num,maxNum) {
    //the combination lock
    var r = diameter * 0.5;
    var p = r * 0.6;

    stroke(0);
    fill(255,255,200);
    ellipse(0,0,diameter,diameter);
    fill(100);
    noStroke();
    ellipse(0,0,diameter*0.66,diameter*0.66);
    fill(150,0,0);
    triangle(
        -p * 0.4,-r-p,
        p * 0.4,-r-p,
        0,-r-p/5
    );

    noStroke();

    push();
    var inc = 360/maxNum;

    rotate(radians(-num * inc));
    for(var i = 0; i < maxNum; i++) {
        push();
        rotate(radians(i * inc));
        stroke(0);
        line(0,-r*0.66,0,-(r-10));
        noStroke();
        fill(0);
        text(i,0,-(r-10));
        pop();
    }

    pop();
}

//drawLever function
function drawLever(rot) {
    push();
    rotate(radians(-rot))
    stroke(0);
    fill(100);
    rect(-10,0,20,100);
    ellipse(0,0,50,50);
    ellipse(0,100,35,35);
    pop();
}

下面是画布输出：帆布输出

我还向weTransfer上传了一个zip文件，其中包括html和js文件，如果有帮助的话：(文件大小为198 is ) https://wetransfer.com/downloads/1a3c130909e542992e0b8b8f661a8f2720181104133922/a58a78

代码是基于p5.js库编写的。

很抱歉发布了这么长的问题，我已经为这个bug做了一个月了，如果有人能告诉我哪个部分出了问题，我认为可能是在drawDial函数中，或者我们只是不能减少0并限制它从逻辑上超过9。任何帮助都是感激的

Answer 1

注意正在打印到控制台的信息。你会看到这样的东西：

B is -600 
B is -603 
B is -606 
B is -609 
B is -612 
B is -615 
B is -618 
B is -621 
B is -624 
B is -627 
B is -630

这告诉你，keyB不会超过9，它只是变得非常小。(或者是非常大的负值，取决于你如何看待它。)

这在你的代码中是有意义的：

keyB -= 3;
keyB = min(keyB, 9);

在这里，当鼠标移动时，从3中减去keyB，然后取较小的值：keyB或9。注意，像-3、-6和-300这样的值都小于9。换句话说，这里的第二行没有真正做任何事情。

我不确定您希望您的代码如何工作:您可以限制您的值，使其保持在0以上，也可以使用if语句对它们进行包装。