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;почему pX увеличивается на 1, а игрок перемещается обратно к левому краю, когда else, если в rightArrow, установлено значение true?С console.log я смог заметить, что оператор if в rightArrow фактически рисует, когда условия ложны?!?!Что происходит?