Puzzle Game with Images Help

[paulmo]

How to give an alert on this so that I can see some kind of behavior, whether matching or not?

[justsomeguy]

You can add an alert statement after the loop.

[paulmo]

This is included at bottom of reposition() function. It alerts "No match" when page loads, and for every puzzle image click, and even when the arrays match.

for (var i = 0; i <  tiles.length; i++) {     if (tiles[i] != matchb[i]) {    sameb = false;    break;    }}alert("No match");         }        }    }    reposition();

[justsomeguy]

On the page you linked to you moved the variable initialization for same to the top of the page. You need to set that variable to true every time before you run the loop. That means that you consider the arrays to be equal unless you find something that is different. When you move that variable then it will always be false after the first time you find any difference, it will never be set to true again.

[paulmo]

OK, getting alert on page load, on every image click, and even when arrays match. I'd think that this should only be alerting when tiles != matchb (although what I'm really after is knowing when tiles == 0, 1, 2, 3 so that I can show new images).

 

Also, changing sameb = true within loop doesn't change alert behavior.

var sameb = true;for (var i = 0; i <  tiles.length; i++) {     if (tiles[i] != matchb[i]) {    sameb = false; // changing to true doesn't change alert    alert("No match");    break;        }}           }        }    }    reposition();

Edited February 19, 2015 by paulmo

[Ingolme]

If you want to know whether the tiles[] array is [0, 1, 2, 3] then just make the matchb[] array equal to [0, 1, 2, 3] and use that code.

[paulmo]

matchb is already defined like that:

var matchb = [ 0, 1, 2, 3 ];

[Ingolme]

Then you should be able to know when the tiles are in the order you want them to be.

[paulmo]

Yeah, I'd think so too.

[justsomeguy]

If it says the arrays don't match, then the arrays don't match. That code is really simple, it's easy to follow it to see what it does, there aren't any clever hacks or tricks or anything. If you think the arrays should be matching, but the code says they aren't, then the problem is probably that your arrays are set to something other than what you're assuming.

[paulmo]

This does not alert even when tiles == matchb ( var matchb = [ 0, 1, 2, 3 ]):

for (var i = 0; i < tiles.length; i++) {     if (tiles[i] == matchb[i]) {    alert("match");    break;        }}

...whereas this correctly alerts on page load (you have to click alert few times before puzzle loads), but alerts "No match" every click, even when arrays match. So that's a problem:

for (var i = 0; i < tiles.length; i++) {     if (tiles[i] != matchb[i]) {    alert("No match");    break;        }}

When I substitute imagesb (instead of tiles), I get partially correct alerts on matches, whenever 1 or more image is in that slot [0, 1, 2, 3]. But I need the alert (which will ultimately become replacing fresh set of images) to alert only when all 4 images are in correct order [ 0, 1, 2, 3]:

for (var i = 0; i < imagesb.length; i++) {     if (imagesb[i] == matchb[i]) {    alert("match");    break;

Updated example shows this last for loop.

Edited February 19, 2015 by paulmo

[justsomeguy]

for (var i = 0; i < tiles.length; i++) {if (tiles == matchb) {alert("match");break;}}

Why the heck did you change it to use == instead of !=? Do you know what that is doing now?I think you need to stop guessing and start figuring this out. Get out a piece of paper and a pencil and write out your arrays, write one version where they match and one where they don't. Keep track of the variables same and i that I had in my original code. Then step through the code I originally gave you and execute it like the computer does, changing the values of variables on your paper as you go just like the computer would. You need to understand why the code I gave you works correctly to match 2 arrays, and then I want you tell me what the version that you changed it to will do. You need to understand how this stuff works.

[paulmo]

Why the heck did you change it to use == instead of !=? Do you know what that is doing now?

 

Because if you read the 2nd part of my response above, you'd see that != is throwing a "No match" alert even when the arrays match. So I'm experimenting. I know that == means equals to.

[justsomeguy]

Because if you read the 2nd part of my response above, you'd see that != is throwing a "No match" alert even when the arrays match.

No it doesn't. I guarantee that. It's provable. Like I said, it's not a complex piece of code. You've either changed my code so that it does something different, or the arrays do not in fact match.

I know that == means equals to.

But what does the code mean? If you take my original code and only change the operator:

var same = true;for (var i = 0; i < array1.length; i++) {  if (array1[i] == array2[i]) {    same = false;    break;  }}

After that runs, what does it mean if same is true? What does it mean if same is false? What are you actually telling it to check for now?

[paulmo]

There's no difference in the alert behavior when same = true or false, so I wouldn't know how that's changing anything or what it's checking for.

[justsomeguy]

so I wouldn't know how that's changing anything or what it's checking for.

That's part of the problem. For the code I posted in post 39, after that loop finishes same will be true if none of the element pairs match, and it will be false if at least one pair matches. Obviously, that's not what you're looking for.The code I posted works fine as-is. Instead of moving things like variable declarations or whatever and expecting that not to change how the code works, maybe just wrap it in a function and use that.

function array_match (array1, array2) {  if (array1.length != array2.length) {    return false;  }  var same = true;  for (var i = 0; i < array1.length; i++) {    if (array1[i] != array2[i]) {      same = false;      break;    }  }  return same;}

You don't have to take my word for it, verify it for yourself if you want to:

console.log(array_match([1,2,3], [2,1,3]));console.log(array_match([1,2,3], [1,2,3]));console.log(array_match([1,2,3], [1,2]));console.log(array_match([5,4,3,2,1,0], [5,4,3,2,1,0]));console.log(array_match([1,2], [1,2,3]));

[paulmo]

Updated here. Thanks for explanation of var same. All return "false" in console even in 1st console.log below, when puzzle is in correct order (matchb). I think the problem is that tiles variable does not account for what happens to tiles in reposition function (where tiles move onmousedown). So tiles variable below isn't right (neither is imagesb, that's just the initial order of the images when page loads). I don't know how to access what's happening to the changing tiles so that I can match that array to matchb, the order when puzzle solved.

function array_matchb (tiles, matchb) {    if (tiles.length != matchb.length) {    return false;    }    var same = true;    for (var i = 0; i < tiles.length; i++) {         if (tiles[i] != matchb[i]) {        same = false;        break;        }    }    return same;}console.log(array_matchb([3, 2, 1, 0], [0, 1, 2, 3]));console.log(array_matchb([1, 0], [0,1]));console.log(array_matchb([0, 1, 2, 3], [3, 2, 1, 0]));

Edited February 20, 2015 by paulmo

[justsomeguy]

Your click handler to move the images will also need to update the arrays to reflect what just happened.

[paulmo]

So do I have to do something with cliss function or reposition function or both and then how do I update arrays to show what happened? Thanks.

[justsomeguy]

Well, what do those functions do? Where is it appropriate to update the arrays? You might want to add some console.log statements to those functions to print out what they're doing if you're not sure.

[paulmo]

Looking at console.log clickSlot, emptySlot, tiles, tiles.onmousedown, shows me that none of these variables (or containing functions) are showing when the puzzle images are ordered [0, 1, 2, 3]. So that's why function array_matchb isn't showing when the array is ordered right: I don't have a proper 1st array variable. So how to make a variable that shows when array is ordered right?

[justsomeguy]

I'm not sure what you're asking, but you need 1 array that represents the current state of the game, and another that represents the winning condition. Those are what you would compare.

[paulmo]

That's what I'm asking, how to get current state of game array?

[Ingolme]

You're having a problem separating logic from presentation. Your current tiles[] array is actually used to reference HTML elements and has no numbers in it. You need another different array to keep track of the order of the tiles.

 

What would be ideal is that you did all the operations with just numbers. Forget the HTML exists while doing the game logic.

 

Have a separate program that reads data from the arrays and manipulates the page's HTML to represent that data.

[paulmo]

Would you give me an example of what doing the operations with just numbers looks like? And the "separate program" that reads data from arrays part?