Kineticjs：隨機運動圖像的動畫畫布

我如何能隨意挪動動畫添加到For循環的圖像，Kineticjs：隨機運動圖像的動畫畫布

我有像這樣的代碼：

var imageSRCC = ["images/image1.png","images/image2.png","images/image3.png"]; 

function Images(i,x,y) { 

    var CreatImage = new Image(); 
    Image= new Kinetic.Image({ 
    x:x, 
    y:y, 
    image: CreatImage, 
    width: 100, 
    height: 200, 
    }); 
    CreatImage.src = imageSRCC[i];  
    layer.add(Image); 

} 

for (var i =0; i <imageSRCC.length; i++) { 

    x: Math.floor(Math.random()*2 + 15) 
    y: Math.floor(Math.random()* 2 + 15) 

    Images(i,x,y) 
}

，我想這樣做這個：「運行示例」

http://chimera.labs.oreilly.com/books/1234000001654/ch05.html#balls_with_simple_interactions

在上面的鏈接，你可以看到例如下滾，你會看到（點擊下面嘗試防爆充足的5-7。）

.....

我會非常心存感激，如果任何人可以幫我一下吧。

來源

2014-07-04 Salman Afzal

我還沒有看過你的書中的例子，但你需要解決的第一個問題是：你的動畫循環在哪裏？它不是代碼示例中的for循環。 KineticJS提供了一個您可以使用的動畫類，或者您可以簡單地使用[這個經典示例]（http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/）。一旦你的動畫循環到位，你可以使用你的動畫圖像的「移動」功能使用你的隨機值。 – klenwell

謝謝Klenwell，但我非常基本的HTML5遊戲，並試圖解決問題，如果你可以幫助我的Kineticjs隨機移動動畫，以便將是尊重。我試圖找出像offwalls反彈和彼此反彈的東西。 –

你還沒有在這裏問過一個非常集中的問題。但看book example，這是我建議：

首先，創建一個fiddle運行書中提供的示例。這涉及到的不僅僅是從書中複製粘貼代碼。這樣做可以幫助您區分示例應用程序的HTML5和Javascript元素。如果你不熟悉JSFiddle，它是一個用於在StackOverflow和其他地方展示代碼的有用工具。

然後，探索Javascript代碼，讓自己瞭解不同的功能在做什麼。您要特別關注的是drawScreen，update和render函數。每個功能的目的是什麼？

最後，KineticJS在哪裏適合這個？ KineticJS是一個圖形庫，因此這裏只使用該示例中用於本地HTML5畫布代碼的稍微更加用戶友好的替換。重點關注書碼中的context對象。你的目標是用KineticJS代碼替換它。

理想情況下，當您完成這些步驟時，您將能夠提供一個代碼片段來回答您自己的問題。有它！

來源

2014-07-07 23:49:51 klenwell

Kineticjs：隨機運動圖像的動畫畫布

回答

相關問題