Trying to re-invent myself. New to my laptop, Windows 8, Javascript and HTML5. The symptom is the sequence and content of the alert messages:
(line39): body script
then
(alert line 21):GetNextCard
then
(line 25): deck[24] = undefined
then
24, undefined, 51
next
(line 41):next card isundefined
finally
(alert line 17): deck[18] = 5d
then the "1c.gif (ace of clubs) does appear on the canvas (see last line before </body> below)
It appears that the body script invoking the GetNextCard() function is running before the <body "onLoad=“Deal()”>
Any ideas?
I also suspect that I may be having scope issues with my deck array. My readings suggest Javascript treats “this.” differently than, say, php – but I can’t get my arms around how that might affect me here.
Appreciate your thoughts.
Regards,
grNadpa
Here’s the code
<!DOCTYPE html>
<html>
<head>
<title>Simple Solitare</title>
<meta name="" content="">
<script type="text/javascript">
deck=new Array(53);
cardsLeft = 52;
function Deal(){
for(i=1;i<14;i++){
deck[i] = i+"c";
deck[i+13] = i+"d";
deck[i+26] = i+"h";
deck[i+39] = i+"s";
} // end for
cardsLeft = 52;
alert("(alert line 17): deck[18] = " + deck[18]);
} // end function Deal
function GetNextCard() {
alert("(alert line 21): GetNextCard");
if(cardsLeft < 1) return false;
// get a number between 1 and the number of remaining cards
i = Math.floor(Math.random() * cardsLeft) + 1;
alert("(line 25): deck["+ i +"] = "+ deck[i]);
var nextCard = deck[i]; // pull that card
deck[i] = deck[cardsLeft]; // replace that card with the last in the deck
--cardsLeft;
if (cardsLeft >45) alert (i +", " + nextCard + ", " + cardsLeft);
return nextCard;
} // end function GetNextCard
</script>
</head>
<body onload="Deal()">
<canvas id="board" width="800px" height="600px"></canvas>
<script type="text/javascript">
alert("(line 39): body script");
var nextCard = GetNextCard();
alert("(line 41): next card is" + nextCard);
</script>
<p> <img src="1c.gif"/> </p>
</body>
</html>