JS保险箱组合拨号逻辑问题

Question

我正在尝试创建组合拨号锁，它可以在 mouseMoved 时打开，当我将每个键的值分配为 mouseX 或 mouseY 时它完美地工作' s 坐标，但当我每次 mouseMoved.

时将值分配给 plus/subtract 一个来自自身的数字时不起作用

简化后的问题是，下面2个代码有什么区别：

///////////--------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，都是圆盘锁。

为了更好地理解，我附上了完整的代码和 Canvas 输出：

//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();
}

这里是 Canvas 输出： canvas output

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

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

抱歉 post 这么长的问题，我已经研究这个 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);

在这里，每当鼠标移动时，您就从keyB中减去3，然后取更小的值：keyB或9。请注意，-3、-6 和 -300 等值都小于 9。换句话说，这里的第二行实际上没有做任何事情。

我不确定您希望您的代码如何工作：您可以限制您的值以使其保持在 0 以上，或者您可以使用 if 语句将它们环绕。

JS保险箱组合拨号逻辑问题

JS safe box combination dials logical issue

javascript

p5.js