如何使用HTML5 KineticJS进行shell改组

Question

我想用KineticJS在HTML5中随机播放我的贝壳，就像这个游戏一样（链接如下）：http://butchersworkshop.com/witr/

我在3行中有9个炮弹

这是屏幕截图：http://screencast.com/t/wO6Cm4DcfW

我有这段代码：

    var positions = [[450,438],[450+100,438],[450+100*2,438],[450,438+50],[450+100,438+50],[450+100*2,438+50],[450,438+50*2],[450+100,438+50*2],[450+100*2,438+50*2]]

    var shelltext = ['1','2','3','4','5','6','7','8','9']

    var shellImg = new Image();  
    shellImg.onload = function() {      
for(var i=0;i<shelltext.length;i++){        

    var  x = positions[i][0]
    var  y = positions[i][1]
    var shells = new Kinetic.Image({
        x:  x,
        y: y,
        image: shellImg,
        width: 100,
        height: 50,
        id:i+1,
        name:shelltext[i] ,
        animate:animate,
    });
    var shelltext = new Kinetic.Text({
        x: x,
        y: y+55,
        width: 100,
        fontFamily: 'Arial',
        fontSize: 24,
        align: 'center',
        fontStyle: 'bold ',
        text: shelltext[i],
        fill: 'black'
    });

          };
          shellImg.src = 'images/shell.png';