我正在尝试制作游戏,但我有一些精灵会相互重叠。当使用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
中,但是我错了吗?我还应该使用其他什么方法?