Displaying of my card game

[areyouhappynow]

If you didn't read my last post - the card game is simple.
There is a pack of 52 cards, each card is drawn one at a time and if the card value matches the 'call' number (which is 1 to 13) then you win and the game restarts.
I have stored the cards in an array and shuffled them.
Now I'm having trouble with making the cards display one at a time.
I have created 13 text boxes and when I hit the 'call' button I want a card (in text eg. 8 of diamonds) to appear in the first text box, then when it's clicked again, another card appear in the next text box. And while this is all I suppose you can use an IF statement to keep checking if Call number is = to Card value.

Anyway, here's the pseudocode for what I got now:

//Counter
var totalcardsdrawn <-- 0
//*********************************************************************************
//Constructor Function
function CardAttributes (Face, Suit)
this.face <-- Face
this.suit <-- Suit

//*********************************************************************************
//Enters cards in sequential order
function EnterCards()
var face
var suit
index=0
count=1
FOR count 1 to 52 DO
IF count <= TO 13 THEN
Cards[index].face <-- count
Cards[index].suit <-- hearts
count++
index++

ELSE
IF count <= 26 THEN
Cards[index].face <-- count
Cards[index].suit <-- spades
count++
index++
ELSE
IF count <= 39 THEN
Cards[index].face <-- count
Cards[index].suit <-- diamonds
count++
index++
ELSE
Cards[index].face <-- count
Cards[index].suit <-- clubs
count++
index++

//*********************************************************************************
//Get's Random No.
function GetRandomNumber()
Returns a number between 1 and 52

//*********************************************************************************
//Shuffles cards by
function Shuffle()
var count
FOR count 0 TO 51 DO
index <-- a random no. (from GetRandomNumber() function)
Shuffled[index].face <-- Cards[count].face
Shuffled[index].suit <-- Cards[count].suit

//*********************************************************************************

and the 13 text boxes to display the cards are as followed:
INPUT TYPE = text NAME = c1 Value = "" size=20
INPUT TYPE = text NAME = c2 Value = "" size=20
INPUT TYPE = text NAME = c3 Value = "" size=20
INPUT TYPE = text NAME = c4 Value = "" size=20
INPUT TYPE = text NAME = c5 Value = "" size=20
INPUT TYPE = text NAME = c6 Value = "" size=20
INPUT TYPE = text NAME = c7 Value = "" size=20
INPUT TYPE = text NAME = c8 Value = "" size=20
INPUT TYPE = text NAME = c9 Value = "" size=20
INPUT TYPE = text NAME = c10 Value = "" size=20
INPUT TYPE = text NAME = c11 Value = "" size=20
INPUT TYPE = text NAME = c12 Value = "" size=20
INPUT TYPE = text NAME = c13 Value = "" size=20


Now, I was wondering if somebody could help or point me in the right direction for displaying these cards in the boxes.

