I’m creating a simple card game website where a player draws cards trying to get close but not exceeding a limit of points.
Ideally, when accepting a new card (through a confirm dialog box), the drawn card’s image should be displayed instantly. However, the images only appear after the loop finishes instead of immediately after each card is drawn.
In other words, all cards appear when I decline anymore cards (exiting the loop).
Any help or tips will be appreciated.
Here is the code:
Html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Exercise Javascript</title>
<link rel="stylesheet" type="text/css" href="exerciseStyle.css">
<script src="match.js"></script>
</head>
<body>
<!-- Header section -->
<section class="header">
<h1>Seven and a half game</h1>
</section>
<!-- Player input / before play button is clicked -->
<section class="playerInput" id="before-input">
<h2 id="playerInputHeader">Player Information</h2>
<p><span class="label">Name:</span> <input type="text" id="Name" /></p>
<p><span class="label">Initial Money:</span> <input type="text" id="Money" /></p>
<div><button class="buttons" id="button_play" onclick="play()">Play!</button></div>
</section>
<!-- Player info / after play button is clicked -->
<section class="playerInfo" id="after-input-play" style="display: none;">
<h2 id="player-name"></h2>
<p id="current-money"></p>
<hr />
<div class="button-container">
<div><button class="buttons" id="button-new-game" onclick="round()">New Round</button></div>
<div><button class="buttons" id="button-exit" onclick="reset()">End Game</button></div>
</div>
</section>
<!-- Section where cards are displayed -->
<section class="cardSection" id="cards-section" style="display: none;">
<div class="cardSection" id="player-cards">
<h3>Your Cards</h3>
<div class="card-container" id="player-card-container" ></div>
</div>
<div class="cardSection" id="dealer-cards" >
<h3>Dealer's Cards</h3>
<div class="card-container" id="dealer-card-container"></div>
</div>
</div>
</section>
</body>
</html>
Javascript
var playerName = "";
var currentMoney = 0;
var playerCards = [];
var dealerCards = [];
var deck;
let initialdeck = [
{ value: 1, image: "cards/1.png" },
{ value: 2, image: "cards/2.png" },
{ value: 3, image: "cards/3.png" },
{ value: 4, image: "cards/4.png" },
{ value: 5, image: "cards/5.png" },
{ value: 6, image: "cards/6.png" },
{ value: 7, image: "cards/7.png" },
{ value: 0.5, image: "cards/8.png" },
{ value: 0.5, image: "cards/9.png" },
{ value: 0.5, image: "cards/10.png" },
{ value: 1, image: "cards/11.png" },
{ value: 2, image: "cards/12.png" },
{ value: 3, image: "cards/13.png" },
{ value: 4, image: "cards/14.png" },
{ value: 5, image: "cards/15.png" },
{ value: 6, image: "cards/16.png" },
{ value: 7, image: "cards/17.png" },
{ value: 0.5, image: "cards/18.png" },
{ value: 0.5, image: "cards/19.png" },
{ value: 0.5, image: "cards/20.png" },
{ value: 1, image: "cards/21.png" },
{ value: 2, image: "cards/22.png" },
{ value: 3, image: "cards/23.png" },
{ value: 4, image: "cards/24.png" },
{ value: 5, image: "cards/25.png" },
{ value: 6, image: "cards/26.png" },
{ value: 7, image: "cards/27.png" },
{ value: 0.5, image: "cards/28.png" },
{ value: 0.5, image: "cards/29.png" },
{ value: 0.5, image: "cards/30.png" },
{ value: 1, image: "cards/31.png" },
{ value: 2, image: "cards/32.png" },
{ value: 3, image: "cards/33.png" },
{ value: 4, image: "cards/34.png" },
{ value: 5, image: "cards/35.png" },
{ value: 6, image: "cards/36.png" },
{ value: 7, image: "cards/37.png" },
{ value: 0.5, image: "cards/38.png" },
{ value: 0.5, image: "cards/39.png" },
{ value: 0.5, image: "cards/40.png" }
];
function play() {
// Get the name and the initial money.
playerName = document.getElementById("Name").value;
currentMoney = document.getElementById("Money").value;
// Input check
if (playerName.trim() === "" || currentMoney.trim() === "") {
alert("Please enter both your name and initial money.");
return;
}
currentMoney = parseFloat(currentMoney);
if (isNaN(currentMoney)) {
alert("Please enter a valid number for initial money.");
return;
}
// Set variables
deck = [...initialdeck];
document.getElementById("player-name").textContent = playerName;
document.getElementById("current-money").textContent = `Total Money: ${currentMoney.toFixed(2)} €`;
// Adjust what to display after play button is pressed
document.getElementById("before-input").style.display = "none";
document.getElementById("after-input-play").style.display = "block";
document.getElementById("player-name").style.display = "block";
document.getElementById("current-money").style.display = "block";
document.getElementById("cards-section").style.display = "block";
}
function reset() {
// If player choses to end the game, show ending message
alert(`You receive ${currentMoney.toFixed(2)} €. See you next time.`);
// Reset all values
let playerCardContainer = document.getElementById("player-card-container");
playerCardContainer.innerHTML = "";
let dealerCardContainer = document.getElementById("dealer-card-container");
dealerCardContainer.innerHTML = "";
playerName = "";
currentMoney = 0;
deck = [...initialdeck];
document.getElementById("player-name").textContent = "";
document.getElementById("current-money").textContent = "";
// Display/hide elements
document.getElementById("Name").value = "";
document.getElementById("Money").value = "";
document.getElementById("cards-section").style.display = "none";
document.getElementById("after-input-play").style.display = "none";
document.getElementById("before-input").style.display = "block";
}
function round() {
let keepGoing = true;
let lost = false;
bet = parseFloat(prompt("Money Bet:"));
if (isNaN(bet)) {
alert("Invalid bet: Your bet is not a number.");
return;
}else if (bet <= 0 || bet > currentMoney) {
alert("Invalid bet amount. Please enter a positive number within your available funds.");
return;
}
// Reset score and cards
playerScore = 0;
let playerCardContainer = document.getElementById("player-card-container");
playerCardContainer.innerHTML = "";
let dealerCardContainer = document.getElementById("dealer-card-container");
dealerCardContainer.innerHTML = "";
// Update current money
currentMoney -= bet;
document.getElementById("current-money").textContent = `Total Money: ${currentMoney.toFixed(2)} €`;
// Loop
do {
let card = getRandomCard();
displayDrawnCard(card, 'player'); /////////////////////////////////////////// Issue here
playerScore += card.value;
if(playerScore > 7.5){
lost = true;
}
if(!lost){
keepGoing = confirm("Do you want another card?") /////////////// Cards are not shown until i decline this confirm.
}
} while (keepGoing && !lost);
dealerTurn(playerScore, bet);
}
function getRandomCard() {
if (deck.length === 0) return null;
let randomIndex = Math.floor(Math.random() * deck.length);
let card = deck[randomIndex];
deck.splice(randomIndex, 1);
return card;
}
function displayDrawnCard(card, type) {
let cardContainer;
if (type === 'player') {
cardContainer = document.getElementById("player-card-container");
} else if (type === 'dealer') {
cardContainer = document.getElementById("dealer-card-container");
}
// Create a new img element for the card
let cardElement = document.createElement("img");
cardElement.src = card.image; // Use the image path stored in the card object
// Add class to style
cardElement.classList.add("Card");
// Append the image to the container
cardContainer.appendChild(cardElement);
}
function dealerTurn(playerScore, bet){
let keepGoing = true;
let dealer_lost = false;
let dealerScore = 0;
// Check if dealer needs cards
if(playerScore>7.5){
keepGoing = false;
}
// Loop
while (keepGoing && !dealer_lost){
let card = getRandomCard();
displayDrawnCard(card, 'dealer'); /////////////////////////////////////////// Same issue here
dealerScore += card.value;
if(dealerScore > 7.5){
dealer_lost = true;
}
if(dealer_lost || playerScore < dealerScore){
keepGoing = false;
}
}
// Update data and show result
if (dealer_lost) {
currentMoney = currentMoney + 2*bet;
document.getElementById("current-money").textContent = `Total Money: ${currentMoney.toFixed(2)} €`;
alert(`You have won ${bet.toFixed(2)} €. Remaining money: ${currentMoney.toFixed(2)} €.`);
} else {
document.getElementById("current-money").textContent = `Total Money: ${currentMoney.toFixed(2)} €`;
alert(`You have lost ${bet.toFixed(2)} €. Remaining money: ${currentMoney.toFixed(2)} €.`);
}
deck = [...initialdeck];
}
Just in case:
Css:
body{
min-width: 600px;
max-width: 800px;
font-family:Verdana,Arial, serif;
margin: auto;
background-color: #04701824;
}
.header {
font-family:Georgia, Times, serif;
background-color:#047018;
color: #FFFFFF;
font-size: 120%;
vertical-align: center;
height: 100px;
}
h1{
text-align: center;
line-height: 100px;
}
h2{
font-family:Georgia, Times, serif;
font-style:italic;
background-color:#0470189a;
padding-left: 15px;
}
h3{
font-family:Georgia, Times, serif;
font-style:italic;
background-color:#0470189a;
padding-left: 15px;
}
input[type="text"] {
width: 300px;
}
.buttons {
min-width: 60px;
height: 30px;
background-color: #047018;
color: white;
padding:0 15px;
border: none;
border-radius: 15px;
cursor: pointer;
font-size: 14px;
transition: background-color 0.3s ease;
}
.buttons:hover {
background-color: #02420d;
}
.button-container {
display: flex;
gap: 10px;
justify-content: center;
}
hr {
border: none;
height: 3px;
background-color: #047018;
width: 100%;
margin: 5px auto;
}
.Card {
width: 80px;
height: auto;
margin: 8px;
display: inline-block;
}
I tried everything, yet could not find the source of the issue. I don’t think I can post the images.