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 2 of 2
  1. #1
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts

    Card Guessing Game

    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.
    Code:
    <!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>
    Attached Files Attached Files
    Last edited by bullant; 05-28-2011 at 05:07 AM.

  2. Users who have thanked bullant for this post:

    syco__ (05-28-2011)

  • #2
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    This thread is supposed to be in the "Post a Javascript" forum.

    Can a moderator please move it for me.

    Thanks


  •  

    Posting Permissions

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