我如何创建一个'财富之轮'就像效果

Question

首先，让我描述一下我正在努力的项目。英语不是我的外语，所以我不知道我要找的效果的确切名称。

Basicly我创造游戏的宾果游戏类型，其中主机可以在按下一个按钮来启动宾果轮。最终轮子会停下来，它所落在的词语就是那一轮的选词。之后，这个词从游戏中删除，游戏重新开始，直到有人打电话给宾果。

我开始玩了一下周围的一些JSON数据以及如何删除从阵列等，这是很容易做到的项目。但是，现在我正处于最困难的阶段。我必须创建一种功能，以一定的速度滚动所有选项，像轮子一样，速度最终会下降，所以它会落在本轮的选定单词上。我用我现在的代码创建了一个小提琴。请注意，它纯粹是为了功能而非外观而创建的！

var json = { 
    "titles": [ 
    "PLACEHOLDER_1", 
    "PLACEHOLDER_2", 
    "PLACEHOLDER_3", 
    "PLACEHOLDER_4", 
    "PLACEHOLDER_5", 
    "PLACEHOLDER_6", 
    "PLACEHOLDER_7", 
    "PLACEHOLDER_8", 
    "PLACEHOLDER_9", 
    "PLACEHOLDER_10", 
    "PLACEHOLDER_11", 
    "PLACEHOLDER_12", 
    "PLACEHOLDER_13", 
    "PLACEHOLDER_14", 
    "PLACEHOLDER_15" 
    ] 
} 
$(document).ready(function() { 
    var app = new Bingo.init(); 
}) 

var Bingo = { 
    viewport: { 
    isMobile: 0, 
    isTablet: 0, 
    isDesktop: 1, 
    device: 'desktop', 
    browser: null 
    } 
} 

Bingo.init = function() { 
    Bingo.gameController.init(); 
}; 


Bingo.gameController = { 
    gameNames: {}, 
    init: function() { 
    Bingo.gameController.general.saveJson(); 
    $('.test').on('click', Bingo.gameController.array.pickRandomNumber) 
    }, 

    general: { 
    saveJson: function() { 
     Bingo.gameController.gameNames = json.titles; 
    }, 

    //General reset function 
    resetGame: function() { 
     Bingo.gameController.general.saveJson; 
    } 
    }, 

    array: { 
    pickRandomNumber: function() { 
     //reset gamefield 
     Bingo.gameController.game.buildGame(); 
     var gameNames = Bingo.gameController.gameNames; 
     var totalNames = gameNames.length; 
     //Pick a random number 
     var chosenNumber = Math.floor(Math.random() * totalNames); 
     Bingo.gameController.array.remove(chosenNumber) 
    }, 

    remove: function(id) { 
     //remove chosen name from array 
     var gameNames = Bingo.gameController.gameNames; 
     var check = gameNames.indexOf(gameNames[id]); 
     Bingo.gameController.game.highlightName(id); 
     if (check != -1) { 
     gameNames.splice(check, 1); 
     Bingo.gameController.gameNames = gameNames; 
     } 
    } 
    }, 

    game: { 
    buildGame: function() { 
     //build all the array entry's into the div 
     $('.page.main-game').empty(); 
     var gameNames = Bingo.gameController.gameNames; 
     for (var i = 0; i < gameNames.length; i++) { 
     var item = '<div class="name-item" data-id="' + i + '">' + gameNames[i] + '</div>'; 
     $('.page.main-game').append(item); 
     } 
    }, 

    highlightName: function(id) { 
     //highlight the chosen number red 
     $('.name-item[data-id="' + id + '"]').css('color', 'red'); 
    } 
    } 
} 

Fiddle link here （我希望连结是正确的，不使用小提琴那么多）

当你点击你看到它西港岛线突出一个字“再次播放”按钮，所以现在。发生什么事情是，当我再次按下游戏按钮时，红色高亮显示必须从第一个div跳到最后一个，直到它最终停止在一个div处（这是使用随机数或某物选择的）。

如果有人能帮助我这个还是可以给我一个提示，在正确的方向，请让我知道！

额外：当你打开一个选择框（希望你知道我指的是什么）时，该应用程序最终会看起来像一个iphone的滚轮。所以这就是为什么它的财富效应的轮子。如果有人能为我提供正确的名字让我知道，那么我可以调整标题！

如果有任何信息丢失请让我知道，我很乐意提供它！谢谢！

Answer 1

的基本理念是（1）保持目前的指数，所以每次都可以从该指数，其中“纺纱”只是增加了指数或设置为零达到最大索引时开始旋转;和（2）设置下一次绘画的超时时间，并且每次减少该超时，直到足够低。

JsFiddle Demo

HTML

<p><button onclick="w.spin(w.randomNext(), 8)">SPIN</button></p> 

<ul id='wheel'> 
    <li>$100</li> 
    <li>$250,000</li> 
    <li>$25,000</li> 
    <li>$10,000</li> 
    <li>$1,000</li> 
    <li>$5</li> 
    <li>$2,000</li> 
    <li>30,000</li> 
    <li>$40</li> 
</ul> 

的JavaScript

var wheelEl = document.getElementById('wheel'); 

function Wheel() { 
    this.current = 4; 
} 

Wheel.prototype.init = function() { 
    this.onItem(); 
} 

Wheel.prototype.randomNext = function() { 
    return Math.floor(Math.random() * wheelEl.children.length); 
} 

Wheel.prototype.spin = function (next, itemsPerSecond) { 
    var timeout = setTimeout(onItem.bind(this), (1/itemsPerSecond) * 1000); 

    function onItem() { 
    // stop if speed is low enough 
    if (itemsPerSecond < 1) 
     return; 

    // spin to next item 
    this.current ++; 
    if (this.current >= wheelEl.children.length) 
     this.current = 0; 

    // paint text 
    this.onItem(); 

    // reduce speed 
    clearTimeout(timeout); 
    itemsPerSecond--; 
    timeout = setTimeout(onItem.bind(this), (1/itemsPerSecond) * 1000); 
    } 
} 

// paints the index of this.current 
Wheel.prototype.onItem = function() { 
    for (var i = 0 ; i < wheelEl.children.length ; i++) 
    wheelEl.children[i].style.color = (i == this.current) ? '#6d4321' : '#000000'; 
} 

var w = new Wheel(); 
w.init();