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

We've got a wheel, and it spins!

Now we're talking.

For an additional layer of interactivity, we'll add mouse events. So right now the wheel rotates according to what value is in the hidPos text box. Our mouse events will put those values in the hidPos text box without having to modify the value manually.

For further reading on JavaScript mouse events, follow this link! (http://www.w3schools.com/jsref/dom_obj_event.asp)

What we're going to do here, is simulate a mouse drag and drop. Make these changes to your JavaScript.

        <script>
        document.onmousedown=mousedown;
        document.onmouseup=mouseup;

        function mousedown(e)
        {

        }          

        function mouseup(e)
        {

        }

        function rotatewheel()
        {
            var currentstatus=document.getElementById("txtStatus");
            currentstatus.innerHTML="Spinning...";

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

            currentpos.value=parseInt(currentpos.value)%360;

            setTimeout(function(){rotatewheel_instant()},10000);
        }

        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";          
        }
        </script>

So we've defined two JavaScript functions, mouseup() and mousedown(). And we've set mousedown() to fire off when the mouse button is pressed, and mouseup() to fire off when the mouse button is released. Let's work on mousedown() first.

        <script>
        document.onmousedown=mousedown;
        document.onmouseup=mouseup;

        function mousedown(e)
        {
            if (!e)
            {
                var e=window.event;
            }

            if (document.getElementById("txtStatus").innerHTML=="Stopped")
            {
                document.getElementById("hidMousedownX").value=e.clientX;
                document.getElementById("hidMousedownY").value=e.clientY;
            }
        }          

        function mouseup(e)
        {

        }

        function rotatewheel()
        {
            var currentstatus=document.getElementById("txtStatus");
            currentstatus.innerHTML="Spinning...";

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

            currentpos.value=parseInt(currentpos.value)%360;

            setTimeout(function(){rotatewheel_instant()},10000);
        }

        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";        
        }
        </script>

The If-else block here ensures that the wheel cannot be manipulated while the wheel is spinning. It can only be spun when the status is at "Stopped.". The function then captures the x and y co-ordinates of your mouse pointer and sets them as values in the hidMousedownX and hidMousedownY textboxes, respectively.

Try it. Do the values in those textboxes change when you click the mouse?

Now, we're going to work on the mouseup() function.

        <script>
        document.onmousedown=mousedown;
        document.onmouseup=mouseup;

        function mousedown(e)
        {
            if (!e)
            {
                var e=window.event;
            }

            if (document.getElementById("txtStatus").innerHTML=="Stopped")
            {
                document.getElementById("hidMousedownX").value=e.clientX;
                document.getElementById("hidMousedownY").value=e.clientY;
            }
        }          

        function mouseup(e)
        {
            if (!e)
            {
                var e=window.event;
            }

            if (document.getElementById("txtStatus").innerHTML=="Stopped")
            {
                var mousedownx=document.getElementById("hidMousedownX");
                var mousedowny=document.getElementById("hidMousedownY");

                var diffx;
                var diffy;

                var currentpos=document.getElementById("hidPos");

                if (parseInt(mousedownx.value)!=-1&&parseInt(mousedownx.value)!=-1)
                {
                    diffx=Math.abs(e.clientX-parseInt(mousedownx.value));
                    diffy=Math.abs(e.clientY-parseInt(mousedowny.value));

                    if (diffx+diffy>0)
                    {
                        if (diffx>diffy)
                        {
                            currentpos.value=parseInt(currentpos.value)+diffx;
                        }
                        else
                        {
                            currentpos.value=parseInt(currentpos.value)+diffy;
                        }


                        mousedownx.value="-1";
                        mousedowny.value="-1";
                        rotatewheel();
                    }
                }
            }
        }

        function rotatewheel()
        {
            var currentstatus=document.getElementById("txtStatus");
            currentstatus.innerHTML="Spinning...";

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

            currentpos.value=parseInt(currentpos.value)%360;

            setTimeout(function(){rotatewheel_instant()},10000);
        }

        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";        
        }
        </script>

Again, the x and y co-ordinates of your mouse pointer are captured. First, we check if the values of hidMousedownX and hidMousedownY are not "-1", and only proceeds if so. This prevents the problem of the user clicking the button outside of the browser window, then releasing the mouse button in the browser window.

And then the difference between the new co-ordinates and the old ones is taken. The x-difference and the y-difference may turn out to be negative, so we use the absolute value. Then we compare the x-difference and the y-difference, and use the bigger value. That value is added to the current value of hidPos.

And then rotatewheel() is run using the new value of hidPos. This ensures that the new value of hidPos is always greater than the old value, and therefore the wheel will always rotate clockwise!

Lastly, the values of  hidMousedownX and hidMousedownY are reset to "-1".

Try it. Click and drag your mouse, then release. The wheel spins faster or slower depending on how great the drag was!

Now do this to your HTML code...

        <div id="info_wrapper">
            <div id="txtStatus">Stopped</div>
            <input type="hidden" id="hidPos" value="0" onchange="rotatewheel();">
            <input type="hidden" id="hidMousedownX" value="-1">
            <input type="hidden" id="hidMousedownY" value="-1">
            <div id="triangle"></div>
        </div>

This hides your textboxes. You no longer need them to be visible.

Next

Your wheel spins in response to the mouse click and drag! But what's the end game here? We need to capture and display the result. That's what we'll be handling next.