Matching Javascript User array to "Solution" Array

Question

Looking for a push in the right direction. I'm working on a pure javascript logic game where users must get 3 of each colour in each row/column without having 3 of one colour consecutively. What I'm trying to do now is compare the user grid with the solution grid which I have created.

My issue is that it seems as though the only thing I'm currently changing on my grid is the class which holds the css styles of each tile. Since my table is created on the fly via javascript, is there any way I can compare the two tables without having to display my solution grid? I.e [0][0]==[0][0], but I can't figure out what I must do to compare the two.

*I'm not looking to have a function created for me, but rather for a place to start

    //6x6 array
var solutionArray = new Array(6);
solutionArray[0] = new Array(6);
solutionArray[1] = new Array(6);
solutionArray[2] = new Array(6);
solutionArray[3] = new Array(6);
solutionArray[4] = new Array(6);
solutionArray[5] = new Array(6);

    //6x6 array
var userArray = new Array(6);
userArray[0] = new Array(6);
userArray[1] = new Array(6);
userArray[2] = new Array(6);
userArray[3] = new Array(6);
userArray[4] = new Array(6);
userArray[5] = new Array(6);

var tile = {colour1:blue, colour2:white, colour3:grey};
var z = "";
var blue = tile.colour1 = "blue";
var white = tile.colour2 = "white";
var grey = tile.colour = "grey";

solutionArray[0][0] = blue;
solutionArray[0][1] = white;
solutionArray[0][2] = blue;
solutionArray[0][3] = blue;
solutionArray[0][4] = white;
solutionArray[0][5] = blue;

solutionArray[1][0] = white;
solutionArray[1][1] = blue;
solutionArray[1][2] = white;
solutionArray[1][3] = blue;
solutionArray[1][4] = blue;
solutionArray[1][5] = white;

solutionArray[2][0] = blue;
solutionArray[2][1] = white;
solutionArray[2][2] = blue;
solutionArray[2][3] = white;
solutionArray[2][4] = white;
solutionArray[2][5] = blue;

solutionArray[3][0] = white;
solutionArray[3][1] = blue;
solutionArray[3][2] = white;
solutionArray[3][3] = white;
solutionArray[3][4] = blue;
solutionArray[3][5] = blue;

solutionArray[4][0] = blue;
solutionArray[4][1] = blue;
solutionArray[4][2] = white;
solutionArray[4][3] = blue;
solutionArray[4][4] = white;
solutionArray[4][5] = white;

solutionArray[5][0] = blue;
solutionArray[5][1] = white;
solutionArray[5][2] = blue;
solutionArray[5][3] = white;
solutionArray[5][4] = blue;
solutionArray[5][5] = white;

//USER ARRAY
userArray[0][0] = blue;
userArray[0][1] = grey;
userArray[0][2] = grey;
userArray[0][3] = grey;
userArray[0][4] = grey;
userArray[0][5] = blue;

userArray[1][0] = grey;
userArray[1][1] = blue;
userArray[1][2] = grey;
userArray[1][3] = grey;
userArray[1][4] = grey;
userArray[1][5] = white;

userArray[2][0] = grey;
userArray[2][1] = grey;
userArray[2][2] = blue;
userArray[2][3] = grey;
userArray[2][4] = white;
userArray[2][5] = grey;

userArray[3][0] = grey;
userArray[3][1] = grey;
userArray[3][2] = grey;
userArray[3][3] = grey;
userArray[3][4] = grey;
userArray[3][5] = grey;

userArray[4][0] = grey;
userArray[4][1] = grey;
userArray[4][2] = white;
userArray[4][3] = grey;
userArray[4][4] = grey;
userArray[4][5] = white;

userArray[5][0] = grey;
userArray[5][1] = grey;
userArray[5][2] = grey;
userArray[5][3] = grey;
userArray[5][4] = blue;
userArray[5][5] = white;

var x = document.createElement("TABLE");
x.setAttribute("id", "gridTable");
document.body.appendChild(x);

for (i = 0; i < 6; i++) {
  //output the row tag
  var y = document.createElement("TR");
  y.setAttribute("id", "row" + i);
  document.getElementById("gridTable").appendChild(y)

  for (j = 0; j < userArray.length; j++) {

    ///output the td tag
    var z = document.createElement("TD");
    if (userArray[i][j] == blue) {
      z.setAttribute("class", "blue");
    } else if (userArray[i][j] == white) {
      z.setAttribute("class", "white");
    } else if (userArray[i][j] == grey) {
      z.setAttribute("class", "grey");
    }
    document.getElementById("row" + i).appendChild(z);

  }
}

document.querySelector("#gridTable").addEventListener("click", function(event) {
  if(event.target.classList.contains("blue")){
    event.target.className = 'grey';
  }else if(event.target.classList.contains("grey")){
    event.target.className = 'white'
  }else if(event.target.classList.contains("white")){
    event.target.className = 'blue'
  }
});

.blue {
  background-color: blue;
}
.grey{
background-color:grey;
}

.white{
background-color:white;
}
td {
  text-align: center;
  border: 1px solid black;
  padding: 3px;
  height: 50px;
  width: 50px;
}
table {
  border-collapse: collapse;
}
table td {
  cursor: pointer;
}

@Pamblam That's not how array comparisons work, you need to use loops and compare each element. — Spencer Wieczorek, Oct 20 '16 at 14:13
`if(JSON.stringify(myarray) === JSON.stringify(myotherarray)) ...` — I wrestled a bear once., Oct 20 '16 at 14:15

score 1 · Answer 1 · edited May 23 '17 at 12:00

1

You can stringify the arrays and compare them, much quicker and easier than looping...

var array1 = ["asasdf","asdf","asdf"];
var array2 = ["asasdf","asdf","asdf"];
var array3 = ["asdf","asdf","asdf"];

if(JSON.stringify(array1)===JSON.stringify(array2)) alert("one and two are same");
if(JSON.stringify(array1)!==JSON.stringify(array3)) alert("one and three are not same");

fiddle

For posterity, if you have a lot of data you can use this method (from here):

Array.prototype.equals = function (array) {
    // if the other array is a falsy value, return
    if (!array)
        return false;

    // compare lengths - can save a lot of time 
    if (this.length != array.length)
        return false;

    for (var i = 0, l=this.length; i < l; i++) {
        // Check if we have nested arrays
        if (this[i] instanceof Array && array[i] instanceof Array) {
            // recurse into the nested arrays
            if (!this[i].equals(array[i]))
                return false;       
        }           
        else if (this[i] != array[i]) { 
            // Warning - two different object instances will never be equal: {x:20} != {x:20}
            return false;   
        }           
    }       
    return true;
}

Use like: if(myarray.equals(anotherArray)){...}

edited May 23 '17 at 12:00

Community

1
1

answered Oct 20 '16 at 14:20

I wrestled a bear once.

22,983
19
69
116

That's actually slower and still uses loops for conversions; it's slower than normal iterations, [see this answer](http://stackoverflow.com/a/14853974/3149020). – Spencer Wieczorek Oct 20 '16 at 14:22
@SpencerWieczorek - that is not necessarily true. you can't compare (low level) loops in compiled c (or whatever language the JS interpretter is in) to high level loops in javascript. that answer is comparing apples to oranges and making assumptions. – I wrestled a bear once. Oct 20 '16 at 14:27
It's the comparison between iterations in JavaScript compared to using `JSON.stringify` for comparison, the answer never mentioned any low level languages. Along with that there are benchmarks showing that normal iteration is indeed more optimal and faster than `JSON.stringify`. The reason why is because it's still converting to string and comparing them. – Spencer Wieczorek Oct 20 '16 at 14:49
i understand that looping in js is computed faster. i'm not disputing that. i'm disputing the explanation provided. when `JSON.stringify` converts an array to a string, the JS interpreter (which is usually written in c/c++ afaik) is performing the loop, not javascript. the point is, the loops executed by the interpreter are closer to the processor than a java script loop. what i meant by quicker is that it's quicker to type, as far as processing time is concerned, it's really not enough of a difference to take into consideration unless you're processing ungodly amounts of data... – I wrestled a bear once. Oct 20 '16 at 15:05
i mean, technically the interpreter is doing all the loops, but stringify doesn't require interface with the typed javascript.. – I wrestled a bear once. Oct 20 '16 at 15:07

score 0 · Answer 2 · answered Oct 20 '16 at 14:09

0

Let's say you have a 2 dimensional solution array of 3 by 3 and user array of 3 by 3:

var equal = true;

function compare(userArray, solutionArray){
    userArray.forEach(function(subArray, index){
        userArray[index].forEach(function(item, subindex){
            equal = equal && (userArray[index][subindex] === solutionArray[index][subindex]);
        });
    });
}

answered Oct 20 '16 at 14:09

ardilgulez

1,856
18
19

What exactly are you doing here? – Jeremy Stone Oct 20 '16 at 14:25
I'm comparing userArray[x][y] and solutionArray[x][y] for equality for every x in 0 to 5 (both inclusive) and for every y in 0 to 5 (both inclusive). If the equality doesn't hold for any (x, y) combination, I return false. Otherwise, I return true. – ardilgulez Oct 20 '16 at 14:49
Is there any way that I can get the current class when a tile is clicked and compare that value to the values in my solutionArray? I.e if a certain user tile is blue, get class "blue" and compare that to solutionArray[x][y] = blue? Thinking I may have taken the wrong route building my grid with regards to incorporating logic. – Jeremy Stone Oct 20 '16 at 14:57
Yes, you can retrieve the x and y when a tile is clicked and make a comparison in an onclick listener. – ardilgulez Oct 20 '16 at 15:12

Matching Javascript User array to "Solution" Array

2 Answers2