Question

您好！

我对js的clearrect()函数有一个奇怪的问题。我的应用程序基本上从2个函数中删除，其中1 drawMap()从名为mapArray的数组中渲染地图。功能updateGame更新播放器的当前位置并呈现它。

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

现在奇怪的是，这一切都适用于玩家对象。它被移除并在他的新位置的每一帧再次绘制。

同时地图只会在第一帧画出（当玩家还没有画出因为主循环还没有开始）并且在第一帧之后没有被重绘{ {1}}已被调用。

我的地图制作：

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

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

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

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

Answer 1

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

试试这个：

function drawMap() {
    posY = 0;

    // The rest is the same
}

清除后重绘基于tileset的地图

1 个答案: