Web Tutorial: Wheel of Fortune (Part 4/4)

Finally, we're down to the last bit. We have a functioning Wheel of Fortune that spins with the application of some real-world physics. What else could we possibly want?

Well, what's the entire purpose of spinning a Wheel of Fortune? Why, to see what cool prizes we won, of course!

We're going to make use of arrays to store information, so if you need to do some reading up, here's a link. (http://www.w3schools.com/js/js_arrays.asp)

Add the following to your JavaScript code. It's an array declaration. It's a multi-dimensional array too. segments is the array, and each element of segments is also an array. There are twelve segments in the wheel.

        <script>
        var segments=[];

        for (i=12;i>=1;i--)
        {
            segments[i]=[];
            segments[i][0]=(i-1)*30;
            segments[i][1]=segments[i][0]+29;
        }

        document.onmousedown=mousedown;
        document.onmouseup=mouseup;

We've done all this with a For loop. This generates twelve segments twelve elements in the array segments. Each element in segments is an array consisting of two (for now) elements - the lowest degree and highest degree of that segment, respectively. So, for example, the first element in segments will be an array with the lowest degree 0 and the highest degree 29. The second element will be an array with the lowest degree 30 and the highest degree 69. That's because each segment in the wheel is 30 degrees.

Now add this to your code. It defines the third element in each array element of segments. This defines the prizes! Have fun with this! I've added random prizes to each of the twelve segments, and left the value blank where there is no prize.

        <script>
        var segments=[];

        for (i=12;i>=1;i--)
        {
            segments[i]=[];
            segments[i][0]=(i-1)*30;
            segments[i][1]=segments[i][0]+29;
        }

        segments[1][2]="";
        segments[2][2]="a plush Teddy Bear";
        segments[3][2]="$50 IKEA voucher";
        segments[4][2]="";
        segments[5][2]="";
        segments[6][2]="$1,000";
        segments[7][2]="a Sony vacuum Cleaner";
        segments[8][2]="a Brietlings Watch";
        segments[9][2]="an all-expenses paid trip to Tokyo";
        segments[10][2]="";
        segments[11][2]="a one-year gym membership";
        segments[12][2]="";

        document.onmousedown=mousedown;
        document.onmouseup=mouseup;

Now add this For loop in your rotatewheel_instant() function.

        function rotatewheel_instant()
        {
            var currentpos=document.getElementById("hidPos");

            var wheel=document.getElementById("wheel_wrapper");
            wheel.style.transitionTimingFunction="";
            wheel.style.transitionDuration="0s";
            wheel.style.transform="rotate("+currentpos.value+"deg)";
            wheel.style.WebkitTransitionTimingFunction="";
            wheel.style.WebkitTransitionDuration="0s";
            wheel.style.WebkitTransform="rotate("+currentpos.value+"deg)";

            currentstatus=document.getElementById("txtStatus");
            currentstatus.innerHTML="Stopped";
          
            for (i=1;i<=12;i++)
            {
                if (parseInt(currentpos.value)>=segments[i][0]&&parseInt(currentpos.value)<=segments[i][1])
                {
                    if (segments[i][2]=="")
                    {
                        alert("Sorry, you didn't win anything. Better luck next time!");
                    }
                    else
                    {
                        alert("Congratulations! You've won "+segments[i][2]+"!");
                    }
                }
            }          
        }

This runs a comparison once your wheel stops spinning. The code compares the last value in hidPos with the values in the array segments, to see if the value in hidPos falls between any of the lowest and highest values of each element. Then, it checks if the third element is a blank value, in which case it pops up a concilatory message, and if not, it pops up a congratulatory message.

There you go, we're done!

You have a spinning Wheel of Fortune that responds to your mouse drag, and then spits out a result upon stopping. There might be a better way of doing this. In the older days, I would have done it using Flash. But as it is, we did this using nothing but a text editor. Now that's awesome.

Down on your luck? Hey... where there's a wheel, there's a way.
T___T