NoteWalk/assets/Script/Main/SongSelector.ts

// import PrefabManager from '../Manager/core/PrefabManager';
import { EventType, ObserverManager } from '../Manager/core/EventManager';
import PrefabManager from '../Manager/core/PrefabManager';
import { UIID } from '../Manager/core/UIID';
import CCUtils from '../Utiles/CCUtils';
import Utiles from '../Utiles/Utiles';
const { ccclass, property } = cc._decorator;

@ccclass
export default class SongSelector extends cc.Component {
    @property(cc.Prefab)
    itemPrefab: cc.Prefab = null;

    @property(cc.Node)
    content: cc.Node = null;

    /** 歌曲个数 可自定义 */
    private _itemCount: number = 25;
    /** 角度  */
    private commonAngle: number = 0;
    // 存储所有滚动元素的数组
    private items: cc.Node[] = [];
    /** 平均每首歌曲的弧度 */
    private _rAngle: number = 45;
    /** 圆的半径 */
    private r: number = 0;
    /** 圆的中心点在哪里 */
    private _circle: cc.Vec2 = cc.v2(0, 0);
    /** 当前显示在中心区域的元素下标 */
    private tempIndex: number = 0;
    /** 触摸层 */
    private touchLayer: cc.Node = null;
    /** 记录开始滑动坐标 */
    private _BeganPos: cc.Vec2 = cc.v2(0, 0);
    /** 最后滑动坐标 */
    private _lastpos: cc.Vec2 = cc.v2(0, 0);
    /** 是否在滑动 */
    private _cartouch: boolean = false;
    private _down: boolean = false;
    /** 避免滑动过程中，点击进入游戏 */
    private _clickTouch: boolean = true;

    private _recentcardi: number = 0;

    /** 选中时，容错范围 */
    private faultPx: number = 20;

    protected onLoad(): void {
        this.setLinsten();
        this.initList();
    }

    protected onEnable(): void {
        this.node.opacity = 255;
        this.schedule(this.updateMusicIconScale);
    }

    protected onDisable(): void {
        // 取消歌曲ICON缩放帧事件
        this.unschedule(this.updateMusicIconScale);
    }

    /**
     * 监听触摸层
     *
     * @private
     * @memberof SongSelector
     */
    private setLinsten(): void {
        this.touchLayer = CCUtils.findChild(this.content, 'touchLayer');
        this.touchLayer.on(cc.Node.EventType.TOUCH_START, this.onTouchBegan.bind(this), this);
        this.touchLayer.on(cc.Node.EventType.TOUCH_MOVE, this.onTouchMoved.bind(this), this);
        this.touchLayer.on(cc.Node.EventType.TOUCH_END, this.onTouchEnded.bind(this), this);
        this.touchLayer.on(cc.Node.EventType.TOUCH_CANCEL, this.onTouchEnded.bind(this), this);
    }

    private initList(): void {
        this.commonAngle = 360 / this._itemCount;
        this.r = this._rAngle * this._itemCount;
        this.faultPx = 31 - this._itemCount;
        // this.r = 900;
        /** 圆的半径偏左 50px*/
        this._circle.x = (this.r - 50) * -1;
        for (let i: number = 0; i < this._itemCount; i++) {
            let item: cc.Node = cc.instantiate(this.itemPrefab);
            item.parent = this.content;
            CCUtils.getLabel(item, 'label').string = i.toString();
            item.attr({ ao: i * this.commonAngle });
            this.items.push(item);
            item.setPosition(this.anglePos(item['ao']));
        }

        CCUtils.findChild(this.items[0], 'btn').runAction(cc.repeatForever(cc.rotateBy(12.0, 360)));
    }

    /**
     * 根据角度返回坐标
     * @param {*} angle 度数
     */
    private anglePos(angle: number): cc.Vec2 {
        var r = this.r;
        var x0 = this._circle.x;
        var y0 = this._circle.y;
        var ao = angle;
        var x1 = x0 + r * Math.cos((ao * 3.14) / 180);
        var y1 = y0 + r * Math.sin((ao * 3.14) / 180);
        return cc.v2(x1, y1);
    }

