用cocoscreator做一個幸運轉盤

先看一下做出來的效果圖![在這裏插入圖片描述]

1.首先需要做一個小球圍繞中心點做一個圓周運動

如圖通過公式可以得出x和y的值，然後通過下面的方法實現小球的圓周運動

onLoad() {
        this.zhuanpan.speed = 0.5;		//轉盤旋轉速度
        this.ball.speed = 2.5;				//小球速度
        this.circleCenter = new cc.Vec2(0, 0);   //中心點位置座標
        this.circleRadius = 250;			//半徑
        this.radian = 0;						//弧度
        this.schedule(this.circleMove, 0.01);  //開始執行下面的方法，小球就會做圓周運動
 }
 //在update中讓轉盤自轉
 update(dt) {
        this.zhuanpan.rotation += this.zhuanpan.speed;
    },
circleMove(dt) {
        // 先計算弧度
            this.radian += dt * (this.ball.speed);
            let x = this.circleRadius * Math.cos(this.radian) + this.circleCenter.x;
            let y = this.circleRadius * Math.sin(this.radian) + this.circleCenter.y;
            let angle = 360 - 180 / Math.PI * this.radian;
            //this.ball.rotation = angle;
            this.ball.position = cc.v2(x, y);
    },

2.然後讓小球做向心運動，即減小小球的半徑

調用下面這個方法小球就開始做向心運動了

startBallRotate(dt) {
        this.circleRadius -= 15 * dt;
        let ballPos = this.nodeConvertToNodeSpaceAR(this.ball, this.zhuanpan);
        this.result = 5;   // 這個是最後小球到達的數字位置，這個數字寫成參數，就可以控制每一輪的結果了。就可以實現手動操控結果了...
        let str = ""+ this.result;
        let dist = ballPos.sub(this.zhuanpan.getChildByName(str).position).mag();
        if (this.circleRadius < 180 && dist < 50) {
            if (this.isrotate) {
                let ballPos1 = this.nodeConvertToNodeSpaceAR(this.ball, this.zhuanpan.getChildByName(str));
                this.ball.setPosition(ballPos1);
            }
            this.ball.parent = this.zhuanpan.getChildByName(str);
            this.isrotate = false;
        }
        if (!this.isrotate) {
            this.startJumpAni(dt);
            //this.moveToPos();
        }
    },換座標，使兩個物體處於相同座標系
    nodeConvertToNodeSpaceAR(node, target) {
        var worldPos = node.convertToWorldSpaceAR(cc.p(0, 0));
        var pos = target.convertToNodeSpaceAR(worldPos);
        return pos;
    }

3.最後是小球要到達的位置

如圖，我在每個數字的位置分別創建了一些點數，讓其隨着轉盤一起運動，讓小球的位置到達這些點數的位置就可以實現了

爲了讓效果更加真實，我寫了一系列動畫模擬碰撞效果。（這裏的假動畫有點粗糙，有需要的話可以寫的詳細一點，逼真一點）

startJumpAni(dt) {
        if (this.isadd) {
            this.ball.x += dt * 100;
            this.ball.y += dt * 50;
            console.log("ball---y",this.ball.y);
            if (this.ball.y > -20) {
                this.ball.x -= dt * 300;
                this.ball.y -= dt * 100;
                this.moveToPos();
                this.isadd = false;
            }
        }
    },
    moveToPos() {
        let moveCenterUp = cc.moveTo(0.2,cc.p(0,48));
        let moveUp1 = cc.moveTo(0.2,cc.p(-30,44));
        let moveUp2 = cc.moveTo(0.2,cc.p(30,44));
        let moveLeft = cc.moveTo(0.2, cc.p(-24, 0));
        let moveSmall1 = cc.moveTo(0.2,cc.p(-2,4));
        let moveSmall2 = cc.moveTo(0.3,cc.p(3,7));
        let moveRight = cc.moveTo(0.2, cc.p(24, 0));
        let moveCenter = cc.moveTo(0.3, cc.p(0, 0));
        let action = cc.sequence(moveCenterUp,moveLeft,moveUp1,moveRight,moveUp2,moveSmall1,moveSmall2,moveCenter);
        this.ball.runAction(action);
		this.ball.position.sub(this.zhuanpan.getChildByName("number").getChildByName("0").position).mag();
    },