Question

我一直在尝试自学一些游戏物理，并推荐了一本名为Foundation ActionScript 3的书。我估计数学原理也适用于其他技术，特别是html5 canvas。因此，在我的好奇心中，我开始将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是否有类似的概念，允许我以尽可能少的动作重新获得类似的效果。

Answer 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并且没有检查语法）。除非目的是学习，否则我建议坚持制作游戏（用一种语言）。

祝你好运！

Answer 2

嗯，这并不是那么简单......将canvas视为BitmapData而不是MovieClip ......如果你画了一些东西而你想要移动它，你首先必须擦除它并在下一个位置再次绘制它...画布中没有容器或任何花哨的显示列表但是，您可以构建自己的显示列表，例如结构，也可以使用EaselJS之类的库。另一种选择是使用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）

Actionscript重新显示Canvas等效项

2 个答案: