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.

To keep the overview, the ball is centered in the middle of a div. When you move the ball you actually move the platform (giving the illusion the ball moves). This function should stay as it is. The platform is build in javascript as follows:

var levels = [

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

Many thanks

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


1 Answer 1


In loadLevel, when you're doing new tile (and passing in x and y) to create a tile at a particular position, you could offset that position by the negative of the yellow tile's position.

The yellow tile's position then becomes (0,0), which is where the ball starts. All other tiles are moved over by the same amount.

If you only ever have only one yellow tile in a level, it might make sense to store its position explicitly in the level data structure:

var levels = [
        yellowTilePosition : [1, 2],
        tiles : [ [1,1,1,1,1],
                  [1,1,1,1,1] ]

Alternatively, you could iterate through your level data to figure out which tile is yellow.

If you're up for something more drastic, I'd really recommend Processing.js or Pixi.js over jQuery for writing web-based games. They have ways of controlling rendering (with scale, translate and the like) with which you can properly implement a camera, independently of where the player is positioned.

  • \$\begingroup\$ Thanks for the reply. Your first option would be good enough. I will have only 1 yellow tile at each platform and putting this manually in the level data structure (as given in your example) is fine. But how to implement it? Please note that I am just starting with js and I am making this game to learn the language. If you could edit my fiddle with some comments of what you have changed to make this offset work, that would be very helpful to me. Hope you can help me out \$\endgroup\$
    – Maurice
    Dec 19, 2013 at 13:32
  • \$\begingroup\$ @Maurice Sorry, but I'm too busy to read far enough into your code to edit it. The general idea would be to loop over your level data, creating tiles as usual, but create a yellow tile at that position instead if the loop variables match the level's yellowTilePosition. \$\endgroup\$
    – Anko
    Dec 20, 2013 at 14:06
  • \$\begingroup\$ I understand, thanks anyway. If I understood correctly if yellowTilePosition : [1, 2] (let's make this: startPosition : [1, 2] added at each level) then the offset would be x = -100 x 1 and y = -100 x 2 Where 100 is the tile length. Now to get it into loadLevel \$\endgroup\$
    – Maurice
    Dec 20, 2013 at 20:36

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .