How do I get my shuffle button to shuffle the pieces in my array?

Question

I am creating a tile swap puzzle and came across a problem after writing my javascript. My puzzle pieces won't shuffle at all. I want to make sure the puzzle is solved when the page is loaded so the user can shuffle it using the button. I was wondering if my initialize function has something to do with the problem since it is supposed to show the solved puzzle in the beginning. How do I tackle this?

Link to the jsfiddle: https://jsfiddle.net/Relativ/5fvx8meL/13/#&togetherjs=r5Em1xsJQS

var selPieces = [];
var allPieces = document.getElementById("img-holder");

function initialize()
{
    orderArray = []
    for (var i = 0; i < allPieces.length; i++)
    {
        orderArray.push(i+1)
    }

}

function shuffle()
{
    for (var i = 0; i < allSlices.length; i++) 
    {
        allPieces.addEventListener('click',selectMe)
        var rand = Math.floor(Math.random()*orderArray.length)
         allPieces[i].style.order = orderArray[rand];
         orderArray.splice(rand,1);
    }
}
function selectMe(){
    this.style.border = "2px solid green";
    selPieces.push(this);
    if(selPieces.length === 2){
        // get order of clicks
        let orderFirst = allPieces[i];
        let orderSecond = allPieces[i]
        //reoreder
        selPieces[0].style.order = orderSecond;
        selPiece[1].style.order = orderFirst;

        selPiece[0].style.border = "none";
        selPiece[1].style.border = "none";

        // reset 
        selPieces.length = 0;
        checkIsComplete()
    }
}
function checkIsComplete(){
    let currentDiv = document.getElementById('.'+currentView);
    allPieces = document.getElementById("img-holder");
    let correctOrder = [];
    for (let i = 0; i < allPieces.length; i++) {
        correctOrder.push(i+1)
    }
    let currentOrder = [];
    for (let i = 0; i < allPieces.length; i++) {
        const piece = allPieces[i];
        currentOrder.push
    }
    if(currentOrder.toString() == correctOrder.toString()){
        let activeLink = document.getElementById("active");
        activeLink.classList.add('finished');
        currentDiv.style.border = "5px solid green";
        currentDiv.style.boxShadow = "0 0 16px green";
        alert("Winner! ... Press Start and Play Again");
    }

}

