精灵后恢复背景

时间:2018-08-11 18:09:25

标签: javascript canvas sprite getimagedata putimagedata

我正在尝试制作游戏,但我有一些精灵会相互重叠。当使用clearRect清除精灵的区域时,其后面的任何精灵将消失,就像前景精灵不是透明的一样。但是,如果我尝试使用get/putImageData保存和还原精灵后面的区域,则会发生奇怪的事情。各个地方的子画面的一部分不会被“拉开”,其他部分似乎被打碎并码开了,其他子画面被涂抹了。这是一个代码块:

var anim = function()
{
    if(gtiming < Date.now() % 1000)
        timing = (Date.now() % 1000) - gtiming;

    if(stage == 1)
    {
        ugcnt = ugcnt + timing;

        if(mleft == true)
        {
            acc = acc - 0.25;
        }
        else if(mright == true)
        {
            acc = acc + 0.25;
        }
        else
        {
            if(acc < 0 || acc > 0) acc = acc / 1.1;
        }
        if(kyx < 0)
        {
            kyx = 0;
            acc = -acc;
        }
        else if(kyx > 432)
        {
            kyx = 432;
            acc = -acc;
        }
        if(kyblk != null)
            xbios.putImageData(kyblk, kyx, 155);
        kyblk = null;
        kyx = kyx + acc;
        kyblk = xbios.getImageData(kyx, 155, 208, 245);
        xbios.drawImage(kyk[Math.floor(kyf)], 0, 0, 416, 490, kyx, 155, 208, 245);

        if(ugcnt > mus[r][1] * 1000)
        {
            ugcnt = 0;
            ugobj.push(new ugnaut(Math.floor(Math.random() * 640), -208, "L"));
        }
        ugobj.forEach(testug);


        kyf = kyf + ((timing / 1000) * (mus[r][1] * 240));
        if(kyf > 119)
            kyf = kyf - 119;
    }

    gtiming = Date.now() % 1000;
    if(stage > 0)
        requestAnimationFrame(anim);
}
function ugnaut(x, y, f)
{
    this.x = x;
    this.y = y;
    this.f = f;
    this.fr = 0;
    this.blk = null;

    this.set=function()
    {
        if(this.blk != null)
            xbios.putImageData(this.blk, this.x, this.y);
        this.blk = null;
        if(f == "L")
        {
            this.y++;
            this.blk = xbios.getImageData(this.x, this.y, 179, 208);
            xbios.drawImage(ugf[this.fr], 0, 0, 179, 208, this.x, this.y, 179, 208);
            this.fr++;
            if(this.fr > 44) this.fr = 0;
        }
    }
    this.getx = function()
    {
        return this.x;
    }
    this.gety = function()
    {
        return this.y;
    }
    this.getf = function()
    {
        return this.f;
    }
}
function testug(item, index)
{
    if(item.getx() > -180 && item.getx() < 640 && item.gety() > -224 && item.gety() < 400)
    {
        item.set();
    }
    else
    {
        item = null;
        ugobj.splice(index, 1);
    }
}

对于那些想知道的人,是的,我确实将Canvas 2D上下文称为xbios。当时感觉就像一个有趣的名字。无论如何,根据我的理解,在“对象” this中包含一个ugnaut时,其持有的值将是该对象实例的局部值,因此我假设每个ugnaut都将拥有其自己的背景信息在this.blk中,但是我错了吗?我还应该使用其他什么方法?

0 个答案:

没有答案