Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Gameshow JavaScript spinner can't find Value

Tags:

javascript

css

I am trying to get results of the spinner. After 6 hours of debugging and all sorts of math attempts I can't seem to find out how to get the value of the spinner with each spin. What DIV does it land on?!

http://codepen.io/anon/pen/OMrOPe

Initially I thought the following algorithm would work.

total_rotations = Get Total Degrees in rotations (including what was done historically.
total_rotations /  360 = _total_rotations_of_a_circle
value_to_subtract = Take the absolute value of _total_rotations_of_a_circle * 360
left_over_value_in_Degree = total_rotations - value_to_subtract
left_over_value_in_Degree/60 = result.

This algorithm only works SOMETIMES. I just am not sure how to do this, any tips would help.

The aoY variable was presented by the original developer, but I don't know how to use that value to find the actual div its pointing to. What math do I need here?

$('#wheel .sec').each(function(){
            var t = $(this);
            var noY = 0;

        var c = 0;
        var n = 700;    
        var interval = setInterval(function () {
            c++;                
            if (c === n) { 
                clearInterval(interval);                
            }   

            var aoY = t.offset().top;
            $("#txt").html(aoY);
            console.log(aoY);

            /*23.7 is the minumum offset number that 
            each section can get, in a 30 angle degree.
            So, if the offset reaches 23.7, then we know
            that it has a 30 degree angle and therefore, 
            exactly aligned with the spin btn*/
            if(aoY < 23.89){
                console.log('<<<<<<<<');
                $('#spin').addClass('spin');
                setTimeout(function () { 
                    $('#spin').removeClass('spin');
                }, 100);    
            }
        }, 10);

        $('#inner-wheel').css({
            'transform' : 'rotate(' + totalDegree + 'deg)'          
        });

        noY = t.offset().top;

    });
});
like image 485
Vic Avatar asked Jun 30 '26 15:06

Vic


1 Answers

The formula RobG proposed is correct:

Math.ceil((( totalDegree + 30 ) % 360) / 60)

Something you also have to take into account is the fact that the offset changes for every consecutive plays. In order to deal with that, you can simply use this formula:

offset = extraDegree MOD 60

You can then replace the number 30 in the function by the offset variable:

Math.ceil((( totalDegree + offset ) % 360) / 60)

See this fiddle

like image 55
Bubblesphere Avatar answered Jul 02 '26 03:07

Bubblesphere



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!