cocos2d-js 屏幕横向无限滚动

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/zhenyu5211314/article/details/85114733

有两张一样的左右连接的图片进行左右排列，根据拖拽偏移量计算出当前显示的主要index，设置其位置，然后根据四舍五入情况，设置另外一张图片的位置，上下平移同理。

1.首先将四张图片增加到拖拽层，确保单张图片长度大于屏幕长度

initWaveBg: function() {
    var wavePanel = cc.Node.create();
    wavePanel.setContentSize(g_winSize);

    this._waveBg = [];
    for (var i = 1; i <= 4; i++) {
        var bg_main = cc.Sprite.create("res/ui/seaWorld/Exploration_bg01.jpg");
        bg_main.setAnchorPoint(cc.p(0.5, 0.5));
        bg_main.setScale(2.0);

        var wavetype = 6;   // 1~6
        // waternm2
        var shader = cc.GLProgram.createWithFilenames("res/shader/ui_normal.vsh", "res/shader/waternm.fsh");
        bg_main.setShaderProgram(shader);
        var normaltexture = g_textureCache.addImage('res/effect/seabattle/sea_normalmap_00' + wavetype + ((wavetype >= 5) ? '.png' : '.tga'));
        normaltexture.setTexParameters(gl.LINEAR, gl.LINEAR, gl.REPEAT, gl.REPEAT);
        bg_main.getGLProgramState().setUniformTexture('u_normalMap', normaltexture);
        wavePanel.addChild(bg_main);
        this._waveBg.push(bg_main);
        this._waveSize = cc.size(2*bg_main.getContentSize().width, 2*bg_main.getContentSize().height);
    }

    this._waveBg[0].setPosition(cc.p(g_winSize.width/2, g_winSize.height/2));
    this._waveBg[1].setPosition(cc.p(g_winSize.width/2+this._waveSize.width, g_winSize.height/2));
    this._waveBg[2].setPosition(cc.p(g_winSize.width/2, g_winSize.height/2+this._waveSize.height));
    this._waveBg[3].setPosition(cc.p(g_winSize.width/2+this._waveSize.width, g_winSize.height/2+this._waveSize.height));
    
    wavePanel.setAnchorPoint(cc.p(0.5, 0.5));
    wavePanel.setPosition(cc.p(g_winSize.width * 0.5, g_winSize.height * 0.5));
    this._mapPanel.addChild(wavePanel);
},

2.根据mapPanel的拖拽量同步海面位置，注意左右移动正负区别

_listener_touch_moved: function (touches, event) {
    cc.log("onTouchMoved");
    this.onTouchCheckBounder(touches.getDelta(), true);

    var showNewX = false;
    var showNewY = false;
    var offLastX = this._origin_pos.x + this._offset_x - this._last_pos.x;
    if (Math.abs(offLastX) >= this._cellSize.width) {
        showNewX = true;
        var addXNum = Math.floor(Math.abs(offLastX)/this._cellSize.width + 0.5);
        this.moveCellsWithMap(offLastX < 0 ? addXNum : -addXNum, 0);
        if (offLastX < 0) {
            this._offset_x = this._last_pos.x - this._origin_pos.x - this._cellSize.width * addXNum;
        } else {
            this._offset_x = this._last_pos.x - this._origin_pos.x + this._cellSize.width * addXNum;
        }
        var moveDir = offLastX < 0 ? "->>>>>> " : "<<<<<<- ";
        cc.log(moveDir + addXNum);
    }
    var offLastY = this._origin_pos.y + this._offset_y - this._last_pos.y;
    if (Math.abs(offLastY) >= this._cellSize.height) {
        showNewY = true;
        var addYNum = Math.floor(Math.abs(offLastY)/this._cellSize.height + 0.5);
        this.moveCellsWithMap(0, offLastY < 0 ? addYNum : -addYNum);
        if (offLastY < 0) {
            this._offset_y = this._last_pos.y - this._origin_pos.y - this._cellSize.height * addYNum;
        } else {
            this._offset_y = this._last_pos.y - this._origin_pos.y + this._cellSize.height * addYNum;
        }
        var moveDir = offLastY < 0 ? "-^^^^^^ " : "vvvvvv- ";
        cc.log(moveDir + addYNum);
    }

    this._mapPanel.setPosition(cc.p(this._origin_pos.x + this._offset_x, this._origin_pos.y + this._offset_y));
    if (showNewX) this._last_pos.x = this._mapPanel.getPosition().x;
    if (showNewY) this._last_pos.y = this._mapPanel.getPosition().y;

    // 托动同步海面位置
    if (showNewX) {
        var deltax = Math.abs(this._last_pos.x - this._origin_pos.x);
        var xnum = Math.round(deltax/this._waveSize.width);
        var right = (this._last_pos.x < this._origin_pos.x) ? 1 : -1;
        var waveCur = xnum%2;
        var waveMove = (waveCur+1)%2;
        this._waveBg[waveCur].setPositionX(g_winSize.width/2+right*xnum*this._waveSize.width);
        this._waveBg[waveCur+2].setPositionX(g_winSize.width/2+right*xnum*this._waveSize.width);
        if (xnum*this._waveSize.width > deltax) {
            this._waveBg[waveMove].setPositionX(this._waveBg[waveCur].getPositionX()-right*this._waveSize.width);
            this._waveBg[waveMove+2].setPositionX(this._waveBg[waveCur].getPositionX()-right*this._waveSize.width);
        } else {
            this._waveBg[waveMove].setPositionX(this._waveBg[waveCur].getPositionX()+right*this._waveSize.width);
            this._waveBg[waveMove+2].setPositionX(this._waveBg[waveCur].getPositionX()+right*this._waveSize.width);
        }
    }
},