    /**
     * 检测歌曲是否在中心区域，自动缩放
     *
     * @param {*} dt
     * @memberof SongSelector
     */
    updateMusicIconScale(dt): void {
        for (let i: number = 0; i < this._itemCount; i++) {
            const music: cc.Node = this.items[i];
            const posy: number = music.y;
            /** 为什么是-25，我也忘记了 */
            var offesty = Math.abs(posy - 25);
            /** 估计140也是需要调的 */
            if (offesty < 140) {
                this.tempIndex = i;
                music.opacity = 255;
                music.setScale(1.2 - (offesty / 140) * 0.55);
                // TODO: 设置模式
                // Module.difficulty = Module.selectGateDifficulty[Module._recentcardi];
            } else {
                music.opacity = 150;
                music.setScale(0.5);
            }
        }
    }

    /**
     * 触摸开始
     *
     * @param {*} event
     * @return {*}
     * @memberof SongSelector
     */
    private onTouchBegan(event: any): void {
        // console.log("---start: " , this.gameFlag);
        const position: cc.Vec2 = event.getLocation();
        this._cartouch = true;
        this._down = true;
        this._lastpos = cc.v2(position.x, position.y);
        this._BeganPos = cc.v2(position.x, position.y);
    }

    /**
     *
     *
     * @private
     * @param {*} event
     * @return {*}  {void}
     * @memberof SongSelector
     */
    private onTouchMoved(event: any): void {
        // console.log("---onTouchMoved---: " , this._down);
        if (!this._down) {
            event.stopPropagation();
            return;
        }

        var position = event.getLocation();
        if (position.x + position.y == this._lastpos.x + this._lastpos.y) {
            return;
        }

        this._clickTouch = false;
        var offesty = position.y - this._lastpos.y;

        // this.carPositionOff(0, offesty*1.3);
        this.musicPositionOff(offesty * 0.2);
        this._lastpos = position;
    }

    private updateUIColor(rgb: cc.Color): void {
        console.warn('===rgb==', rgb);
        this.updateColorAction(CCUtils.findChild(this.node.parent, 'bg') , rgb);
        this.updateColorAction(CCUtils.findChild(this.node.parent, 'headLayer') , rgb);
    }

    private updateColorAction(node: cc.Node , rgb: cc.Color): void {
        node.stopAllActions();
        cc.tween(node)
        .to(0.5, { color: rgb })
        .start();
    }

    /**
     * 滑动结束
     *
     * @private
     * @param {*} event
     * @return {*}  {void}
     * @memberof SongSelector
     */
    private onTouchEnded(event: any): void {
        var position = event.getLocation();
        /** 是否点击组件内 */
        if (!this.touchMusic(event)) {
            
            const rgb: cc.Color = cc.color(Utiles.random(100, 255), Utiles.random(100, 255), Utiles.random(100, 255));
            this.updateUIColor(rgb);


            //点击直接切换到该歌曲
            if (position.x + position.y == this._BeganPos.x + this._BeganPos.y) {
                var node = this.items[this.getId(this._recentcardi + 1)];
                var node2 = this.items[this.getId(this._recentcardi - 1)];
                var node3 = this.items[this.getId(this._recentcardi + 2)];
                var node4 = this.items[this.getId(this._recentcardi - 2)];
                console.log('node: ', node);
                if (this.rectContainsPoint(node.getBoundingBoxToWorld(), event.getLocation())) {
                    this.musicPositionOff(-150 * 0.2);
                } else if (this.rectContainsPoint(node2.getBoundingBoxToWorld(), event.getLocation())) {
                    this.musicPositionOff(150 * 0.2);
                } else if (this.rectContainsPoint(node3.getBoundingBoxToWorld(), event.getLocation())) {
                    this.musicPositionOff(-300 * 0.2);
                } else if (this.rectContainsPoint(node4.getBoundingBoxToWorld(), event.getLocation())) {
                    this.musicPositionOff(300 * 0.2);
                } else {
                    return;
                }
            }
            // this._lastpos=position;
            if (!this._down) {
                event.stopPropagation();
                return;
            }
            this._clickTouch = true;
            this._down = false;
            // this.carPostionSure();
            this.musicMoveToChange();
        }
    }

    /**
     * 是否点击歌曲在组件内
     *
     * @private
     * @param {*} event
     * @return {*}  {void}
     * @memberof SongSelector
     */
    private touchMusic(event: any): boolean {
        if (this._clickTouch) {
            var node = this.items[this._recentcardi];
            if (this.rectContainsPoint(node.getBoundingBoxToWorld(), event.getLocation())) {
                // 点击在组件内的操作
                console.log('选中歌曲: ', this._recentcardi);
                this.intoGameMain(this._recentcardi);

                return true;
            }
        }
        return false;
    }

