Kevin Powell - Community•10mo ago

How to add more number options, but keep the card count at 5 in Memory Card?

https://cdl-memory-card.netlify.app/ https://github.com/callum-laing/sv-memory-card It will change to images later, but for now I want to just be able to build this with numbers, which I think is a much easier thing to implement. So right now I have a cards variable containing 5 integers in an array, that's then producing 5 cards through JS coding and displaying the numbers 1 to 5. My random function is rotating what number is displayed on what card, but it's only rotating the existing numbers from the cards array. I want to have say... 10 numbers, but it still only show 5 cards.. how would I go about changing my code to produce this? (don't have to give me the answer, but any hints are appreciated!)

GitHub

GitHub - callum-laing/sv-memory-card: Memory Card built in Svelte!

Memory Card built in Svelte! Contribute to callum-laing/sv-memory-card development by creating an account on GitHub.

4 Replies

MarkBoots•10mo ago

shuffle the array randomly and get the first five

CDLOP•10mo ago

But that will still cause the shuffleCards function to produce however many integers there are in the array, right? right now I have

let cards = [1, 2, 3, 4, 5];


let shuffleCards = () => {
    for (let i = cards.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [cards[i], cards[j]] = [cards[j], cards[i]];
    }
}

let cards = [1, 2, 3, 4, 5];


let shuffleCards = () => {
    for (let i = cards.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [cards[i], cards[j]] = [cards[j], cards[i]];
    }
}

That's going to produce 5 cards. whatever I do to that array, affects how many cards are shown Oh, I see what you mean, only produce the first 5 integers Oh! I did it! I just had to change the #each statement to: {#each cards.slice(0,5) as card (card)}

MarkBoots•10mo ago

You could also have an array of 10 values (or what ever) and then grab some values randomly out of it

const numbers = Array.from({length: 10}, (_, i) => i + 1); 
console.log(numbers) /* /* [1,2,3,4,5,6,7,8,9,10] */

const randomList = randomFromArray(numbers, 5);
console.log(randomList); /* [1,5,10,3,8] */

function randomFromArray(array, amount){
  const randomList = [];
  for(let i = 0; i < Math.min(amount, array.length); i++){
    const idx = Math.floor(Math.random() * array.length);
    randomList.push(...array.splice(idx, 1));
  }
  return randomList;
}

const numbers = Array.from({length: 10}, (_, i) => i + 1); 
console.log(numbers) /* /* [1,2,3,4,5,6,7,8,9,10] */

const randomList = randomFromArray(numbers, 5);
console.log(randomList); /* [1,5,10,3,8] */

function randomFromArray(array, amount){
  const randomList = [];
  for(let i = 0; i < Math.min(amount, array.length); i++){
    const idx = Math.floor(Math.random() * array.length);
    randomList.push(...array.splice(idx, 1));
  }
  return randomList;
}

CDLOP•10mo ago

That's very interesting, thanks for providing the code! pretty cool to see

Gaming

Programming

How to add more number options, but keep the card count at 5 in Memory Card?