Printing Multiple Items In A JavaScript Game Loop

Trying to program this in a way that doesn’t treat the card as an object because my students have not been introduced to objects yet. Can someone explain why the whole hand of cards does not print in my game loop?

<!DOCTYPE HTML>
<html>
<head>
<title>Example Cards</title>

</head>
<body>

<table border="1" width="100%"><tr><td align="center">


<table border="1"><tr><td>
<canvas id="gameCanvas">
</canvas>
</td></tr>
</table>

</td></tr>
</table>

<script type="application/javascript">

// variables to initialize our playing area
let canvasWidth = 1000;
let reportHeight = 100;
let gameHeight = 500;
let lifePoints = 100;
let input = "";
let output = "";
let round = 0;
let welcomeText = "My Game";
let handSize = 7;
let scalingFactor = 10;

// make some arrays to keep track of our gamestate
let roundHistory = [];
let deck = [];
let hand = [];
let discardPile = [];

//set up the canvas and read it into a context

let gameCanvas = document.getElementById('gameCanvas');
gameCanvas.width=canvasWidth;
gameCanvas.height=reportHeight + gameHeight;
let ctx = gameCanvas.getContext('2d');

//we need somewhere to put a card

let currentCard = new Image();


//function to handle the activities we want our program to engage

function printCard(card,x,y){
	console.table(card);
	console.log("X IS: " + x);
	currentCard.src = 'images/'  + card.filename + '.jpg';
	ctx.drawImage(currentCard, x, y, currentCard.width/scalingFactor, currentCard.height/scalingFactor);
}
  
function printCards(cards,startx,starty){

	let thisX = startx;
	let thisY = starty;
 
	for(let i=0; i < cards.length-1;i++){
			printCard(cards[i],thisX,thisY);
			thisX=thisX+currentCard.width/scalingFactor;
		}
}

function chooseRandomCard(){
	let thisCard = [];
	thisCard = deck[getRandomIntInclusive(0, deck.length-1)];
	return thisCard	
}

function dealHand(){
	
	let currentCard = [];
	let thisLocation = 0;
	let i = 0;
	
	while(i < handSize){
		thisLocation = getRandomIntInclusive(0, deck.length-1);
		currentCard = deck[thisLocation];
		hand[hand.length]=currentCard;
		deck.splice(thisLocation,1);
		i++;
	}
}

