Javascript/Canvas—为什么我的变量会递增，为什么执行if语句？

我正在制作一个基于平铺的地图，玩家可以按一个按键在画布上移动一个32x32大小的图像。每次释放右箭头时，小图像应向右移动32个“单位”（我假设其像素）

以上是所有的变量。下一个代码用于加载一些图像。我认为问题不在这里

//Wait for loading - all good here
function domloaded(){
    var c = document.getElementById("gameBoard");
    var ctx = c.getContext("2d");
    console.log ("Drawing Map....");
    window.onload = function(){         
        ctx.drawImage(WorldImgArray[0],0,0);
        console.log('Set pX to 0 from NOWHERE!!!!!!');
        ctx.drawImage(player, 0, 0, 32, 32);
    }

下一位是捕捉按键按下/释放

window.addEventListener('keyup', pControls, false);

    function pControls(e){

        switch (e.keyCode){
            case 39:
                rightArrow();
                break;
            case 37:
                leftArrow();
                break;
            case 38:
                upArrow();
                break;
            case 40:
                downArrow();
                break;
        }
    }

虽然我不认为leftArrow（）函数把我搞砸了，但我还是在这里列出了它，以防万一我遗漏了什么。但是我声明了所有其他函数，没有一个修改pX，所以我只在下面发布rightArrow和leftArrow

function leftArrow() {
    // Set up map transitions if needed
        if (pX > 0 && WorldX >= 0) {
            ctx.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
            pX -= 32;
            drawMap();
            //ctx.drawImage(player, pX, pY, 32, 32);
            console.log(WorldX);
        } else console.log("Y !> 0");
    }

    function rightArrow() {
        if (pX < CANVAS_WIDTH - 32){
            //ctx.clearRect(0,0, CANVAS_WIDTH, CANVAS_HEIGHT);
            pX += 32;
            console.log('Drew from NORMAL rightArrow!');
            console.log('pX = ' + pX);
            drawMap();
            console.log(WorldX);
            //ctx.drawImage(player, pX, pY, 32, 32);
        } else if (pX == CANVAS_WIDTH - 32 && WorldX < World_Width){
            console.log ("Screen Transition!!");
            WorldX+=1;
            currentArea+=1;
            pX = 0;
            drawMap();

            //ctx.drawImage(player, pX, pY, 32, 32);
        } else if (pX = CANVAS_WIDTH - 32 && WorldX == World_Width){
            return;
        }

    }

现在，每次我按下键盘上的右箭头…播放器图像向右移动32。一旦到达画布的末尾，它会将播放器移回画布的开头，并显示覆盖整个画布的新图像。这应该在玩家跑出“房间”之前发生4次。最好的解释是，WorldX=0是起点，WorldX=3是终点，当玩家在画布边缘且WorldX=3时，我需要“禁用”向右移动。这就是我的问题所在

当玩家在画布边缘且worldX=3时，我可以按一次右箭头键，但什么也不会发生……但当我第二次按它时，玩家移动到画布左侧的次数比应该的多+1个“单位”。移动应该在32个单位内发生，但当上述错误发生时，它开始移动33个单位。增量1只发生一次，但每次我在画布边缘双击向右箭头时，玩家都会从画布的最右边缘移动到画布的最左边缘

---

TLDR；为什么当else if in rightArrow为真时，pX会增加1，玩家会移回左边？有了console.log，我能够辨别出rightArrow中的if语句实际上是在条件为false时绘制的？！？！发生了什么事？

我注意到了：

}如果（pX=CANVAS\u WIDTH-32…

应该是

}如果（pX==CANVAS\u WIDTH-32…

我注意到了：

}如果（pX=CANVAS\u WIDTH-32…

应该是

}如果（pX==CANVAS\u WIDTH-32…

function leftArrow() {
    // Set up map transitions if needed
        if (pX > 0 && WorldX >= 0) {
            ctx.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
            pX -= 32;
            drawMap();
            //ctx.drawImage(player, pX, pY, 32, 32);
            console.log(WorldX);
        } else console.log("Y !> 0");
    }

    function rightArrow() {
        if (pX < CANVAS_WIDTH - 32){
            //ctx.clearRect(0,0, CANVAS_WIDTH, CANVAS_HEIGHT);
            pX += 32;
            console.log('Drew from NORMAL rightArrow!');
            console.log('pX = ' + pX);
            drawMap();
            console.log(WorldX);
            //ctx.drawImage(player, pX, pY, 32, 32);
        } else if (pX == CANVAS_WIDTH - 32 && WorldX < World_Width){
            console.log ("Screen Transition!!");
            WorldX+=1;
            currentArea+=1;
            pX = 0;
            drawMap();

            //ctx.drawImage(player, pX, pY, 32, 32);
        } else if (pX = CANVAS_WIDTH - 32 && WorldX == World_Width){
            return;
        }

    }

function drawMap(){
        ctx.clearRect(0,0, CANVAS_WIDTH, CANVAS_HEIGHT);
        ctx.drawImage(WorldImgArray[currentArea],0,0);
        ctx.drawImage(player, pX, pY, 32, 32);
        console.log("X: " + pX + " Y: " + pY);
     }