javascript - 在clearrect之后重绘基于tileset的 map

Question

我对 js 的 clearrect() 函数有一个奇怪的问题。我的应用程序基本上存在 2 个函数，其中 1 个 drawMap() 从名为 mapArray 的数组中渲染 map 。 updateGame 函数更新玩家的当前位置并渲染它。

我将它们放在一个非常简单的游戏循环系统中。并每帧调用 clearrect() 以删除玩家对象的旧位置。

现在奇怪的是，所有这些都适用于玩家对象。它会被删除并在新位置的每一帧再次绘制。

同时， map 仅在第一帧上绘制(当玩家甚至尚未绘制时，因为主循环尚未开始)，并且在第一个 clearrect()< 之后不会重新绘制 已被调用。

我的 map 创建:

var mapArray = [
    [0,0,0,0,1,0,0,0,0,0],
    [0,0,0,0,1,0,0,0,0,0],
    [0,0,0,0,1,0,0,0,0,0],
    [0,0,0,0,1,0,0,0,0,0],
];

var grass = new Image();
var dirt = new Image();

grass.src = 'grass.png';
dirt.src = 'dirt.png';

var posX = 0;
var posY = 0;
function drawMap() {
    for (var i = 0; i < mapArray.length; i++) {
        for (var j = 0; j < mapArray[i].length; j++) {
            if (mapArray[i][j] == 0){
                ctx.drawImage(grass, posX, posY, 64, 64);
            }
            if (mapArray[i][j] == 1) {
                ctx.drawImage(dirt, posX, posY, 64, 64);
            }
            posX += 64;
        }
        posX = 0;
        posY += 64;
    }
}

我的播放器创建:

var playerImg = new Image();

var player = {
    speed: 1, // movement in pixels per second
    x: 10,
    y: 200
};

playerImg.src = 'player.png';

function updateGame(){
    //waarom moet dit hier vragen
    if (38 in keysDown) { // Player holding up      
        player.y -= player.speed;
    }

    ctx.drawImage(playerImg, player.x, player.y);
}

和主游戏循环

var ONE_FRAME_TIME = 1000 / 60 ;
var mainloop = function() {
    ctx.clearRect(0, 0, 640, 640);
    updateGame();
    drawMap();
};
setInterval(mainloop, ONE_FRAME_TIME);

我唯一能想到的是 map 创建需要很长时间。但是当我将 fps 设置为 1 秒时，它仍然不显示。

希望有人知道如何解决这个问题？

(请注意，我知道代码效率低下，仅用于学习/测试目的)

Answer 1

您只能看到第一个drawMap，因为您的posY变量永远不会重置为0。如果您的 Canvas 与绘制 map 一样大(在您的情况下为640 x 256) 那么您实际上是在第一个 drawMap 之后在 Canvas 之外进行绘制。

试试这个:

function drawMap() {
    posY = 0;

    // The rest is the same
}