有一个在画布上我以前的角色位置的问题

Question

我工作的JS游戏，我有一个名为罗宁播放器和游戏是像一个2D平台游戏。我曾在画布上，使他和我做了他的移动x像素左/右按键在A / d onkeydown事件。问题是，我无法抹去他的“副本”（之前的，现在应该dissapear字符的位置）。我不想用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

在图层。你把你的背景图层的图像在一个画布，你在另一个角色和敌人，然后每一层从背部开始，中的内容复制在依次将“缓冲”画布。一旦这样做了，你的结果复制到可视屏幕上的画布。扔掉缓冲器（或清除）在每个循环的结束。

如果层没有变化，只是不停地;如果这样做，为每个帧新的画布（或清除您使用的帆布）。只要你喜欢这种方式（或多达你有内存），您可以创建许多层。