Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 20

Thread: match pictures

  1. #1
    New Coder
    Join Date
    Jul 2013
    Posts
    25
    Thanks
    2
    Thanked 0 Times in 0 Posts

    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
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,513
    Thanks
    3
    Thanked 504 Times in 491 Posts
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    
    <meta charset="UTF-8">
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
    
    <title>Image Match Game</title>
    
    
    <style type="text/css">
    
    body {
      background-color: #EEEEEE;
      margin: 0;
    }
    
    #match-holder {
        margin: 100px auto;
        width: 900px;
    }
    
    #match-holder IMG{
        width: 200px;height:200px;
    }
    
    
    </style>
    
    </head>
    <body>
    
    <div id="match-holder">
            <img class="birds" src="https://lh4.googleusercontent.com/-FmW-yW_iThc/UYHsbbbBK0I/AAAAAAABXGE/g_vGb4Gh7lE/w497-h373/97604-beautiful-birds-blue-bird.jpg" alt="" />
            <img class="cats" src="http://images.wisegeek.com/young-calico-cat.jpg" alt="" />
            <img class="cats" src="http://avivaromm.com/romm/wp-content/uploads/2013/07/0404_milk.jpg" alt="" />
            <img class="birds" src="http://www.communityjournal.net/wp-content/uploads/2012/05/seeds.jpg" alt="" />
        </div>
    <div>
    <script type="text/javascript">
    /*<![CDATA[*/
    
    var zxcMatch={
    
     init:function(o){
      var imgs=document.getElementById(o.ParentID).getElementsByTagName('IMG'),z0=0;
      for (;z0<imgs.length;z0++){
       this.addevt(imgs[z0],'mouseup','match',o,imgs[z0]);
      }
      o.cnt=z0/2;
     },
    
     match:function(o,img){
      if (!o.lst){
       o.lst=img;
      }
      else {
       if (o.lst.className==img.className&&o.lst!=img){
        img.style.visibility=o.lst.style.visibility='hidden';
        o.cnt--;
        o.cnt==0?o.Complete():null;
       }
       else {
        alert('try again');
       }
       o.lst=null;
      }
     },
    
    
     addevt:function(o,t,f,p,p1){
      var oop=this;
      o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,p1);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](p,p1); }):null;
     }
    
    
    }
    
    zxcMatch.init({
     ParentID:'match-holder',
     Complete:function(){
      window.top.location='http://www.vicsjavascripts.org.uk/';
     }
    });
    /*]]>*/
    </script>
    </body>
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • Users who have thanked vwphillips for this post:

    kadi (08-07-2013)

  • #3
    New Coder
    Join Date
    Jul 2013
    Posts
    25
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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...

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,513
    Thanks
    3
    Thanked 504 Times in 491 Posts
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    
    <meta charset="UTF-8">
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
    
    <title>Image Match Game</title>
    
    
    <style type="text/css">
    
    body {
      background-color: #EEEEEE;
      margin: 0;
    }
    
    #match-holder {
        margin: 100px auto;
        width: 900px;
    }
    
    #match-holder IMG{
        width: 200px;height:200px;
    }
    
    
    </style>
    
    </head>
    <body>
    
    <div id="match-holder">
            <img class="birds" src="https://lh4.googleusercontent.com/-FmW-yW_iThc/UYHsbbbBK0I/AAAAAAABXGE/g_vGb4Gh7lE/w497-h373/97604-beautiful-birds-blue-bird.jpg" alt="" />
            <img class="cats" src="http://images.wisegeek.com/young-calico-cat.jpg" alt="" />
            <img class="cats" src="http://avivaromm.com/romm/wp-content/uploads/2013/07/0404_milk.jpg" alt="" />
            <img class="birds" src="http://www.communityjournal.net/wp-content/uploads/2012/05/seeds.jpg" alt="" />
        </div>
    <div>
    <input id="count" value="0" />
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    var zxcMatch={
    
     Reset:function(id){
      var o=this[id],z0=0;
      if (o){
       clearTimeout(o.to);
       o.time[1]=null;
       for (;z0<o.imgs.length;z0++){
        o.imgs[z0].style.visibility='visible';
       }
       o.cnt=z0/2;
      }
     },
    
     init:function(o){
      var id=o.ParentID,imgs=document.getElementById(id).getElementsByTagName('IMG'),z0=0;
      o.imgs=imgs;
      for (;z0<imgs.length;z0++){
       this.addevt(imgs[z0],'mouseup','match',o,imgs[z0]);
      }
      o.time=[typeof(o.Timer)=='function'?o.Timer:null];
      o.cnt=z0/2;
      this[id]=o;
     },
    
     match:function(o,img){
      if (o.time[0]&&!o.time[1]){
       o.time[1]=new Date();
       o.to=setInterval(function(){ o.time[0](o,Math.floor((new Date()-o.time[1])/1000)); },1000);
      }
      if (!o.lst){
       o.lst=img;
      }
      else {
       if (o.lst.className==img.className&&o.lst!=img){
        img.style.visibility=o.lst.style.visibility='hidden';
        o.cnt--;
        if (o.cnt==0){
         clearTimeout(o.to);
         o.time[1]=null;
         o.Complete();
        }
       }
       else {
        alert('try again');
       }
       o.lst=null;
      }
     },
    
     addevt:function(o,t,f,p,p1){
      var oop=this;
      o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,p1);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](p,p1); }):null;
     }
    
    
    }
    
    zxcMatch.init({
     ParentID:'match-holder',
     Timer:function(o,sec){
      document.getElementById('count').value=sec;
      if (sec>29){
        alert('Time Out');
        zxcMatch.Reset('match-holder');
      }
     },
     Complete:function(){
    //  window.top.location='http://www.vicsjavascripts.org.uk/';
     }
    });
    /*]]>*/
    </script>
    </body>
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #5
    New Coder
    Join Date
    Jul 2013
    Posts
    25
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks for the reply phillips and i been tested and i got whatever i need except a small portion.

    1. i need my countdown to start from 30sec and then 29, 28,...0 and when it reaches 0 we can give alert 'time out'.

    2. andi think i can make the input type to not editable by anyone. as from the code it came as text and its making me enter a value. i tried to replace that one by

    <input type="text" name="Countdown Time:" id="count" value="0" readonly>

    but the name "Countdown" is not showing and how can i make text box to my requirement because the text field is too much bigger box. i just need to show a small box for displaying the timer..

    Phillips thanks for making me to learn javascript more efficiently...

  • #6
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,513
    Thanks
    3
    Thanked 504 Times in 491 Posts
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    
    <meta charset="UTF-8">
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
    
    <title>Image Match Game</title>
    
    
    <style type="text/css">
    
    body {
      background-color: #EEEEEE;
      margin: 0;
    }
    
    #match-holder {
        margin: 100px auto;
        width: 900px;
    }
    
    #match-holder IMG{
        width: 200px;height:200px;
    }
    
    
    </style>
    
    </head>
    <body>
    
    <div id="match-holder">
            <img class="birds" src="https://lh4.googleusercontent.com/-FmW-yW_iThc/UYHsbbbBK0I/AAAAAAABXGE/g_vGb4Gh7lE/w497-h373/97604-beautiful-birds-blue-bird.jpg" alt="" />
            <img class="cats" src="http://images.wisegeek.com/young-calico-cat.jpg" alt="" />
            <img class="cats" src="http://avivaromm.com/romm/wp-content/uploads/2013/07/0404_milk.jpg" alt="" />
            <img class="birds" src="http://www.communityjournal.net/wp-content/uploads/2012/05/seeds.jpg" alt="" />
        </div>
    <div>
    <br />
    <span id="count" ></span>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    var zxcMatch={
    
     Reset:function(id){
      var o=this[id],z0=0;
      if (o){
       clearTimeout(o.to);
       o.time[1]=null;
       for (;z0<o.imgs.length;z0++){
        o.imgs[z0].style.visibility='visible';
       }
       o.cnt=z0/2;
       o.lst=null;
      }
     },
    
     init:function(o){
      var id=o.ParentID,imgs=document.getElementById(id).getElementsByTagName('IMG'),z0=0;
      o.imgs=imgs;
      for (;z0<imgs.length;z0++){
       this.addevt(imgs[z0],'mouseup','match',o,imgs[z0]);
      }
      o.time=[typeof(o.Timer)=='function'?o.Timer:null];
      o.cnt=z0/2;
      this[id]=o;
     },
    
     match:function(o,img){
      if (o.time[0]&&!o.time[1]){
       o.time[1]=new Date();
       o.to=setInterval(function(){ o.time[0](o,Math.floor((new Date()-o.time[1])/1000)); },1000);
      }
      if (!o.lst){
       o.lst=img;
      }
      else {
       if (o.lst.className==img.className&&o.lst!=img){
        img.style.visibility=o.lst.style.visibility='hidden';
        o.cnt--;
        if (o.cnt==0){
         clearTimeout(o.to);
         o.time[1]=null;
         o.Complete();
        }
       }
       else {
        alert('try again');
       }
       o.lst=null;
      }
     },
    
     addevt:function(o,t,f,p,p1){
      var oop=this;
      o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,p1);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](p,p1); }):null;
     }
    
    
    }
    
    zxcMatch.init({
     ParentID:'match-holder',
     Timer:function(o,sec){
      document.getElementById('count').innerHTML=30-sec;
      if (sec>29){
        alert('Time Out');
        zxcMatch.Reset('match-holder');
      }
     },
     Complete:function(){
    //  window.top.location='http://www.vicsjavascripts.org.uk/';
     }
    });
    /*]]>*/
    </script>
    </body>
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #7
    New Coder
    Join Date
    Jul 2013
    Posts
    25
    Thanks
    2
    Thanked 0 Times in 0 Posts
    hi, i am using phonegap(cordova) to run on smartphone. so iadded a bit of code which is working with normal javascript methods but when i use in phonegap method its not working i.e., moving to desired page as by code. any suggestions...

    in normal javascript which is working and going to deisred pages as by the code

    Code:
    zxcMatch.init({
     ParentID:'match-holder',
     Timer:function(o,sec){
      document.getElementById('count').value=sec;
      if (sec>29){
        phoneui.alert('Time Out');
    var r=confirm('stay in page 1')
    {
        if (r==true)
        {
    location.reload();
        }
        else
        { 
    phoneui.gotoPage('m1-homepage','NONE');
    location.reload();
        } 
     }
      }
     },
     Complete:function(){
    var r=confirm('Completed! move on to page 2')
    {
        if (r==true)
        {
    phoneui.gotoPage('m1-page2','NONE');
    location.reload();
        }
        else
        { 
    phoneui.gotoPage('m1-homepage','NONE');
    location.reload();
        } 
     }
     }
    });
    /*]]>*/
    </script>

    in phonegap javascript which is not working i.e., not going to required page as by coding

    Code:
    zxcMatch.init({
     ParentID:'match-holder',
     Timer:function(o,sec){
      document.getElementById('count1').value=sec;
      if (sec>6){
    phoneui.confirm('Time Up! Do You Want to stay in page 1', r(), 'Match', 'YES,NO')
    function r(button)
    {
        if (button=='1')
        {
    location.reload();
        }
        else 
        {
    phoneui.gotoPage('m1-homepage','NONE');
    location.reload();
        }
     }
     }
     },
    Complete:function(){
    phoneui.confirm('Completed! move to page 2', r(), 'Match', 'YES,NO')
    function r(button)
    {
        if (button=='1')
        {
    phoneui.gotoPage('m1-page3','NONE');
        }
        else 
        { 
    phoneui.gotoPage('m1-homepage','NONE');
    location.reload();
        } 
     }
     }
    });
    /*]]>*/
    </script>

  • #8
    New Coder
    Join Date
    Jul 2013
    Posts
    25
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Timer going below 0

    hi, the code below works fine on my browser in pc but when i run on my smart phone it works but when i press the home key and again resume the browser the timer is going below 0 i.e., -1,-2,..etc. how can i avoid these negative timers when the browser is in background....

  • #9
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,048
    Thanks
    0
    Thanked 251 Times in 247 Posts
    Your Phonegap app should have 'pause' and 'resume' event handlers to pause/resume the timer.

    http://docs.phonegap.com/en/3.0.0/co....md.html#pause
    http://docs.phonegap.com/en/3.0.0/co...md.html#resume

  • #10
    New Coder
    Join Date
    Jul 2013
    Posts
    25
    Thanks
    2
    Thanked 0 Times in 0 Posts
    so how can i have a pause and resume events for a timer only in my script. any ideas...

  • #11
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,048
    Thanks
    0
    Thanked 251 Times in 247 Posts
    You can pause by doing clearInterval(whateverTimerYouAreUsingWhenYouCalledSetInterval);

    You can resume by calling setInterval again.

  • #12
    New Coder
    Join Date
    Jul 2013
    Posts
    25
    Thanks
    2
    Thanked 0 Times in 0 Posts
    i tried doing like below but of no use. any ideas



    Code:
    document.addEventListener("deviceready", onDeviceReady, false);
    
    function onDeviceReady() {
    document.addEventListener("pause", onPause, false);  
    document.addEventListener("resume", onResume, false);
    }
    
    function onPause() {
    clearInterval(29000);
    }  
    function onResume()
    {
    setInterval();
    }

  • #13
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,087
    Thanks
    38
    Thanked 498 Times in 492 Posts
    One obvious problem is your use of the setInterval() function.
    See: http://www.w3schools.com/js/js_timing.asp
    or: http://stackoverflow.com/questions/7...or-setinterval
    or other tutorial sites.

  • #14
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,048
    Thanks
    0
    Thanked 251 Times in 247 Posts
    clearInterval parameter is also wrong. It should be the variable returned by setInterval call.

  • #15
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,087
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Arrow

    Quote Originally Posted by glenngv View Post
    clearInterval parameter is also wrong. It should be the variable returned by setInterval call.
    If he/she had read the suggested links, that too, should have been obvious.


  •  
    Page 1 of 2 12 LastLast

    LinkBacks (?)


    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •