javascript - clearrect后重绘基于 map 集的 map

你好！

我对js的clearrect()函数有一个奇怪的问题。我的应用程序基本上不存在2个函数，其中1个drawMap()将映射从称为mapArray的数组中渲染出来。还有updateGame函数，用于更新播放器的当前位置并进行渲染。

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

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

同时，地图仅在第一帧绘制（当玩家还未绘制，因为主循环尚未开始时），并且在调用第一个clearrect()之后不会重新绘制。

我的地图创建：

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

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

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

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

最佳答案

您只看到第一个drawMap，因为您的posY变量永远不会重置为0。如果您的画布与绘制地图一样大（在您的情况下为640 x 256），那么实际上您是在第一个drawMap之后在画布之外绘制的。

尝试这个：

function drawMap() {
    posY = 0;

    // The rest is the same
}