javascript basic card match game

javasnip · 12-03-2012, 06:53 PM

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>

rnd me · 12-03-2012, 07:05 PM

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

javasnip · 12-03-2012, 07:25 PM

thanks man. Is there a way to do it using images I have on my computer.

rnd me · 12-03-2012, 07:32 PM

Quote:

Originally Posted by javasnip

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.

javasnip · 12-03-2012, 07:40 PM

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.

Old Pedant · 12-03-2012, 08:50 PM

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

javasnip · 12-03-2012, 09:02 PM

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.

007julien · 12-03-2012, 10:23 PM

There are other variants like this.

Now, how to evaluate players? A beginning of answer on this page.

Old Pedant · 12-03-2012, 10:35 PM

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

Quote:

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!

Old Pedant · 12-03-2012, 10:40 PM

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.

Old Pedant · 12-03-2012, 10:46 PM

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>

javasnip · 12-03-2012, 11:18 PM

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.

javasnip · 12-03-2012, 11:25 PM

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.

Old Pedant · 12-03-2012, 11:32 PM

Quote:

Originally Posted by javasnip

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"???

javasnip · 12-03-2012, 11:39 PM

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";