Javascript Sprites

[cursed]

Hi all,

 

I was wondering if anyone can help me with this script.

Instead of the sprite going off the page, I want it to still stay inside and to let the background move with it.

 

url: proxyize.com/sprite

(this is in no way trying to advertise my site, i only use it for beta testing )

 

Also (if this is out of scope of this question, let me know) how hard would it be to go and send co'ords to the mySQL database using php/ajax?

 

Thanks in advance,

 

Edward

[emehrkay]

I assume you mean this page - http://proxyize.com/sprite/bp.html

 

Pretty damn cool.

 

My idea would be to put that bkg in a div that has its overflow set to hidden and as the sprite gets to either edge, the div scrolls.

 

I havent looked at your js yet, but i assume that you would have to keep track of the position of the sprite in relation to the 0,0 point of the div. And you would also have to count how many "Scrolls" have elapsed so that when the sprite's position is >= (width of div * number of divs elapsed) you'd know to scroll.

 

But that approach is kinda of bad because once you reach the edge you'd have to wait until the bkg scrolled. It might be a better look to have the mouse keys contorl the bkg movement.

[cursed]

I havent looked at your js yet, but i assume that you would have to keep track of the position of the sprite in relation to the 0,0 point of the div. And you would also have to count how many "Scrolls" have elapsed so that when the sprite's position is >= (width of div * number of divs elapsed) you'd know to scroll.

 

But that approach is kinda of bad because once you reach the edge you'd have to wait until the bkg scrolled. It might be a better look to have the mouse keys contorl the bkg movement.

 

Thanks for the reply, I'll try the overflow = hidden technique.

I'm not sure how to implement the 0,0 point of a div using javascript, can you elaborate on some ways in code on how to do that?

 

Regards,

 

Edward

[cursed]

overflow: hidden;

just makes it so the character (named Mario) just disappears, instead of moving off the screen. This is good, but how would I make it so my character can go across a very large background?

 

Regards,

 

Edward

[emehrkay]

Look at this and try to understand what I meant with the second example

 

<div id="container"> //this has the overflow:hidden

<div id="bkg"></div> //this div would be the whole length of the level

</div>

 

Instead of moving the character move the bkg left or right and if you reach the extents of the bkg, then move the character. I dont know YUI to help you how to do this though. does that make sense?

[cursed]

Makes sense, now how to move the background.. (I'm not used to YUI)

 

[emehrkay]

Well if you define the containing div as position:relative and the bkg div as position:abolute, the bkg div's 0,0 coordinates is the top left of the contianer div. So to move the bkg div, change its x,y position (top,left)