...

View Full Version : javascript basic card match game



javasnip
12-03-2012, 07: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:

<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, 08: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 :


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, 08:25 PM
thanks man. Is there a way to do it using images I have on my computer.

rnd me
12-03-2012, 08:32 PM
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, 08: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,

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, 09:50 PM
This way of getting random numbers is *WRONG*:


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


var rands1 = 1 + Math.floor(Math.random()*4);
var randn1 = 1 + Math.floor(Math.random()*13);

In general the formula is:


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, 10: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, 11:23 PM
There are other variants like this (http://mamisab.chez-alice.fr/memory/memory-en.htm).

Now, how to evaluate players? A beginning of answer on this page (http://mamisab.chez-alice.fr/memoryAnalyseEn.html).

Old Pedant
12-03-2012, 11: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:


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

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, 11:40 PM
And I don't pretend to understand your "winner" logic.



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, 11:46 PM
This probably doesn't conform to your "rules", but at least it does something.



<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-04-2012, 12:18 AM
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-04-2012, 12:25 AM
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-04-2012, 12:32 AM
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-04-2012, 12:39 AM
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

cardname1=rands1+"-"+randn1+".jpg";

Old Pedant
12-04-2012, 12:44 AM
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

cardname1=rands1+"-"+randn1+".jpg";

Yes, but *ONLY* if you then did something like

document.getElementById("card1").src = cardname1;
where you ALREADY have, on your page, something like

<img id="card1"/>


You *could*, instead, do something like

<div id="card1"></div>
...
document.getElementById("card1").innerHTML = '<img src="' + cardname1 + '" alt="random card" />';

but that's not recommended coding.

Old Pedant
12-04-2012, 02:32 AM
By the by...there is a fatal flaw in my code...*AND* in your original code!

There is *NOTHING* to prevent the SAME CARD from being picked for both cards!!!

That's because you pick the two cards completely independently of each other.

The *right* way to do this is to shuffle the deck and then just deal the top two cards off the top of the deck.

But if you only ever need two cards, it's sufficient to just check the 2nd against the 1st and loop until the 2nd doesn't match the 1st.

Philip M
12-04-2012, 08:53 AM
You don't need images - you could use the HTML codes.
&hearts &clubs &diams &spades


Shuffle is probably a bit advanced for you at this stage, but


<script type = "text/javascript">
var imgArray = new Array('Ace',2,3,4,5,6,7,8,9,10,'Jack','Queen','King');

Array.prototype.shuffle = function() {
var s = [];
while (this.length) s.push(this.splice(Math.random() * this.length, 1));
while (s.length) this.push(s.pop());
return this;
}

imgArray.shuffle();
var card1 = imgArray[0];
alert (card1);
imgArray.shuffle();
var card2 = imgArray[0];
alert (card2);

if (card1 == card2) {
alert ("The cards match!");
}
</script>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum