If statement to match an array

Question

var myImages = new Array();
myImages[0] = "../img/10_of_clubs.png";         
myImages[1] = "../img/2_of_clubs.png";           
myImages[2] = "../img/3_of_hearts.png";         
myImages[3] = "../img/4_of_spades.png";         
myImages[4] = "../img/5_of_clubs.png";           
myImages[5] = "../img/6_of_diamonds.png";       
myImages[6] = "../img/7_of_diamonds.png";
myImages[7] = "../img/8_of_hearts.png";
myImages[8] = "../img/9_of_spades.png";
myImages[9] = "../img/ace_of_clubs.png";
myImages[10] = "../img/black_joker.png";
myImages[11] = "../img/jack_of_diamonds.png";
myImages[12] = "../img/king_of_hearts.png";
myImages[13] = "../img/queen_of_spades.png"; 

function shuffleCard(){
    var shuffleSound = document.getElementById("shuffleNoise");        
    shuffleSound.play();        
    var random1 = Math.floor(Math.random() * myImages.length); 
    document.getElementById("deckOfCards1").innerHTML = "";        
    var random2 = Math.floor(Math.random() * myImages.length); 
    document.getElementById("deckOfCards2").innerHTML = "";
}

function snatchFunction(){
    if () {
        alert("Match!");
    } else {
        alert("Do not match!");
    }
}

I've created a function to shuffle the deck of cards, but how do I complete the if statement to display an alert message if the two cards match?

user_995800 · Answer

Just put the variables random1 and random2 out of the function scope, so you can access and compare them in the snatchFunction().

(I've added the random numbers to the alt attribute so they can be seen in this code snippet.)

var myImages = new Array(),
    random1,
    random2,
    score = 0;

myImages[0] = "../img/10_of_clubs.png";         
myImages[1] = "../img/2_of_clubs.png";           
myImages[2] = "../img/3_of_hearts.png";         
myImages[3] = "../img/4_of_spades.png";         
myImages[4] = "../img/5_of_clubs.png";           
myImages[5] = "../img/6_of_diamonds.png";       
myImages[6] = "../img/7_of_diamonds.png";
myImages[7] = "../img/8_of_hearts.png";
myImages[8] = "../img/9_of_spades.png";
myImages[9] = "../img/ace_of_clubs.png";
myImages[10] = "../img/black_joker.png";
myImages[11] = "../img/jack_of_diamonds.png";
myImages[12] = "../img/king_of_hearts.png";
myImages[13] = "../img/queen_of_spades.png"; 

function shuffleCard(){
    //var shuffleSound = document.getElementById("shuffleNoise");        
    //shuffleSound.play();        
    random1 = Math.floor(Math.random() * myImages.length); 
    document.getElementById("deckOfCards1").innerHTML = "";        
    random2 = Math.floor(Math.random() * myImages.length); 
    document.getElementById("deckOfCards2").innerHTML = "";
}


function snatchFunction(){
    if (random1 === random2) {
        score++; // increase score
        alert("Match! Score: " + score);
    } else {
        alert("Do not match!");
    }
}

document.getElementById('shuffle').addEventListener("click", function(ev) {
shuffleCard();
});

document.getElementById('snatch').addEventListener("click", function(ev) {
snatchFunction();
});

user_8912628 · Answer

Use comparison operators to compare 2 vars.

function snatchFunction(){
    if (random1 == random2) {
        alert("Match!");
    } else {
        alert("Do not match!");
    }
}

Be sure to define your vars globally so snatchFunction() can access it:

var random1, random2

function shuffleCard(){
    var shuffleSound = document.getElementById("shuffleNoise");        
    shuffleSound.play();        
    random1 = Math.floor(Math.random() * myImages.length); 
    document.getElementById("deckOfCards1").innerHTML = "";        
    random2 = Math.floor(Math.random() * myImages.length); 
    document.getElementById("deckOfCards2").innerHTML = "";
}

function snatchFunction(){
    if (random1 == random2) {
        alert("Match!");
    } else {
        alert("Do not match!");
    }
}

Or pass the vars through a function call:

function shuffleCard(){
    var shuffleSound = document.getElementById("shuffleNoise");        
    shuffleSound.play();        
    var random1 = Math.floor(Math.random() * myImages.length); 
    document.getElementById("deckOfCards1").innerHTML = "";        
    var random2 = Math.floor(Math.random() * myImages.length); 
    document.getElementById("deckOfCards2").innerHTML = "";

    snatchFunction(random1, random2);
}

function snatchFunction(card1, card2){
    if (card1 == card2) {
        alert("Match!");
    } else {
        alert("Do not match!");
    }
}

user_3950422 · Answer

Even though it's not mentioned in the question but asked in comments, I am adding it here.

For scores, declare a global variable as random1 or random2 say var total_score = 0;

Then in your snatchFunction() increase the value each time it matches.

function snatchFunction(){
    if (random1 === random2) {
        total_score += 10; // some score value 
        alert("Match! total score "+total_score);

    } else {
        alert("Do not match!");
    }
}

user_7575536 · Answer

Just because I liked the idea :) another way of solving things:

