我正在尝试根据随机纸牌选择构建游戏。玩家抽出一张纸牌,一旦抽出了纸牌,便不会再次抽出纸牌。
我试图使其正常运行,但是在我的网站上出现错误,提示“未捕获的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时检查该阵列。如果是您已经选择的,请重新选择。哪种样式更好取决于您的特定代码。