Есть проблема с моими предыдущими позициями персонажей на холсте

Question

Я работаю над JS-игрой, в которой у меня есть игрок по имени Ronin, и игра похожа на 2D-платформер.Я работал над холстом, чтобы сделать его, и я заставил его переместиться на x пикселей влево / вправо с помощью клавиш A / D на ключе.Проблема в том, что я не могу стереть его «копии» (предыдущие позиции персонажа, которые теперь должны исчезнуть).Я не хотел бы использовать ctx.clearRect (), поэтому, пожалуйста, дайте мне другое решение.Заранее спасибо!

WalkLeft1 ------ WalkLeft2 ------ WalkRight1 ------ WalkRight2

/* Walk Left/Right 1/2 in the description no matter with the'broken' state file, it's because it can't draw a file that he does not know :) */
/* ------------------------------------------ */
/* files in my directory:

index.html
style.css
script.js
Costumes >
        WalkLeft >
                  WalkLeft1.jpg
                  WalkLeft2.jpg
        WalkRight >
                  WalkRight1.jpg
                  WalkRight2.jpg

*/

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;


Scene = function () {
    this.x = 0;
    this.y = 0;
    this.w = canvas.width;
    this.h = canvas.height;
    this.style = {
        fillStyle: "white",
        strokeStyle: "red",
        lineWidth: 5,
    }
    this.draw = function () {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.fillStyle = this.style.fillStyle;
        ctx.strokeStyle = this.style.strokeStyle;
        ctx.lineWidth = this.style.lineWidth;
        ctx.fillRect(this.x, this.y, this.w, this.h);
    }
}
Character = function () {
    this.width = 77;
    this.height = 92;
    this.x = 10;
    this.vx = 20;
    this.padding = 10;
    this.y = canvas.height - this.height - 10;
    this.img0 = document.getElementById("img0");
    this.img1 = document.getElementById("img1");
    this.img2 = document.getElementById("img2");
    this.img3 = document.getElementById("img3");
    this.counter = {
        walkLeft: 0,
        walkRight: 0,
    };
    this.draw = {
        walkLeft: () => {
            if (this.counter.walkLeft == 0) {
                ctx.drawImage(this.img0, this.x, this.y, this.width, this.height);
                this.counter.walkLeft = 1;
            } else if (this.counter.walkLeft == 1) {
                ctx.drawImage(this.img1, this.x, this.y, this.width, this.height);
                this.counter.walkLeft = 0;
            }
        },
        walkRight: () => {
            if (this.counter.walkRight == 0) {
                ctx.drawImage(this.img2, this.x, this.y, this.width, this.height);
                this.counter.walkRight = 1;
            } else if (this.counter.walkRight == 1) {
                ctx.drawImage(this.img3, this.x, this.y, this.width, this.height);
                this.counter.walkRight = 0;
            }
        }
    };

}
const scene = new Scene();
scene.draw();


var player = new Character();

var initInterval = setInterval(
    function () {
        player.draw.walkRight();
    }, 400
);

var currentInterval = undefined;

document.addEventListener("keydown", function (e) {
    if (e.key == "a" || e.key == "ArrowLeft") {
        if (initInterval) {
            clearInterval(initInterval);
            initInterval = undefined;
        }
        if (currentInterval) {
            clearInterval(currentInterval);
            currentInterval = undefined;
        }
        setTimeout( // for first 300ms delay onchange
            function () {
                player.draw.walkLeft();
            }, 1);
            if(player.x - player.vx > player.padding) {
                player.x -= player.vx;
            } else {
                player.x = player.padding;
            }
        currentInterval = setInterval(
            function () {
                player.draw.walkLeft();
            }, 300);
            
    }
    if (e.key == "d" || e.key == "ArrowRight") {
        if (initInterval) {
            clearInterval(initInterval);
            initInterval = undefined;
        }
        if (currentInterval) {
            clearInterval(currentInterval);
            currentInterval = undefined;
        }
        setTimeout( // for first 300ms delay onchange
            function () {
                player.draw.walkRight();
            }, 1);
            if(player.x + player.vx < canvas.width - player.padding) {
                player.x += player.vx;
            } else {
                player.x = canvas.width - player.padding;
            }
        currentInterval = setInterval(
            function () {
                player.draw.walkRight();
            }, 300);
    }
});

body {
    overflow: hidden;
    margin: 0;
    padding: 0;
}

<html>
    <head>
        <title></title>
    </head>
    <link rel="stylesheet" href="style.css">
    <body>
        <canvas id="canvas"></canvas>
        <div id="images">
            <img id="img0" width="77px" height="92px" src="Costumes\WalkLeft\WalkLeft1.jpg" />
            <img id="img1" width="77px" height="92px" src="Costumes\WalkLeft\WalkLeft2.jpg" />
            <img id="img2" width="77px" height="92px" src="Costumes\WalkRight\WalkRight1.jpg" />
            <img id="img3" width="77px" height="92px" src="Costumes\WalkRight\WalkRight2.jpg" />
        </div>
        <script src="script.js"></script>
    </body>
</html>

Answer 1

Работа в слоях.Вы помещаете изображения фонового слоя на один холст, а вашего персонажа и врагов - на другой, а затем копируете содержимое каждого слоя, начиная со спины, по порядку, на «буферный» холст.как только это будет сделано, вы копируете результат на видимый экранный холст.Выбрасывайте буфер (или очищайте его) в конце каждого цикла.

Если слой не изменяется, просто сохраните его;если это так, создайте новый холст для каждого кадра (или очистите холст, который вы использовали).Вы можете создать столько слоев, сколько захотите (или столько, сколько у вас есть памяти).