Ingolme Posted February 21, 2015 Share Posted February 21, 2015 I'll attach a working script to this post. In this program, tiles[] is an array with four numbers. The numbers are reordered when the user clicks on the image elements. The game logic is in the move() function, the presentation is in the display() function. I copied the specifications of your current program, in your current program it's always tile 3 that gets moved when a user clicks on the puzzle so I kept it that way. test.html Link to comment Share on other sites More sharing options...
paulmo Posted February 24, 2015 Author Share Posted February 24, 2015 (edited) Ignolme, thank you, this is great! It works with different sets of images in array. I willl study your functions, especially move and display. The annotations help. And cool Tails art. Edited February 24, 2015 by paulmo Link to comment Share on other sites More sharing options...
paulmo Posted February 24, 2015 Author Share Posted February 24, 2015 How to delay the complete round (show complete puzzle for a couple seconds) before loading new round? Thanks. // If the round is complete, load the next round if(is_equal(tiles, solution)) { currentRound++; if(currentRound < images.length) { // Load the next round // alert("Next round!"); selectRound(currentRound); Link to comment Share on other sites More sharing options...
justsomeguy Posted February 24, 2015 Share Posted February 24, 2015 Check here:https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setTimeout Link to comment Share on other sites More sharing options...
paulmo Posted February 25, 2015 Author Share Posted February 25, 2015 Thanks, I'm trying this, but window not delaying if(is_equal(tiles, solution)) { window.setTimeout(solution, 2000); currentRound++; Link to comment Share on other sites More sharing options...
justsomeguy Posted February 25, 2015 Share Posted February 25, 2015 There's not much code there to comment on. Is solution a function that you want to run after 2 seconds? Where did the call to selectRound go? Link to comment Share on other sites More sharing options...
paulmo Posted February 25, 2015 Author Share Posted February 25, 2015 (edited) Sorry I missed that setTimeout takes a function. Here is complete is_equal function, I'm trying is_equal as function in setTimeout: if(is_equal(tiles, solution)) { currentRound++; if(currentRound < images.length) { // Load the next round // alert("Next round!"); selectRound(currentRound); } else { // The game has ended alert("Game over."); } } }//setTimeout window.setTimeout(is_equal, 2000); Edited February 25, 2015 by paulmo Link to comment Share on other sites More sharing options...
justsomeguy Posted February 25, 2015 Share Posted February 25, 2015 The error is because is_equal takes 2 parameters and you're not passing any parameters when you call it with setTimeout.I believe you're trying to do this: if(is_equal(tiles, solution)) { currentRound++; if(currentRound < images.length) { // Load the next round // alert("Next round!"); setTimeout(function() { selectRound(currentRound); }, 2000); } else { // The game has ended alert("Game over."); } } } Link to comment Share on other sites More sharing options...
paulmo Posted February 25, 2015 Author Share Posted February 25, 2015 (edited) Thanks a lot! It works. Instead of Game over alert, how to replace last completed puzzle with a div or canvas text (after setTimeout)? else {alert("Game over.");} Edited February 25, 2015 by paulmo Link to comment Share on other sites More sharing options...
justsomeguy Posted February 25, 2015 Share Posted February 25, 2015 You can use the normal DOM methods to remove elements on the page and add new ones (document.createElement, appendChild, removeChild, etc). Link to comment Share on other sites More sharing options...
paulmo Posted February 25, 2015 Author Share Posted February 25, 2015 OK, I'll work on that and come back. Will probably start new thread though since that's different than puzzle game logic. Thanks for your help. Link to comment Share on other sites More sharing options...
paulmo Posted February 26, 2015 Author Share Posted February 26, 2015 I've updated working example with second set of images, and setTimeouts, so readers can see the whole thing! Thanks to JSG and Ingolme. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now