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

// 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...

<!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..

@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

$('#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

<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

// 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

<!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">
© Joe Taylor 2012
</div>
</div>

<div class="clear"></div>

</div>

</body>
</html>

CSS

@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