I am trying to create a game where you have to move a ball on a platform. At the start of the game, the ball is dropped on the platform and then you can move it around. This is al working, no problems here.
var levels = [ [ [1,1,1,1,1], [1,1,1,1,1], [1,2,1,1,1] ] ];
Where 1 = green tile, 0 = no tile and 2 is a yellow tile.
When loading the level it will generate the first tile (in this case the first 1) in the center of the div, then the next one and the next, etc. Al good so far, but if I change the first 1 tile to a 0 tile (= no tile), it will generate the platform, but since the platform is created in the middle of the div and since 0 is no tile, no tile will be generated and the ball will fall endlessly.
This is no good, I want to have different platforms and not always start with a 1 tile at this position. So I figured to make a "start tile". This is the yellow 2 tile. The idea is that this tile is the tile that always should be shown in the middle of the div at the start of a game, so that the ball always drops on the yellow tile. Therefore the whole platform should be moved at game start/load in order to center the yellow tile.
And this is my problem. How to do this?
I hope my problem is clear. I've also made a fiddle (click the 1 to start the game), so you can try things out
ps so in short:
- Ball always drops in middle (must stay this way)
- Yellow "start tile" should be moved/centered in the div, so the ball drops on it at game start
pps: The yellow tile can have a different position, it depends on the platform design