* {
    box-sizing: border-box;
  }
  
  body {
    margin: 0;
    background: radial-gradient(#9D5900, #3D2200);
  }
  .game-container {
    display: grid;
    grid-template-columns: repeat(4, auto);
    grid-gap: 10px;
    margin: 50px;
    justify-content: center;
 
  }
  
  .card {
    height: 100%;
    width: 100%;
  }

  .img-holder {
    flex-basis: 50%;
}

Ghost · Accepted Answer

I identified 4 errors related to shuffle not randomizing the pieces in your code. First, you are using getElementsById instead of getElementsByClassName, which would be returning only one element (which it isn't because img-holder is a class and not id) and so length, is undefined. Second, you didn't call shuffle in initialize function. Third, In the for loop, you are using allSlices.length even though the variable is named allPieces. Fourth, you are doing allPieces.addEventListener even though that is an array, so use allPieces[i].addEventListener.

var selPieces = [];
var allPieces = document.getElementsByClassName("img-holder"); // FIRST

function initialize()
{
    orderArray = []
    for (var i = 0; i < allPieces.length; i++)
    {
        orderArray.push(i+1)
    }
    shuffle() // SECOND

}

function shuffle()
{
    for (var i = 0; i < allPieces.length; i++) //THIRD
    {
        allPieces[i].addEventListener('click',selectMe) // FOURTH
        var rand = Math.floor(Math.random()*orderArray.length)
         allPieces[i].style.order = orderArray[rand];
         orderArray.splice(rand,1);
    }
}
function selectMe(){
    this.style.border = "2px solid green";
    selPieces.push(this);
    if(selPieces.length === 2){
        // get order of clicks
        let orderFirst = allPieces[i];
        let orderSecond = allPieces[i]
        //reoreder
        selPieces[0].style.order = orderSecond;
        selPiece[1].style.order = orderFirst;

        selPiece[0].style.border = "none";
        selPiece[1].style.border = "none";

        // reset 
        selPieces.length = 0;
        checkIsComplete()
    }
}
function checkIsComplete(){
    let currentDiv = document.getElementById('.'+currentView);
    allPieces = document.getElementById("img-holder");
    let correctOrder = [];
    for (let i = 0; i < allPieces.length; i++) {
        correctOrder.push(i+1)
    }
    let currentOrder = [];
    for (let i = 0; i < allPieces.length; i++) {
        const piece = allPieces[i];
        currentOrder.push
    }
    if(currentOrder.toString() == correctOrder.toString()){
        let activeLink = document.getElementById("active");
        activeLink.classList.add('finished');
        currentDiv.style.border = "5px solid green";
        currentDiv.style.boxShadow = "0 0 16px green";
        alert("Winner! ... Press Start and Play Again");
    }

}

* {
    box-sizing: border-box;
  }
  
  body {
    margin: 0;
    background: radial-gradient(#9D5900, #3D2200);
  }
  .game-container {
    display: grid;
    grid-template-columns: repeat(4, auto);
    grid-gap: 10px;
    margin: 50px;
    justify-content: center;
 
  }
  
  .card {
    height: 100%;
    width: 100%;
  }

  .img-holder {
    flex-basis: 50%;
}

EDIT: Final code after fixing all the errors:

var selPieces = [];
var allPieces = document.getElementsByClassName("img-holder");

function initialize()
{
    orderArray = []
    for (var i = 0; i < allPieces.length; i++)
    {
        orderArray.push(i+1)
    }
      shuffle();
}

function shuffle()
{
    for (var i = 0; i < allPieces.length; i++) 
    {
        allPieces[i].addEventListener('click',selectMe);
        var rand = Math.floor(Math.random()*orderArray.length);
         allPieces[i].style.order = orderArray[rand];
         orderArray.splice(rand,1);
    }
}
function selectMe(){
    this.style.border = "2px solid green";
    selPieces.push(this);
    if(selPieces.length === 2){
        // get order of clicks
        let orderFirst = selPieces[0].style.order;
        let orderSecond = selPieces[1].style.order;
        //reoreder
        selPieces[0].style.order = orderSecond;
        selPieces[1].style.order = orderFirst;

        selPieces[0].style.border = "none";
        selPieces[1].style.border = "none";

        // reset 
        selPieces.length = 0;
        checkIsComplete();
    }
}
function checkIsComplete(){
    let currentDiv = document.getElementsByClassName("game-container")[0];
    allPieces = document.getElementsByClassName("img-holder");
    let correctOrder = [];
    for (let i = 0; i < allPieces.length; i++) {
        correctOrder.push(i+1)
    }
    let currentOrder = [];
    for (let i = 0; i < allPieces.length; i++) {
        const piece = allPieces[i].style.order;
        currentOrder.push(piece)
    }
    if(currentOrder.toString() == correctOrder.toString()){
        //let activeLink = document.getElementById("active");
        //activeLink.classList.add('finished');
        currentDiv.style.border = "5px solid green";
        currentDiv.style.boxShadow = "0 0 16px green";
        alert("Winner! ... Press Shuffle and Play Again");
    }

}

* {
    box-sizing: border-box;
  }
  
  body {
    margin: 0;
    background: radial-gradient(#9D5900, #3D2200);
  }
  .game-container {
    display: grid;
    grid-template-columns: repeat(4, auto);
    grid-gap: 10px;
    margin: 50px;
    justify-content: center;
 
  }
  
  .card {
    height: 100%;
    width: 100%;
  }

  .img-holder {
    flex-basis: 50%;
}

How do I get my shuffle button to shuffle the pieces in my array?

Answers (1)

Related Questions