CodingForums.com - javascript basic card match game

Page 1 of 2

Show 40 post(s) from this thread on one page

CodingForums.com (http://www.codingforums.com/index.php)

- JavaScript programming (http://www.codingforums.com/forumdisplay.php?f=2)

- - javascript basic card match game (http://www.codingforums.com/showthread.php?t=283484)

javasnip

12-03-2012 06:53 PM

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>

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 (Post 1296950)

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 (Post 1297003)

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

All times are GMT +1. The time now is 06:25 PM.

Page 1 of 2

Show 40 post(s) from this thread on one page