Trova il valore sulla ruota per la ruota della fortuna

Question

Ho un'immagine di una ruota della ruota della fortuna e sto cercando di fare in modo che quando gira mostra l'ammontare corretto per quello che è stato ruotato.

Ho il codice seguente: http://jsfiddle.net/maniator/rR67s/

Molte volte è corretto, ed altro momento è sbagliato.

Per esempio mi sono girato questo:

Ed è avvisato , che è sbagliato.

Come posso correggere il mio algoritmo in modo che sia corretto il 99% delle volte (o 100% se possibile)?

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) 
}); 

gioco completo per chi vuole provare: http://jsfiddle.net/maniator/XP9Qv/ (< - questo è stato aggiornato utilizzando risposta accettata)

---

Il divertimento continua here.

Answer 1

Credo che il problema è che la freccia nella posizione di partenza è nel bel mezzo di una zona, non all'inizio di esso. Così avete un offset iniziale di (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)]; 

Questo sembra funzionare: quando la ruota si ferma o all'inizio (prima metà) o alla fine (seconda metà) di una zona del valore mostrato è quello previsto (circa una dozzina di test eseguiti)

Answer 2

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

Ho cambiato questa linea da round a ceil e ha ottenuto 14 dei 14 risultati corretti ..