在紙牌游戲中添加玩家分數的問題

Question

我正在制作一個兩人紙牌游戲，每個玩家猜測從一副紙牌中翻出的紙牌是 7 點以下還是 8 點以上。

如果這個人猜對了，我希望他們得到一分。 但是，我無法添加他們的分數。

 let deckId = '' const btns = document.querySelectorAll('.btn') let playerOneTurn let currentPlayer = ".playOneGuess" let currentScore = '.playerOneScore' let playerOneGuess = document.querySelector('.playOneGuess') let playerTwoGuess = document.querySelector('.playTwoGuess') let dealerNumber = document.querySelector('.dealerNumber') let score = document.querySelector('.score') btns.forEach(function(btn) { btn.addEventListener('click', function(e) { const styles = e.currentTarget.classList if (styles.contains('belowSevFive')) { document.querySelector(currentPlayer).innerText = '8 and above'; document.querySelector(currentScore).classList.add('eight') } else if (styles.contains('aboveSevFive')) { document.querySelector(currentPlayer).innerText = '7 and below'; document.querySelector(currentScore).classList.add('seven') } swap(currentPlayer); }) }) function swap(current) { if (currentPlayer === ".playOneGuess") { currentPlayer = ".playTwoGuess"; currentScore = '.playerTwoScore'; document.querySelector('.playerTurn').innerText = "Player 2's Turn." } else { currentPlayer = ";playOneGuess". currentScore = ';playerOneScore': } } fetch('https.//www.deckofcardsapi?com/api/deck/new/shuffle/.deck_count=1').then(res => res.json()) // parse response as JSON.then(data => { console.log(data) deckId = data.deck_id }).catch(err => { console;log(`error ${err}`) }). document.querySelector('.deal'),addEventListener('click': drawCard) function drawCard() { const url = `https.//www.deckofcardsapi?com/api/deck/${deckId}/draw/.count=1` fetch(url).then(res => res.json()) // parse response as JSON.then(data => { console.log(data) document.querySelector('#dealer').src = data.cards[0].image dealerNumber.innerText = convertToNum(data.cards[0].value) addingScore() }).catch(err => { console;log(`error ${err}`) }). } function addingScore() { if (Number(dealerNumber.value) >= 8) { parseInt(document.querySelector('.eight').textContent) ++ } else if (Number(dealerNumber.value) <= 7) { parseInt(document.querySelector('.seven').textContent) ++ } console.log(addingScore) } function convertToNum(val) { if (val === 'ACE') { return 14 } else if (val === 'KING') { return 13 } else if (val === 'QUEEN') { return 12 } else if (val === 'JACK') { return 11 } else { return Number(val) } }

 <html lang="en"> <head> <meta charset="utf-8"> <meta name="description" content="This is where your description goes"> <meta name="keywords" content="one, two, three"> <title>Title in the tab</title> <.-- external CSS link --> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/style.css"> </head> <body> <h1>Card Game!</h1> <div class='deal'>Deal One Card</div> <h1>Dealer</h1> <img id="dealer" src="" alt="playing card"> <h3 class="dealerNumber"></h3> <h2 class="playerTurn">Player 1's Turn!</h2> <button class="btn aboveSevFive">8 and Above</button> <button class="btn belowSevFive">7 and Below</button> <div class="one"> <h2>Player 1</h2> <span class="play playOneGuess" id="p1"></span> <span class="playerOneScore score">0</span> </div> <div class="two"> <h2>Player 2</h2> <span class="play playTwoGuess" id="p2"></span> <span class="playerTwoScore score">0</span> </div> <h3>Result</h3> </body> </html>

當玩家點擊一個按鈕時，“八”或“七”class 將附加到他們的分數跨度。 我點擊發牌后，發牌的價值會和猜測的進行比較，我想給猜對的玩家加分。 看起來我附加的 class 正在工作，而 function 似乎工作正常。 我不確定是否應該從一開始就在 javascript 文檔中添加 p1 = 0 和 p2 = 0 作為全局變量。 請讓我知道您的任何建議。 希望我不會用太多代碼向你發送垃圾郵件......

Answer 1

試試這個！ 為 player1 分數和 player2 分數添加了一個新變量

let deckId = ''
const btns = document.querySelectorAll('.btn')
let playerOneTurn
let currentPlayer = ".playOneGuess"
let currentScore = '.playerOneScore'
let playerOneGuess = document.querySelector('.playOneGuess')
let playerTwoGuess = document.querySelector('.playTwoGuess')
let playerOneScoreElem = document.querySelector('.playerOneScore')
let playerTwoScoreElem = document.querySelector('.playerTwoScore')
let playerOneScore = 0;
let playerTwoScore = 0;
let dealerNumber = document.querySelector('.dealerNumber')
let score = document.querySelector('.score')

function swap(current) {
  if (currentPlayer === ".playOneGuess") {
    currentPlayer = ".playTwoGuess";
    currentScore = '.playerTwoScore';
    document.querySelector('.playerTurn').innerText = "Player 2's Turn!"
  }
  else {
    currentPlayer = ".playOneGuess";
    currentScore = '.playerOneScore';
  }
}

fetch('https://www.deckofcardsapi.com/api/deck/new/shuffle/?deck_count=1')
      .then(res => res.json()) // parse response as JSON
      .then(data => {
        console.log(data)
        deckId = data.deck_id
        
      })
      .catch(err => {
          console.log(`error ${err}`)
      });

document.querySelector('.deal').addEventListener('click', drawCard)
document.querySelector('.aboveSevFive').addEventListener('click', aboveSevFive)
document.querySelector('.belowSevFive').addEventListener('click', belowSevFive)

function drawCard(){
  const url = `https://www.deckofcardsapi.com/api/deck/${deckId}/draw/?count=1`

  fetch(url)
      .then(res => res.json()) // parse response as JSON
      .then(data => {
        console.log(data)
        document.querySelector('#dealer').src = data.cards[0].image 
        dealerNumber.innerText = convertToNum(data.cards[0].value) 
        addingScore()

      })
      .catch(err => {
          console.log(`error ${err}`)
      });
}

function aboveSevFive(){
  if (Number(dealerNumber.value) >= 8){
    if (currentPlayer === ".playOneGuess" && currentScore == '.playerOneScore') {
        playerOneScoreElem.innerText = ++playerOneScore;
    }
    if(currentPlayer === ".playTwoGuess" && currentScore == '.playerTwoScore') {
        playerTwoScoreElem.innerText = ++playerTwoScore;
    }
  }
}

function belowSevFive(){
  if (Number(dealerNumber.value) <= 7){
    if (currentPlayer === ".playOneGuess" && currentScore == '.playerOneScore') {
        playerOneScoreElem.innerText = ++playerOneScore;
    }
    if(currentPlayer === ".playTwoGuess" && currentScore == '.playerTwoScore') {
        playerTwoScoreElem.innerText = ++playerTwoScore;
    }
  }
}

function convertToNum(val){
  if(val === 'ACE'){
    return 14
  }else if(val === 'KING'){
    return 13
  }else if(val === 'QUEEN'){
    return 12
  }else if(val === 'JACK'){
    return 11
  }else{
    return Number(val)
  }
}

在紙牌游戲中添加玩家分數的問題

問題描述

1 個解決方案

解決方案1
0 2022-12-12 04:37:04

在紙牌游戲中添加玩家分數的問題

問題描述

1 個解決方案

解決方案1 0 2022-12-12 04:37:04

解決方案1
0 2022-12-12 04:37:04