Jump to content

paulmo

Members
  • Posts

    451
  • Joined

  • Last visited

Everything posted by paulmo

  1. 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?
  2. That's what I'm asking, how to get current state of game array?
  3. 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?
  4. 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.
  5. 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]));
  6. 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.
  7. 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.
  8. 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.
  9. matchb is already defined like that: var matchb = [ 0, 1, 2, 3 ];
  10. 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();
  11. 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();
  12. How to give an alert on this so that I can see some kind of behavior, whether matching or not?
  13. Your original code is in the working example. The array names are changed to reflect the arrays of the images.
  14. 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.
  15. 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.
  16. 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."); } }
  17. 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?
  18. Advice on post above please. I'm stuck.
  19. 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();
  20. So add a bunch of <img> elements and corresponding document.getElementById's in tile array? How/where will selectRound function work? Thanks.
  21. 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";.......................................
  22. 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 | ------------------
  23. 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.
  24. 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";
×
×
  • Create New...