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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 18
  1. #1
    New to the CF scene
    Join Date
    Dec 2012
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    javascript basic card match game

    Hi guys, started javascript 2 weeks ago and started working on a basic card came.. Im trying to get to cards with the same number to win. it is real basic now.. and I have it some what working but I want it to show images instead of the numbers here is the code:
    Code:
    <html>
    <head><title>Cards</title>
    
    <script type="text/javascript">
    function spin()
    {
    var rands1 = Math.ceil((Math.random()*4));
    var randn1 = Math.ceil((Math.random()*13));
    var img = new Image();
    if (randn1==10)
    {
    randn1="0"
    }
    
    if (randn1==11)
    {
    randn1="J"
    img.src = "weba.jpg";
    }
    
    if (randn1==12)
    {
    randn1="Q"
    }
    
    if (randn1==13)
    {
    randn1="K"
    }
    
    cardname1=rands1+"-"+randn1+".jpg";
    
    document.getElementById("sometext").innerHTML = cardname1;
    
    var rands2 = Math.ceil((Math.random()*4));
    var randn2 = Math.ceil((Math.random()*13));
    
    if (randn2==10)
    {
    randn2="0"
    }
    
    if (randn2==11)
    {
    randn2="J"
    }
    
    if (randn2==12)
    {
    randn2="Q"
    }
    
    if (randn2==13)
    {
    randn2="K"
    }
    
    cardname2=rands2+"-"+randn2+".jpg";
    
    document.getElementById("sometext2").innerHTML = cardname2;
    
    
    
    
    
    
    if (((randn1==0) && (randn2==0) ||(randn1==1) && (randn2==1) ||(randn1==2) && (randn2==2) ||(randn1==3) && (randn2==3) ||(randn1==4) && (randn2==4)))
    {
    document.getElementById("sometext3").innerHTML = "snap";
    }
    else
    {
    document.getElementById("sometext3").innerHTML = "thi is fun";
    }
    
    }
    </script>
    
    </head>
    
    <body>
    
    
    
    <br/><br/><br/><br/>
    <button type="button" onclick="spin()">deal</button> 
    
    <div id="sometext">A</div>
    <div id="sometext2">B</div>
    <div id="sometext3">who is going to win</div>
    </body>
    </html>

  • #2
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,461
    Thanks
    11
    Thanked 600 Times in 580 Posts
    basically, you want a list of image urls, and then you can use a common number to refer to each one.

    it could working something like :

    Code:
    cardname2='<img src=' + JSON.stringify(randn2+'.jpg') + ' />';
    sometext2.innerHTML = cardname2;


    ps, i did the same thing once upon a time; see http://danml.com/pub/memory.htm for a peek at how i did it a while back...
    my site (updated 2014/10/20)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.3, IE11:9.2, IE9:2.7, IE10:2.6, FF:16.8, CH:47.5, SF:7.8, NON-MOUSE:37%

  • #3
    New to the CF scene
    Join Date
    Dec 2012
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks man. Is there a way to do it using images I have on my computer.

  • #4
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,461
    Thanks
    11
    Thanked 600 Times in 580 Posts
    Quote Originally Posted by javasnip View Post
    thanks man. Is there a way to do it using images I have on my computer.
    yes, just put them in the folder with your html file, and use just the filename instead of the path to point to the images.
    my site (updated 2014/10/20)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.3, IE11:9.2, IE9:2.7, IE10:2.6, FF:16.8, CH:47.5, SF:7.8, NON-MOUSE:37%

  • #5
    New to the CF scene
    Join Date
    Dec 2012
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ya thats the way i assumed it would work., like for example i named my images like so 1-k, 1-J and so on assuming that this method would work,
    Code:
    cardname1=rands1+"-"+randn1+".jpg";
    But no they just come out on the page like 1-k, 1-4 and so on.

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,664
    Thanks
    80
    Thanked 4,643 Times in 4,605 Posts
    This way of getting random numbers is *WRONG*:
    Code:
    var rands1 = Math.ceil((Math.random()*4));
    var randn1 = Math.ceil((Math.random()*13));
    In each case, there is a small but FINITE CHANCE that the number you get will be ZERO!

    That's because there is a small but finite chance that Math.random() can produce a zero value. Multiply zero by anything and then take the Math.ceil() of it and you still have zero.

    The *CORRECT* formula is
    Code:
    var rands1 = 1 + Math.floor(Math.random()*4);
    var randn1 = 1 + Math.floor(Math.random()*13);
    In general the formula is:
    Code:
    function getRandomInt( low, high )
    {
        return low + Math.floor( Math.random() * ( high - low + 1 ) );
    }
    (which code assumes low and high are themselves integers).
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #7
    New to the CF scene
    Join Date
    Dec 2012
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks for that man, would you believe that my lecturer gave me that part of the code. I noticed all over the net was the way you had it too.. so was curious to know the difference.. have you any other input on the specific part that is causing me problems.

  • #8
    Regular Coder
    Join Date
    May 2012
    Location
    France
    Posts
    224
    Thanks
    0
    Thanked 32 Times in 30 Posts
    There are other variants like this.

    Now, how to evaluate players? A beginning of answer on this page.
    Last edited by 007julien; 12-04-2012 at 12:14 AM.

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,664
    Thanks
    80
    Thanked 4,643 Times in 4,605 Posts
    Your lecturer is, therefore, know to be incompetent at coding. In any language. As this method for for getting random integers is essentially identical in JavaScript, Java, C, C++, even BASIC of various flavors, and many other languages. SO if he/she didn't learn the right way in *SOME* language, then he/she has no business trying to teach others.

    &&&&&&&&&&&&&

    There are a lot of things in your code that don't make sense.

    For starters, the only place you actually ever even *ATTEMPT* to change an <img> is here:
    Code:
        img.src = "weba.jpg";
    so you are only (trying!) to affect an image for player 1 and then only when the card is a Jack.

    And then, as you wrote
    they just come out on the page like 1-k, 1-4 and so on.
    Well, yeah. But that's what you asked for.

    You are doing
    Code:
    document.getElementById("sometext2").innerHTML = cardname2;
    Why would you expect that to affect the appearance of some <img>? ESPECIALLY when you don't even *HAVE* any <img> tag(s) on the page, at all!
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #10
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,664
    Thanks
    80
    Thanked 4,643 Times in 4,605 Posts
    And I don't pretend to understand your "winner" logic.

    Code:
    if (((randn1==0) && (randn2==0) ||(randn1==1) && (randn2==1) ||(randn1==2) && (randn2==2) ||(randn1==3) && (randn2==3) ||(randn1==4) && (randn2==4)))
    For starters, in your code randn1 and randn2 can *NEVER* be 0! Remember? You purposely wrote the code so they would be the numbers 1 through 13.

    And how does the fact that the two NUMBERS are the same *AND* in the range of 1 through 4 cause you to write "Snap" as the "winner"???

    I don't understand your rules, at all.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #11
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,664
    Thanks
    80
    Thanked 4,643 Times in 4,605 Posts
    This probably doesn't conform to your "rules", but at least it does something.

    Code:
    <html>
    <head><title>Cards</title>
    
    <script type="text/javascript">
    var cardNames = ["Ace","Deuce","Trey",4,5,6,7,8,9,10,"Jack","Queen","King"];
    var cardSuits = ["Clubs","Diamonds","Hearts","Spades"]
    var cardImageNames = [ 1,2,3,4,5,6,7,8,9,"0","J","Q","K" ];
    
    function getCard(which)
    {
        var cardNum  = Math.floor(Math.random()*13);
        var cardSuit = Math.floor(Math.random()*4);
    
        var cardName = cardNames[cardNum] + " of " + cardSuits[cardSuit];
        var imgSrc = cardSuit + "-" + cardImageNames[cardNum] + ".jpg";
    
        document.getElementById("card" + which).src = imgSrc;
        document.getElementById("cardText" + which).innerHTML = cardName;
    
        return cardNum;
    }
    
    function spin( )
    {
        var c1 = getCard(1);
        var c2 = getCard(2);
        var msg;
        if ( c1 == c2 ) 
        {
            msg = "A tie!";
        } else if ( c1 < c2 ) {
            msg = "Card 2 wins"; 
        } else {
            msg = "Card 1 wins";
        }    
        document.getElementById("winnerInfo").innerHTML = msg;
    }
    </script>
    
    </head>
    
    <body>
    
    <br/><br/><br/><br/>
    <button type="button" onclick="spin()">deal</button> 
    <br/>
    <hr/>
    <br/>
    Card 1: <span id="cardText1"></span><img id="card1" alt="card 1"/><br/>
    Card 2: <span id="cardText2"></span><img id="card2" alt="card 2"/><br/>
    <div id="winnerInfo"></div>
    </body>
    </html>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #12
    New to the CF scene
    Join Date
    Dec 2012
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Glad you think so, cause it seems he avoids sharing any knowledge in javascript (maybe he doesnt have the knowledge to, he is well hated!!).. Ya some bits are very messy, I was just throwing bits together of previous samples I had hoping some sort of structure would come together.. is there a way to get we say an image of a playing card up rather than each set of numbers.

  • #13
    New to the CF scene
    Join Date
    Dec 2012
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    oh and the game is based on a deck of cards, like if you had we say a 2 of hearts and a 2 of clubs you win, like you keep putting the cards up on top of each other face up until you get a match (suites can be different).. I hadnt fully implemented the full rule logic as I was already experiencing issues.

  • #14
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,664
    Thanks
    80
    Thanked 4,643 Times in 4,605 Posts
    Quote Originally Posted by javasnip View Post
    is there a way to get we say an image of a playing card up rather than each set of numbers.
    Not unless you *HAVE* a set of images of all the cards.

    Such sets of images are available on the web (google is your friend) but I don't know if any of them are free.

    But if you don't have a set of images, then at least you should put up meaningful names, as I showed you, rather than "3-0.jpg". How is anybody supposed to know that means "the 10 of hearts"???
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #15
    New to the CF scene
    Join Date
    Dec 2012
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    My knowledge is limited.. and that is how it was being explained and I personally thought it was me lacking and being confused.. but it seems his way is very awkward.. He was saying that if you named the images that way like 1-J etc. it would show the images instead of the text. But obviously not. does this bit a code from above make sense
    Code:
    cardname1=rands1+"-"+randn1+".jpg";


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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