У меня была часть класса для создания игры в блэкджек ... После того, как я сделал основы, я хотел пойти дальше, поэтому я решил добавить изображения карт, которые я скачал онлайн.
A организовал порядокссылки на изображения карт в массиве (например: cardsarray[0] = "src/jpeg/cards/1.jpg") сопоставлены с моей колодой, поэтому будет легко добавить третий параметр для объекта карты.
Я попытался изменить окончание ссылок и способ, которым яприблизиться к DOM.
HTML:
<body>
<div id="div">
<Center>
<h1>Welcome to Blackjack!</h1>
<p id="comment"></p>
<p id="l-comment"></p>
<Center>
<img id="dealer-c1" src="src/jpeg/cards/Yellow_back.JPG"> <img id="dealer-c2" src="src/jpeg/cards/Yellow_back.jpg"> </br>
<img id="player-c1" src="src/jpeg/cards/Red_back.jpg"> <img id="player-c2" src="src/jpeg/cards/Red_back.jpg">
</Center>
<button class="button" id="button-new">Start new game</button>
<button class="button" id="button-stay">Stay!</button>
<button class="button" id="button-hit">Hit me!</button>
<script src="scripts/index.js"></script>
JavaScript:
var cardsTypes = ["tiltan", "lev", "ale", "yalom"],
cardsValues = ["ace", "king", "queen", "prince",
"ten", "nine", "eight", "seven", "six", "five",
"four", "three", "two"
],
cardsJpeg = ["src/jpeg/cards/1.jpg", "src/jpeg/cards/2.jpg", "src/jpeg/cards/3.jpg", "src/jpeg/cards/4.jpg", "src/jpeg/cards/5.jpg",
"src/jpeg/cards/6.jpg", "src/jpeg/cards/7.jpg", "src/jpeg/cards/8.jpg", "src/jpeg/cards/9.jpg", "src/jpeg/cards/10.jpg",
"src/jpeg/cards/11.jpg", "src/jpeg/cards/12.jpg", "src/jpeg/cards/13.jpg", "src/jpeg/cards/14.jpg", "src/jpeg/cards/15.jpg",
"src/jpeg/cards/16.jpg", "src/jpeg/cards/17.jpg", "src/jpeg/cards/18.jpg", "src/jpeg/cards/19.jpg", "src/jpeg/cards/20.jpg",
"src/jpeg/cards/21.jpg", "src/jpeg/cards/22.jpg", "src/jpeg/cards/23.jpg", "src/jpeg/cards/24.jpg", "src/jpeg/cards/25.jpg",
"src/jpeg/cards/26.jpg", "src/jpeg/cards/27.jpg", "src/jpeg/cards/28.jpg", "src/jpeg/cards/29.jpg", "src/jpeg/cards/30.jpg",
"src/jpeg/cards/31.jpg", "src/jpeg/cards/32.jpg", "src/jpeg/cards/33.jpg", "src/jpeg/cards/34.jpg", "src/jpeg/cards/35.jpg",
"src/jpeg/cards/36.jpg", "src/jpeg/cards/37.jpg", "src/jpeg/cards/38.jpg", "src/jpeg/cards/39.jpg", "src/jpeg/cards/40.jpg",
"src/jpeg/cards/41.jpg", "src/jpeg/cards/42.jpg", "src/jpeg/cards/43.jpg", "src/jpeg/cards/44.jpg", "src/jpeg/cards/45.jpg",
"src/jpeg/cards/46.jpg", "src/jpeg/cards/47.jpg", "src/jpeg/cards/48.jpg", "src/jpeg/cards/49.jpg", "src/jpeg/cards/50.jpg",
"src/jpeg/cards/51.jpg", "src/jpeg/cards/52.jpg"
];
function showStatus() {
if (!gameStarted) {
stay.style.display = 'none';
hitMe.style.display = 'none';
lcomment.style.display = 'none';
return;
}
var dealerCardString = '';
for (let i = 0; i < dealer.length; i++) {
dealerCardString += getcardString(dealer[i]) + '\n';
}
var playerCardString = '';
for (let i = 0; i < player.length; i++) {
playerCardString += getcardString(player[i]) + '\n';
}
let t = 0;
for (let i = 0; i < dealer.length; i++) {
let l = getcardJpeg(dealer[i]);
dealercard[t].src = l;
t++;
}
updateScore();
comment.innerText =
'Dealer has: \n' +
dealerCardString +
'(score :' + dealerScore + ')\n\n' +
'Player has:\n ' +
playerCardString +
'(score:' + playerScore + ')\n\n';
if (playerScore === 21 ||
dealerScore === 21) {
gameOver = true;
}
if (gameOver) {
lcomment.style.display = 'block';
lcomment.style.color = 'white';
if (playerWon) {
lcomment.innerText = won;
} else {
lcomment.innerText = lost;
}
newGame.style.display = 'block';
stay.style.display = 'none';
hitMe.style.display = 'none';
}
}
newGame.addEventListener('click', function() {
gameStarted = true;
gameOver = false;
playerWon = false;
deck = createDeck();
shuffleDeck(deck);
player = [getnextCard(), getnextCard()];
dealer = [getnextCard(), getnextCard()];
newGame.style.display = 'none';
stay.style.display = 'block';
hitMe.style.display = 'block';
document.body.style.backgroundColor = "black";
div.style.color = "red";
comment.innerText = 'Go!';
showStatus();
});
function createDeck() {
var deck = [];
let t, v, j = 0;
for (t = 0; t < cardsTypes.length; t++) {
for (v = 0; v < cardsValues.length; v++) {
let card = {
cardsType: cardsTypes[t],
CardsValue: cardsValues[v],
cardIcon: cardsJpeg[j++]
};
deck.push(card);
}
}
return deck;
}
Изображенияотображается пустым.
Они изменились, но не правильно.
Как правильно изменить / добавить изображения с помощью js dom на html-страницу