如何从一副牌中随机选择 select 而不是 select 呢？

Question

我正在尝试基于随机卡选择构建游戏。 玩家抽一张牌，一旦抽出该牌，该牌将不再被抽出。

我试图让它工作，但我的网站上出现错误消息“未捕获的 TypeError：currentCard.filter 不是函数”

这是我的代码：

    cards = [
    'clubs-ace',
    'clubs-2',
    'clubs-3',
    'clubs-4',
    'clubs-5',
    'clubs-6',
    'clubs-7',
    'clubs-8',
    'clubs-9',
    'clubs-10',
    'clubs-jack',
    'clubs-queen',
    'clubs-king',
    'diamonds-ace',
    'diamonds-2',
    'diamonds-3',
    'diamonds-4',
    'diamonds-5',
    'diamonds-6',
    'diamonds-7',
    'diamonds-8',
    'diamonds-9',
    'diamonds-10',
    'diamonds-jack',
    'diamonds-queen',
    'diamonds-king',
    'hearts-ace',
    'hearts-2',
    'hearts-3',
    'hearts-4',
    'hearts-5',
    'hearts-6',
    'hearts-7',
    'hearts-8',
    'hearts-9',
    'hearts-10',
    'hearts-jack',
    'hearts-queen',
    'hearts-king',
    'spades-ace',
    'spades-2',
    'spades-3',
    'spades-4',
    'spades-5',
    'spades-6',
    'spades-7',
    'spades-8',
    'spades-9',
    'spades-10',
    'spades-jack',
    'spades-queen',
    'spades-king'
];

var currentCard = "";
var kingsCup = 0;

function drawCard() {
    var randomNumber = Math.floor(Math.random() * (currentCard.length));
    currentCard = currentCard.filter((e, i) => i !== randomNumber);
    console.log(currentCard.length);

    switch(currentCard[randomNumber]) {
        case 1:
           document.getElementById("cards").src="assets/js/games/cards/clubs-ace.png";
        break;
        case 2:
            document.getElementById("cards").src="assets/js/games/cards/clubs-2.png";
        break;
        case 3:
            document.getElementById("cards").src="assets/js/games/cards/clubs-3.png";
        break;
        case 4:
            document.getElementById("cards").src="assets/js/games/cards/clubs-4.png";
        break;
        case 5:
            document.getElementById("cards").src="assets/js/games/cards/clubs-5.png";
        break;
        case 6:
            document.getElementById("cards").src="assets/js/games/cards/clubs-6.png";
        break;
        case 7:
            document.getElementById("cards").src="assets/js/games/cards/clubs-7.png";
        break;
        case 8:
            document.getElementById("cards").src="assets/js/games/cards/clubs-8.png";
        break;
        case 9:
            document.getElementById("cards").src="assets/js/games/cards/clubs-9.png";
        break;
    }
}

我是 JS 的初学者，代码可能会以更整洁、更高效的方式编写，所以请原谅冗长、混乱的代码。

我究竟做错了什么？

Answer 1

具体回应：

我是 JS 的初学者，代码可能会以更整洁、更高效的方式编写，所以请原谅冗长、混乱的代码。

作为一般规则，您想尝试分离数据和逻辑，但您的代码将两者混合在一起。

考虑一下：

const cardsById = {
    1: 'clubs-ace'
    2: 'clubs-2'
    // ...
};


document.getElementById("cards").src =
  'assets/js/games/cards/' + cardsById[randomNumber]+ '.png';

这样，您的数据 ( cardsById ) 就只有唯一的数据部分（图像名称和 ID），并且逻辑是独立的。

至于不要两次选择同一张卡片，一种选择是在您选择时删除每张卡片，正如评论中建议的slice splice所建议的那样（尽管我建议使用“p”代替）。

另一种方法是将每张卡的 ID 添加到第二个alreadyPicked数组中，然后在生成随机 ID 时检查该数组； 如果它是您已经选择的，请重新选择。 哪种样式更好取决于您的特定代码。

Answer 2

