Merged array returns an extra value

[smsgoldberg]

What's the problem you're trying to solve?

After much wailing and gnashing of teeth, I finally managed to get a basic Fisher Yates shuffle to work on my array. Well, sort of -- the array seems bent on returning an additional instance of one object after the shuffle.

Post any code you think might be relevant (one fenced block per file)

const imageArray = [];

/*---objects---*/

class dog {
  constructor(number, backgroundColor) {
      this.number = number;
      this.backgroundColor = backgroundColor;
  }
}

const swimmingDog = new dog(1, 'blue');
imageArray.push(swimmingDog);

const smilingDog = new dog(2, 'green');
imageArray.push(smilingDog);

const puppyDog = new dog(3, 'yellow');
imageArray.push(puppyDog);

const olderDog = new dog(4, 'red');
imageArray.push(olderDog);

const sleepingDog = new dog(5, 'purple');
imageArray.push(sleepingDog);

const jumpingDog = new dog(6, 'white'); 
imageArray.push(jumpingDog);

const ballDog = new dog(7, 'black');
imageArray.push(ballDog);

const runningDog = new dog(8, 'orange');
imageArray.push(runningDog);

/*-----constants -----*/
//we will keep all our images in an image array - and randomize their positioning everytime the game is initialized
//const imageArray = [];
const matchArray = Array.from(imageArray);
const mergedDogArray = imageArray.concat(matchArray);
console.log(mergedDogArray);
const shuffledTiles = shuffleTiles(mergedDogArray);

/*-----state variables ----*/
let board;
let player;
let endCondition; 

/*---cached elements---*/
 let scoreboard = document.querySelector('h2');
 let playAgainButton = document.querySelector('button');
 let tiles = [...document.querySelectorAll('.circles')];

/* --- event listeners ---  */
//enables player to reset the board for a new game
playAgainButton.addEventListener('click', initializeGame);

/*----functions----*/

initializeGame();

//this function initializes each new game 
function initializeGame() {
  //the win condition will be set to null
 endCondition = null;
 shuffleTiles(mergedDogArray);
 console.log(shuffledTiles);
  //populateBoard(shuffledTiles);
}

//shuffle the dog tiles
function shuffleTiles(dogArray) {
  let i, j, k;
  //let's at least try a fisher-yates shuffle
  //i should start at 0 since everything is zero-indexed
  for (i = 0; i < dogArray.length; i++) {
       j = Math.floor(Math.random() * (i +1));
       dogArray[k] = dogArray[i];
       dogArray[i] = dogArray[j];
       dogArray[j] = dogArray[k];
  }
    return dogArray;
  }

If you see an error message, post it here. If you don't, what unexpected behavior are you seeing?

I'm not seeing an error message.

What is your best guess as to the source of the problem?

I'm not sure, because my instinct is still that this is some kind of indexing issue, but both attempts I made to fix it from that perspective failed.

What things have you already tried to solve the problem?

I tried writing (dogArray.length - 1) on the theory that it might be a weird indexing error, but this changed nothing. I also tried taking out i+1 in the Fisher Yates shuffle -- I struggled with the concept back when I was taking C++ and the JavaScript implemenation looks slightly different from what I remember.

Paste a link to your repository here

https://github.com/smsgoldberg/StayGolden

[asands94]

Great job so far on this Sarah! But the shuffle is a little bit off. Here is the fisher-yates shuffle from this source

let Array = [25,1,5,10,40,100]; 
      let len = Array.length; 
      let x; 
      function fy() { 
         for (x = len -1; x > 0; x--) { 
            let y = Math.floor(Math.random() * x) 
            let temp = Array[x] 
            Array[x] = Array[y] 
            Array[y] = temp 
         } 
      };

[smsgoldberg]

Thank you so much! This way worked much better.