1

I have a task that i need to to.

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.

this is the code:

$(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;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="viewbox">
    <div class="wrapper" id="slotmachine">
        <ul>
            <li style="background:#f00">1</li>
            <li style="background:#ff0">2</li>
            <li style="background:#0f0">3</li>
            <li style="background:#0ff">4</li>
  
        </ul>
    </div>
</div>
<input type="button" value="start" id="start" />|
<input type="button" value="move To" id="moveTo" />
<input type="text" id="pos" value="0" size="5" />

Right now is not working as a want it...

How can i achive this?

beerwin
  • 9,813
  • 6
  • 42
  • 57
Allcro
  • 33
  • 1
  • 5
  • 2
    What is not working? What results are you expecting? How do you want it to work? Please provide more details. – Smurker Jun 11 '21 at 08:07
  • So i want between 4 items, for them to spin randomly, on horizontal, not usually as a slot machine from top to bottom, and when the spinning stops at one for them, let's say 3 of 4, 3 has a link, and i need a redirect to that link automatically, do you have any idea how can i do it? – Allcro Jun 11 '21 at 08:15
  • You have a good starting point to develop from. Where is it exactly that you're stuck? – Smurker Jun 11 '21 at 08:21
  • I don't know how to: - randomize only 2 of the 4 items, even if there is showing 4, and to redirect when it stops – Allcro Jun 11 '21 at 08:27

0 Answers0