我应该如何在 JavaScript 中创建 BlackJack 游戏？我想创建一个路线图来帮助我可视化项目 [已关闭]-解网

问：

想改进这个问题吗？更新问题，使其仅通过编辑这篇文章来关注一个问题。

6天前关闭。

改进此问题

我正在尝试使用 JavaScript 创建一个可重复的二十一点游戏，该游戏允许一个玩家玩到使用整副牌为止。然后，如果玩家愿意，可以选择在整副牌用完后再次玩。

我确实尝试使用对象或类来创建一些主要组件，例如套牌或玩家对象，但我很难创建一个框架来说明它在我的脑海中会是什么样子。我很挣扎，因为当我创建一些对象时，它们无法访问其他对象的属性或方法。如果我采用这种方法，我是否应该创建一个包含其他小对象的大类对象，其中包含其中的函数？

这是我到目前为止拥有的 HTML 代码：

<!DOCTYPE html> 
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Second Try Blackjack Game</title>
    <script type="module">
    </script>
    <link rel="stylesheet" href="SecondTryBlackJack.css">
    <style type="text/css">
    </style>
</head>
<body>
    <p id="DealerScore">Dealer's Score:</p><br>
    <p id="DealerHand">Dealer Hand:</p><br>
    <img id="DealerHiddenCard" src="./cards/BACK.png">
    <p id="PlayerScore">Player's Score:</p><br>
    <p id="PlayerHand">Player Hand:</p>
    <button id="HitButton">Hit</button>
    <button id="StayButton">Stay</button>
    <button id="NextGameButton" class="NextRound">Next Turn</button>
    <p id="RoundScore">Round Score</p>
    <script src="SecondTryBlackJack.js"></script>
</body>
</html>

这是我到目前为止编写的CSS代码：

body{
    font-family: Arial, Helvetica, sans-serif; 
    text-align: center;
}
img{
    height: 175px; 
    width: 175px; 
}
.GameBoard{
    border: 2px solid blue; 
}
div{
    border: 2px dotted black; 
    text-align: center;
}

这是我到目前为止编写的 JavaScript 代码（* 我在与我的项目相同的文件夹中有一个文件夹，其中包含每张卡片的图像，标题为“A-C.png”、“2-C.png”、“3-C.png”等）：

class card{
    constructor(cardname, value){
        this.cardname = cardname; 
        this.value = value; 
}      
}
let CAce = new card("A-C", 11); 
let CTwo = new card("2-C", 2); 
let CThree = new card("3-C", 3); // Continue to repeat for all Clover cards
....
let CTen = new card("10-C", 10); 
let CJack = new card("J-C", 10); 
let CQueen = new card("Q-C", 10); 
let CKing = new card("K-C", 10); // Repeat this for D, H and S for Diamonds, Hearts and 
                                 // Spades respectively

let cards = [CAce, CTwo, CThree, CFour, CFive, CSix, CSeven, CEight, CNine, CTen, CJack, CQueen, CKing, 
DAce, DTwo, DThree, DFour, DFive, DSix, DSeven, DEight, DNine, DTen, DJack, DQueen, DKing, 
HAce, HTwo, HThree, HFour, HFive, HSix, HSeven, HEight, HNine, HTen, HJack, HQueen, HKing, 
SAce, STwo, SThree, SFour, SFive, SSix, SSeven, SEight, SNine, STen, SJack, SQueen, SKing]; 

function shuffle(array){ // This is to shuffle the deck of cards
    let currentIndex = array.length; 
    while(currentIndex != 0){
        let randomIndex = Math.floor(Math.random() * array.length); 
        currentIndex -= 1; 
        let temp = array[currentIndex]; 
        array[currentIndex] = array[randomIndex]; 
        array[randomIndex] = temp; 
    }
    return array; 
}

setupBoard(); // This is to show that the div elements have been created

function setUpBoard(){
    let parentDiv = document.createElement('div'); 
    parentDiv.id = 'parent'; 
    parentDiv.className = 'GameBoard'; 
    parentDiv.style.backgroundColor = 'red'; 
    parentDiv.style.width = '200px'; 
    parentDiv.style.height = '200px'; 
    parentDiv.textContent = "This is the parent div element to controll all of the cards in the game."; 
    document.body.append(parentDiv); 
    let DealerHidden = document.createElement('div'); 
    DealerHidden.id = 'HiddenCard'; 
    DealerHidden.style.width = '200px'; 
    DealerHidden.style.height = '200px'; 
    DealerHidden.style.backgroundColor = "blue"; 
    DealerHidden.textContent = "This contains the dealer's hidden cards"; 
    parentDiv.appendChild(DealerHidden); 
    let DealerCards = document.createElement('div'); 
    DealerCards.id = 'DealerCards'; 
    DealerCards.style.width = '200px'; 
    DealerCards.style.height = '200px'; 
    DealerCards.textContent = "This contains the dealer's cards that are shown"; 
    parentDiv.appendChild(DealerCards); 
    let PlayerCards = document.createElement('div'); 
    PlayerCards.id = 'PlayerCards'; 
    PlayerCards.style.width = '200px'; 
    PlayerCards.style.height = '200px'; 
    PlayerCards.style.backgroundColor = "yellow"; 
    PlayerCards.textContent = "This contains the player's cards that are shown"; 
    parentDiv.appendChild(PlayerCards); 
    console.log(parentDiv.childNodes); 
}

就我的想法而言，我动态创建了几个 div 元素，我可以创建一个按钮来在回合完成后删除 div 元素，以便可以在下一回合再次分发卡片。然后，我可以分发新卡。

任何建议或意见将不胜感激。我不是在寻找代码建议，而是在寻找关于我应该采取什么方向才能创建我所描述的二十一点游戏的建议。

JavaScript oop 二十一点

我应该如何在 JavaScript 中创建 BlackJack 游戏？我想创建一个路线图来帮助我可视化项目 [已关闭]

How should I approach creating a BlackJack game in JavaScript? I would like to create a roadmap to help me visualize the project [closed]

评论