    /**
     * 进入游戏核心玩法
     *
     * @private
     * @memberof SongSelector
     */
    private intoGameMain(index: number): void {
        cc.tween(this.node).to(0.5, { opacity: 50 }).call((): void => {
            PrefabManager.close(this.node);
            ObserverManager.notify(EventType.OpenGame, { index: this._recentcardi });
        }).start();
    }

    /**
     * 获取歌曲id
     *
     * @private
     * @type {function(number)}
     * @memberof SongSelector
     */
    private getId(number: number): number {
        if (number > this._itemCount - 1) number = 0;
        if (number < 0) number = this._itemCount - 1;
        return number;
    }

    /**
     * 滑动选择歌曲
     *
     * @private
     * @param {*} val
     * @memberof SongSelector
     */
    private musicPositionOff(val: any): void {
        for (let i: number = 0; i < this.items.length; i++) {
            this.items[i]['ao'] += val;
            if (this.items[i]['ao'] < 0) this.items[i]['ao'] += 360;
            if (this.items[i]['ao'] > 360) this.items[i]['ao'] -= 360;
            this.items[i].setPosition(this.anglePos(this.items[i]['ao']));
        }
    }

    /**
     * 判定范围
     *
     * @private
     * @param {*} c
     * @param {*} t
     * @return {*}  {*}
     * @memberof SongSelector
     */
    private rectContainsPoint(c, t): any {
        var n = !1;
        t.x >= c.x && t.x <= c.x + c.width && t.y >= c.y && t.y <= c.y + c.height && (n = !0);
        return n;
    }

    /**
     * 滑动选择
     *
     * @private
     * @memberof SongSelector
     */
    private musicMoveToChange(): void {
        var angle = [];
        for (var i = 0; i < this._itemCount + 1; i++) {
            angle.push(i * this.commonAngle);
        }
        var ao = Math.abs(this.items[0]['ao']);

        for (var i = 0; i < this.items.length; i++) {
            var ao = this.items[i]['ao'];
            for (var j = 0; j < angle.length - 1; j++) {
                if (Math.abs(ao) >= angle[j] && Math.abs(ao) <= angle[j + 1]) {
                    var ao2 = 0;
                    if (angle[j + 1] - Math.abs(ao) < this.faultPx) {
                        ao2 = angle[j + 1];
                    } else {
                        ao2 = angle[j];
                    }
                    this.items[i]['ao'] > 0 ? (this.items[i]['ao'] = ao2) : (this.items[i]['ao'] = -ao2);
                    break;
                }
            }
        }
        var lastIndex = this._recentcardi;
        for (var i = 0; i < this._itemCount; i++) {
            if (this.items[i]['ao'] == 0 || this.items[i]['ao'] == 360) {
                this._recentcardi = i;
            }
        }

        // console.log("--this._recentcardi--: " , Module._recentcardi);
        var flag = true;
        for (var i = 0; i < this._itemCount; i++) {
            var item = this.items[i];
            var pos = this.anglePos(this.items[i]['ao']);
            item.stopAllActions();

            var call = cc.callFunc(
                function (t, index) {
                    // var sk = this.items[index].getChildByName("gd").getComponent(sp.Skeleton);
                    // if (index == this._recentcardi) {
                    //     sk.animation = "01";
                    // } else {
                    //     sk.animation = "02";
                    // }
                    // if (lastIndex != Module._recentcardi && flag) {
                    //     flag =false;
                    //     cc.audioEngine.stopAllEffects();
                    //     Utils.playMusic("sound/soung/audition/"+Module._recentcardi+".mp3",true);
                    // }
                    this.unschedule(this.musicScaleUpdate);
                },
                this,
                i
            );
            var call2 = cc.callFunc(
                function (t, index) {
                    // var sk = this.items[index].getChildByName("gd").getComponent(sp.Skeleton);
                    // if (sk.animation == "01") sk.animation = "02";
                },
                this,
                i
            );
            // TODO: 运行动画，暂时还不需要
            item.runAction(cc.sequence(cc.moveTo(0.2, pos), call, cc.delayTime(99 / 30), call2));

            if (i == this._recentcardi) {
                CCUtils.findChild(item, 'btn').runAction(cc.repeatForever(cc.rotateBy(12.0, 360)));
            } else {
                CCUtils.findChild(item, 'btn').rotation = 0;
                CCUtils.findChild(item, 'btn').stopAllActions();
            }
        }
    }
}