英文:
How to fill an array with all possible combinations of 2 value pairs in Javascript
问题
我写了一些JavaScript代码来创建一个非常简单的卡牌发牌程序，用于一项家庭作业。实际上，您单击按钮以从包含52张卡牌的数组中抽取5张卡牌（在这种情况下，它必须是52张卡牌对象），然后这5张卡牌以以下方式显示：
- 梅花7
- 黑桃6
- 红心7
- 黑桃10
- 黑桃10
但我似乎无法弄清楚的部分是，数组中的每张卡片都需要是唯一的，如您可以从我的代码输出中看到的示例，存在重复的卡片。
我不太清楚如何填充包含52个唯一卡牌对象的数组，即每种花色和点数的组合。
以下是我的代码：
<head>
<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
</head>
<body>
<h1>Robo Dealer</h1>
<button onclick="dealHand();">Deal Hand</button>
<hr />
<div id="card_hand"></div>
<script>
// 声明花色和点数的数组
const suits = ["Hearts", "Spades", "Clubs", "Diamonds"];
const values = ["Ace", 2, 3, 4, 5, 6, 7, 8, 9, 10, "Jack", "Queen", "King"];
// 创建卡牌对象
class Card {
constructor(suit, value) {
this.suit = suit;
this.value = value;
}
}
const deck = [];
function createDeck() {
for (i = 0; i < suits.length; i++) {
for (j = 0; j < values.length; j++) {
const card = { value: values[j], suit: suits[i] };
deck.push(card);
}
}
return deck;
}
var hand = new Array();
function getDeck() {
for (i = 0; i < 5; i++) {
let x = Math.floor(Math.random() * 52);
hand.push(deck[x]);
}
return hand;
}
// 发牌5张卡牌对象/将其输出到HTML
const dealHand = () => {
let callCreateDeck = createDeck();
let callGetDeck = getDeck();
let str = "";
for (i = 0; i < hand.length; i++) {
let obj = hand[i];
str += `- ${obj["value"]} of ${obj["suit"]} <br> `;
$("#card_hand").html(str);
}
return false; // 防止页面重新加载
};
</script>
</body>
此外，每当单击按钮时，都会抽取另一组5张卡牌，我希望使其如此，以便在显示一组5张卡牌时单击按钮时，这些卡牌会被清除/替换为新的一组卡牌，并且只能抽取更多的卡牌，直到没有更多的卡牌为止。
英文:
I wrote some Javascript code to create a very simple card dealer for a homework assignment.
In essence, you click a button to draw 5 cards from an array of 52 cards (in this case it had to be 52 card objects), and those 5 cards get displayed like this:
- 7 of Clubs
- 6 of Spades
- 7 of Hearts
- 10 of Spades
- 10 of Spades
The part I can't seem to figure out though is that each card in the array needs to be unique and as you can see in my example which I took from the output of my code, there are duplicates.
I don't quite know how to go about filling the array with 52 unique card objects, i.e every combination of suits and values.
Here is my code:
<head>
<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
</head>
<body>
<h1>Robo Dealer</h1>
<button onclick="dealHand();">Deal Hand</button>
<hr />
<div id="card_hand"></div>
<script>
// Declaring arrays for suits and values
const suits = ["Hearts", "Spades", "Clubs", "Diamonds"];
const values = ["Ace", 2, 3, 4, 5, 6, 7, 8, 9, 10, "Jack", "Queen", "King"];
// Creating the card object
class Card {
constructor(suit, value) {
this.suit = suit;
this.value = value;
}
}
const deck = [];
function createDeck() {
for (i = 0; i < suits.length; i++) {
for (j = 0; j < values.length; j++) {
const card = { value: values[j], suit: suits[i] };
deck.push(card);
}
}
return deck;
}
var hand = new Array();
function getDeck() {
for (i = 0; i < 5; i++) {
let x = Math.floor(Math.random() * 52);
hand.push(deck[x]);
}
return hand;
}
// Dealing hand of 5 card objects / outputting it to HTML
const dealHand = () => {
let callCreateDeck = createDeck();
let callGetDeck = getDeck();
let str = "";
for (i = 0; i < hand.length; i++) {
let obj = hand[i];
str += `- ${obj["value"]} of ${obj["suit"]} <br> `;
$("#card_hand").html(str);
}
return false; // prevent page reload
};
</script>
</body>
Additionally, whenever the button is clicked, another set of 5 cards is drawn and I would like to make it so that when the button is clicked while a set of 5 cards is already being displayed, those cards get cleared/ replaced by the new set of cards and you can only draw more cards until there are no more remaining cards.
答案1
得分: 1
以下是代码的翻译部分：
// 声明花色和数值的数组
const suits = ["红桃", "黑桃", "梅花", "方片"];
const values = ["A", 2, 3, 4, 5, 6, 7, 8, 9, 10, "J", "Q", "K"];
// 创建卡牌对象
class Card {
constructor(suit, value) {
this.suit = suit;
this.value = value;
}
}
function createDeck() {
const deck = [];
for (let i = 0; i < suits.length; i++) {
for (let j = 0; j < values.length; j++) {
const card = { value: values[j], suit: suits[i] };
deck.push(card);
}
}
// 洗牌
deck.sort(() => Math.random() - 0.5);
return deck;
}
const deck = createDeck();
// 发牌（5张牌对象）/ 输出到HTML
const dealHand = () => {
let str = "";
for (let i = 0; i < (deck.length < 5 ? deck.length : 5); i++) {
let obj = deck[i];
str += `- ${obj.value} of ${obj.suit} <br> `;
$("#card_hand").html(str);
}
// 移除前五张牌
deck.splice(0, 5)
return false; // 防止页面重新加载
}
<head>
<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
</head>
<body>
<h1>机器人发牌员</h1>
<button onclick="dealHand();">发牌</button>
<hr />
<div id="card_hand"></div>
</body>
英文:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
// Declaring arrays for suits and values
const suits = ["Hearts", "Spades", "Clubs", "Diamonds"];
const values = ["Ace", 2, 3, 4, 5, 6, 7, 8, 9, 10, "Jack", "Queen", "King"];
// Creating the card object
class Card {
constructor(suit, value) {
this.suit = suit;
this.value = value;
}
}
function createDeck() {
const deck = []
for (let i = 0; i < suits.length; i++) {
for (let j = 0; j < values.length; j++) {
const card = { value: values[j], suit: suits[i] };
deck.push(card);
}
}
// shuffle the deck
deck.sort(() => Math.random() - 0.5);
return deck;
}
const deck = createDeck();
// Dealing hand of 5 card objects / outputting it to HTML
const dealHand = () => {
let str = "";
for (let i = 0; i < (deck.length < 5 ? deck.length : 5); i++) {
let obj = deck[i];
str += `- ${obj.value} of ${obj.suit} <br> `;
$("#card_hand").html(str);
}
// remove first five cards
deck.splice(0, 5)
return false; // prevent page reload
};
<!-- language: lang-html -->
<head>
<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
</head>
<body>
<h1>Robo Dealer</h1>
<button onclick="dealHand();">Deal Hand</button>
<hr />
<div id="card_hand"></div>
</body>
<!-- end snippet -->
答案2
得分: 0
你没有从牌堆中移除所抽的牌，只是将它添加到你的手牌中。
每次你抽牌时，你可以复制你的牌堆，并使用temporaray_deck.splice(x, 1)函数从复制的牌堆中移除每张抽出的牌，这将从temporary_deck中删除索引x处的对象。第二个参数只是告诉它要删除这个数量的元素，在这种情况下是1。
英文:
You are not removing the drawn card from the deck you are only adding it to your hand.
You can copy your deck each time you draw cards and remove each drawn card from the copy of the deck using the temporaray_deck.splice(x, 1) function, which will remove the object at index x from the temporary_deck. The 2nd parameter just tells it to remove that amount of elements in this case 1.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论