bullant
05-28-2011, 03:41 AM
For anyone interested, below is a card guessing game. I have attached a zip file of low-res card images - 52 face up images and 1 back of card image.
The image file names in the zip match those in cardPics or you can use your own images. The only thing you need to do is set
var imgBaseURL = './cards/cardImages/150/'; which is the relative path from the folder your html file is in to the card images folder.
On page load, enter how many pairs of cards you want dealt (1-26 and there is no error checking included). Then click New game to have the cards dealt. Then click a pair of cards and they will turn face up. If they match they will stay face up. If they don't match, they will turn face down and you can click another pair.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title></title>
<style type="text/css">
body {
font-family: tahoma, verdana, arial, sans-serif;
font-size: 0.9em;
color: burlywood;
}
#tabletop {
width: 900px;
min-height: 600px;
background-color: darkgreen;
border: 6px double chocolate;
margin: 20px auto 0px auto;
padding: 0px 0px 0px 0px;
}
#cardContainer {
margin: 10px 10px 10px 10px;
padding: 0px 0px 0px 0px;
}
#cardContainer img {
margin: 0px 10px 10px 0px;
padding: 0px 0px 0px 0px;
}
#buttonsContainer {
min-height: 50px;
width: 880px;
margin: 0px 0px 10px 0px;
}
</style>
<script type="text/javascript">
var cardPics = [
['clubs-a-150.gif',1],['clubs-2-150.gif',2],['clubs-3-150.gif',3],['clubs-4-150.gif',4],['clubs-5-150.gif',5],['clubs-6-150.gif',6],['clubs-7-150.gif',7],['clubs-8-150.gif',8],['clubs-9-150.gif',9],['clubs-10-150.gif',10],['clubs-j-150.gif',11],['clubs-q-150.gif',12],['clubs-k-150.gif',13],['diamonds-a-150.gif',14],['diamonds-2-150.gif',15],['diamonds-3-150.gif',16],['diamonds-4-150.gif',17],['diamonds-5-150.gif',18],['diamonds-6-150.gif',19],['diamonds-7-150.gif',20],['diamonds-8-150.gif',21],['diamonds-9-150.gif',22],['diamonds-10-150.gif',23],['diamonds-j-150.gif',24],['diamonds-q-150.gif',25],['diamonds-k-150.gif',26],['hearts-a-150.gif',27],['hearts-2-150.gif',28],['hearts-3-150.gif',29],['hearts-4-150.gif',30],['hearts-5-150.gif',31],['hearts-6-150.gif',32],['hearts-7-150.gif',33],['hearts-8-150.gif',34],['hearts-9-150.gif',35],['hearts-10-150.gif',36],['hearts-j-150.gif',37],['hearts-q-150.gif',38],['hearts-k-150.gif',39],['spades-a-150.gif',40],['spades-2-150.gif',41],['spades-3-150.gif',42],['spades-4-150.gif',43],['spades-5-150.gif',44],['spades-6-150.gif',45],['spades-7-150.gif',46],['spades-8-150.gif',47],['spades-9-150.gif',48],['spades-10-150.gif',49],['spades-j-150.gif',50],['spades-q-150.gif',51],['spades-k-150.gif',52]
];
var imgBaseURL = './cards/cardImages/150/';
var backOfCardImage = imgBaseURL+'back-blue-150-1.gif';
// ** Start of Object
function cardStack(cardPicsO,backCardO,numPairs){
this.cardPics = cardPicsO;
this.backCard = backCardO;
this.cardMaxWidth = 100;
this.cardMaxHeight = 145;
this.numDecks = 1;
this.shuffledIndxs = [];
this.curCardIndx = 0;
this.numDealtCards = 0;
this.numCardsInStack = this.numDecks*52;
this.shuffle=function(){
this.curCardIndx = 0;
var s = [];
while (this.shuffledIndxs.length) s.push(this.shuffledIndxs.splice(Math.random() * this.shuffledIndxs.length, 1));
while (s.length) this.shuffledIndxs.push(s.pop());
}
this.init=function(){
for(i=0; i < this.numDecks*52; i++){
this.shuffledIndxs.push(i);
}
this.shuffle();
var tempCardPics = [];
var tempShuffledIndexes = [];
for(i=0; i < numPairs; i++){
tempCardPics.push(this.cardPics[this.shuffledIndxs[i]]);
tempCardPics.push(this.cardPics[this.shuffledIndxs[i]]);
}
for(i=0; i < numPairs*2; i++){
tempShuffledIndexes.push(i);
}
this.cardPics = tempCardPics;
this.shuffledIndxs = tempShuffledIndexes;
this.shuffle();
}
this.init();
this.getCards=function(num,faceDown){
var cards = [];
for(i=0; i < num; i++){
if(faceDown) { //send back face down cards
var dealtBackCard = new Image();
dealtBackCard.cardDownSrc = this.backCard.src;
dealtBackCard.value = this.cardPics[this.shuffledIndxs[this.curCardIndx]].value;
dealtBackCard.facedown = true;
dealtBackCard.cardUpSrc = this.cardPics[this.shuffledIndxs[this.curCardIndx]].src;
dealtBackCard.src = this.backCard.src;
dealtBackCard.maxWidth = this.cardMaxWidth;
dealtBackCard.maxHeight = this.cardMaxHeight;
cards.push(dealtBackCard);
} else { //send back face up cards
this.cardPics[this.shuffledIndxs[this.curCardIndx]].maxWidth = this.cardMaxWidth;
this.cardPics[this.shuffledIndxs[this.curCardIndx]].maxHeight = this.cardMaxHeight;
cards.push(this.cardPics[this.shuffledIndxs[this.curCardIndx]]);
cards[cards.length-1].facedown = false;
}
++this.curCardIndx;
}
return cards;
}
}
//End of Object
//-----------------------------------------------------
function startGame(){
clearPlayerCards(cardContainerO);
var numPairs = new Number(numCardsO.value);
deck = new cardStack(cardPicsO,backCardO,numPairs);
dealCards(numPairs*2,true);
}
function clearPlayerCards(obj){
var imgsO = obj.getElementsByTagName('img');
while(imgsO.length > 0){
imgsO[0].parentNode.removeChild(imgsO[0]);
imgsO = obj.getElementsByTagName('img');
}
}
var numCardsfaceUp = 0;
function turnCardOver(imgO){
if(imgO.facedown){ //turn card face up
imgO.src = imgO.cardUpSrc;
imgO.facedown = false;
imgO.selected = true;
imgO.onclick = '';
} else { //turn card face down
imgO.src = imgO.cardDownSrc;
imgO.facedown = true;
imgO.selected = false;
imgO.onclick = function(){turnCardOver(imgO);}
}
if(++numCardsfaceUp == 2){checkMatch();}
}
function checkMatch(){
var allcardImgsO = cardContainerO.getElementsByTagName('img');
var selectedCardsO = [];
for(i=0; i < allcardImgsO.length; i++){
if(allcardImgsO[i].selected && !allcardImgsO[i].matched){
selectedCardsO.push(allcardImgsO[i]);
if(selectedCardsO.length == 2){i=allcardImgsO.length;}
}
}
numCardsfaceUp = 0;
if(selectedCardsO[0].value == selectedCardsO[1].value) {//we have a match
for(i=0; i < selectedCardsO.length; i++){
selectedCardsO[i].matched = true;
}
} else { //no match
alert('No match...!!!');
for(i=0; i < selectedCardsO.length; i++){
selectedCardsO[i].selected = false;
turnCardOver(selectedCardsO[i]);
}
}
}
function dealCards(numCards,faceDown){
switch (faceDown){
case true : //deal cards face down
var newCards = deck.getCards(numCards,true);
for(i=0; i < newCards.length; i++){
var newImg = document.createElement('img');
newImg.src = newCards[i].src;
newImg.facedown = newCards[i].facedown;
newImg.cardUpSrc = newCards[i].cardUpSrc;
newImg.cardDownSrc = newCards[i].cardDownSrc;
newImg.matched = false;
newImg.selected = false;
newImg.value = newCards[i].value;
newImg.onclick = function(){turnCardOver(this);}
thumbDims = calcNewDimensions(newCards[i].width, newCards[i].height, newCards[i].maxWidth, newCards[i].maxHeight);
newImg.width = thumbDims['width'];
newImg.height = thumbDims['height'];
cardContainerO.appendChild(newImg);
}
break;
case false : //deal cards face up
var newCards = deck.getCards(numCards,false);
for(i=0; i < newCards.length; i++){
var newImg = document.createElement('img');
newImg.src = newCards[i].src;
newImg.facedown = newCards[i].facedown;
newImg.value = newCards[i].value;
thumbDims = calcNewDimensions(newCards[i].width, newCards[i].height, newCards[i].maxWidth, newCards[i].maxHeight);
newImg.width = thumbDims['width'];
newImg.height = thumbDims['height'];
cardContainerO.appendChild(newImg);
}
break;
}
}
function calcNewDimensions(width, height, maxWidth, maxHeight){
newDims = new Array();
var xRatio = maxWidth / width;
var yRatio = maxHeight / height;
//calculate the new width and height
if(width <= maxWidth && height <= maxHeight) { //image does not need resizing
newDims["width"] = width;
newDims["height"] = height;
} else if(xRatio * height < maxHeight) {
newDims["height"] = Math.round(xRatio * height);
newDims["width"] = maxWidth;
} else {
newDims["width"] = Math.round(yRatio * width);
newDims["height"] = maxHeight;
}
return newDims;
}
window.onload=function(){
preloadedImgs = document.getElementById('preloadedPics').getElementsByTagName('img');
cardPicsO = new Array();
for(i=0; i < preloadedImgs.length; i++){
cardPicsO[i] = new Image();
cardPicsO[i].src = preloadedImgs[i].src;
cardPicsO[i].value = cardPics[i][1];
}
preloadedBackOfCardImg = document.getElementById('preloadedBackOfcard').getElementsByTagName('img')[0];
backCardO = new Image();
backCardO.src = preloadedBackOfCardImg.src;
document.body.removeChild(document.getElementById('preloadedPics'));
document.body.removeChild(document.getElementById('preloadedBackOfcard'));
cardContainerO = document.getElementById('cardContainer');
numCardsO = document.getElementById('numCards');
numCardsO.focus();
document.getElementById('btnNewgame').onclick=startGame;
}
</script>
</head>
<body>
<!-- preload the images so we can use their actual width and height property
to scale the thumbnails -->
<div id="preloadedPics" style="display: none"></div>
<div id="preloadedBackOfcard" style="display: none"></div>
<script type="text/javascript">
for(i=0; i < cardPics.length; i++){
var newImg = document.createElement('img');
newImg.src = imgBaseURL+cardPics[i][0];
document.getElementById('preloadedPics').appendChild(newImg);
}
var newImg = document.createElement('img');
newImg.src = backOfCardImage;
document.getElementById('preloadedBackOfcard').appendChild(newImg);
</script>
<!-- --------------------End of image preloads ------------------ -->
<div id="tabletop">
<div id="cardContainer"></div>
<div id="buttonsContainer">
Number of pairs:<input type="text" id="numCards" />
<button id="btnNewgame">New game</button>
</div>
</div>
</body>
</html>
The image file names in the zip match those in cardPics or you can use your own images. The only thing you need to do is set
var imgBaseURL = './cards/cardImages/150/'; which is the relative path from the folder your html file is in to the card images folder.
On page load, enter how many pairs of cards you want dealt (1-26 and there is no error checking included). Then click New game to have the cards dealt. Then click a pair of cards and they will turn face up. If they match they will stay face up. If they don't match, they will turn face down and you can click another pair.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title></title>
<style type="text/css">
body {
font-family: tahoma, verdana, arial, sans-serif;
font-size: 0.9em;
color: burlywood;
}
#tabletop {
width: 900px;
min-height: 600px;
background-color: darkgreen;
border: 6px double chocolate;
margin: 20px auto 0px auto;
padding: 0px 0px 0px 0px;
}
#cardContainer {
margin: 10px 10px 10px 10px;
padding: 0px 0px 0px 0px;
}
#cardContainer img {
margin: 0px 10px 10px 0px;
padding: 0px 0px 0px 0px;
}
#buttonsContainer {
min-height: 50px;
width: 880px;
margin: 0px 0px 10px 0px;
}
</style>
<script type="text/javascript">
var cardPics = [
['clubs-a-150.gif',1],['clubs-2-150.gif',2],['clubs-3-150.gif',3],['clubs-4-150.gif',4],['clubs-5-150.gif',5],['clubs-6-150.gif',6],['clubs-7-150.gif',7],['clubs-8-150.gif',8],['clubs-9-150.gif',9],['clubs-10-150.gif',10],['clubs-j-150.gif',11],['clubs-q-150.gif',12],['clubs-k-150.gif',13],['diamonds-a-150.gif',14],['diamonds-2-150.gif',15],['diamonds-3-150.gif',16],['diamonds-4-150.gif',17],['diamonds-5-150.gif',18],['diamonds-6-150.gif',19],['diamonds-7-150.gif',20],['diamonds-8-150.gif',21],['diamonds-9-150.gif',22],['diamonds-10-150.gif',23],['diamonds-j-150.gif',24],['diamonds-q-150.gif',25],['diamonds-k-150.gif',26],['hearts-a-150.gif',27],['hearts-2-150.gif',28],['hearts-3-150.gif',29],['hearts-4-150.gif',30],['hearts-5-150.gif',31],['hearts-6-150.gif',32],['hearts-7-150.gif',33],['hearts-8-150.gif',34],['hearts-9-150.gif',35],['hearts-10-150.gif',36],['hearts-j-150.gif',37],['hearts-q-150.gif',38],['hearts-k-150.gif',39],['spades-a-150.gif',40],['spades-2-150.gif',41],['spades-3-150.gif',42],['spades-4-150.gif',43],['spades-5-150.gif',44],['spades-6-150.gif',45],['spades-7-150.gif',46],['spades-8-150.gif',47],['spades-9-150.gif',48],['spades-10-150.gif',49],['spades-j-150.gif',50],['spades-q-150.gif',51],['spades-k-150.gif',52]
];
var imgBaseURL = './cards/cardImages/150/';
var backOfCardImage = imgBaseURL+'back-blue-150-1.gif';
// ** Start of Object
function cardStack(cardPicsO,backCardO,numPairs){
this.cardPics = cardPicsO;
this.backCard = backCardO;
this.cardMaxWidth = 100;
this.cardMaxHeight = 145;
this.numDecks = 1;
this.shuffledIndxs = [];
this.curCardIndx = 0;
this.numDealtCards = 0;
this.numCardsInStack = this.numDecks*52;
this.shuffle=function(){
this.curCardIndx = 0;
var s = [];
while (this.shuffledIndxs.length) s.push(this.shuffledIndxs.splice(Math.random() * this.shuffledIndxs.length, 1));
while (s.length) this.shuffledIndxs.push(s.pop());
}
this.init=function(){
for(i=0; i < this.numDecks*52; i++){
this.shuffledIndxs.push(i);
}
this.shuffle();
var tempCardPics = [];
var tempShuffledIndexes = [];
for(i=0; i < numPairs; i++){
tempCardPics.push(this.cardPics[this.shuffledIndxs[i]]);
tempCardPics.push(this.cardPics[this.shuffledIndxs[i]]);
}
for(i=0; i < numPairs*2; i++){
tempShuffledIndexes.push(i);
}
this.cardPics = tempCardPics;
this.shuffledIndxs = tempShuffledIndexes;
this.shuffle();
}
this.init();
this.getCards=function(num,faceDown){
var cards = [];
for(i=0; i < num; i++){
if(faceDown) { //send back face down cards
var dealtBackCard = new Image();
dealtBackCard.cardDownSrc = this.backCard.src;
dealtBackCard.value = this.cardPics[this.shuffledIndxs[this.curCardIndx]].value;
dealtBackCard.facedown = true;
dealtBackCard.cardUpSrc = this.cardPics[this.shuffledIndxs[this.curCardIndx]].src;
dealtBackCard.src = this.backCard.src;
dealtBackCard.maxWidth = this.cardMaxWidth;
dealtBackCard.maxHeight = this.cardMaxHeight;
cards.push(dealtBackCard);
} else { //send back face up cards
this.cardPics[this.shuffledIndxs[this.curCardIndx]].maxWidth = this.cardMaxWidth;
this.cardPics[this.shuffledIndxs[this.curCardIndx]].maxHeight = this.cardMaxHeight;
cards.push(this.cardPics[this.shuffledIndxs[this.curCardIndx]]);
cards[cards.length-1].facedown = false;
}
++this.curCardIndx;
}
return cards;
}
}
//End of Object
//-----------------------------------------------------
function startGame(){
clearPlayerCards(cardContainerO);
var numPairs = new Number(numCardsO.value);
deck = new cardStack(cardPicsO,backCardO,numPairs);
dealCards(numPairs*2,true);
}
function clearPlayerCards(obj){
var imgsO = obj.getElementsByTagName('img');
while(imgsO.length > 0){
imgsO[0].parentNode.removeChild(imgsO[0]);
imgsO = obj.getElementsByTagName('img');
}
}
var numCardsfaceUp = 0;
function turnCardOver(imgO){
if(imgO.facedown){ //turn card face up
imgO.src = imgO.cardUpSrc;
imgO.facedown = false;
imgO.selected = true;
imgO.onclick = '';
} else { //turn card face down
imgO.src = imgO.cardDownSrc;
imgO.facedown = true;
imgO.selected = false;
imgO.onclick = function(){turnCardOver(imgO);}
}
if(++numCardsfaceUp == 2){checkMatch();}
}
function checkMatch(){
var allcardImgsO = cardContainerO.getElementsByTagName('img');
var selectedCardsO = [];
for(i=0; i < allcardImgsO.length; i++){
if(allcardImgsO[i].selected && !allcardImgsO[i].matched){
selectedCardsO.push(allcardImgsO[i]);
if(selectedCardsO.length == 2){i=allcardImgsO.length;}
}
}
numCardsfaceUp = 0;
if(selectedCardsO[0].value == selectedCardsO[1].value) {//we have a match
for(i=0; i < selectedCardsO.length; i++){
selectedCardsO[i].matched = true;
}
} else { //no match
alert('No match...!!!');
for(i=0; i < selectedCardsO.length; i++){
selectedCardsO[i].selected = false;
turnCardOver(selectedCardsO[i]);
}
}
}
function dealCards(numCards,faceDown){
switch (faceDown){
case true : //deal cards face down
var newCards = deck.getCards(numCards,true);
for(i=0; i < newCards.length; i++){
var newImg = document.createElement('img');
newImg.src = newCards[i].src;
newImg.facedown = newCards[i].facedown;
newImg.cardUpSrc = newCards[i].cardUpSrc;
newImg.cardDownSrc = newCards[i].cardDownSrc;
newImg.matched = false;
newImg.selected = false;
newImg.value = newCards[i].value;
newImg.onclick = function(){turnCardOver(this);}
thumbDims = calcNewDimensions(newCards[i].width, newCards[i].height, newCards[i].maxWidth, newCards[i].maxHeight);
newImg.width = thumbDims['width'];
newImg.height = thumbDims['height'];
cardContainerO.appendChild(newImg);
}
break;
case false : //deal cards face up
var newCards = deck.getCards(numCards,false);
for(i=0; i < newCards.length; i++){
var newImg = document.createElement('img');
newImg.src = newCards[i].src;
newImg.facedown = newCards[i].facedown;
newImg.value = newCards[i].value;
thumbDims = calcNewDimensions(newCards[i].width, newCards[i].height, newCards[i].maxWidth, newCards[i].maxHeight);
newImg.width = thumbDims['width'];
newImg.height = thumbDims['height'];
cardContainerO.appendChild(newImg);
}
break;
}
}
function calcNewDimensions(width, height, maxWidth, maxHeight){
newDims = new Array();
var xRatio = maxWidth / width;
var yRatio = maxHeight / height;
//calculate the new width and height
if(width <= maxWidth && height <= maxHeight) { //image does not need resizing
newDims["width"] = width;
newDims["height"] = height;
} else if(xRatio * height < maxHeight) {
newDims["height"] = Math.round(xRatio * height);
newDims["width"] = maxWidth;
} else {
newDims["width"] = Math.round(yRatio * width);
newDims["height"] = maxHeight;
}
return newDims;
}
window.onload=function(){
preloadedImgs = document.getElementById('preloadedPics').getElementsByTagName('img');
cardPicsO = new Array();
for(i=0; i < preloadedImgs.length; i++){
cardPicsO[i] = new Image();
cardPicsO[i].src = preloadedImgs[i].src;
cardPicsO[i].value = cardPics[i][1];
}
preloadedBackOfCardImg = document.getElementById('preloadedBackOfcard').getElementsByTagName('img')[0];
backCardO = new Image();
backCardO.src = preloadedBackOfCardImg.src;
document.body.removeChild(document.getElementById('preloadedPics'));
document.body.removeChild(document.getElementById('preloadedBackOfcard'));
cardContainerO = document.getElementById('cardContainer');
numCardsO = document.getElementById('numCards');
numCardsO.focus();
document.getElementById('btnNewgame').onclick=startGame;
}
</script>
</head>
<body>
<!-- preload the images so we can use their actual width and height property
to scale the thumbnails -->
<div id="preloadedPics" style="display: none"></div>
<div id="preloadedBackOfcard" style="display: none"></div>
<script type="text/javascript">
for(i=0; i < cardPics.length; i++){
var newImg = document.createElement('img');
newImg.src = imgBaseURL+cardPics[i][0];
document.getElementById('preloadedPics').appendChild(newImg);
}
var newImg = document.createElement('img');
newImg.src = backOfCardImage;
document.getElementById('preloadedBackOfcard').appendChild(newImg);
</script>
<!-- --------------------End of image preloads ------------------ -->
<div id="tabletop">
<div id="cardContainer"></div>
<div id="buttonsContainer">
Number of pairs:<input type="text" id="numCards" />
<button id="btnNewgame">New game</button>
</div>
</div>
</body>
</html>