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。

为了更好的理解，我在下面附上了完整的代码和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库编写的。

很抱歉提出这么长的问题，我已经研究了这个错误一个月，如果有人可以指出错误的方向，我想可能是在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语句将它们包装起来。

JS保管箱组合拨打逻辑问题

1 个答案: