Jump to content

Puzzle Game with Images Help


paulmo

Recommended Posts

For a puzzle game with 4 images, when they're arranged in the proper order (0, 1, 2, 3), how to re-set game to replace p0.png, p1.png, p2.png etc. with new images: p4.png, p5.png, p6.png etc. for the second round?

<body>    <img id="p0" src="p0.png" style="position: fixed; left: 100px; top: 60px; cursor: pointer;">    <img id="p1" src="p1.png" style="position: fixed; left: 150; top: 100px;">    <img id="p2" src="p2.png" style="position: fixed; right: 150px; top: 150px;">    <img id="p3" src="p3.png" style="position: fixed; left: 150px; top: 150px;">  <script>    var tiles = [        document.getElementById("p0"),        document.getElementById("p1"),        document.getElementById("p2"),        document.getElementById("p3")];    var images = [ 3, 2, 1, 0];    for (var i=0; i<4; i++) {        tiles[i].style.position = "fixed";
Link to comment
Share on other sites

  • Replies 61
  • Created
  • Last Reply

Top Posters In This Topic

Make an array for each round.

var round1 = [ "p1.png", "p2.png", "p3.png", "p4.png" ];var round2 = [ "p5.png", "p6.png", "p7.png", "p8.png" ];

Make a function that selects a round

function selectRound(round) {    for(var i = 0; i < tiles.length; i++) {        tiles[i].src = round[i];    }}

Call that function when you want to change the tile images:

selectRound(round2);
Link to comment
Share on other sites

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

Thanks for advice.

Edited by paulmo
Link to comment
Share on other sites

selectRound() doesn't return anything, it replaces the images on its own. You can't assign it to a variable nor concatenate it with a string.

 

Here's how it should be used:

function reposition() {    selectRound(round2); // changes the images of the puzzle pieces automatically    // I'm not sure what these loops are meant to do    for (var y=0; y<2; y++) {        for (var x=0; x<2; x++) {
Link to comment
Share on other sites

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

I need the game to automatically display new round after current round is solved:

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

| 0 | 1 |

| | |

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

| | |

| 2 | 3 |

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

Link to comment
Share on other sites

Do you have any idea what the program does?

 

I can't know, because you haven't given the full specification of what you're trying to achieve and a lot of your proposed solutions don't make much sense.

 

You have three different arrays with different data.

  • tiles: a list of references to HTML <img> elements.
  • images: a list of integers.
  • round1, round2... etc: A list of strings representing filenames.

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.

 

It looks as if you're trying to reorder the tiles when one game ends.

If that's the case, I need to know which part of your code determines the order of the tiles, and also what order you want to set it to.

Link to comment
Share on other sites

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";.......................................
Link to comment
Share on other sites

What's happening is that the images array only had numbers 0 to 3. So only images p0.png to p3.png will be assigned to the tiles.

 

My proposed solution would be to reorder the tiles array and reposition the <img> elements in the document rather than try changing their src attribute.

Link to comment
Share on other sites

All the selectRound() function does is change what the tiles look like. Not their order or position.

 

Whenever you want to change the appearance of the tiles, call selectRound() and pass an array with new images for the tiles.

 

The algorithm that puts the tiles on the page and orders them is unrelated to what the tiles look like.

Link to comment
Share on other sites

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

This one throws: Uncaught TypeError: Cannot read property 'onclick' of undefined:

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

This one not alerting either on puzzle complete:

if (tiles[i].onclick === [ 4, 5, 6, 7 ]) { //also trying (imagesy.onclick & onmousedown alert("Show Red round");}    reposition();
Edited by paulmo
Link to comment
Share on other sites

What exactly are you trying to do with that code? None of it is proper Javascript syntax and I can't read your mind.

 

You really should go back to the Javascript tutorial and read and practice with the examples there. I could, if I knew what you were trying to do, write some code for you, but it would be pointless because you would still have no idea why it worked.

Link to comment
Share on other sites

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?

Edited by paulmo
Link to comment
Share on other sites

You should have the order of the solution in an array. Every time a piece is moved, compare the current order of the pieces to the solution array. You can use a for() loop to compare the arrays.

 

If the two arrays are the same then you know the puzzle is solved and you can load a new puzzle.

Link to comment
Share on other sites

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.");    } }
Edited by paulmo
Link to comment
Share on other sites

This is the W3Schools example of how to loop through an array:

for (i = 0; i < cars.length; i++) {    text += cars[i] + "<br>";}

The variable i refers to the index of the array that is currently being used. The .length property indicates how many elements are in the array.

 

If you're comparing two arrays, you just need to make sure that element i of one array is the same as the element i of the other array.

Link to comment
Share on other sites

if (tiles[4,5,6,7]

It is never valid to write that. When you refer to an element of an array you give it a single index, not a bunch of indexes separated by commas. You can also not compare arrays like that, this comparison is false:
var ar = [1,2,3];console.log(ar == [1,2,3]);
There is not a 1-line solution to comparing 2 arrays. You loop through them and compare each individual element if that's how you consider them to be equal. Even empty arrays are not considered equal, this also evaluates to false:
var ar = [];console.log(ar == []);
Start with a variable that is set to true, which is what you use to keep track of whether the arrays are equal. Loop through the arrays and 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.
Link to comment
Share on other sites

 

 

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.

 

Edited by paulmo
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...