Tìm giá trị trên bánh xe cho bánh xe của tài sản

Question

Tôi có một hình ảnh của một bánh xe của bánh xe tài sản và tôi đang cố gắng để làm như vậy khi nó quay nó hiển thị số tiền chính xác cho những gì nó được quay.

Tôi có đoạn mã sau: http://jsfiddle.net/maniator/rR67s/

Nhiều lần nó là đúng, và thời gian còn lại là sai.

Ví dụ tôi quay này:

Và nó cảnh báo , đó là sai.

Tôi làm cách nào để sửa thuật toán của mình sao cho đúng 99% thời gian (hoặc 100% nếu có thể)?

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 trò chơi dành cho những ai muốn thử nó ra: http://jsfiddle.net/maniator/XP9Qv/ (< - điều này đã được cập nhật sử dụng câu trả lời được chấp nhận)

---

Niềm vui tiếp tục here.

Answer 1

Tôi nghĩ vấn đề là vào mũi tên ở vị trí đầu tiên nằm ở giữa một khu vực, chứ không phải lúc bắt đầu. Vì vậy, bạn có một offset bắt đầu của (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)]; 

Điều này dường như làm việc: khi bánh xe dừng lại hoặc vào đầu (nửa đầu) hoặc vào cuối (nửa cuối) của một vùng giá trị cho thấy là một trong những dự kiến (chỉ khoảng một chục bài kiểm tra được thực hiện)

Answer 2

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

tôi đã thay đổi dòng này từ round để ceil và nhận được 14 trong tổng số 14 kết quả chính xác ..