В идеале при принятии новой карты (через Подтвердите диалоговое окно), изображение нарисованной карты должно отображаться мгновенно. Тем не менее, изображения появляются только после того, как цикл заканчивается, а не сразу после того, как нарисована каждая карта.
Другими словами, все карты появляются, когда я отказываюсь от карт (выход из петли). < /P>
< P> Любая помощь или советы будут оценены.
Код: Выделить всё
Exercise Javascript
Seven and a half game
Player Information
Name:
Initial Money:
Play!
New Round
End Game
Your Cards
Dealer's Cards
< /code>
javascript < /p>
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 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];
}
< /code>
На всякий случай:
css: < /p>
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;
}
Подробнее здесь: https://stackoverflow.com/questions/793 ... javascript