var types = ['hearts', 'diamonds', 'clubs', 'spades'],
  type1, type2, no1, no2;

function shuffle() {
  $('#card1')
    .removeClass(type1)
    .removeClass('c' + no1);

  $('#card2')
    .removeClass(type2)
    .removeClass('c' + no2);


  type1 = types[Math.floor(Math.random() * types.length)],
    type2 = types[Math.floor(Math.random() * types.length)],
    no1 = 1 + Math.floor(Math.random() * 11),
    no2 = 1 + Math.floor(Math.random() * 11);
  $('#card1')
    .removeClass('back')
    .addClass(type1)
    .addClass('c' + no1);

  $('#card2')
    .removeClass('back')
    .addClass(type2)
    .addClass('c' + no2);
  if (type1 == type2 && no1 == no2) {
    console.log('Match!!!');
  }
}

.card {
  position: relative;
  display: inline-block;
  background: url('https://cmkt-image-prd.global.ssl.fastly.net/0.1.0/ps/2502319/1160/772/m1/fpnw/wm0/12-playing-card-icons-1-.png?1491379334&s=8d4af6f2f06ee5cf0c53b95573d43e02');
  background-repeat: no-repeat;
  width: 105px;
  height: 152px;
}

.back {
  background-position: -823px -334px;
}

.label-top::before {
  position: absolute;
  top: 15px;
  left: 35px;
}

.label-bottom::before {
  position: absolute;
  bottom: 15px;
  right: 35px;
}

.rotate::before {
  transform: rotate(180deg);
  /* Safari */
  -webkit-transform: rotate(180deg);
  /* Firefox */
  -moz-transform: rotate(180deg);
  /* IE */
  -ms-transform: rotate(180deg);
  /* Opera */
  -o-transform: rotate(180deg);
  /* Internet Explorer */
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}

.hearts {
  color: red;
  background-position: -220px -121px;
}

.diamonds {
  color: red;
  background-position: -826px -121px;
}

.clubs {
  color: black;
  background-position: -630px -121px;
}

.spades {
  color: black;
  background-position: -425px -121px;
}

.back>.label-top::before,
.back>.label-bottom::before {
  content: "";
}

.c1>.label-top::before,
.c1>.label-bottom::before {
  content: "1";
}

.c2>.label-top::before,
.c2>.label-bottom::before {
  content: "2";
}

.c3>.label-top::before,
.c3>.label-bottom::before {
  content: "3";
}

.c4>.label-top::before,
.c4>.label-bottom::before {
  content: "4";
}

.c5>.label-top::before,
.c5>.label-bottom::before {
  content: "5";
}

.c6>.label-top::before,
.c6>.label-bottom::before {
  content: "6";
}

.c7>.label-top::before,
.c7>.label-bottom::before {
  content: "7";
}

.c8>.label-top::before,
.c8>.label-bottom::before {
  content: "8";
}

.c9>.label-top::before,
.c9>.label-bottom::before {
  content: "9";
}

.c10>.label-top::before,
.c10>.label-bottom::before {
  content: "10";
}

.c11>.label-top::before,
.c11>.label-bottom::before {
  content: "A";
}

.c12>.label-top::before,
.c12>.label-bottom::before {
  content: "J";
}

.c13>.label-top::before,
.c13>.label-bottom::before {
  content: "Q";
}

.c14>.label-top::before,
.c14>.label-bottom::before {
  content: "k";
}

If statement to match an array

4 Answers