时间戳

首页 > 解决方案 > 如何在二十一点游戏中通过 JS DOM 更改/添加图像

javascript - 如何在二十一点游戏中通过 JS DOM 更改/添加图像

问题描述

我曾参加过创建二十一点游戏的课程......在我完成了基础之后，我想更进一步，所以我决定添加我在网上下载的卡片图像。

将卡片图像链接的顺序组织在一个数组中（例如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页面

标签： javascriptdom

解决方案

推荐阅读