0

私はゲームの物理学を独学で学ぼうとしており、Foundation ActionScript 3 という本を勧められました。数学の原則は、他のテクノロジー、特に html5 キャンバスにも当てはまると思いました。そこで、好奇心に駆られて、ActionScript を JavaScript に変換し始め、その過程でいくつかの精神的な比較を行いました。これまでのところ、原則と構文は私の目には非常に似ていましたが、「リペアレンティング」と呼ばれるこの概念に出会いました。ActionScript に次のコードがあります。

        parent1 = new Sprite();
        addChild(parent1);
        parent1.graphics.lineStyle(1, 0);
        parent1.graphics.drawRect(-50, -50, 100, 100);
        parent1.x = 60;
        parent1.y = 60;

        parent2 = new Sprite();
        addChild(parent2);
        parent2.graphics.lineStyle(1, 0);
        parent2.graphics.drawRect(-50, -50, 100, 100);
        parent2.x = 170;
        parent2.y = 60;

        ball = new Sprite();
        parent1.addChild(ball);
        ball.graphics.beginFill(0xff0000);
        ball.graphics.drawCircle(0, 0, 50);
        ball.graphics.endFill();
        ball.addEventListener(MouseEvent.CLICK, onBallClick);

private function onBallClick(event:MouseEvent):void
        {
            if (parent1.contains(ball)) {
                parent2.addChild(ball);
            }else if (parent2.contains(ball)) {
                parent1.addChild(ball);
            }

        }

したがって、ボールがクリックされるたびに、ボールは他の長方形に転送され、その長方形が「子」になります。JavaScript に、ActionScript の親の変更と同じくらい最小限の労力で同様の効果を得ることができる同様の概念があるかどうか疑問に思っています。

4

2 に答える 2

1

別の見方もできます。各親は「原点」位置であり、他の項目 (子) を相対的に配置する領域を意味します。

この動作を偽造するのに特別なものは必要ありません。

function parent(x, y) {
    this.x = x;
    this.y = y;
    this.addChild = function(child) {
        child.parent = this;
    }
}

function child(x, y) {
    this.x = x;
    this.y = y;
    this.parent = 0;
    this.getXPos = function() {
        if(parent != 0)
            return this.x + parent.x;
        else
            return this.x;
    }

    this.getYPos = function() {
        if(parent != 0)
            return this.y + parent.y;
        else
            return this.y;
    }
}


daddy = new parent(60, 60);
mommy = new parent(60, 170);
sonny = new child(0, 0);
//add mouse click condition//
if(sonny.parent != daddy) daddy.addChild(sonny);
else mommy.addChild(sonny);

これで始められるはずです（私はしばらくJSに触れておらず、構文をチェックしていませんでした）。目的が学習でない限り、(1 つの言語で) ゲームを作成することに固執することをお勧めします。

幸運を！

于 2012-09-22T16:23:51.770 に答える
0

まあ、それはそれほど単純ではありません...キャンバスをMovieClipではなくBitmapDataと考えてください...何かを描画して移動したい場合は、最初にそれを消去して次の位置に再度描画する必要があります...キャンバスには、コンテナーや派手な表示リストはありません。
ただし、独自の表示リストのような構造を作成したり、EaselJSなどのライブラリを使用したりできます。もう 1 つの方法は DOM を使用することです。状況によっては、これが canvas 要素を使用するよりも優れている場合があります (ただし、ゲーム開発の場合はおそらく適切ではありません)。この場合、DOM 要素をコンテナーとして使用できるため、親の変更は非常に簡単になります。

var parent1 = document.getElementById('parent1');
var parent2 = document.getElementById('parent2');
var myDiv = document.getElementById('myDiv');
myDiv.onclick = function() {
    if(myDiv.parentNode === parent1) {
        parent2.appendChild(myDiv);
    }else if(myDiv.parentNode === parent2){
        parent1.appendChild(myDiv);
    }
}

( jsfiddle )

于 2012-09-22T15:11:20.080 に答える