如何使用cocos2d-js滾動網格中的行和列

Question

我是遊戲開發人員和科科斯中的新成員。 所以，我有以下網格：

1|2|3|4 
5|6|7|8 
9|1|2|3 

用戶可以左右滾動的行或列。 例如，如果用戶滾動第一排一個位置，我們得到以下鰻魚：

4|1|2|3 
5|6|7|8 
9|1|2|3 

我怎麼可以用cocos2d的JS做？哪些組件用於此目的？

現在，我嘗試建立網格：

for (var i = 0; i < 16; i++) { 
      var tile = new NumberTile(i); 
      tile.pictureValue = gameArray[i]; 
      this.addChild(tile, 0); 
      tile.setPosition(49 + i % 4 * 74, 400 - Math.floor(i/4) * 74); 
} 

，並加入到遊戲層。 NumberTile - 它的精靈號碼。但我不知道如何滾動行和列。

Answer 1

使用垂直滾動視圖作爲容器，向其添加水平滾動視圖。

變種HelloWorldLayer = cc.Layer.extend（{ 精靈：空， 構造函數：函數（）{// 1.超級初始化第一 this._super（）; VAR計數= 10; 變種size = cc.winSize; var w = size.width; var h = size.height/4; var c_container = new cc.Node（）; c_container.setContentSize（cc.size（w，h * count） ）; var container = new cc.ScrollView（size，c_container）; container.setDirection（cc.SCROLLVIEW_DIRECTION_VERTICAL）; for（var i = 0; i計數; i ++）{child} = new cc.Node（）; child.setContentSize（cc.size（w，h））; this.createSubScrollView（child）; child.setPosition（cc.p（0，h * i））; container.addChild（child）; } var f1 = container.getAnchorPoint（）; container.setPosition（cc.p（0，0））; this.addChild（container）; 返回true; }，

createSubScrollView: function(container) { 
    var size = container.getContentSize(); 
    var count = 10; 
    var w = size.width/4;; 
    var h = size.height; 
    var c_container = new cc.Node(); 
    c_container.setContentSize(cc.size(w * count, h)); 
    var scroll = new cc.ScrollView(size, c_container); 
    scroll.setDirection(cc.SCROLLVIEW_DIRECTION_HORIZONTAL); 
    for (var i = 0; i < count; i++) { 
     var child = new cc.Node(); 
     child.setContentSize(cc.size(w, h)); 
     var color = i % 2 == 0 ? cc.color.RED : cc.color.GREEN; 
     var c = new cc.LayerColor(color, w, h); 
     child.addChild(c); 
     var label = new cc.LabelTTF("" + i, "Arial", 20); 
     label.setPosition(cc.p(w * 0.5, h * 0.5)); 
     child.addChild(label); 
     child.setPosition(cc.p(w * i, 0)); 
     scroll.addChild(child); 
    } 
    container.addChild(scroll); 
}, 
}); 

添加這裏是它的行爲