文章/答案/技术大牛

发布

社区首页 >问答首页 >JavaScript Blackjack游戏

问JavaScript Blackjack游戏
EN

Code Review用户

提问于 2018-03-24 14:03:17

回答 1查看 2.5K关注 0票数 3

我正在用Mark开始的课程javascript学习Javascript。

目前，代码位于一个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具有按钮、文本区域和版本、样式逻辑、函数调用和事件侦听器。

到目前为止，我已经提取了Deck类：

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

}

我们怎样才能改进它？

我认为我们应该使用构造函数，并创建get并将其设置为Deck.js

playing-cards

javascript

object-oriented

comparative-review

回答 1

Code Review用户

发布于 2018-03-28 18:24:39

如果您开始使用OOP方式(这对于这种类型的游戏非常有用)，那么下一步应该是将主游戏变成一个类。这将防止将所有变量和函数都包含在全局范围内。

可以使用箭头函数来防止类中的嵌套函数。更清楚的是，只需要调用类的一个方法。现在，您也可以从其他地方调用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

页面原文内容由Code Review提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://codereview.stackexchange.com/questions/190366

复制

相似问题

问JavaScript Blackjack游戏
EN

，我们怎么能重构它呢？

我们怎样才能改进它？

回答 1

Code Review用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JavaScript Blackjack游戏EN

，我们怎么能重构它呢？

我们怎样才能改进它？

回答 1

Code Review用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JavaScript Blackjack游戏
EN