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

Question

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

document.addEventListener('DOMContentLoaded',domloaded,false);

var CANVAS_WIDTH = 768;
var CANVAS_HEIGHT = 512;
var World_Width = 3;
var World_Height = 7;

let pX = 0; //players current X position
let pY = 0; //players current Y position
let currentWorld;
let WorldX = 0; //players current X position in area map array (LEFT and RIGHT)
let WorldY = 0; //players current Y position in area map array (UP and DOWN)

//Reset X and Y
WorldX = 0;
WorldY = 0;

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

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

    }

最后，我的绘图功能。

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

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

当玩家在画布边缘并且worldX = 3时，我可以按一次右箭头键，没有任何反应......但是当我第二次按下它时，玩家将移动到画布的左侧+比应有的多 1 个“单位”。移动应该以 32 个单位发生，但是当发生上述错误时，它开始移动 33。增量 1 只发生一次，但是每次我双击时，玩家都会从画布的最右边移动到画布的最左边位于画布边缘的右箭头。

TLDR；为什么当右箭头中的else if为真时，pX会增加1并且玩家会移回左边缘？使用console.log，当条件为假时，我能够辨别出rightArrow 中的if 语句实际上正在绘制？！？！到底是怎么回事？

标签： javascripthtmlcanvas