0

我一直在尝试自学一些游戏物理学，因此推荐了一本名为 Foundation ActionScript 3 的书。我认为数学原理也适用于其他技术，尤其是 html5 画布。因此，出于好奇，我开始将 ActionScript 转换为 JavaScript，并在此过程中进行一些心理比较。到目前为止，原则和语法与我的眼睛非常相似，但后来我想到了这个名为“Reparenting”的概念。我在 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，也没有检查语法）。除非目的是学习，否则我建议坚持制作游戏（用一种语言）。

祝你好运！

于 2012-09-22T16:23:51.770 回答
0

好吧，这没那么简单……把画布想象成一个 BitmapData 而不是一个 MovieClip……如果你画了一些东西并且想要移动它，你首先必须擦除它并在下一个位置再次绘制它……画布中没有容器或任何花哨的显示列表内容。
但是，您可以构建自己的显示列表（如结构），也可以使用EaselJS 之类的库。另一种选择是使用 DOM，在某些情况下，这可能比使用画布元素更好（尽管对于游戏开发来说，这可能不是要走的路）。在这种情况下，您可以将 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 回答