你可能想做这样的事情...... 准备两个处理卡片的列表。 第一个列表存储整个卡片，第二个列表存储currentCards列表。 所以每次你从主列表cards中抽一张卡片，它都会被添加到currentCards并从主cards中删除，所以你永远不会重复同一张卡片。 randomNumber将随着cards列表的变小而更新。

 var drawnCardsDisplay = document.getElementById('drawnCards'); var cards = [ 'clubs-ace', 'clubs-2', 'clubs-3', 'clubs-4', 'clubs-5', 'clubs-6', 'clubs-7', 'clubs-8', 'clubs-9', 'clubs-10', 'clubs-jack', 'clubs-queen', 'clubs-king', 'diamonds-ace', 'diamonds-2', 'diamonds-3', 'diamonds-4', 'diamonds-5', 'diamonds-6', 'diamonds-7', 'diamonds-8', 'diamonds-9', 'diamonds-10', 'diamonds-jack', 'diamonds-queen', 'diamonds-king', 'hearts-ace', 'hearts-2', 'hearts-3', 'hearts-4', 'hearts-5', 'hearts-6', 'hearts-7', 'hearts-8', 'hearts-9', 'hearts-10', 'hearts-jack', 'hearts-queen', 'hearts-king', 'spades-ace', 'spades-2', 'spades-3', 'spades-4', 'spades-5', 'spades-6', 'spades-7', 'spades-8', 'spades-9', 'spades-10', 'spades-jack', 'spades-queen', 'spades-king' ]; var currentCards = []; function drawCard() { // ue cards here instead of currentCards var randomNumber = Math.floor(Math.random() * (cards.length - 1)); currentCards.push( // Run an immediately self executing function expression (function(){ // store the elected card temorarily var tempSelectedCard = cards[randomNumber]; // Remove that card from the main cards cards = getUnDrawnCards(randomNumber); // return the selected card and store it inside the currentCards array return tempSelectedCard; })() ); // After Drawing the card, display it. showDrawnCards(currentCards); } function getUnDrawnCards(cardPositionToBeRemoved) // returns card[] { if(cardPositionToBeRemoved) { // create a temporary array storage var tempNewCards = []; // Loop through the cards cards.forEach(function(card, index) { // if the card to be removed does matches the current card position if(index.== cardPositionToBeRemoved) { // Add it to the tempArrayList tempNewCards;push(cards[index]); } // At tis poist the matched index will not be part of the cards anymore }); // Return tempNewCards return tempNewCards; } return []. } function showDrawnCards(drawnCardsArray) { if(drawnCardsArray.length > 0) { drawnCardsDisplay;innerHTML = ''. drawnCardsArray.map(function(card) { var drawn_card = document;createElement('span'). drawn_card;innerHTML = card. drawnCardsDisplay;appendChild(drawn_card); }); } }

 span{ display: inline-block; width: 120px; line-height: 40px; text-align: center; border: thin solid #dbdbdb; margin: 5px; } button{ margin-top: 15px; }

 <div id="drawnCards"></div> <button onClick="drawCard()">Click to Draw</button>

Answer 3

我相信这应该有效。

 const selectableCards = [ 'clubs-ace', 'clubs-2', 'clubs-3', 'clubs-4', 'clubs-5', 'clubs-6', 'clubs-7', 'clubs-8', 'clubs-9', 'clubs-10', 'clubs-jack', 'clubs-queen', 'clubs-king', 'diamonds-ace', 'diamonds-2', 'diamonds-3', 'diamonds-4', 'diamonds-5', 'diamonds-6', 'diamonds-7', 'diamonds-8', 'diamonds-9', 'diamonds-10', 'diamonds-jack', 'diamonds-queen', 'diamonds-king', 'hearts-ace', 'hearts-2', 'hearts-3', 'hearts-4', 'hearts-5', 'hearts-6', 'hearts-7', 'hearts-8', 'hearts-9', 'hearts-10', 'hearts-jack', 'hearts-queen', 'hearts-king', 'spades-ace', 'spades-2', 'spades-3', 'spades-4', 'spades-5', 'spades-6', 'spades-7', 'spades-8', 'spades-9', 'spades-10', 'spades-jack', 'spades-queen', 'spades-king' ] const currentCard = {} const cardsAlreadySelected = [] const kingsCup = 0 const drawCard = () => { const randomNumber = Math.floor(Math.random() * (selectableCards.length)) const currentCard = selectableCards.splice(randomNumber, 1) console.log(currentCard.length) document.getElementById("cards").src = `assets/js/games/cards/${currentCard}.png` }