4

I am making a matching game for a group project in a JavaScript Jquery class. I have 36 images that I can use for the tiles. I want the game to randomly pick 18 of these and put them into a new array. I also need these 18 numbers in the new array twice, because that new array is going to be shuffled and then used the build the game board.

Here is my code:

let objects = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29','30', '31', '32', '33', '34', '35', '36'],

function cardList () {
    var cardList = [36];
    for (i = 0; i < cardList.length; i+=2) {
        cardList[i] = objects[Math.floor(Math.round((Math.random()*36)+1))];
        cardList[i+1] = cardList[i];
    }
    return cardList;
}

I tried to use the Chrome debugger on this and it this isn't creating all the numbers, it's just creating the two initial numbers.

There has got to be a better way to do this, I have looked at several examples of a matching game and most of those have the exact number of cards needs, which may be causing me problems.

Lisa
  • 201
  • 2
  • 8

3 Answers3

4

Since you (probably) don't want items to appear more than twice in the result, you should choose items without replacement. This is how I would do it:

const objects = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29','30', '31', '32', '33', '34', '35', '36'];
const getList = () => {
  const objs = objects.slice(0);
  const selected = [];
  for (let i = 0; i < 18; i++) {
    const index = Math.floor(Math.random() * objs.length);
    const [num] = objs.splice(index, 1);
    selected.push(num, num);
  }
  return selected;
};
console.log(getList());
CertainPerformance
  • 356,069
  • 52
  • 309
  • 320
  • The way you have this, with "const" in front of getList, means that the array that is getList will be a constant, but the numbers that will be generated each time each time you call getList will be different, correct? I really like JavaScript and I want to make sure I understand the code I am looking at. Thanks – Lisa Jun 11 '18 at 00:23
  • @Lisa It's just a way of defining a function - in this case, it's no different from `function getList() {`, it doesn't imply anything about the return value. – CertainPerformance Jun 11 '18 at 00:25
2

To pick the numbers I would simply shuffle the array and take 18 unique elements from it. The best method to shuffle an array is the Fisher-Yates shuffle, below implementation for the shuffle is taken from this answer. All you need to do then is to "concat the array with itself" and you got your starting array with 18 numbers that all exist twice in the array. You could obviously directly shuffle the resulting array then, and voila. 

let array = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29','30', '31', '32', '33', '34', '35', '36'];

function buildCardList(array) {
  const shuffled = shuffle(array).slice(0,18);
  return shuffle(shuffled.concat(shuffled));
}


console.log(buildCardList(array));


// Origin: https://stackoverflow.com/a/2450976/3993662
function shuffle(array) {
  var currentIndex = array.length, temporaryValue, randomIndex;

  // While there remain elements to shuffle...
  while (0 !== currentIndex) {

    // Pick a remaining element...
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;

    // And swap it with the current element.
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }

  return array;
}
baao
  • 71,625
  • 17
  • 143
  • 203
1

See the following working code I made two changes

1) Changed the line var cardList = [36]; to var cardList = Array(36);

2) Changed cardList[i] = objects[Math.floor(Math.round((Math.random()*36)+1))]; to 

let index = Math.floor((Math.random()*objects.length));
cardList[i] = objects[index];

And to avoid duplicates I added

objects.splice(index,1);


let objects = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29','30', '31', '32', '33', '34', '35', '36'];

function cardList () {
    var cardList = Array(36);
    for (i = 0; i < cardList.length; i+=2) {
        let index = Math.floor((Math.random()*objects.length));
        cardList[i] = objects[index];
        cardList[i+1] = cardList[i];
        objects.splice(index,1);
    }
    return cardList;
}

console.log(cardList());
Md Johirul Islam
  • 5,042
  • 4
  • 23
  • 56