Find the value on wheel for wheel of fortune

I have an image of a wheel of fortune wheel and I am trying to make so that when it spins it displays the correct amount for what it was spun to.

I have the following code: http://jsfiddle.net/maniator/rR67s/

  • why is DOM tree oder preorder, depth-first traversal?
  • Build a tree from file paths
  • Regular Expression - Formatting text in a block - IM
  • Algorithm to get changes between two arrays
  • Name of algorithm that infers group sequence
  • Generate random numbers with logarithmic distribution and custom slope
  • Many times it is correct, and other time is is wrong.

    For example I spun this:

    300

    And it alerted 300, which is wrong.

    How can I fix my algorithm so that it is correct 99% of the time (or 100% if it is possible)?

    HTML:

    <div id="game">
        <div id="tick">⇩</div>
        <img id="wheel" src="http://i.imgur.com/R7JYazp.png" data-rotation="0">
    </div>
    

    Javascript:

    var Wheel = (function () {
        var wheel = document.getElementById('wheel'),
            wheelValues = [5000, 600, 500, 300, 500, 800, 550, 400, 300, 900, 500, 300, 900, 0, 600, 400, 300, -2, 800, 350, 450, 700, 300, 600],
            spinTimeout = false,
            spinModifier = function () {
                return Math.random() * 10 + 20;
            },
            modifier = spinModifier(),
            slowdownSpeed = 0.5,
            prefix = (function () {
                if (document.body.style.MozTransform !== undefined) {
                    return "MozTransform";
                } else if (document.body.style.WebkitTransform !== undefined) {
                    return "WebkitTransform";
                } else if (document.body.style.OTransform !== undefined) {
                    return "OTransform";
                } else {
                    return "";
                }
            }()),
            degreeToRadian = function (deg) {
                return deg / (Math.PI * 180);
            };
    
        function Wheel() {};
    
        Wheel.prototype.rotate = function (degrees) {
            var val = "rotate(-" + degrees + "deg)";
            if (wheel.style[prefix] != undefined) wheel.style[prefix] = val;
            var rad = degreeToRadian(degrees % 360),
                filter = "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=" + rad + ", M12=-" + rad + ", M21=" + rad + ", M22=" + rad + ")";
            if (wheel.style["filter"] != undefined) wheel.style["filter"] = filter;
            wheel.setAttribute("data-rotation", degrees);
        };
    
        Wheel.prototype.spin = function (callback, amount) {
            var _this = this;
            clearTimeout(spinTimeout);
            modifier -= slowdownSpeed;
            if (amount === undefined) {
                amount = parseInt(wheel.getAttribute('data-rotation'));
            }
            this.rotate(amount);
            if (modifier > 0) {
                spinTimeout = setTimeout(function () {
                    _this.spin(callback, amount + modifier);
                }, 1000 / 5);
            } else {
                var dataRotation = parseInt(wheel.getAttribute('data-rotation'));
                modifier = spinModifier();
                var divider = 360 / wheelValues.length;
                var wheelValue = wheelValues[Math.floor(Math.round(dataRotation % 360) / divider)];
                switch (wheelValue) {
                    case 0:
                        return callback(0);
                    case -1:
                        return callback("Free Spin");
                    case -2:
                        return callback("Lose a turn");
                    default:
                        return callback(wheelValue);
                }
            }
        };
    
        return Wheel;
    })();    
    
    var wheel = new Wheel;
    wheel.spin(function(spinVal){
        alert(spinVal)
    });
    

    Full game for those who want to try it out: http://jsfiddle.net/maniator/XP9Qv/ (<– this was updated using accepted answer)


    The fun continues here.

  • run for random numbers and keep state
  • How to make a controlled “shuffle” order?
  • Implementing copied and pasted code/text detection?
  • JavaScript DEFLATE Implementation
  • Get a random number focused on center
  • Large list rendering in JavaScript
  • 2 Solutions collect form web for “Find the value on wheel for wheel of fortune”

    I think the problem is that the arrow in the starting position is in the middle of a zone, not at the start of it. So you have a starting offset of (360 / wheelValues.length)/2

    var divider = 360 / wheelValues.length;
    var offset=divider/2; //half division
    var wheelValue = wheelValues[Math.floor(Math.ceil((dataRotation+offset) % 360) / divider)];
    

    This seems to work: when the wheel stops either at the beginning (first half) or at the end (last half) of a zone the showed value is the expected one (just about a dozen tests done)

    var wheelValue = wheelValues[Math.floor(Math.ceil(dataRotation % 360) / 15)];
                switch (wheelValue) {
    

    I changed this line from round to ceil and got 14 out of 14 correct results..