相当于

Question

我一直在试图教我一些游戏中的物理和一本书叫基金会的ActionScript 3的ActionScript重排根画布。我认为数学原理也适用于其他技术，特别是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重新设置一样尽可能地减少类似的影响。

Answer 1

嗯，这不是那么简单......想帆布作为一个BitmapData，而不是一个影片剪辑的......如果你画的东西，你要移动它，必须先删除它，并在未来再次绘制位置......画布中没有容器或任何幻想显示列表内容。
你可以，但是，建立自己的显示列表状结构，也可以使用图书馆像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）

Answer 2

你可以看一下另一种方式。每个父母都是一个'起源'位置，这意味着它是您定位其他项目（儿童）相关的区域。

你不需要任何花哨的假此行为。

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

祝你好运！