mercredi 3 avril 2019

Compare imgs Src in Javascript

i have proplem in my project (memory game), i want to compare img src between two cards that the user clicked on.  flip function will be work if user click any cards, the first card will be store in Fcard variable and Second card will be store in Scard variable. i got all img src (by querySelectorAll ('.class') from html then placed it into an array, this array will be sent to shuffle function to mix the cards every new game. i want to compare img src for Fcard and Scard, i do not no what correct syntax to compare img src .

my code :

got my src image then sent to shuffle function :

const imageCon = document.querySelectorAll('.back_face');


// store all image then sent to shuffle to random images
let image = ['img/instagram.png', 'img/facebook.png' , 'img/youtube.png' ,'img/twitter.png' ,
'img/whatsapp.png' ,'img/linkedin.png', 'img/flickr.png' , 'img/pinterest.png' , 'img/instagram.png', 
'img/facebook.png' , 'img/youtube.png' ,'img/twitter.png' , 'img/whatsapp.png' ,
 'img/linkedin.png', 'img/flickr.png' , 'img/pinterest.png']

 let images = shuffle([...image]);

for ( let i=0 ; i<images.length; i++) {
    imageCon[i].setAttribute('src' , images[i]);
}

this flip function :

function flip(event) {
   if (freeze) 
       return;
   if (this === Fcard) return;
      // to flip the cards 
      this.classList.add('flip');

   if (!fliped) {
      // first click 
     fliped = true;
     Fcard = this;
     }
   else {
    fliped = false;
    Scard = this;
     if ( Fcard.image.src === Scard.image.src ) 
   {
    match++;
       // if match 
        Fcard.removeEventListener('click', flip);
        Scard.removeEventListener('click', flip);
   }
    else {
    // not match 
       freeze = true;
        setTimeout (() =>
        {
         Fcard.classList.remove('flip');
         Scard.classList.remove('flip');
         freeze = false; } , 1400);
      }
   }




Aucun commentaire:

Enregistrer un commentaire