7

私はフォーチュン ホイールのホイールのイメージを持っています。それがスピンしたときに、それがスピンされたものに対して正しい量を表示するようにしようとしています。

次のコードがあります: http://jsfiddle.net/maniator/rR67s/

多くの場合、それは正しく、他の場合は間違っています。

たとえば、私はこれをスピンしました：

300

そして、それは300を警告しましたが、これは間違っています。

99% (可能であれば 100%) 正しいアルゴリズムになるようにアルゴリズムを修正するにはどうすればよいですか?

HTML:

<div id="game">
    <div id="tick">⇩&lt;/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)
});

試してみたい人のための完全なゲーム: http://jsfiddle.net/maniator/XP9Qv/ (<- これは受け入れられた回答を使用して更新されました)

楽しみはここに続きます。

4

2 に答える 2

6

問題は、開始位置の矢印がゾーンの開始点ではなく、ゾーンの中央にあることだと思います。したがって、開始オフセットは(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)];

これは機能しているようです: ホイールがゾーンの最初 (前半) または最後 (後半) で停止すると、表示された値は期待値です (約 12 回のテストが行​​われました)。

于 2013-07-24T15:43:53.510 に答える
0 
var wheelValue = wheelValues[Math.floor(Math.ceil(dataRotation % 360) / 15)];
            switch (wheelValue) {

この行を から に変更しroundたceilところ、14 個中 14 個の正しい結果が得られました。

于 2013-07-24T15:07:02.247 に答える