Squackattack Squackattack - 24 days ago 9
jQuery Question

js for my slot machine game

I am just starting to learn HTML, CSS, JS and jQuery and I'm trying to build a simple slot machine site for my own education.

I have three windows each with the same three images cycling through them. When clicked, a window will freeze the current image. What I want to do, is make it so that if the

src
of all three windows is the same after each window is clicked an
alert("You've won")
is called, and if they are not all the same an
alert("You've lost")
is called.

Here's the div:

<div class="row forthRow">
<div class="slotContainer col-xs-4 col-md-2 col-md-offset-3">
<img src="image1.jpg" id="mainImage1" class="win_or_lose col-xs-12" alt=""/>
</div>
<div class="slotContainer col-xs-4 col-md-2">
<img src="image2.jpg" id="mainImage2" class="win_or_lose col-xs-12" alt="flame"/>
</div>
<div class="slotContainer col-xs-4 col-md-2">
<img src="image3.jpg" id="mainImage3" class="win_or_lose col-xs-12" alt="bolt"/>
</div>
</div>


and here's the .js:

$( document ).ready(function() {

var counter1 = 1;
var counter2 = 2;
var counter3 = 3;
var paused1 = false;
var paused2 = false;
var paused3 = false;

$('input[type=radio]').click(function() {
delay = $('input[type=radio]:checked').val();

$(".speed_buttons").fadeOut(0, function(){
$(".start_over_button").fadeIn(0);
});

$("p.directionsOtheGame").text("Get three in a row!");

setInterval(function firstWindow(){

if(paused1 == false){
counter1 = counter1 + 1;
if(counter1 > 3){
counter1 = 1;
};

$("#mainImage1").attr("src","image"+counter1+".jpg");
};
}, delay);

setInterval(function secondWindow(){

if(paused2 == false){
counter2 = counter2 + 1;
if(counter2 > 3){
counter2 = 1;
};

$("#mainImage2").attr("src","image"+counter2+".jpg");
};
}, delay);

setInterval(function thirdWindow(){

if(paused3 == false){
counter3 = counter3 + 1;
if(counter3 > 3){
counter3 = 1;
};

$("#mainImage3").attr("src","image"+counter3+".jpg");
};
}, delay);

$("#mainImage1").click(function(){
paused1 = true;
});

$("#mainImage2").click(function(){
paused2 = true;
});

$("#mainImage3").click(function(){
paused3 = true;
});

});


});

I have searched all over StackOverflow as well as W3schools and api.jquery.com to no avail. I hope my problem is clear. Thank you for any help you can provide.

Answer

make it so that if the src of all three windows is the same after each window is clicked

As your images are based on your [global] variables, you don't need to check the src you can just check the variables, ie:

if (counter1==counter2 && counter1==counter3)
    alert("You've won");

this assumes you've already checked that they are all paused:

if (paused1 && paused2 && paused3)
  if (counter1==counter2 && counter1==counter3)
    alert("You've won");
Comments