http://www.tbns.net/bherbertson/cardgame.html
This is what I have coded so far but obviously nothing works :(

[Kor]

Let me see if I have well understood. You shuffle the cards. The cards are rearange in a randomized order. Now, you call the cards, radomized again , one by one, and if, by chance, one of the called card has the same order as in your previous shuffled array, you win? Is this the purpose of the game?

[areyouhappynow]

The cards are shuffled into randomized order yes (from Cards array, where they were put in the array sequentially, into the Shuffled array which is now all the cards in random postions).

Each card is drawn one by one from the Shuffled array. If the value of the card (which goes from 1-13 with Ace representing 1, Queen - 12 and King - 13)matches the call number than you win. The call number is just a number which goes from 1-13 then restarts. It's simply a counter. The call number is incremented after each card is drawn and restarted when there is match.

[areyouhappynow]

Anybody be able to help me or briefly tell me what to do to get on the right track?

[Lerura]

i seems like it's the solitaire game "Clock" that you are trying to imitate,
if so it won't be just a simple solution

Just relax and do not bump, someone here might come with a solution in some days. or you can try to post your thread at wepdeveloper.com (http://www.webdeveloper.com/) and see if theres any luck there

[areyouhappynow]

Alright thanks anyway.
It really isn't a hard game. I don't think i've explained it well.

Just calls 52 cards one at a time. If value of card matches the call counter then you win.
The suits don't play any role in the game what so ever. There just for display purposes.

[Kor]

My ideea is this (I might finished the code as soon as I will have some spare time)

No need to shuffle 52 cards, but 2 arrays, one of 13 (2-Ace) and one of 4 (clubs-spades).

build randomized a 2-nd array (from those 2 arrays, [card,color]) . If one element repeats, repeat the randomize process. This 2-nd arrays will have 13 different elements.

print the elements one by one, in the text fields. If the card ,ex: 8 of any colored matches the 8-th text field, alert a winning message.

restore the variables for a new game.

[Kor]

something like this?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
var card =['A','2','3','4','5','6','7','8','9','10','J','Q','K'];
var color =['clubs','diamonds','hearts','spades'];
var n=[]; var f=0;
function shuffle(){
for(var i=0;i<card.length;i++){
var ind = Math.floor(Math.random()*card.length);
n[i] = [card[ind],color[Math.floor(Math.random()*color.length)],ind]
var comp=n[i];
for(var j=0;j<n.length-1;j++){
if(comp[0]==n[j][0]&&comp[1]==n[j][1]){i--;break}
}
}
}
function call(){
if(f==13){resetAll()}
else{
document.getElementById('fields').getElementsByTagName('input')[f].value=n[f][0]+' '+n[f][1];
if(n[f][2]==f){alert('You won!');resetAll()}
else{f++}
}
}
function resetAll(){
n=[];f=0;document.forms[0].reset();shuffle()
}
onload=shuffle;
</script>
</head>
<body>
<form>
<input type="reset" value="Shuffle" onclick="resetAll()"> <input type="button" value="Call" onclick="call()">
<br>
<br>
<div id="fields">
<input type="text"> <input type="text"> <input type="text"> <input type="text"> <input type="text"> <input type="text"> <input type="text"> <input type="text"> <input type="text"> <input type="text"> <input type="text"> <input type="text"> <input type="text">
</div>
</form>
</body>
</html>

[areyouhappynow]

yes that is exactly how the game is played. however I wish to display a 'call number' counter and 'total number of cards drawn' counter.

this is what I've done so far:
http://www.tbns.net/bherbertson/cardgame.html

I've got functions for getting the cards into the array, and shuffling, but not sure where to start with the call function and the displaying of the cards each time the button is hit.. like your code.
what would I do to implement what you have done into my code?

<HTML>
<TITLE>DAT Card Game</TITLE>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
//****Arrays***********************************************************************
var Cards = new Array (52)
var Shuffled = new Array (52)

//***Constructor Function**********************************************************
function CardAttributes (Face, Suit)
{this.face=Face;
this.suit=Suit;
}

//***Enters cards into the array***************************************************
function EnterCards()
{
var face;
var suit;
var count;
index=0;
for (count=1;count<=52; count++)
{
switch (count)
{
case (count<=13):
Cards[index].face='count';
Cards[index].suit='hearts';
break;
case ((count>13) && (count <=26)):
Cards[index].face='count';
Cards[index].suit='spades';
break;
case ((count>26) && (count <=39)):
Cards[index].face='count';
Cards[index].suit='diamonds';
break;
default:
Cards[index].face='count';
Cards[index].suit='clubs';
break;
}
index++;
}
}

//***Generates a random number*****************************************************
function GetRandomNumber()
{return {Math.round((Math.random()*51+1)))}

//***Shuffles the cards************************************************************
function Shuffle()
var count
FOR (count=0;count<52; count++)
{index=GetRandomNumber()
Shuffled[index].face=Cards[count].face
Shuffled[index].suit=Cards[count].suit
}

//*********************************************************************************
//CALL FUNCTION GOES HERE? ??



</HEAD>
</SCRIPT>

<BODY>
<FORM NAME="MyForm">
<P align = center><font face=tahoma size=8>
DAT Card Game<BR></FONT><p>
<P align = center>
<INPUT TYPE="BUTTON" VALUE="Load" style="font-family: arial; font-size:10pt" onClick="EnterCards()">
<INPUT TYPE="BUTTON" VALUE="Shuffle" style="font-family: arial; font-size:10pt" onClick="Shuffle()">
<INPUT TYPE="BUTTON" VALUE="Call" style="font-family: arial; font-size:10pt" onClick="Call()"><p>
</p>
<P align = center><font face=tahoma size=3>
Cards<BR></FONT>
<INPUT TYPE="TEXT" NAME="c1" VALUE="" style="font-family: arial; font-size:10pt" onClick="NOTHING()" size=4>
<INPUT TYPE="TEXT" NAME="c2" VALUE="" style="font-family: arial; font-size:10pt" onClick="NOTHING()" size=4>
<INPUT TYPE="TEXT" NAME="c3" VALUE="" style="font-family: arial; font-size:10pt" onClick="NOTHING()" size=4>
<INPUT TYPE="TEXT" NAME="c4" VALUE="" style="font-family: arial; font-size:10pt" onClick="NOTHING()" size=4>
<INPUT TYPE="TEXT" NAME="c5" VALUE="" style="font-family: arial; font-size:10pt" onClick="NOTHING()" size=4>
<INPUT TYPE="TEXT" NAME="c6" VALUE="" style="font-family: arial; font-size:10pt" onClick="NOTHING()" size=4>
<INPUT TYPE="TEXT" NAME="c7" VALUE="" style="font-family: arial; font-size:10pt" onClick="NOTHING()" size=4>
<INPUT TYPE="TEXT" NAME="c8" VALUE="" style="font-family: arial; font-size:10pt" onClick="NOTHING()" size=4>
<INPUT TYPE="TEXT" NAME="c9" VALUE="" style="font-family: arial; font-size:10pt" onClick="NOTHING()" size=4>
<INPUT TYPE="TEXT" NAME="c10" VALUE="" style="font-family: arial; font-size:10pt" onClick="NOTHING()" size=4>
<INPUT TYPE="TEXT" NAME="c11" VALUE="" style="font-family: arial; font-size:10pt" onClick="NOTHING()" size=4>
<INPUT TYPE="TEXT" NAME="c12" VALUE="" style="font-family: arial; font-size:10pt" onClick="NOTHING()" size=4>
<INPUT TYPE="TEXT" NAME="c13" VALUE="" style="font-family: arial; font-size:10pt" onClick="NOTHING()" size=4>
</p>
<p><p align = center><font face=tahoma size=3>
Call Number:<INPUT TYPE="TEXT" NAME="call" VALUE="" style="font-family: arial; font-size:10pt" size=4><p>
<p><p align = center><font face=tahoma size=3>
Total Cards Drawn:<INPUT TYPE="TEXT" NAME="totalcards" VALUE="" style="font-family: arial; font-size:10pt"size=4>
</font>
</FORM>
</BODY>
</HTML>

[Kor]

like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
var card =['A','2','3','4','5','6','7','8','9','10','J','Q','K'];
var color =['clubs','diamonds','hearts','spades'];
var n=[]; var f=0;
function shuffle(){
for(var i=0;i<card.length;i++){
var ind = Math.floor(Math.random()*card.length);
n[i] = [card[ind],color[Math.floor(Math.random()*color.length)],ind]
var comp=n[i];
for(var j=0;j<n.length-1;j++){
if(comp[0]==n[j][0]&&comp[1]==n[j][1]){i--;break}
}
}
}
function call(){
if(f==13){resetAll()}
else{
document.getElementById('fields').getElementsByTagName('input')[f].value=n[f][0]+' '+n[f][1];
document.forms[0].calln.value=f+1;
document.forms[0].total.value=f+1;
if(n[f][2]==f){alert('You won!');resetAll()}
else{f++}
}
}
function resetAll(){
document.forms[0].calln.value='';
document.forms[0].total.value='';
n=[];f=0;document.forms[0].reset();shuffle()
}
onload=shuffle;
</script>
</head>
<body>
<form>
<input type="reset" value="Shuffle" onclick="resetAll()"> <input type="button" value="Call" onclick="call()">
<br>
<br>
<div id="fields">
<input type="text"> <input type="text"> <input type="text"> <input type="text"> <input type="text"> <input type="text"> <input type="text"> <input type="text"> <input type="text"> <input type="text"> <input type="text"> <input type="text"> <input type="text">
</div>
<br>
<br>
<input name="calln" type="text">
Call Number<br>
<input name="total" type="text">Total number of cards drawn
</form>
</body>
</html>

[areyouhappynow]

that's great! thanks. I'm going to have a good look at it tommorrow and
try work out everything that is happening in the code instead of just copying it.

thanks once again.

[ca_redwards]

Alright thanks anyway.
It really isn't a hard game. I don't think i've explained it well.

Just calls 52 cards one at a time. If value of card matches the call counter then you win.
The suits don't play any role in the game what so ever. There just for display purposes.

Does the game run like this? :D


<script language=javascript>
n=['A',2,3,4,5,6,7,8,9,10,'J','Q','K'];//numbers
s=['&clubs;','&diams;','&spades;','&hearts;'];//suits
function card(i){
return (n[i%n.length]+s[i%s.length]).fontcolor(['black','red'][i%/*color*/2])
}
c=[];//cards..
for(var i=0;i<52;i++)c[i]=i;//new deck
function shuffle(a,b){return Math.random()-1/2};
c=c.sort(shuffle);//shuffle deck
d=0;//dealing..
for(var i=0;i<c.length;i++){
document.write(card(c[i])+'<br />');
if(d==c[i]%n.length){
document.write('winner!<hr />');
d=0;//new deal
}else{
d=(d+1)%n.length;//deal next
if(d==0)document.write('sorry...<hr />');
}
}
</script>


This code works in IE, FF, NS, etc.

[areyouhappynow]

The problem is that I wanted to use my OWN code and fix the code I posted above.
I want to store the cards in an array. And I've done that. It's just I'm not sure how to get this cards to display in each box after hitting the 'call' button.

[Kor]

The problem is that I wanted to use my OWN code and fix the code I posted above.

The problem is that you should use whomever code, if it will do the job. Different people have different ideas and they have different visions and ways of coding. You should try to understand eachone's code and get whichever it might help you. It is harder for us to adjust OUR ideeas to YOUR code.

[areyouhappynow]

I'm sorry.
Thanks again.

I understand.

[ca_redwards]

The problem is that I wanted to use my OWN code and fix the code I posted above.
I want to store the cards in an array. And I've done that. It's just I'm not sure how to get this cards to display in each box after hitting the 'call' button.

I am quite happy to solve general problems (as a volunteer). But I am not in the business of writing other people's code (for free!).

My solution to the problem works.

Are you not content with it?