A JQuery Random Slot Machine To Make Slot Machine Animation Effect
Download File === https://bytlly.com/2t7gu8
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.
$(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! 2b1af7f3a8
