JavaScript Blackjack game

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty margin-bottom:0;

up vote
3
down vote

favorite

I am learning javascript with the course Javascript Getting started by Mark Zaymota.

Currently the code is in a script.js file, and I was wondering how could we refactor it to extract classes from it.

The code in a file, until cards' generation and shuffle is:

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;

How could we refactor it?

I thought we should create some classes:

Deck, with createDeck() and shuffleDeck()

Card with getNextCard() and getCardString()

GameManager with buttons, text area and vriables, style logic, call to functions and event listeners.

Until now I have extracted Deck class:

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;

new 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]);

How could we improve it?

I think we should use constructor, and create get and set to deck into Deck.js

edited Mar 24 at 15:07

200_success

123k14142399

asked Mar 24 at 14:03

enoy

1813

add a commentÂ |Â

up vote
3
down vote

favorite

I am learning javascript with the course Javascript Getting started by Mark Zaymota.

Currently the code is in a script.js file, and I was wondering how could we refactor it to extract classes from it.

The code in a file, until cards' generation and shuffle is:

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;

How could we refactor it?

I thought we should create some classes:

Deck, with createDeck() and shuffleDeck()

Card with getNextCard() and getCardString()

GameManager with buttons, text area and vriables, style logic, call to functions and event listeners.

Until now I have extracted Deck class:

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;

new 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]);

How could we improve it?

I think we should use constructor, and create get and set to deck into Deck.js

edited Mar 24 at 15:07

200_success

123k14142399

asked Mar 24 at 14:03

enoy

1813

add a commentÂ |Â

up vote
3
down vote

favorite

I am learning javascript with the course Javascript Getting started by Mark Zaymota.

Currently the code is in a script.js file, and I was wondering how could we refactor it to extract classes from it.

The code in a file, until cards' generation and shuffle is:

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;

How could we refactor it?

I thought we should create some classes:

Deck, with createDeck() and shuffleDeck()

Card with getNextCard() and getCardString()

GameManager with buttons, text area and vriables, style logic, call to functions and event listeners.

Until now I have extracted Deck class:

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;

new 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]);

How could we improve it?

I think we should use constructor, and create get and set to deck into Deck.js

edited Mar 24 at 15:07

200_success

123k14142399

asked Mar 24 at 14:03

enoy

1813

I am learning javascript with the course Javascript Getting started by Mark Zaymota.

Currently the code is in a script.js file, and I was wondering how could we refactor it to extract classes from it.

The code in a file, until cards' generation and shuffle is:

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;

How could we refactor it?

I thought we should create some classes:

Deck, with createDeck() and shuffleDeck()

Card with getNextCard() and getCardString()

GameManager with buttons, text area and vriables, style logic, call to functions and event listeners.

Until now I have extracted Deck class:

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;

new 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]);

How could we improve it?

I think we should use constructor, and create get and set to deck into Deck.js

edited Mar 24 at 15:07

200_success

123k14142399

asked Mar 24 at 14:03

enoy

1813

edited Mar 24 at 15:07

200_success

123k14142399

edited Mar 24 at 15:07

200_success

123k14142399

edited Mar 24 at 15:07

200_success

123k14142399

asked Mar 24 at 14:03

enoy

1813

asked Mar 24 at 14:03

enoy

1813

asked Mar 24 at 14:03

enoy

1813

add a commentÂ |Â

1 Answer
1

active

oldest

votes

up vote
1
down vote

If you start going the OOP way (which works great for this type of game), your next step should be to make the main game a class as well. That prevents having all your variables and functions in the global scope.

You can use arrow functions to prevent nested functions in a class. It's clearer to just call a method of the class. Now you can call newGame from other places as well.

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()

answered Mar 28 at 18:24

Kokodoko

1815

add a commentÂ |Â

Your Answer

StackExchange.ifUsing("editor", function ()
return StackExchange.using("mathjaxEditing", function ()
StackExchange.MarkdownEditor.creationCallbacks.add(function (editor, postfix)
StackExchange.mathjaxEditing.prepareWmdForMathJax(editor, postfix, [["\$", "\$"]]);
);
);
, "mathjax-editing");

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "196"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
convertImagesToLinks: false,
noModals: false,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);

);

draft saved

draft discarded

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fcodereview.stackexchange.com%2fquestions%2f190366%2fjavascript-blackjack-game%23new-answer', 'question_page');

);

Post as a guest

Name

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

up vote
1
down vote

You can use arrow functions to prevent nested functions in a class. It's clearer to just call a method of the class. Now you can call newGame from other places as well.

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()

answered Mar 28 at 18:24

Kokodoko

1815

add a commentÂ |Â

up vote
1
down vote

You can use arrow functions to prevent nested functions in a class. It's clearer to just call a method of the class. Now you can call newGame from other places as well.

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()

answered Mar 28 at 18:24

Kokodoko

1815

add a commentÂ |Â

up vote
1
down vote

You can use arrow functions to prevent nested functions in a class. It's clearer to just call a method of the class. Now you can call newGame from other places as well.

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()

answered Mar 28 at 18:24

Kokodoko

1815

You can use arrow functions to prevent nested functions in a class. It's clearer to just call a method of the class. Now you can call newGame from other places as well.

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()

answered Mar 28 at 18:24

Kokodoko

1815

answered Mar 28 at 18:24

Kokodoko

1815

answered Mar 28 at 18:24

Kokodoko

1815

answered Mar 28 at 18:24

Kokodoko

1815

add a commentÂ |Â

draft saved

draft discarded

draft saved

draft discarded

Post as a guest

Name

搜尋此網誌

trjhtr