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 の位置でパワーアップを描画します。パワーアップ配列をコンソール ログに記録すると、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) を使用すると、以降の描画命令はすべてその位置から相対的に描画されます。基本的に、描画命令を 2 回オフセットしています。代わりに、次のようにする必要があります。

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 に答える