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?

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

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?

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.

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]));

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.

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.

Yeah, I'd think so too.

matchb is already defined like that:

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

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();

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

Your original code is in the working example. The array names are changed to reflect the arrays of the images.

Thanks, I've put this in the reposition() function in the code, working example here. The variables are towards top of script. I'm not sure what comparing for a mis-match accomplishes, but I also tried your code with == instead of !=, and sameb = true for an alert if arrays matched, and I did get an alert when the 0 image is in upper left, which tells me that the loop is not checking for ALL array elements to be in the right order [ 0, 1, 2, 3] (matchb variable).

So more help is appreciated. After this array (images) is in correct order, I need new array of images to appear (imagesy). Of course you can't see those now because the game is only working with the one set of 4 images (imagesb). Thanks.

 

 

Start with a variable that is set to true, which is what you use to keep track of whether the arrays are equal.

Thanks, this could be like var matchyellow = true;

Please point to examples of these? These "connections" are not in basic tutorials, and I have no idea how they would interact with the puzzle game. Thanks.

compare each element individually. If any element pairs are different, set the variable to false. At the end of the loop if the variable is still set to true then the arrays have the same elements, otherwise they don't. There are also other array methods you could use, like an intersection to compute the set of elements that both arrays have in common, or a diff to compute the set of elements that are only in one array but not both. If the diff has any elements at all then the arrays are not equal.

 

You should have the order of the solution in an array.

 

you can see my attempts at this above...how to compare current state with desired result and then switch to new set of images? I'm not seeing how tutorial shows how to do that.

This is my attempt at for loop:

for (i=0; i < 7; i++) {     if (tiles[4,5,6,7] === "p"+matchy[i]+".png") {alert("Change images.");    } }

If you want to compare 2 arrays you need to loop through them and compare each element.

Thanks JSG, would you please give me a 1-liner to get started comparing array elements so that if an array is in correct order, a new array of images appears?

Here is a demo of the game using Ingolme's graphic art. So after puzzle is solved, how to make new array of 4 images appear (preferably fade in), solve that puzzle, and move on to the next?

Advice on post above please. I'm stuck.

Thanks, I've added new <img> elements and corresponding document.getElementById's in tile array, and created unique variables:

var imagesb = [ 3, 2, 1, 0]; var imagesy = [ 7, 6, 5, 4];var imagesr = [ 8, 9, 10, 11];

using these image vars, and not using selectRound() anywhere, the game works, without this:

if (imagesy[(1-x)+y*2]==3 || imagesy[x+(1-y)*2]==3) {

...and just using this:

if (imagesy) {

When imagesy is ordered like: [ 4, 5, 6, 7 ] (puzzle complete), how to replace with new array of images, such as imagesr?

imagesy:

-------------------

| 4 | 5 |

| | |

|------------------

| | |

| 6 | 7 |

------------------

I'm trying a few things inside and outside reposition(). This one is not alerting:

if (reposition("p"+imagesy[ 4, 5, 6, 7 ]+".png")) {alert("Show Red round."); //also tried: selectRound(round3);}

if (reposition(imagesy[ 4, 5, 6, 7 ].onclick)) {  //also trying onmousedownalert("Show Red round."); // also tried: selectRound(round3);}

if (tiles[i].onclick === [ 4, 5, 6, 7 ]) { //also trying (imagesy.onclick & onmousedown alert("Show Red round");}    reposition();

So add a bunch of <img> elements and corresponding document.getElementById's in tile array? How/where will selectRound function work? Thanks.

What the round arrays do, and all they ever need to do, is replace the images for new ones at the very beginning of the match. After that, forget that round exists. Everything else you do with the tiles depends only on the tiles and images arrays.

 

 

OK thanks, I know what the program does but not sure how it's doing it. The for loops enable re-arranging the pngs. I know that adding selectRound(round2) in function reposition is not selecting round2 images (it's selecting round1), and that the game functions as normal. But, I need to use those different rounds as you've created. It's like selectRound function is not being called from within function reposition.

function reposition() {              selectRound(round2);          for (var y=0; y<2; y++) {            for (var x=0; x<2; x++) {                var i = x+y*2;                tiles[i].src = "p"+images[i]+".png";.......................................

Thanks so much. No errors now, but puzzle aspect still not working with selectRound. I think for loops refer to moving the images around quadrant. Starting position is like this, with 1 and 0 clickable; clicking 1 switches 1 and 3; clicking 0 switches 0 and 3, etc:

-------------------

| 3 | 2 |

| | |

|------------------

| | |

| 1 | 0 |

------------------

function reposition() {        selectRound(round2);          for (var y=0; y<2; y++) {          for (var x=0; x<2; x++) {                var i = x+y*2;      //  tiles[i].src = "p"+images[i]+".png"; //original      //  tiles[i].src = "p"+selectRound(round2)[i]+".png";          if (images[(1-x)+y*2]==3 || images[x+(1-y)*2]==3) { //replacing "images" with round2 doesn't change anything                 tiles[i].style.cursor = "pointer";                tiles[i].onmousedown = function(id) {return function() {cliss(images[id]); return false;}}(i);

Thanks Ingolme, your selectRound function renders the proper array of .png (round2, round3 etc), but the puzzle aspect of clicking and moving .png is not working (was working before with one set of png). I included your "round" variables and selectRound function:

var tiles = [        document.getElementById("p0"),        document.getElementById("p1"),        document.getElementById("p2"),        document.getElementById("p3")];var round1 = [ "p0.png", "p1.png", "p2.png", "p3.png" ];var round2 = [ "p4.png", "p5.png", "p6.png", "p7.png" ];var round3 = [ "p8.png", "p9.png", "p10.png", "p11.png" ];function selectRound(round) {    for(var i = 0; i < tiles.length; i++) {        tiles[i].src = round[i];    }}  ................................

I've narrowed problem to this section:

function reposition() {        for (var y=0; y<2; y++) {            for (var x=0; x<2; x++) {                var i = x+y*2;                // tiles[i].src = "p"+images[i]+".png"; This works with one set of .png                  tiles[i].src = selectRound(round2); //Ingolme code; Also tried "p"+selectRound(round2)[i]+".png"if (selectRound(round2)[(1-x)+y*2]==3 || selectRound(round2)[x+(1-y)*2]==3) { // Uncaught Type Error here, cannot rread property '1' of undefined