相當於

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，沒有檢查語法）。 我會建議堅持製作一個遊戲（用一種語言），除非目的是學習。

祝你好運！