function loadDeck(){
	
	deck[0] = {filename: '2H', value: 2, name: 'Deuce'};
	deck[1] = {filename: '3H', value: 3, name: 'Three'};
	deck[2] = {filename: '4H', value: 4, name: 'Four'};
	deck[3] = {filename: '5H', value: 5, name: 'Five'};
	deck[4] = {filename: '6H', value: 6, name: 'Six'};
	deck[5] = {filename: '7H', value: 7, name: 'Seven'};
	deck[6] = {filename: '8H', value: 8, name: 'Eight'};
	deck[7] = {filename: '9H', value: 9, name: 'Nine'};
	deck[8] = {filename: '10H', value: 10, name: 'Ten'};
	deck[9] = {filename: '11H', value: 11, name: 'Jack'};
	deck[10] = {filename: '12H', value: 12, name: 'Queen'};
	deck[11] = {filename: '13H', value: 13, name: 'King'};
	deck[12] = {filename: '14H', value: 14, name: 'Ace'};
	deck[13] = {filename: '2C', value: 2, name: 'Deuce'};
	deck[14] = {filename: '3C', value: 3, name: 'Three'};
	deck[15] = {filename: '4C', value: 4, name: 'Four'};
	deck[16] = {filename: '5C', value: 5, name: 'Five'};
	deck[17] = {filename: '6C', value: 6, name: 'Six'};
	deck[18] = {filename: '7C', value: 7, name: 'Seven'};
	deck[19] = {filename: '8C', value: 8, name: 'Eight'};
	deck[20] = {filename: '9C', value: 9, name: 'Nine'};
	deck[21] = {filename: '10C', value: 10, name: 'Ten'};
	deck[22] = {filename: '11C', value: 11, name: 'Jack'};
	deck[23] = {filename: '12C', value: 12, name: 'Queen'};
	deck[24] = {filename: '13C', value: 13, name: 'King'};
	deck[25] = {filename: '14C', value: 14, name: 'Ace'};
	deck[26] = {filename: '2S', value: 2, name: 'Deuce'};
	deck[27] = {filename: '3S', value: 3, name: 'Three'};
	deck[28] = {filename: '4S', value: 4, name: 'Four'};
	deck[29] = {filename: '5S', value: 5, name: 'Five'};
	deck[30] = {filename: '6S', value: 6, name: 'Six'};
	deck[31] = {filename: '7S', value: 7, name: 'Seven'};
	deck[32] = {filename: '8S', value: 8, name: 'Eight'};
	deck[33] = {filename: '9S', value: 9, name: 'Nine'};
	deck[34] = {filename: '10S', value: 10, name: 'Ten'};
	deck[35] = {filename: '11S', value: 11, name: 'Jack'};
	deck[36] = {filename: '12S', value: 12, name: 'Queen'};
	deck[37] = {filename: '13S', value: 13, name: 'King'};
	deck[38] = {filename: '14S', value: 14, name: 'Ace'};
	deck[39] = {filename: '2D', value: 2, name: 'Deuce'};
	deck[40] = {filename: '3D', value: 3, name: 'Three'};
	deck[41] = {filename: '4D', value: 4, name: 'Four'};
	deck[42] = {filename: '5D', value: 5, name: 'Five'};
	deck[43] = {filename: '6D', value: 6, name: 'Six'};
	deck[44] = {filename: '7D', value: 7, name: 'Seven'};
	deck[45] = {filename: '8D', value: 8, name: 'Eight'};
	deck[46] = {filename: '9D', value: 9, name: 'Nine'};
	deck[47] = {filename: '10D', value: 10, name: 'Ten'};
	deck[48] = {filename: '11D', value: 11, name: 'Jack'};
	deck[49] = {filename: '12D', value: 12, name: 'Queen'};
	deck[50] = {filename: '13D', value: 13, name: 'King'};
	deck[51] = {filename: '14D', value: 14, name: 'Ace'}; 
}


function processRound(){
	++round;
	lifePoints = lifePoints - 10;
	
	if(round == 1){
		output = welcomeText;
	}else{
		output = "";
		roundHistory[roundHistory.length] = input;
	}
}

function drawReport() {
	
	ctx.font = "16px Arial";
	ctx.fillStyle = "#000FFF";
	ctx.fillText("Current Score: "+lifePoints, 20, 40);
	ctx.fillText("Cards In Deck: "+deck.length, 20, 60);
	ctx.fillText("Cards In Discard: "+discardPile.length, 20, 80);
	ctx.fillText("Cards In Hand: "+hand.length, 20, 100);
	ctx.fillText("CURRENT HAND", gameCanvas.width / 2, 150);
	printRoundHistory();
}

function printRoundHistory(){
	let thisHistory="";
	let startPrint=50;
	
	for (i = 0; i < roundHistory.length-1; i++){
		ctx.fillText(roundHistory[i], 800, startPrint);
		startPrint = startPrint + 25;
	}
}

function getRandomIntInclusive(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1) + min); //The maximum is inclusive and the minimum is inclusive
}

function gameLoop(){

	ctx.clearRect(0, 0, gameCanvas.width, gameCanvas.height);
	
//when I print these cards why does it only print the last card in the loop?

	printCards(hand,50,50);
	drawReport();
	window.requestAnimationFrame(gameLoop);
}

//we need to call these functions in order to start our processes running.
loadDeck();
dealHand();
gameLoop();
processRound();
</script>
</body>
</html>

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

Thank you. Guess I figured it out has to do with a scope issue I was declaring the image globally so it wasn’t being replaced in my function with an instance of a new image.

Trying to learn how to work with a deck of cards in JavaScript.

Having trouble understanding/figuring out why my game seems to refresh/repaint my cards?

Is this happening because the refresh rate of local system is not synched with the game loop? How do we handle that in JavaScript?

https://test.cyberlearner.com/junk/CardTest/cardTest.html

Sorry, I don’t deal with that much. Perhaps someone else can help.