Как случайным образом выбрать карту из колоды карт и не выбирать ее снова? - PullRequest
Новая
       30

Как случайным образом выбрать карту из колоды карт и не выбирать ее снова?

0 голосов
/ 11 апреля 2020

Я пытаюсь построить игру, основанную на случайном выборе карт. Игрок др aws карта, как только карта была извлечена, карта больше не будет извлечена.

Я пытался заставить его работать, но на моем веб-сайте появляется сообщение об ошибке «Uncaught 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, и код, вероятно, мог бы быть написан аккуратнее и эффективнее, поэтому, пожалуйста, извините за длинный, грязный код.

Что я делаю не так?

Ответы [ 3 ]

2 голосов
/ 11 апреля 2020

Конкретно отвечая на:

Я новичок в JS, и код, вероятно, мог бы быть написан аккуратнее и эффективнее, поэтому, пожалуйста, извините за длинный, грязный код.

Как правило, вы хотите попытаться разделить ваши данные и логи c, но ваш код смешивает оба.

Вместо этого рассмотрим что-то вроде: 

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


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

Таким образом, у вас есть ваши данные (cardsById) только с уникальными частями данных (имена и идентификаторы изображений), и лог c является отдельным.

Что касается не выбора одной и той же карты дважды, одним из вариантов было бы удалить каждую карту, когда вы выбираете ее, используя slice, как @Crayon Violent предложил в комментариях (хотя я бы порекомендовал splice, с "p" вместо этого).

Другой способ - добавить идентификатор каждой карты во второй массив alreadyPicked, а затем проверить этот массив при генерации случайного идентификатора; если это тот, который вы уже выбрали, выберите заново. Какой стиль лучше, зависит от вашего c кода.

0 голосов
/ 11 апреля 2020

Я считаю, что это должно работать. 

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`
}
0 голосов
/ 11 апреля 2020

Возможно, вы захотите сделать что-то вроде этого ... Держите под рукой два списка, которые обрабатывают карты. В первом списке хранятся все карты, а во втором - список 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...