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.
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.
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.
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 ?
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...
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.
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
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.
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.
(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.
Before you post, read our: 
