这是一款模拟水果机(老虎机)特效的jQuery插件
这是一款模拟水果机(老虎机)特效的jQuery插件。该水果机特效效果非常逼真,它可以使图片或文字不断的快速垂直滚动,按下停止按钮后图片可以慢慢停下来,模拟出现实的水果机效果。
JavaScript 游戏开发
共495Star
详细介绍
📣 jQuery is not neccessary now! The name it's just legacy.
A simple, and lightweight piece of code to make slot machine animation effect. It also exports a js wrapper to allow the usage with jQuery.
To preview what you can do check the example page!
Installation
Install the component using npm:
npm install jquery-slotmachine --save
Install the component using Bower:
bower install jquery-slotmachine --save
Example
<div id="machine">
<div>Madrid</div>
<div>London</div>
<div>New York</div>
</div>
<script>
const el = document.querySelector('#machine');
const machine = new SlotMachine(el, {
active: 1,
delay: 450,
auto: 1500
});
</script>
Lookup the sourcecode in the examples page to see more examples.
Usage
Include the script located in dist folder:
<script src="/path/to/slotmachine.min.js"></script>
Then you can make it work calling the lib in your app:
const element = document.getElementById('my-machine');
const machine = new SlotMachine(element, { /* options */ });
If you preffer jQuery style then import the wrapper after the jQuery library:
<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/slotmachine.min.js"></script>
<script src="/path/to/jquery.slotmachine.min.js"></script>
$(document).ready(function(){
$('#my-machine').slotMachine({ /* options */ });
});
Settings
Use the first argument of the function to pass an object with the options:
const machine = new SlotMachine(element, {
active: 2,
auto: true
});
Name | Type | Default | Description |
---|---|---|---|
active | Number |
0 |
The initial visible element (0 means the first one) |
delay | Number |
200 |
Duration (in ms) of each spin |
auto | Boolean |
false |
Runs the carousel mode when creating the machine |
spins | Number |
5 |
Number of spins after stop in carousel mode |
randomize | Function |
null |
Function (returns number) that is going to be called to set the next active element |
onComplete | Function |
null |
Callback after each spin in carousel mode |
inViewport | Boolean |
true |
Only spin when the machine is inside the viewport |
direction | String |
up |
The spin direction (possible values are up and down ) |
transition | String |
ease-in-out |
The CSS transition |
Properties
machine.nextActive
: Get the next active element (only while shuffling).machine.nextIndex
: Next element index according to the current direction.machine.prevIndex
: Prev element index according to the current direction.machine.random
: Get rando index between the machine bounds.machine.running
: Check if the machine is running.machine.stopping
: Check if the machine is stopping.machine.visible
: Check if the machine is visible.machine.visibleTile
: Get the current visible element in the machine viewport.machine.active
: Alias to theactive
setting.machine.randomize
: Alias to therandomize
setting.machine.direction
: Alias to thedirection
setting.machine.transition
: Alias to thetransition
setting.
Methods
machine.shuffle(spins, callback)
: Starts spining the machine.
- spins (
Number
): Optionally set the number of spins. - callback(
Function
): Callback triggered when the machine stops.
// Do a single spin
machine.shuffle();
// Do a single spin and then shows an alert
machine.shuffle(() => alert('Stop!'));
// Do 5 spins before stop
machine.shuffle(5);
// Do 7 spins and then showing an alert
machine.shuffle(7, () => alert('Stop!'));
// "Infinite" spins
machine.shuffle(9999999); // O_O
machine.stop(callback)
: Manually stops the machine.
- callback(
Function
): Callback triggered when the machine stops.
For example, start spinning the machine and stop it after pressing a button:
machine.shuffle(99999);
// Add the button listener
myButton.addEventListener('click', () => {
// Stop spinning
machine.stop();
});
machine.next()
/machine.prev()
: Spin to the next/previous element.
// Spin to the previous element
machine.prev();
// Spin to the next element
machine.next();
machine.run()
: Starts the preview mode, it will spin/stop given a delay (more info in options).
machine.run();
machine.run()
: Destroys the machine. It will be useful when you want to reuse DOM.
machine.destroy();
Authors
License
jQuery-SlotMachine is released under the MIT License.