Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    New Coder
    Join Date
    Nov 2012
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Labyrinth Problem

    Hi again!

    I have a 10*10 table which represents a labyrinth and an image that has to move according to some rules.

    My question is how do i get through the nodes of the table and replace the images, simulating a movement of a so-called "player" image?

    I don't want the problem solved for me, if you could just give me a hint about the functions i should use, because i don't really have any idea right now.

    Thank you in advance!

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,189
    Thanks
    75
    Thanked 4,341 Times in 4,307 Posts
    First question: Will you use an <img> that moves across the top of the <table> and all the <td>s? Or will you simply change the contents of the <td> to simulate image movement?

    The latter is simpler. The former looks better.

    The latter is simply a matter of swapping the contents of the pertinent <td> to show either the standard background of the maze or the background with the player image on it. Assuming you used style="border-bottom: solid 3px black;" (or equivalent) to construct the borders of the maze cells (omitting a border where you want an open path for the player), then it's really a matter of just changing the cell.style.backgroundImage = 'player.jpg' for = 'background.jpg' (for example).

    The former method is actually easier in the sense that the image of the maze never changes. You "only" have to move a player image (should be ".gif" or ".png" so it can be transparent except for the actual player) so that it hovers over the appropiate cells. And you can move it smoothly, rather than "jumping" from one cell to the next as you would have to do with the latter method. But it does mean you have to learn *HOW* to position such an image over the correct cells, etc.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    New Coder
    Join Date
    Nov 2012
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I use an <img> that will move on a given path, when i press some keys. And the only thing that crossed my mind was replacing the new td with the player, and the "old" one(from where i come from) with the background that all the cells of the path have.

    I thought declaring a matrix would help, but i didn't know how to make the connection between the matrix and the loop through tds.

  • #4
    New Coder
    Join Date
    Nov 2012
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Take a look at what i've done:

    Code:
    function go()
    {
    var x=new Array('n', 'nb', 'nb1', 'nb2', 'nb3', 'nb4', 'nb5', 'nb6', 'nb7', 'nb8', 'nb9', 'nb10', 'nb11', 'nb12'); 
    var y=new Array('n', 's', 's1', 's2', 's3', 's4', 's5', 's6', 's7', 's8', 's9');
    if (x.length<y.length)
        for (var i=1; i<x.length; i++)  
            {change(x[i]); 
    	     document.getElementById(x[i-1]).style.backgroundImage='none'document.getElementById(x[i-1]).style.backgroundImage='none';}
    else
       	 for (var i=1; i<y.length; i++)  
            {change(y[i]); 
    	     document.getElementById(y[i-1]).style.backgroundImage='none';}	 
    alert('Felicitari! Ai ajuns acasa pe drumul cel mai scurt!');		 
    }
    The arrays contain the ids of the cells that form the path. I compare them and then try to move the image. The problem is that, when i use document.getElementById(x[i-1]).style.backgroundImage='none', nothing happens. I mean the background of the previous td doesn't change.

    And the second problem would be adding a timing function. The player should move once at some number of milliseconds. But where should i place that function ?

  • #5
    Regular Coder
    Join Date
    May 2012
    Location
    France
    Posts
    224
    Thanks
    0
    Thanked 32 Times in 30 Posts
    Simply display an onkeyup="keyStroke(this)" on each td to call the function keyStroke ! (to stricke)

    Do not use two dimensional array (memory is unidimensional), and enlarge the grid to avoid the edges effects.

    One elementary example (we have no test with edges and gray cells) and one more developed.
    Last edited by 007julien; 12-01-2012 at 07:28 PM.

  • #6
    New Coder donna1's Avatar
    Join Date
    Nov 2012
    Location
    london
    Posts
    99
    Thanks
    9
    Thanked 4 Times in 4 Posts
    is keystroke(this) the same as if INKEY$="w" like in Basic.

    Im trying to work out how to do INKEY$ but I tries if keystroke("w") and if keystroke(this)=="w" and neither work

    what do I put for (this)

    I have looked at loads of examples and they seem to refer to a variable e
    Why is the variable e always used and what does it stand for?

  • #7
    Regular Coder
    Join Date
    May 2012
    Location
    France
    Posts
    224
    Thanks
    0
    Thanked 32 Times in 30 Posts
    In the first example, we attach an event on the entire table (its id is tbl) with the following line :
    Code:
    document.getElementById('tbl').onclick=dpl;
    Then the function dpl is called on each click on the table. The argument e is done by javascript (for W3C compliants browsers), or by window.event with IE (See this page for an other example). Then we get the target t an is id (t.id) and the number of the cell t.id.substr(1);

    Forget what I wrote with a function keyStroke. I am not sure it is still possible to stroke a key without input or textarea...

    NB : See Scripting the keyboard in JavaScript
    Last edited by 007julien; 12-01-2012 at 07:31 PM.

  • #8
    New Coder
    Join Date
    Nov 2012
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I understand what you are saying, but my task is to choose between manual play ans automatic. For the automatic mode, the image has to move slowly, due to a given time. The problem is i don't know where to place the setTimeout function.

  • #9
    New Coder donna1's Avatar
    Join Date
    Nov 2012
    Location
    london
    Posts
    99
    Thanks
    9
    Thanked 4 Times in 4 Posts
    on automatic you can call your move function every second by putting this line anywhere in the body of the javascript
    setInterval('movefunction()',1000);
    1000ms = 1 second

  • #10
    New Coder
    Join Date
    Nov 2012
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It still doesn't work. Maybe it's not about the timing function..

  • #11
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,189
    Thanks
    75
    Thanked 4,341 Times in 4,307 Posts
    Quote Originally Posted by Sscorpius View Post
    Take a look at what i've done:

    Code:
    function go()
    {
    var x=new Array('n', 'nb', 'nb1', 'nb2', 'nb3', 'nb4', 'nb5', 'nb6', 'nb7', 'nb8', 'nb9', 'nb10', 'nb11', 'nb12'); 
    var y=new Array('n', 's', 's1', 's2', 's3', 's4', 's5', 's6', 's7', 's8', 's9');
    if (x.length<y.length)
        for (var i=1; i<x.length; i++)  
            {change(x[i]); 
    	     document.getElementById(x[i-1]).style.backgroundImage='none'document.getElementById(x[i-1]).style.backgroundImage='none';}
    else
       	 for (var i=1; i<y.length; i++)  
            {change(y[i]); 
    	     document.getElementById(y[i-1]).style.backgroundImage='none';}	 
    alert('Felicitari! Ai ajuns acasa pe drumul cel mai scurt!');		 
    }
    That is just plain *BAD* JavaScript code.

    As soon as you call the go function, you will move the image AS FAST AS IT CAN MOVE to the end. It will happen so fast that no human will see it. BANG. IT will be done.

    THere's no way, though, for me to guess what else is wrong.

    For example, why are there separate x and y arrays, instead of just one array? What does change( ) doe? What does the HTML associated with this look like?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #12
    New Coder
    Join Date
    Nov 2012
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The two arrays are just for testing, they won't remain both. There's a table that represents some kind of a game. I have an image that has to move on a clear path till it reaches an other image-the end of the road. Change() functon changes the background image of a cell and has the parameter the id of that td. The arrays contain all the id-s of two giva paths.

  • #13
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,189
    Thanks
    75
    Thanked 4,341 Times in 4,307 Posts
    So why not simplify and clarify at the same time?

    (1) Have a *SINGLE FUNCTION* (you can call it Change if you want) that *BOTH* resets the background of the prior lcation *AND* sets the background of the new location.
    (2) Use a global variable (e.g., currentCell ?) to keep track of which cell *is* the current one.
    (3) And then all you have do to is:
    Code:
    var mover = setInterval( Change, 1000 );
    Just be sure to then call
    Code:
    clearInterval( mover )
    when you reach the end.

    Done.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •