0

我正在制作一个小画布游戏，并添加一些玩家可以收集的道具。这是我用来使它们出现的方法：

thePowerUps.forEach ( function(t) 
{
    c.beginPath();
    c.save();
    c.translate(t.x,t.y);
    c.fillStyle = t.fill;
    c.moveTo(t.x - 15, t.y - 15);
    c.lineTo(t.x + 15, t.y - 15);
    c.lineTo(t.x + 15, t.y + 15);
    c.lineTo(t.x - 15, t.y + 15);
    c.lineTo(t.x - 15, t.y - 15);
    c.fill();
    c.restore();
    c.closePath();
 });

所以我正在循环绘制每个电源阵列。在我的测试用例中，tx 和 ty 都是 200。但是这段代码在 400、400 位置绘制了 power up。我控制台记录了 power ups 数组，它为 x 和 y 返回了 200。如果我将玩家角色移动到坐标 200,200 上，则在 400,400 处绘制的加电消失并且加电代码执行。

因此，出于所有功能目的，它位于正确的位置。它只是没有出现在那里。然而玩家、坏人和子弹都在正确的坐标中。

我试过这样做；

    c.beginPath();
    c.save();
    c.translate(150,150);
    c.fillStyle = 'orange';
    c.moveTo(150 - 15, 150 - 15);
    c.lineTo(150 + 15, 150 - 15);
    c.lineTo(150 + 15, 150 + 15);
    c.lineTo(150 - 15, 150 + 15);
    c.lineTo(150 - 15, 150 - 15);
    c.fill();
    c.restore();
    c.closePath();

一个“静态”框，无需查找数组中的值。这也绘制了错误的位置（在本例中为 300,300）。我尝试将它放在游戏循环中的不同位置（包括正确绘制部分的代码之前和之后）。没有效果。

这是僵尸坏人的代码，它们绘制在正确的位置：

c.beginPath();
c.save();
c.translate(i.x,i.y);
zomAngle = getZomAngle(i.x, i.y);
if (Player1.x - i.x < 0) {
c.rotate(zomAngle);
}
else {
c.rotate(zomAngle);
c.scale(-1,1);
}
c.translate(-i.x,-i.y);
c.fillStyle = i.fill;
c.moveTo(i.x - 18, i.y);
c.lineTo(i.x + 18, i.y + 15);
c.lineTo(i.x + 18, i.y - 15);
c.lineTo(i.x - 18, i.y);
c.fill();
c.restore();
c.closePath();

正如你所看到的，这基本上是一样的，除了坏人有一个轮换来让他们面对玩家。我尝试将它添加到加电中，但它没有任何效果——它们仍然会通过行走超过 200,200 来触发，无论它们实际上是在哪里绘制的。

有任何想法吗？

4

1 回答 1

1

如果您使用 translate(x, y) ，那么您的所有后续绘图指令都将从该位置相对绘制。你现在基本上是在两次抵消你的绘图指令。相反，您应该这样做：

thePowerUps.forEach ( function(t) 
{
    c.beginPath();
    c.save();
    c.translate(t.x,t.y);
    c.fillStyle = t.fill;
    c.moveTo(-15, -15);
    c.lineTo(15, -15);
    c.lineTo(15, 15);
    c.lineTo(-15, 15);
    c.lineTo(-15, -15);
    c.fill();
    c.restore();
    c.closePath();
 });
于 2013-07-21T19:56:16.237 回答