Siaran Sports 788

Slot Machine

• Simple
• Specify numbers
• Images
• Sounds
• Marks

• Buy Me a Coffee
• GitHub

Example 1 - Simple

A very simple slot machine that show random numbers each time played.

• 1
• 2
• 3
• 4
• 5
• 6
• 7

• 1
• 2
• 3
• 4
• 5
• 6
• 7

• 1
• 2
• 3
• 4
• 5
• 6
• 7

View Code

$('#btn-example1').click(function() {
  $('#example1 ul').playSpin();
});

Example 2 - Specify numbers

Specify end number before the slot machine spin. Insert number 1-7 in text box. (Error handling: show the first one if out of range)

• 1
• 2
• 3
• 4
• 5
• 6
• 7

• 1
• 2
• 3
• 4
• 5
• 6
• 7

• 1
• 2
• 3
• 4
• 5
• 6
• 7

View Code

$('#btn-example2').click(function() {
  $('#example2 ul').playSpin({
    endNum: [7, 7, 7],
  });
});

Example 3 - Stop sequence

Specify stop sequence from left to right or right to left or totally random (like example 1)

• 1
• 2
• 3
• 4
• 5
• 6
• 7

• 1
• 2
• 3
• 4
• 5
• 6
• 7

• 1
• 2
• 3
• 4
• 5
• 6
• 7

View Code

$('#btn-example3').click(function() {
  $('#example3 ul').playSpin({
    stopSeq: 'leftToRight', // rightToLeft
  });
});

Example 4 - Easing

Easing effect, default: swing (Import jquery-easing and select easing effect here: link)

• 1
• 2
• 3
• 4
• 5
• 6
• 7

• 1
• 2
• 3
• 4
• 5
• 6
• 7

• 1
• 2
• 3
• 4
• 5
• 6
• 7

View Code

$('#btn-example4').click(function() {
  $('#example4 ul').playSpin({
    easing: 'easeOutBack',
  });
});

Example 5 - Spin Time

Change spin time to wait longer or wait shorter. (Value is set in milliseconds, 1 second = 1,000 milliseconds)

• 1
• 2
• 3
• 4
• 5
• 6
• 7

• 1
• 2
• 3
• 4
• 5
• 6
• 7

• 1
• 2
• 3
• 4
• 5
• 6
• 7

View Code

$('#btn-example5').click(function() {
  $('#example5 ul').playSpin({
    time: 1000,
  });
});

Example 6 - Images

Not only limited to numbers !! It can be images as well.

• 
• 
• 
• 
• 
• 
• 

• 
• 
• 
• 
• 
• 
• 

• 
• 
• 
• 
• 
• 
• 

View Code

$('#btn-example6').click(function() {
  $('#example6 ul').playSpin({});
});

Example 7 - onEnd and onFinish

onEnd - Every number of slot number end function. (The given number is depending on number stop sequence)
onFinish - All number of slot number end funtion. (The given number is by sequence from left to right)

• 1
• 2
• 3
• 4
• 5
• 6
• 7

• 1
• 2
• 3
• 4
• 5
• 6
• 7

• 1
• 2
• 3
• 4
• 5
• 6
• 7

onEnd: onFinish: View Code

$('#btn-example7').click(function() {
  $('#lbl-example7-1').text('');
  $('#lbl-example7-2').text('');
  $('#example7 ul').playSpin({
    onEnd: function(num) {
      $('#lbl-example7-1').text($('#lbl-example7-1').text() + num.toString());
    },
    onFinish: function(num) {
      $('#lbl-example7-2').text(num);
    }
  });
});

Example 8 - Sounds

Sounds control is not implemented and left fully for programmer to program.
Following is example on how to intergrate with sounds and music. (Open speaker!)

• 1
• 2
• 3
• 4
• 5
• 6
• 7

• 1
• 2
• 3
• 4
• 5
• 6
• 7

• 1
• 2
• 3
• 4
• 5
• 6
• 7

View Code

$('#btn-example8').click(function() {
  sound.play(); // Start play the sound after click button
  $('#example8 ul').playSpin({
    time: 2000,
    endNum: [1, 2, 7],
    stopSeq: 'rightToLeft',
    onEnd: function() {
      ding.play(); // Play ding after each number is stopped
    },
    onFinish: function() {
      sound.pause(); // To stop the looping sound is pause it
    }
    });
});

Example 9 - Spin and Stop

However, in some situations, user would like to stop the spinning manually

• 1
• 2
• 3
• 4
• 5
• 6
• 7

• 1
• 2
• 3
• 4
• 5
• 6
• 7

• 1
• 2
• 3
• 4
• 5
• 6
• 7

View Code

$('#btn-example9-start').click(function() {
  $('#example9 ul').playSpin({
    manualStop: true
  });
});

$('#btn-example9-stop').click(function() {
  $('#example9 ul').stopSpin();
});

Example 10 - Marks

To stop each spin individually, it is required to generate startSpin on each spin individually.

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 0

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 0

• .

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 0

• %

View Code

var numKeeptrack = 0;
$('#btn-example10-start').click(function() {
  numKeeptrack = 3;
  $('#example10 #first').playSpin({
    manualStop: true
  });
  $('#example10 #second').playSpin({
    manualStop: true
  });
  $('#example10 #third').playSpin({
    manualStop: true
  });
});

$('#btn-example10-stop').click(function() {
  if (numKeeptrack == 3) {
    $('#example10 #third').stopSpin();
  } else if (numKeeptrack == 2) {
    $('#example10 #second').stopSpin();
  } else if (numKeeptrack == 1) {
    $('#example10 #first').stopSpin();
  }
  numKeeptrack--;
});

Extra Example - Ajax

Here is an extra coding example, for instance, ajax to server, generate random numbers and save into database, return the numbers.
(Required basic javascript and server side language, eg: PHP) View Code

$('#btn-click').click(function() {
  $.ajax({
    url: // url
    data: // pass data or leave it
  })
  .done(function(numbers) {
    $('#slotmachine').playSpin({
      endNum: numbers,
    });
  });
});

Buy Me a Coffee