Thread: Match pictures

    #1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2013
    Posts
    10
    Rep Power
    0

    Match pictures


    hi, anyone can help me on how to match pictures using javascript

    bird-------------> seeds
    cat-------------> milk

    so if we consider above there are four images(bird, seeds, cat, milk, for sake of convenience i am just writing names as it wil b easy to understand what i am trying to say),

    As birds feed on seeds and cat on milk. we need to match those pictures in javascript like this

    if we click on bird and then on seeds it should say "correct match" and both images needs to vanish else "not correct match and try again"

    if we click on cat and then on milk it should say "correct match" and both images needs to vanish else "not correct match and try again"

    after all are matched correctly we need to redirect to homepage...

    any help
    regards
  2. #2
  3. Did you steal it?
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    13,965
    Rep Power
    9397
    It's as straightfoward as you said: if the choose bird/seeds or cat/milk then it's a match. The only difference from regular "memory" games is that the two matching cards aren't the same thing.

    So... what do you have so far? Have you put the cards into a good data structure yet? Do you have the card-choosing mechanism written yet even without the card-matching part?
  4. #3
  5. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,118
    Rep Power
    119
    Originally Posted by kadi
    hi, anyone can help me on how to match pictures using javascript

    bird-------------> seeds
    cat-------------> milk

    so if we consider above there are four images(bird, seeds, cat, milk, for sake of convenience i am just writing names as it wil b easy to understand what i am trying to say),

    As birds feed on seeds and cat on milk. we need to match those pictures in javascript like this

    if we click on bird and then on seeds it should say "correct match" and both images needs to vanish else "not correct match and try again"

    if we click on cat and then on milk it should say "correct match" and both images needs to vanish else "not correct match and try again"

    after all are matched correctly we need to redirect to homepage...

    any help
    regards
    You already had this here and all you needed to do was to adapt it like so:
    Code:
    <style>
    img {
    width:200px;
    height:200px;
    border:solid 1px black;
    }
    </style>
    
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
    
    var found = 0;
    var last = null;
    var redirect_url = "#playAgain";
    
    (function(d){d.fn.shuffle=function(c){c=[];return this.each(function(){c.push(d(this).clone(true))}).each(function(a,b){d(b).replaceWith(c[a=Math.floor(Math.random()*c.length)]);c.splice(a,1)})};d.shuffle=function(a){return d(a).shuffle()}})(jQuery);
    
    $(document).ready(function(){
    
     var totalPics = $('#playCards img').length / 2;
        
        $('#playCards td').shuffle();
    
        $('img').each(function(index){
          $(this).attr('id','img-' + index);
        });    
        
        $('img').click(function(){
          if( last ) {
            if( ($(this).attr('src') == last.attr('data-src')) ) {
              $(this).css('visibility', 'hidden');
              last.css('visibility', 'hidden');
              found++;
            }
            else {
              alert("not correct match and try again");
            }
            if (found == totalPics) {
            alert('correct match');
            window.location.href = redirect_url;
            //reset found to 0
            location.reload();
            }
            last = null;
          } else {
            last = $(this);
          }
        });
        
    }); //end ready
    
    
    </script>
    
    <div id="playCards">
                        <table>
                            <tbody><tr>
                                <td><img id="img-1" src="http://tucsoncitizen.com/tucson-tails/files/2013/06/smiling-cat-in-public-domain.jpg" data-src="http://1.bp.blogspot.com/_u5YQMXBhVkI/TKJYSCJaScI/AAAAAAAAAJw/-g2KKt7mY8A/s320/milk.jpg"></td>
                                <td><img id="img-2" src="http://www.statesymbolsusa.org/IMAGES/Tennessee/northern_mockingbird_web.jpg" data-src="http://deesnursery.files.wordpress.com/2011/11/bird-seed-white-millet.jpg"></td>
                            </tr>
                            <tr>
                                <td><img id="img-3" src="http://deesnursery.files.wordpress.com/2011/11/bird-seed-white-millet.jpg" data-src="http://www.statesymbolsusa.org/IMAGES/Tennessee/northern_mockingbird_web.jpg"></td>
                                <td><img id="img-4" src="http://1.bp.blogspot.com/_u5YQMXBhVkI/TKJYSCJaScI/AAAAAAAAAJw/-g2KKt7mY8A/s320/milk.jpg" data-src="http://tucsoncitizen.com/tucson-tails/files/2013/06/smiling-cat-in-public-domain.jpg"></td>
                            </tr>
                        </tbody></table>
                    </div>
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2013
    Posts
    10
    Rep Power
    0
    how can i add a coundown timer of say 30 sec to above code. since i am using a coundown timer which is not working as i require. i got two pages and when i run the code, the timer already started and running in background on page 1 and in page 2 there is no countdown timer showing. i dont know how to achieve my task of showing countdown timers like a game timer for my 2 pages...

IMN logo majestic logo threadwatch logo seochat tools logo