我怎樣才能創造出像運勢一樣的“命運之輪”

Question

首先讓我描述一下我正在努力的項目。 英語不是我的外語所以我不知道我要找的效果的確切名稱。

基本上我正在創建賓果游戲類型，主持人可以按下按鈕啟動賓果輪。 最終輪子會停下來，它所落下的單詞就是那一輪的選定單詞。 在那之后，這個詞從游戲中移除，游戲一遍又一遍地開始，直到有人打電話給賓果游戲。

我開始玩一些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');
    }
  }
}

小提琴鏈接在這里 （我希望鏈接是正確的，不要使用小提琴那么多）

所以現在當你點擊“再次播放”按鈕時，你會發現它會突出顯示一個單詞。 當我按下再次播放按鈕時，紅色高亮必須從第一個div到最后一個等等，直到它最終停在div（用隨機數或其他東西選擇）時。

如果有人可以幫我這個或者可以給我一個正確方向的提示，請告訴我！

額外：應用程序最終會看起來像打開選擇框時iphone獲得的滾輪（希望你知道我指的是什么）。 所以這就是為什么它的命運之輪效應。 如果有人能為我提供正確的名稱，請告訴我，以便我可以調整標題！

如果缺少任何信息，請告訴我，我很樂意提供！ 謝謝！

Answer 1

基本思路是（1）保持當前索引，這樣你就可以每次從該索引開始旋轉，其中'spining'只是增加索引或者在達到最大索引時設置為零; （2）為下一次繪畫設置超時，並每次減少超時，直到它足夠低。

JsFiddle演示

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