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；为什么在rightArrow中的else设置为true时，pX为何增加1，而玩家又移回到左侧边缘？使用console.log，我可以辨别出当条件为false时rightArrow中的if语句实际上正在绘制吗？发生了什么事？

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

0 个答案: