bit-engine | A BitTorrent client built with Ruby and EventMachine | Stream Processing library

As a fun project I decided to try and create a top down 2D game engine in HTML, CSS and JavaScript. I have the basics down, generating a grid and moving that grid when using the arrow keys to simulate walking. As a test I just used a single sprite as background, when walking up for example the bottom row height is animated from 50 to 0px, simultaneously it adds a row to the top whose height is animated from 0 to 50px. Up to there it works well and is pretty responsive.

I decided on storing all tile data in a database, then using PHP to generate an XML file on page load, store that in a javascript variable and then use find() to get the data I need. Every tile has a latitude and longitude so I can search for the tile that matches both those values and pull other relevant information like if the player can walk there, which texture it needs to have, etc.

My XML: http://www.nickbetting.nl/bit-engine/test3/createxml.php?id=1

The problem is, it's incredibly slow. I decided on a 25x15 grid of 50x50px tiles. So on initial page load it has to find the starting 375 tiles, get their data and replace the images in the tiles for the ones from the data. This initial load takes maybe 10-20 seconds.

When I then use the arrow keys to walk, it will calculate which tiles need to be rendered, then uses find() to get the data for those tiles, creates a new row and appends the tile elements with the image corresponding to that tile's texture. That also takes 1-2 seconds, which is many times slower than walking without parsing the data and finding the information.

In short:

• I pull up the XML through ajax
• I save that XML as an XMLdocument to a variable
• I calculate which tiles need to be loaded based on the spawn location
• I use find() to get those tiles from the XML stored in the var
• When walking I add a row or column of tiles in the direction you're walking and removed a row or column tiles on the opposite direction
• When walking those new tiles will also use find() to get the data for each tile from the XML stored in the var

This is my JS: http://www.nickbetting.nl/bit-engine/test3/js/functions.js

This is the test I have up: http://www.nickbetting.nl/bit-engine/test3/

Note for this test:

• I'm not making a zelda clone, that's just some placeholder art
• Walking up will get the tile data from the XML
• Walking any other direction will just load empty grass squares without consulting the XML data
• Walking up is how it should work, the other directions are just to compare how much time it takes to load the data

So, my question. How can I make this faster? Is there a better way to store and find data like this or is there a better way to render the new tiles in the DOM? Is jQuery just too slow for things like this?

Any other tips are also appreciated. I know that there are free and ready to download 2D JS game engines but I'm doing this as a learning experience. I generally do projects like these to see how far I can get without help and to learn new things by running into new problems.