Making a game of pairs and suddenly its disappeared!

jmtaylor · 01-19-2012, 11:07 PM

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;
		
      });
    }
  });
});

devnull69 · 01-20-2012, 07:09 AM

Can you please also show the corresponding HTML?

jmtaylor · 01-20-2012, 10:32 AM

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

devnull69 · 01-20-2012, 10:50 AM

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>');

jmtaylor · 01-20-2012, 11:56 AM

Hey. I'm entirely sure what you mean. How would I fix that?

Thanks

devnull69 · 01-20-2012, 01:09 PM

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

jmtaylor · 01-20-2012, 01:45 PM

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

devnull69 · 01-20-2012, 01:48 PM

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.

jmtaylor · 01-20-2012, 02:08 PM

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.

devnull69 · 01-20-2012, 02:17 PM

Give us the code and we will see

jmtaylor · 01-20-2012, 02:20 PM

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