Как я могу получить два моих изображения на холсте, не стирая друг друга? - PullRequest
Новая
       14

Как я могу получить два моих изображения на холсте, не стирая друг друга?

0 голосов
/ 04 апреля 2019

Я пытаюсь настроить небольшую игру в Canvas с использованием HTML и JS. Я сталкиваюсь с одной проблемой, и я не понимаю, чего мне не хватает.

Я рисую два листа спрайтов на холсте, но когда они приближаются друг к другу, один в нижней части моей откидной петли стирает другой.

Я импортирую свои srpites, рисую и анимирую их и вызываю все в отрисовке с помощью setTimeout, чтобы уменьшить скорость анимации 

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

Я не могу управлять двумя персонажами, чтобы они перекрывали друг друга. Последний из них, здесь Зомби, сотрет Артура, когда тот пройдет над ним.

Спасибо!

1 Ответ

0 голосов
/ 04 апреля 2019

Предполагая, что ваши drawZombie методы также вызывают аналогичный updateFrame() метод, и что у него также есть строка типа context.clearRect(arthur.x, arthur.y, arthur.width, arthur.height);

Что происходит, вы

1) clearобласть позади Артура

2) нарисовать Артура

3) очистить область позади Зомби (ей) , даже если Артур находится позади Зомби

4) нарисуйте Зомби (ы)

Поскольку вы очищаете весь холст в drawLoop с помощью context.clearRect(0, 0, theCanvas.width, theCanvas.height);, вам не нужно выполнять (1) и (3).

Удалите context.clearRect(...) из updateFrame методов.

или

Если вы хотите получить эти дополнительные clearRect(...) только убедитесь, что все они произошли, прежде чем вы начнете рисовать Артура и Зомби (ей)

Надеюсь, это поможет

...