How can I create a 'wheel of fortune' like effect

Question

First let me describe the project I'm stuggeling with. English is not my foreign language so I do not know the exact name of the effect I am looking for.

Basicly I am creating a bingo type of game where the host can press on a button to start the bingo wheel. Eventually the wheel will stop and the word it has landed on is the chosen word for that round. After that, this word get removed from the game and the game starts over and over untill someone calls a bingo.

I started playing a bit around with some JSON data and how to remove the items from the array etc which is pretty easy to do. But now comes the part where I am struggeling the most. I have to create a kind of function that scrolls through all options like a wheel at a certain speed that eventually decreased in speed so it will land on the chosen word for this round. I created a fiddle with the code I currently have. Note that it's purely created for functionality instead of looks!

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 (I hope the link is correct, not using fiddle that much)

So now when you click on the 'play again' button you see that it wil highlight a word. What has to happen is when I press the play again button the red highlight has to go from the first div to the last and so forth untill it eventually stops at a div (which is chosen with the random number or something).

If someone can help me with this or could give me a hint in the right direction please let me know!

EXTRA: The app will eventually get a look like a scrollwheel that the iphone gets when you open a select box (hope you know what I am referring to). So thats why its a wheel of fortune-ish effect. If someone could provide me with the correct name for this let me know so I can adjust the title!

If any information is missing please let me know, i'd be happy to provide it! Thanks in regard!!

Answer 1

The basic ideas are (1) to keep the current index, so you can start the spin every time from that index, where 'spining' is just increasing that index or set to zero when reaching the maximal index; and (2) set a timeout for the next painting, and reduce that timeout everytime, until it's low enough.

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