...

View Full Version : Labyrinth Problem



Sscorpius
11-30-2012, 08:51 PM
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!

Old Pedant
11-30-2012, 09:17 PM
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.

Sscorpius
12-01-2012, 07:57 AM
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.

Sscorpius
12-01-2012, 01:17 PM
Take a look at what i've done:


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 ?

007julien
12-01-2012, 01:41 PM
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 (http://mamisab.chez-alice.fr/case_en.html) (we have no test with edges and gray cells) and one more developed (http://mamisab.chez-alice.fr/puissance4/).

donna1
12-01-2012, 05:44 PM
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 :mad::confused:

what do I put for (this)

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

007julien
12-01-2012, 07:27 PM
In the first example, we attach an event on the entire table (its id is tbl) with the following line :

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 (http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_event_srcelement)). 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 (http://www.javascriptkit.com/javatutors/javascriptkey.shtml)

Sscorpius
12-01-2012, 08:41 PM
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.

donna1
12-01-2012, 09:02 PM
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

Sscorpius
12-01-2012, 09:16 PM
It still doesn't work. Maybe it's not about the timing function..

Old Pedant
12-01-2012, 10:11 PM
Take a look at what i've done:


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?

Sscorpius
12-02-2012, 10:08 AM
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.

Old Pedant
12-03-2012, 06:08 AM
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:


var mover = setInterval( Change, 1000 );

Just be sure to then call
clearInterval( mover ) when you reach the end.

Done.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum