JavaScript для игры в блэкджек


Я учусь на JavaScript с помощью JavaScript начал Марк Zaymota.

В настоящее время код в файл script.js и мне было интересно, как мы могли бы преобразовать его, чтобы извлечь уроки из него.

Код в файле, до генерации карт и перетасуйте является:

index.html:

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">

  </head>

  <body>

    <h1>Blackjack game</h1>
    <h6>By Yone Moreno</h6>
    <br>
    <p id='text-area'>Welcome to BlackJack!!!!!</p>
    <button id='new-game-button'>Start a New Game!!!</button>
    <button id='hit-button'>Hit!</button>
    <button id='stay-button'>Stay...</button>

    <script src="script.js"></script>
  </body>

</html>

script.js

// Blackjack


let textArea = document.getElementById('text-area');
let newGameButton = document.getElementById('new-game-button');
let hitButton = document.getElementById('hit-button');
let stayButton = document.getElementById('stay-button');

let gameStarted = false,
  gameOver = false,
  playerWon = false,
  dealerCards = [],
  playerCards = [],
  dealerScore = 0,
  playerScore = 0,
  deck = [];

hitButton.style.display = 'none';
stayButton.style.display = 'none';
showStatus();


newGameButton.addEventListener('click', function() {

  gameStarted = true;
  gameOver = false;
  playerWon = false;

  deck = createDeck();
  shuffleDeck(deck);
  dealerCards = [getNextCard(), getNextCard()];
  playerCards = [getNextCard(), getNextCard()];


  newGameButton.style.display = 'none';
  hitButton.style.display = 'inline';
  stayButton.style.display = 'inline';
  showStatus();
})

let suits = ['Hearts', 'Clubs', 'Diamonds', 'Spades'];
let values = ['As', 'King', 'Queen', 'Jack',
  'Ten', 'Nine', 'Eight', 'Seven', 'Six',
  'Five', 'Four', 'Three', 'Two'
]



function createDeck() {
  let deck = [];
  for (suitIndex = 0; suitIndex < suits.length; suitIndex++) {
    for (let valueIndex = 0; valueIndex < values.length; valueIndex++) {
      let card = {
        suit: suits[suitIndex],
        value: values[valueIndex]
      };
      deck.push(card);
    }
  }
  return deck;
}



function getNextCard() {
  return deck.shift();
}

function getCardString(card) {
  return card.value + ' of ' + card.suit;
}


function showStatus() {
  if (!gameStarted) {
    textArea.innerText = 'Welcome to BlackJack!!!!!!!!!!';
    return;
  }
  for (let i = 0; i < deck.length; i++) {
    textArea.innerText += '\n' + getCardString(deck[i]);
  }

}

function shuffleDeck(deck) {
  for (let i = 0; i < deck.length; i++) {
    let swapIndex = Math.trunc(Math.random() * deck.length);
    let randomCard = deck[swapIndex];
    let currentCard = deck[i];
    deck[swapIndex] = currentCard;
    deck[i] = randomCard;
  }
}

Как мы могли бы переделать его?

Я думал, что мы должны создать некоторые классы:

Палубе, с createDeck() и shuffleDeck()

Карта с getNextCard() и getCardString()

GameManager с кнопки, текстовые области и vriables, логика, стиль, вызов функции и прослушивателей событий.

До сих пор я добывала класс палуба:

Deck.js

class Deck{
    createDeck() {
        let deck = [];
        for (let suitIndex = 0; suitIndex < suits.length; suitIndex++) {
            for (let valueIndex = 0; valueIndex < values.length; valueIndex++) {
                let card = {
                    suit: suits[suitIndex],
                    value: values[valueIndex]
                };
                deck.push(card);
            }
        }
        this.deck = deck;
        return deck;
    }

    shuffleDeck() {
        for (let i = 0; i < deck.length; i++) {
            let swapIndex = Math.trunc(Math.random() * deck.length);
            let randomCard = deck[swapIndex];
            let currentCard = deck[i];
            deck[swapIndex] = currentCard;
            deck[i] = randomCard;
        }
    }
}

новый script.js

// Blackjack


let textArea = document.getElementById('text-area');
let newGameButton = document.getElementById('new-game-button');
let hitButton = document.getElementById('hit-button');
let stayButton = document.getElementById('stay-button');

let gameStarted = false,
    gameOver = false,
    playerWon = false,
    dealerCards = [],
    playerCards = [],
    dealerScore = 0,
    playerScore = 0,
    deck = [];

hitButton.style.display = 'none';
stayButton.style.display = 'none';
showStatus();
let myClassDeck = new Deck();


newGameButton.addEventListener('click', function () {

    gameStarted = true;
    gameOver = false;
    playerWon = false;

    myClassDeck.createDeck();
    myClassDeck.shuffleDeck(myClassDeck);
    dealerCards = [getNextCard(), getNextCard()];
    playerCards = [getNextCard(), getNextCard()];


    newGameButton.style.display = 'none';
    hitButton.style.display = 'inline';
    stayButton.style.display = 'inline';
    showStatus();
})

let suits = ['Hearts', 'Clubs', 'Diamonds', 'Spades'];
let values = ['As', 'King', 'Queen', 'Jack',
    'Ten', 'Nine', 'Eight', 'Seven', 'Six',
    'Five', 'Four', 'Three', 'Two'
]


function getNextCard() {
    let nextCard = myClassDeck.deck.shift();
    console.log('card given is:', nextCard);
    return nextCard;
}

function getCardString(card) {
    return card.value + ' of ' + card.suit;
}


function showStatus() {
    if (!gameStarted) {
        textArea.innerText = 'Welcome to BlackJack!!!!!!!!!!';
        return;
    }
    for (let i = 0; i < myClassDeck.deck.length; i++) {
        textArea.innerText += '\n' + getCardString(myClassDeck.deck[i]);
    }

}

Как мы могли бы улучшить его?

Я думаю, что мы должны использовать конструктор, и создать вам и установлен на палубе в Deck.js



Комментарии
1 ответ

Если вы начнете ООП способ (который работает отлично подходит для этого типа игры), ваш следующий шаг должен заключаться в основной игровой класс, а также. Что мешает, имея все переменные и функции в глобальной области видимости.

Вы можете использовать кнопки со стрелками, чтобы избежать вложенных функций в классе. Это яснее, чтобы просто вызвать метод класса. Теперь вы можете звонить newGame из других мест также.

class Game {
constructor(){
this.suits = ['Hearts', 'Clubs', 'Diamonds', 'Spades']
this.textArea = document.getElementById('text-area')
this.newGameButton = document.getElementById('new-game-button')
this.myDeck = new Deck()

this.newGameButton.addEventListener('click',()=>this.newGame())

this.showStatus()
}

showStatus(){
}

newGame(){
this.myDeck.createDeck()
this.myDeck.shuffleDeck()
}
}

new Game()

1
ответ дан 28 марта 2018 в 06:03 Источник Поделиться