Skip to main content
GameDev.net gamedev.net
🔒 Locked

[web] PHP/Javascript Tile Map and Character Movement

Started by Teonnyn May 25, 2010 at 11:52 PM 4 replies 2.9k views
Original Post
Teonnyn
Teonnyn
Hello, I wanted to post this in a existing thread.. however, figured that it was a different enough request that it might hijack the thread. I have been developing a PHP/dynamic table tile map display for a game, and would like to control the character with &#106avascript: The map is based off a map array placed in a dynamically generated HTML table that loads a div in the cells. The background of the div is used for the map images while the foreground holds the character - if one exists in a particular cell at the time. It is array based, and each cell has two properties - Tile Position and Type. My issue is character movement. It is controlled with a PHP variable which places the character sprite and direction. I want to use &#106avascript keyboard controls so that when someone hits the arrow keys, the character moves one tile in the related direction. Because the character is rendered in the same div as the tiles, but in the foreground, the character can't be moved by itself (The math related to movement is already worked out). For this to be effective in &#106avascript, I need to grab two things - tile position, and tile type, both of which are stored in forms in the divs (or maybe variables, this isn't finalized yet). What should happen is this: Player hits arrow key. &#106avascript code is triggered that changes the PHP movement variable. The tile type is read to determine what should happen, if anything. The player character sprite is moved, hopefully without a page reload.
Silent Dragon
Silent Dragon
I don't really see the question here, but I assume you're unsure about how you can do the character movement without the page reload happening?

You can use a key event function in &#106avascript (an article on the differences between browsers is here.) which checks the key that has been pressed.

There are multiple options that you can take now, depending on how your map works. If the actual map is bigger than the displayed area of the map, then you need to redraw the whole map (as new sections may now be in view), otherwise you can just remove the player image and redraw it at a new location.

Both of these can be performed by manipulating the &#106avascript DOM. <a href="http://www.htmlcenter.com/blog/manipulating-the-dom-with-&#106avascript/">This</a> is an example tutorial that explains how to create, replace and remove elements in the DOM, so should be enough to get you well &#111;n your way.<br><br>-SD
Teonnyn
Teonnyn
Okay, I have it halfway figured out for WASD but the new problem is that the character sprite is now hopping around a single tile instead of moving over the map. I'm using jQuery AJAX and need to update the controlling PHP variable.
PinguinDude
PinguinDude
Why not use absolute/relative positioning for the character and have &#106avascript interpolate the x and y values so it'll move smoothly from tile to tile ? :)
http://sourceforge.net/projects/pingux/ <-- you know you wanna see my 2D Engine which supports DirectX and OpenGL or insert your renderer here :)
Teonnyn
Teonnyn
Actually got character movement working fully, and that version doesn't work because the character is rendered in the same div as the background. Got it working right down to preventing the character from moving off the map, now. All I need is tile detection. :)
PinguinDude
PinguinDude
The idea was to not render the character on the background, but by using an image/div that'd be on top of the table :)

Either way, good luck on your project ! :)
http://sourceforge.net/projects/pingux/ <-- you know you wanna see my 2D Engine which supports DirectX and OpenGL or insert your renderer here :)

Topic Locked

This topic has been locked by a moderator. New replies are not allowed.

Sign in to reply to this topic.