How can I change my Javasscript logic based on breakpoints and element sizes?

I have an interesting problem with a game I’m writing. It’s a simple board/tile game and written in JS/Jquery.

The board is made of up square tiles which are DIVs. Everything is great until it needs to work on a mobile phone. I want to be able to resize the grid and tiles to be smaller but this heavily effects how JS controls the board.

For example, the “large” board has tiles which are 92x92 pixels. This means all the calculations based on moving those tiles are based on this root. Move tile 92 up 92 right etc. Testing where a tile is on the board and where it can move to are all based on multiples of 92.

Obviously I cannot make my board fluid or allow the browser to resize them with percentages. That doesn’t mean I don’t want to have a smaller board for phones though.

I have hacked this up about half way so far. The 92 pixel size is not set absolutely, it’s just a variable. I can easily change the size of the board by editing a few CSS values for width/height and my JS variable and bam it works. But the problems is changing all this in real time while keeping the existing board in play. I can change it but the user would have to reset the game to do it. That’s no bueno.

If I resize the tiles via media queries, my JS needs to do a handful of operations:

  1. Detect the change in tile size via media query.
  2. Update the dimensions variable and change it’s current logic.
  3. Reset all existing tiles to have new TOP and LEFT positions.
  4. Reset some data attributes of the tiles to reflect new x,y values and logic.

I am able to do number 1 and 2 but I’m getting stuck on 3. When the media query resizes the tiles, I’m not sure how to adjust the top,left based on old position versus new position.
As an example, it is a 4 tile grid. This means tile 1 cannot move, because it’s left position is 0 and would remain 0 no matter the size. Tile 2 would have a left value of 92 but needs to become 72. Tile 3 cannot just be moved by 20px, it actually needs to move by 40, and the 4th tile would have to move by 60. So it’s not just a matter of taking all tiles and moving left by 20.

I’ve been trying to find a way to change my whole logic. Can I avoid absolute positions? Can I decouple the movement of tiles from the actual size of the tiles? Can I make the logic of moving a tile based on something other than it’s size somehow?
If I can decouple the size and positioning of tiles, then it wouldn’t matter how big the tiles are, that is more like the result I’d like. On the other hand, if this is too big of a pain, I’ll just have to have a single size grid with no resizing tiles at all.

Hope all that made sense!

Can we have that code where you got stuck? there is a site (gridster.js) which provide useful information related to your question.Please have a look into it.

If I did that, I’d probably have to post ALL the code!

It isn’t one place in code where I’m stuck, I guess it’s the philosophy and logic of it all.

The gridster.js isn’t really how my grid works.

The bottom line is that JS controls the tiles based on absolute X,Y values, but these are wildly thrown off if the tiles are resized via media queries. I’m trying to find a way to update and refresh the board based on new calcs, without resetting the board either!

I’m sure I’ll come up with something!

One of the things that you can do is to decouple the displayed board from your code, by instead checking against an internal representation of the board in an array instead.

You can then use that array to update the view of the board, which results in a cleaner way to manage things. Then you can use any scaling factor that you desire when it comes to displaying the board.

1 Like

I’m trying to figure out how to do just that. I’m storing meta-data in each DIV block with the current X and Y values as well as which direction that particular block can move. For example any given block can only move in one direction, so I might store the word “up” if that block can move up, it’s a quick test.

What I’m finding is that I can’t use abstract concepts to do this. For example I can’t just store “this is on grid position B4” as B4 still has to be related to absolute X,Y values. And the X,Y values are based on the size of the grid blocks.

I just need to put it all together. What would you store in the array if not just X,Y values and which block is stored there?

The X and Y values just need to be multiplied by a scale factor when determining the absolute position.

For example the third block in the second row would have X=3 and Y=2. If the blocks are 92x92 then the scale factor is 92 and you get 276 and 184 for the absolute position. If the blocks are reduced in size to 50x50 then the scale factor is 50 and that position becomes 150 and 100.

No need to store anything on the blocks themselves as everything can be stored in the array and the scale factor applied when transferring the info in the array to actual positioning of the blocks…

This may be what I need to fix then, because my program doesn’t “know” what is the “third block in the second row”. The program only knows "which block is exactly 92x184 (x,y).

In other words, the program knows how to answer this question: “which block is at 92x184, now move it one left according to scale factor”.
The program doesn’t know how to answer this question: “find block in col 2 row 3 and adjust its position according to new scale factor”.

Some refactoring needed here. Thanks for the ideas.

You should be able to fix that by dividing all the values by 92. Then instead of 92x184 you will have 1x2 which you then multiply by the scale factor.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.