Question

我正在制作一个小帆布游戏并添加玩家可以收集的一些强力补丁。以下是我用来制作它们的内容：

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();
 });

所以我骑自行车通过电源ups阵列绘制每一个。在我的测试用例中，t.x和t.y都是200.但是这段代码在位置400,400处启动了电源。我控制台记录了电源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触发，无论它们实际被绘制的位置。

有什么想法吗？

Answer 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();
 });

画布翻译价值神秘地加倍了自己 - 有些东西在错误的地方而不是其他东西

1 个答案: