[#2] Пишем игру Backjack (Очко). Постановка задачи

@dmitry
Добавил ещё в код несколько функций которые подгружают при нажатии на колоду карт, карту в развернутом виде, но правильно ли хранить много картинок с разными названиями в папке проекта это же много занимает места, но по другому как не знаю . Можно было бы сделать на одной картинке все карты и когда человек нажимает на колоду и идёт проверка , например будет имя карты : туз, масть: бубна, тогда когда в условии увидит name == бубна тогда на картинке будет значение которое выделит именно эту карту.
Сейчас в коде добавил счёт и карты показываются.

class BlackJackGame {
    constructor(rootNode) {
        this.playercards = null;
        this.computercards = null;
        this.playerScore = null;
        this.computerScore = null;
        this.deck = null;
        this.DOMComputerScore = null;
        this.DOMPlayerScore = null;
        this.DOMComputerCards = null;
        this.DOMPlayersCards = null;
        this.DOMDeckofCards = null;
        this.DOMPassButton = null;
        this.DOMRootNode = null;

        this.DOMRootNode = rootNode;
        this.init();
    }

    init() {
        this.playercards = [];
        this.computercards = [];
        this.playerScore = [];
        this.computerScore = [];
        this.deck = this._createDeck();

        this.DOMRootNode.innerHTML = `
            <div class='computer-score'></div>
            <div class='player-score'></div>
            <div class='deck-of-cards'></div>
            <div class='computer-cards'></div>
            <div class='player-cards'></div>
            <button class='pass'>Pass</button>
        `
        this.DOMComputerScore = this.DOMRootNode.querySelector('.computer-score');
        this.DOMPlayerScore = this.DOMRootNode.querySelector('.player-score');
        this.DOMComputerCards = this.DOMRootNode.querySelector('.computer-cards');
        this.DOMPlayersCards = this.DOMRootNode.querySelector('.player-cards');
        this.DOMDeckofCards = this.DOMRootNode.querySelector('.deck-of-cards ');
        this.DOMPassButton = this.DOMRootNode.querySelector('.pass');

        this.DOMDeckofCards.addEventListener('click', () => {
            this.pickPlayerCard();
        });
    }

    sumOfPlayerScore() {
        var s = 0;
        for (var i = 0; i < this.playerScore.length; i++) {
            s += this.playerScore[i];
        }
        return s
    }

    pickPlayerCard() {
        const card = this.deck.pop();
        this.playerScore.push(card.weight);
        const score = this.sumOfPlayerScore();
        this.playercards.push(card);
        this.renderPlayerHand(card, score);
        this.checkPlayerScore(score);
    }

    renderPlayerHand(card, score) {
        this.DOMPlayersCards.innerHTML = this.DOMPlayersCards.innerHTML +`
            <div class=player-card style=background-image:url(./img/`+card.name +`-`+card.suit +`.jpg)></div>
        `
        this.DOMPlayerScore.innerHTML = `
            ${JSON.stringify(score)}
        `
    }

    checkPlayerScore(score){
        if(score === 21)alert('You win');
        else if(score > 21)alert('You lose') 
    }

    _createDeck() {
        const suits = ['hearts', 'clubs', 'diamonds', 'spades'];
        const cards = [{ name: 'tuz', weight: 11 }, { name: 'korol', weight: 4 }, { name: 'dama', weight: 3 }, { name: 'valet', weight: 2 }, { name: '10', weight: 10 }, { name: '9', weight: 9 }, { name: '8', weight: 8 }, { name: '7', weight: 7 }, { name: '6', weight: 6 }];
        const deck = [];
        for (let suit of suits) {
            for (let cardInfo of cards) {
                deck.push({
                    suit: suit,
                    name: cardInfo.name,
                    weight: cardInfo.weight
                })
            }
        }
        deck.sort(() => {
            return Math.random() > 0.5 ? 1 : -1;
        })

        return deck;
    }
}

new BlackJackGame(document.querySelector('.game'));

Есть вопрос я в функции которые добавил передаю параметры, лучше будет сделать переменную глобальной или локальной и передавать в параметры функции ?

1 лайк