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.
Results 1 to 11 of 11
  1. #1
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question Making a game of pairs and suddenly its disappeared!

    Hey, I've been making a pairs game in javascript with jquery and I've been fiddling about with it but now suddenly the cards have disappeared.

    My code is below. I'm pretty stumped, can someone let me know what's going on please?

    Thanks

    Code:
    // JavaScript Document
    // Pairs game
    
    $(document).ready(function() { 
    
    // Sets up variables, sets up image location, size of each card and arrays for each card's picture and position
    
      var imageFiles = 'images/';
      var cards = ['card1.jpg', 'card2.jpg', 'card3.jpg', 'card4.jpg', 'card5.jpg', 'card6.jpg'];
      var cardSize = 100;
      var rows = 3;
      var cols = 4;
      var posns = [];
      var rowsByCols = rows*cols;
      
    // Function that checks for num in posns array
      
      function checkArray(array, num) {
        for(i = 0; i < array.length; i++) {
          if(array[i] == num) return true;
        }
        return false;
      }
      
    // For loop that creates random unique positions for the cards and then stores them within the posns array
      
      for(i = 0; i < rowsByCols; i++) {
        while(true) {
          var ranNum = Math.floor(Math.random() * (rowsByCols));
          if(!checkArray(posns, ranNum)) {
            posns[i] = ranNum;
            break; 
          }
        }
    	
    // For loop that makes sure then card is the right size then adds a picture to the card at the position specified in the posns array
    	
      }
      for(i = 0; i < posns.length; i++) {
        if(posns[i] >= cards.length) {
          posns[i] = posns[i] - cards.length;
        }	
    	
        $('#cards').append('<div class="picture"><img src="' + imageFiles + cards[posns[i]] + '" alt="" /></div>');
      }
      
      $('.picture').hover(function() { //apply the mouse over
        $(this).css('background-position', '0 -100px');
      }, function() { //mouse out
        $(this).css('background-position', '0 0');
      });
      
    // Setup variable for how many cards have been selected. Function for fading in selected card.
      
      var selected = 1;
      
      $('.picture').click(function() {
        if($(this).children().css('display') != 'none') return false;
    	
    	var step = parseInt($('#information strong').text()) + 1; //add a step
        $('#information strong').text(step); //update at informations
        $('#steps').text(step); //update at the sidebar
        if(selected != 2) {
          $(this).children().fadeIn('fast');
          selected++;
        } 
    	
    // If 2 cards are selected, stores urls of the picture of each card selected.
    	
    	else if(selected == 2) {
          $(this).children().fadeIn('fast', function() {
            var card1; var card2;
    		
            $('.picture img').not('.found').each(function() {
              if($(this).css('display') != 'none') {
                if(!card1) card1 = $(this).attr('src');
                else card2 = $(this).attr('src');
              }
            });
    		
    // Compare urls of the two selected cards and if they match adds a class so that the pair is 'out'
    		
            if(card1 == card2) {
              $(".picture img:visible").each(function() {
                $(this).addClass('found');
              });
            } 
    		
    // If pair doesn't match then they fade out
    		
    		else {
              $('.picture img').not('.found').fadeOut('slow');
            }
    
    // If no hidden pairs are left the game ends
    
            if($('.picture img:hidden').css('display') != 'none') {
              $('#cards').fadeOut('slow');
            }
    		
            selected = 1;
    		
          });
        }
      });
    });

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,396
    Thanks
    12
    Thanked 569 Times in 562 Posts
    Can you please also show the corresponding HTML?

  • #3
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hey. Its all pretty simple at the moment. Here's the html...

    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <script src="jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="js.js" type="text/javascript"></script>
    <link rel=stylesheet href="style.css">
    </head>
    
    <body>
    
    <div id="wrapper">
    
          <div id="content">      
            <h1>"Pairs"</h1>
            <div id="game">
              <div id="game2">
                <div id="pictures"></div>
              </div>
            </div>
            <div id="footer">
              "End"
            </div>        
          </div>
          
          <div class="clear"></div>
          
        </div>
        
    </body>
    </html>
    And also the CSS..

    Code:
    @charset "utf-8";
    /* CSS Document */
    
    html { 
    	font-size: 16px; 
    }
    	
    body { 
    	font-size: 11px; 
    	font-family: Verdana, Arial, sans-serif; 
    	color: #555555;
    }
    
    #wrapper { 
    	background: #123456; 
    }
    
    h1 { 
    	font-size: 14px; 
    	line-height: 32px; 
    	margin: 30px 0 50px 0; 
    }  
    
    #game { 
      	position: relative; 
      	width: 400px; 
      	height: 300px; 
    }
    	  
    #pictures { 
    	position: absolute; 
    	top: 0; 
    	left: 0; 
    }
    	
    .picture { 
    	width: 100px; height: 100px; 
    	background: url(../images/bkg.jpg); 
    	float: left; 
    }
    	  
    .picture img { 
    	display: none; 
    }
      
    #footer { 
    	text-align: center; 
    	margin: 50px 0 20px 0; 
    }
    Thanks

  • #4
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,396
    Thanks
    12
    Thanked 569 Times in 562 Posts
    First guess ... there is no element with ID "cards" for this line of code
    Code:
        $('#cards').append('<div class="picture"><img src="' + imageFiles + cards[posns[i]] + '" alt="" /></div>');

  • #5
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hey. I'm entirely sure what you mean. How would I fix that?

    Thanks

  • #6
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,396
    Thanks
    12
    Thanked 569 Times in 562 Posts
    Ahem ... if you used this statement to put some content into an element with id="cards" you should be aware that you'd need some element with id="cards" in your HTML

    Something like
    Code:
    <div id="cards"></div>
    If your code worked before there must have been such an element before.... I am confused

  • Users who have thanked devnull69 for this post:

    jmtaylor (01-20-2012)

  • #7
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Ahh perfect thankyou, I must have renamed it to game2 for some reason. I'm having a little trouble making the cards show their background image though. They're just plain white until they're clicked on and fade in, any way I can give them a background image before they're turned?

    Thanks

  • #8
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,396
    Thanks
    12
    Thanked 569 Times in 562 Posts
    Maybe you can use the background image on top (position:absolute) of the original image and if clicked, you first remove the background image and then fade in the original one beneath.

  • #9
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I've tried making a seperate div and object for the bkg and placing it behind the card but that doesn't really work. I can't get them to dissapear when i click on a card.

  • #10
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,396
    Thanks
    12
    Thanked 569 Times in 562 Posts
    Give us the code and we will see

  • #11
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Javascript

    Code:
    // JavaScript Document
    // Pairs game
    
    $(document).ready(function() { 
    
    // Sets up variables, sets up image location, size of each card and arrays for each card's picture and position
    
      var imageFiles = 'images/';
      var cards = ['card1.jpg', 'card2.jpg', 'card3.jpg', 'card4.jpg', 'card5.jpg', 'card6.jpg'];
      var cardbkg = ['bkg.jpg'];
      var cardSize = 100;
      var rows = 3;
      var cols = 4;
      var posns = [];
      var rowsByCols = rows*cols;
      
    // Function that checks for num in posns array
      
      function checkArray(array, num) {
        for(i = 0; i < array.length; i++) {
          if(array[i] == num) return true;
        }
        return false;
      }
      
    // For loop that creates random unique positions for the cards and then stores them within the posns array
      
      for(i = 0; i < rowsByCols; i++) {
        while(true) {
          var ranNum = Math.floor(Math.random() * (rowsByCols));
          if(!checkArray(posns, ranNum)) {
            posns[i] = ranNum;
            break; 
          }
        }
    	
    // For loop that makes sure each card is the right size then adds a picture to the card at the position specified in the posns array
    
      }
      
        for(i = 0; i < posns.length; i++) {
        if(posns[i] >= cardbkg.length) {
          posns[i] = posns[i] - cardbkg.length;
        }	
        $('#cardbkg').append('<div class="bkg"><img src="' + imageFiles + cardbkg + '" alt="" /></div>');
      }
      
      for(i = 0; i < posns.length; i++) {
        if(posns[i] >= cards.length) {
          posns[i] = posns[i] - cards.length;
        }	
        $('#cards').append('<div class="picture"><img src="' + imageFiles + cards[posns[i]] + '" alt="" /></div>');
      }
      
      $('.picture').hover(function() { //apply the mouse over
        $(this).css('background-position', '0 -100px');
      }, function() { //mouse out
        $(this).css('background-position', '0 0');
      });
      
    // Setup variable for how many cards have been selected. Function for fading in selected card.
      
      var selected = 1;
      
      $('.picture').click(function() {
        if($(this).children().css('display') != 'none') return false;
    	
        if(selected != 2) {
          $(this).children().fadeIn('fast');
          selected++;
        } 
    	
    // If 2 cards are selected, stores urls of the picture of each card selected.
    	
    	else if(selected == 2) {
          $(this).children().fadeIn('fast', function() {
            var card1; var card2;
    		
            $('.picture img').not('.found').each(function() {
              if($(this).css('display') != 'none') {
                if(!card1) card1 = $(this).attr('src');
                else card2 = $(this).attr('src');
              }
            });
    		
    // Compare urls of the two selected cards and if they match adds a class so that the pair is 'out'
    		
            if(card1 == card2) {
              $(".picture img:visible").each(function() {
                $(this).addClass('found');
              });
            } 
    		
    // If pair doesn't match then they fade out
    		
    		else {
              $('.picture img').not('.found').fadeOut('slow');
            }
    
    // If no hidden pairs are left the game ends
    
            if($('.picture img:hidden').css('display') != 'none') {
              $('#cards').fadeOut('slow');
            }
    		
            selected = 1;
    		
          });
        }
      }); 
    });
    HTML

    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <script src="jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="js.js" type="text/javascript"></script>
    <link rel=stylesheet href="style.css">
    </head>
    
    <body>
    
    <div id="wrapper">
    
          <div id="content">      
            <h1>Pairs Game</h1>
            <div id="game">
            	<div id="cardbkg">
              		<div id="cards">
                		<div id="pictures"></div>
              	</div>
              </div>
            </div>
            <div id="resetGame">
            <input type="reset" value="Reset" />
            </div>
            <div id="footer">
              &copy; Joe Taylor 2012
            </div>        
          </div>
          
          <div class="clear"></div>
          
        </div>
        
    </body>
    </html>
    CSS

    Code:
    @charset "utf-8";
    /* CSS Document */
    
    html { 
    	font-size: 16px; 
    }
    	
    body { 
    	font-size: 11px; 
    	font-family: Verdana, Arial, sans-serif; 
    	color: #555555;
    }
    
    #wrapper { 
    	background: #FFFFFF; 
    	positon: absolute;
    	width: 600px;
    	margin: 0 auto;
    }
    
    h1 { 
    	text-align: center;
    	font-size: 14px; 
    	line-height: 32px; 
    	margin: 30px 0 50px 0; 
    }  
    
    #game { 
      	position: relative; 
      	width: 400px; 
      	height: 300px; 
    }
    	  
    #pictures { 
    	position: absolute; 
    	top: 0; 
    	left: 0; 
    }
    
    .bkg {
    	position: absolute;
    	background: url(../images/bkg.jpg); 
    	float: left;
    	margin: 0 auto;
    }
    	
    .picture { 
    	position: relative;
    	width: 100px; height: 100px; 	
    	float: left; 
    	margin: 0 auto;
    }
    	  
    .picture img { 
    	display: none; 
    }
      
    #footer { 
    	text-align: center; 
    	margin: 50px 0 20px 0; 
    }
    Thankyou very much


  •  

    Tags for this Thread

    Posting Permissions

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