如何使用cocos2d-js滚动网格中的行和列

Question

我是游戏dev和cocos的新手。 所以，我有以下网格：

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

用户可以滚动行或列。 例如，如果用户将第一行滚动一个位置，我们得到了以下grig：

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

使用垂直scrollview作为容器，添加水平滚动视图。

var HelloWorldLayer = cc.Layer.extend({ sprite: null, ctor: function() { // 1. super init first this._super(); var count = 10; var 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 < count; i++) { var 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); return 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);
},
});

这里添加的是它的行为