我以前在画布中的角色位置有问题

时间:2019-02-04 20:04:41

标签: javascript html html5 html5-canvas

我正在开发一个JS游戏,其中有一个名为Ronin的玩家,该游戏类似于2D平台游戏。我在画布上工作,使他工作,并让他在A / D键onkeydown上向左/向右移动x像素。问题是我无法删除他的“副本”(现在应该消失的角色的先前位置)。我不想使用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>

1 个答案:

答案 0 :(得分:0)

分层工作。您将背景图层图像放在一个画布中,将角色和敌人放在另一画布中,然后从背面开始依次将每个图层的内容复制到“缓冲”画布上。完成后,将结果复制到可见的屏幕画布上。在每个循环结束时扔掉缓冲区(或清除缓冲区)。

如果图层不变,则保留该图层;如果是这样,请为每个帧创建一个新画布(或清除您使用的画布)。您可以通过这种方式创建任意数量的图层(也可以根据需要创建任意多个图层)。