I want to make a slot machine. I am taking random index from array and populating it inside my div. But the only issue is that I want to have a slot machine effect. I mean that the effect should be like numbers are dropping from top to bottom. This is my code so far.
I need an horziontal slot machine, with random selection of the items except 2 of them ( so if there are 4 items, the spin should stop at only 2 of them) and when the spinning stops at item, automatically it should redirect to another page.
A jQuery Random Slot Machine to make slot machine animation effect
Download Zip: https://guexinati.blogspot.com/?download=2vzmLL
$(document).ready(function () // Clone the first element and append it to the end of the list var list = $('#slotmachine>ul:first'); var firstItem = list.find('li:first'); firstItem.clone().appendTo(list); function moveTo(val) val = -val % 1200; if (val > 0) val -= 1200; $('#slotmachine').css( left: val ); function spin(count) $('#slotmachine').stop().animate( left: -1200 , 2000, 'linear', function () if (count == 0) var slot = Math.floor(Math.random() * 4), left = -slot * 200, time = 2000 * slot / 4; console.log(count, slot, top, time) $(this).css( left: 0 ).animate( left: left ,time, 'easeOutQuad') else $(this).css( left: 3 ) spin(count - 1) ; ); $('#start').click(function () $('#slotmachine').css( left: 0 ) spin(1) ); $('#moveTo').click(function () moveTo($('#pos').val()); ););#viewbox display:flex; width: 300px; height: 200px; border: solid 1px #000; position: relative;#viewbox .wrapper position: relative;#viewbox ul display:flex; list-style: none; margin: 0; padding: 0;#viewbox li display: block; width: 300px; height: 200px; text-align: center; font-size: 170px; 1 2 3 4
Teemu, I am currently working on a project that needs a very elementary HTML5 slot machine functionality (maybe two) very much like the basic core you have developed here. I have the functionality clearly defined and I can provide all the graphic assets. I need help making it function properly and embed it into a HTML5 interface I have built using Tumult Hype. Would you (or your group) be interested in working with me to make this happen? If you are interested, I can supply you with more details. Please let me know as soon as possible as this is in progress now with an imminent deadline. Thanks! 2ff7e9595c
Comments