Question

我有一个细分旋转问题，来自https://www.sitepoint.com/jquery-wheel-fortune-demo/演示的这个旋转轮：http://jsfiddle.net/sNYYD/237/

window.WHEELOFFORTUNE = {

cache: {},

init: function () {
    console.log('controller init...');

    var _this = this;
    this.cache.wheel = $('.wheel');
    this.cache.wheelMarker = $('.marker');
    this.cache.wheelSpinBtn = $('.wheel'); //im using the wheel as the spin button but simply change this to a button if you want.

    //mapping is backwards as wheel spins clockwise //1=win
    this.cache.wheelMapping = [400, 120, 80, 750, 150, 300, 60, 175, 500, 125, 75, 1000, 120, 200, 90, 600, 100, 250].reverse();

    this.cache.wheelSpinBtn.on('click', function (e) {
        e.preventDefault();
        if (!$(this).hasClass('disabled')) _this.spin();
    });

    //reset wheel
    this.resetSpin();

    //setup prize events
    this.prizeEvents();
},

spin: function () {
    console.log('spinning wheel');

    var _this = this;

    // reset wheel
    this.resetSpin();

    //disable spin button while in progress
    this.cache.wheelSpinBtn.addClass('disabled');

    /*
        Wheel has 10 sections.
        Each section is 360/10 = 36deg.
    */
    var deg = 1500 + Math.round(Math.random() * 1500),
        duration = 6000; //optimal 6 secs

    _this.cache.wheelPos = deg;

    //transition queuing
    //ff bug with easeOutBack
    this.cache.wheel.transition({
        rotate: '0deg'
    }, 0)
        .transition({
        rotate: deg + 'deg'
    }, duration, 'easeOutCubic');

    //move marker
    _this.cache.wheelMarker.transition({
        rotate: '-20deg'
    }, 0, 'snap');

    //just before wheel finish
    setTimeout(function () {
        //reset marker
        _this.cache.wheelMarker.transition({
            rotate: '0deg'
        }, 300, 'easeOutQuad');
    }, duration - 500);

    //wheel finish
    setTimeout(function () {
        // did it win??!?!?!
        var spin = _this.cache.wheelPos,
            degrees = spin % 360,
            percent = (degrees / 360) * 100,
            segment = Math.ceil((percent / 6)),  //divided by number of segments
            win = _this.cache.wheelMapping[segment - 1]; //zero based array

        console.log('spin = ' + spin);
        console.log('degrees = ' + degrees);
        console.log('percent = ' + percent);
        console.log('segment = ' + segment);
        console.log('win = ' + win);

        //display dialog with slight delay to realise win or not.
        setTimeout(function () {
            alert('you won '+win+'!');
        }, 700);

        //re-enable wheel spin
        _this.cache.wheelSpinBtn.removeClass('disabled');

    }, duration);

},

resetSpin: function () {
    this.cache.wheel.transition({
        rotate: '0deg'
    }, 0);
    this.cache.wheelPos = 0;
}

}

window.WHEELOFFORTUNE.init();

我有18个细分受众群并且胜利号码总是错误的，问题是Math.ceil((percent / 6))还是this.cache.wheelPos = 0;？

谢谢

Answer 1

我一直想把这个问题投反对票......（见link）

我认为你的代码缺乏一致性：在一行中有关于有10个段的注释，在另一个你说6个段，但是你的轮子中似乎有18个不同的段。修复那个部分（使用常量！），我认为你的大部分问题都将得到解决。

更新：您计算细分的方式不正确，通过此方式更改可以解决问题。

 //the segment is 18 multiplied by the proportion
 segment = Math.ceil((percent *18/100))-1;

jQuery旋转旋转

1 个答案: