带有Jquery的Spacefield

Question

i want to program a 2D-sqare Gamefield. The gamefield shall consits of 9 subfields. The Gamefield shall be an Image , like an Spacefield or so. Here you can see the concept, and how it shall later look like (just a mockup :P)

Within this field i want to move a Object from one field to the other (vertical /horizontal) . But i don't know how i can realize that. I had think of an multidimensional array, but i don't know if this is the right way to do this. I need to know, at which pixel in the image the new field begins. But i think its no good idea to code that hard. I want to do this with Jquery, CSS and HTML. It shall become a very simple online game.

Qapla'

Answer 1

In game development these fields are usually called tiles.

It's perfectly fine to create a multidimensional array of Tile s. Whether they hold their own position or if it's up to a separate renderer is up to your design.

Some links you might be interested in:

• Tiles and tilemaps overview (though this uses a Canvas -element)
• Using CSS transitions for smoothly moving from one Tile to the next (not as useful when using a Canvas )
• jQuery animate if you don't like CSS transitions, you can make use of jQuery as well.

I'd recommend reading up on Tiles in game development first, there are tons of example implementations.