我正在尝试根据随机纸牌选择构建游戏。玩家抽出一张纸牌,一旦抽出了纸牌,便不会再次抽出纸牌。

我试图使其正常运行,但是在我的网站上出现错误,提示“未捕获的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的初学者,因此代码可能会以更整洁,更有效的方式编写,因此请原谅冗长且混乱的代码。

我究竟做错了什么?

最佳答案

具体回应:


  我是JS的初学者,代码可能是用
  更整洁,更有效的方法,因此请原谅冗长且混乱的代码。


通常,您想尝试分离数据和逻辑,但是您的代码将两者混为一谈。

请考虑类似以下内容:

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


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


这样,您的数据(cardsById)仅包含唯一的数据部分(图像名称和ID),并且逻辑是分开的。

至于不要两次选择同一张卡,一种选择是使用slice删除每张卡,就像评论中建议的@Crayon Violent一样(尽管我建议splice带有“ p”代替)为了那个原因)。

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

10-07 19:08
查看更多