user1607991 user1607991 - 5 months ago 18
jQuery Question

Use variable from another method

I am making a slot machine with JavaScript and have run into an issue when I need to compare variables at the end of a scroll to see if user won or not.

Is it possible to somehow store the variable "randomArrayItem" from the method moveSlots() and use it in the go() method?

I use the moveSlots() method to move each slot separately, but I need to know the randomArrayItem it used to move it so I can compare each slots value to eachother. If they match up, the user is supposed to win.

NOTE THIS WONT RUN BECAUSE I DON"T KNOW HOW TO INSERT MY IMAGES FROM slot1,2,3. But I posted because I am only asking how to carry the randomArrayItem over to GetLucky(); ? Thanks!



var slot1 = [
'<img class="coffee" src="imgs/temp-coffee-1.jpg" alt="coffee pot icon">',
'<img class="tea" src="imgs/temp-tea-1.jpg" alt="coffee pot icon">',
'<img class="espresso" src="imgs/temp-espresso-1.jpg" alt="coffee pot icon">'
];
var slot2 = [
'<img class="coffee" src="imgs/temp-coffee-1.jpg" alt="coffee pot icon">',
'<img class="tea" src="imgs/temp-tea-1.jpg" alt="coffee pot icon">',
'<img class="espresso" src="imgs/temp-espresso-1.jpg" alt="coffee pot icon">'
];
var slot3 = [
'<img class="coffee" src="imgs/temp-coffee-1.jpg" alt="coffee pot icon">',
'<img class="tea" src="imgs/temp-tea-1.jpg" alt="coffee pot icon">',
'<img class="espresso" src="imgs/temp-espresso-1.jpg" alt="coffee pot icon">'
];

function GetLucky(){

function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}


function go(){
addSlots();
moveSlots($('#slot_a'));
moveSlots($('#slot_b'));
moveSlots($('#slot_c'));

// NEED TO COMPARE var randomArrayItem from _a, _b, _c to see if they match... ideas???
}

function moveSlots(el){
var time = 500;
time += Math.round(Math.random()*2000);
el.stop(true,true);

var randomArrayItem = getRandomInt(0, 2);

var marginTop = (-7 * (100)) - (randomArrayItem * 100 ); //change 100 to height placeholder

el.animate(
{"margin-top":marginTop+"px"},
{'duration' : time, 'easing' : "easeInOutQuint"}
);
}

function addSlots(){

for(i=0; i<20; i++){
$('#slot_a').append("<div class='content'>" + slot1[getRandomInt(0,2)] + "</div>");
$('#slot_b').append("<div class='content'>" + slot2[getRandomInt(0,2)] + "</div>");
$('#slot_c').append("<div class='content'>" + slot3[getRandomInt(0,2)] + "</div>");
}
}

}

body{
background-color:white;
padding:50px;
margin:50px;
}


.slots {
font-size:10px;
font-family:arial,helvetica,sans-serif;
overflow:hidden;
width:100px;
height:100px;
border:1px solid black;
float:left;
}

.slots .wrapper{
width:100px;
}

.slots .slot{
width:100px;
height:100px;
text-align:center;
}
.slot .content {
width:100px;
height:100px;
color:#000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>

</html>
<body>
<script src="js/jQuery_v1.12.3.js" type="text/javascript"></script>
<script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="js/scripts.js" type="text/javascript"></script>
<link href="css/style.css" rel="stylesheet" type="text/css" />


<div style="width:310px">
<div class="slots" id="slots_a">
<div class="wrapper" >
<div id="slot_a" class='slot'><!-- <img src="imgs/temp-tea-1.jpg" alt="coffee pot icon"> --></div>
</div>
</div>
<div class="slots" id="slots_b">
<div class="wrapper" >
<div id="slot_b" class='slot'><!-- <img src="imgs/temp-coffee-1.jpg" alt="coffee pot icon"> --></div>
</div>
</div>
<div class="slots" id="slots_c">
<div class="wrapper" >
<div id="slot_c" class='slot'><!-- <img src="imgs/temp-espresso-1.jpg" alt="coffee pot icon"> --></div>
</div>
</div>
<div style="text-align:center">
<input type="button" value="spin!" onClick="GetLucky();" style="margin-top:4px;">
</div>
</div>

</body>





Hard to explain but you will see below.

Answer

Try to return the randomArrayItem from move slots and trigger the execution of go by calling it go();

function GetLucky(){

    function getRandomInt(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }


    function go(){
        addSlots();

       randomArrayItem1 = moveSlots($('#slot_a'));
       randomArrayItem2 = moveSlots($('#slot_b'));
       randomArrayItem3 = moveSlots($('#slot_c'));
       if (randomArrayItem1 ==  randomArrayItem2 &&  randomArrayItem2 == randomArrayItem3) console.log('win');

    }

    function moveSlots(el){
        var time = 500;
        time += Math.round(Math.random()*2000);
        el.stop(true,true);

        var randomArrayItem = getRandomInt(0, 2);

        var marginTop = (-7 * (100)) - (randomArrayItem * 100 ); //change 100 to height placeholder

        el.animate(
            {"margin-top":marginTop+"px"},
            {'duration' : time, 'easing' : "easeInOutQuint"}
        );  
        return randomArrayItem;
    }

   function addSlots(){

    for(i=0; i<20; i++){
        $('#slot_a').append("<div class='content'>" + slot1[getRandomInt(0,2)] + "</div>");
        $('#slot_b').append("<div class='content'>" + slot2[getRandomInt(0,2)] + "</div>");
        $('#slot_c').append("<div class='content'>" + slot3[getRandomInt(0,2)] + "</div>");
    }
}
go();
}
Comments