如何在Canvas中获取我的两个图像而不是互相擦除？

Question

我正在尝试使用Html和JS在Canvas中设置小游戏。我遇到一个问题，我不明白我错过了什么。

我在画布上绘制了两张精灵表，但是当它们彼此靠近时，我的画笔底部的那张将擦掉另一张。

我导入我的精灵，绘制和动画它们并使用setTimeout调用drawloop中的所有内容以降低动画的速度

function drawArthur() {
    updateFrame();
    animations();
    resetAnimations();
    context.drawImage(arthurImage, arthur.srcX, arthur.srcY, arthur.width, arthur.height, arthur.x, arthur.y, arthur.width, arthur.height);
    arthurImage.style.zIndex = '1';
}

function updateFrame() {
    arthur.currentFrame = ++arthur.currentFrame % arthur.colums;
    arthur.srcX = arthur.currentFrame * arthur.width;
    arthur.srcY = 0;
    context.clearRect(arthur.x, arthur.y, arthur.width, arthur.height);

    // if (myModule.newZombie.isCrashed) {
    //     arthur.die = true;
    //     console.log(arthur.die);
    // }
}

function animations() {
    arthur.srcX = arthur.currentFrame * arthur.width;
    if (arthur.goRight) {
        arthur.srcY = arthur.goRowRight * arthur.height;
    } else if (arthur.goLeft) {
        arthur.srcY = arthur.goRowLeft * arthur.height;
    } else if (arthur.duckRight) {
        arthur.srcY = arthur.duckRowRight * arthur.height;
    } else if (arthur.atkRight) {
        arthur.srcY = arthur.atkRowRight * arthur.height;
        if (zombie.x < 274 && zombie.x > 262) {
            console.log('killllll');
            zombie.dieRight = true;
        } else if (zombie.x < 262) {
            zombie.dieRight = false;
            zombie.x = -50;
        } else if (arthur.jumpRight) {
            arthur.srcY = arthur.jumpRowRight * arthur.height;
        }
    }
}

// function that reset all states every time in the draw loop to set the states at the origin state
function resetAnimations() {
    arthur.stand = arthur.right;
    arthur.goLeft = false;
    arthur.goRight = false;
    arthur.duckRight = false;
    arthur.atkRight = false;
    arthur.jumpRight = false;
}

function drawLoop() {
    setTimeout(function () {
        context.clearRect(0, 0, theCanvas.width, theCanvas.height);
        drawArthur();
        drawZombie();
        requestAnimationFrame(function () {
            drawLoop();
        });
    }, 150);
    createNewZombie();
    console.log(allZombies);
}

我不能管理两个得到我的两个字符，只是相互重叠。拉环中的最后一个，这里是僵尸，当他经过他时会消灭亚瑟。

谢谢 ！

Answer 1

假设你的drawZombie方法也调用类似的updateFrame()方法，并且它也有像context.clearRect(arthur.x, arthur.y, arthur.width, arthur.height);这样的行

发生了什么事就是你

1）清除亚瑟背后的区域

2）画出亚瑟

3）清除僵尸背后的区域，即使亚瑟在僵尸身后

4）画出僵尸

因为你用drawLoop清除context.clearRect(0, 0, theCanvas.width, theCanvas.height);中的整个画布，所以你不需要做（1）和（3）。

从context.clearRect(...)方法中删除updateFrame。

要么

如果你想要那些额外的clearRect(...)，只要确保它们都在你绘制亚瑟和僵尸之前发生

希望这可以帮助