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>
