Rendering a game- update the whole grid, or use complex conditions to update only whats changed?

Im playing with some basic projects for making games and after completing few tutorials im finally making my own, with no assistance. Its aim is to reproduce the 2048 game, which isnt hard to render visually, but have some catches regarding code logic(to apply game rules). I am using vanilla JS for the purpose(my aim is to become more familiar with basic dom manipulation, before i hop back to React).
The main game grid is made of 4 by 4 divs(h1 tags to be precise), each one showing the current number it holds. With other words, it has 16 elements and whenever the user interacts, usually only a handful will need to be updated(more often 1-2).
I came to a dilemma, to re-render the whole grid whenever the user interacts with it(the 16 h1 elements), or use a complex conditions, which will return only elements that have been changed, in order only to re-render those elements.
I know its relatively simple game, having simple display output, and there would be only insignificant difference, between simply re-render the whole board on every turn, or only parts of it, but i just want some advise on what is generally the better approach. What do you usually go for. When are cases when you would go for more simple to write approach, that works alright and when you would make sure things are very particular in their execution, or which in general is the more efficient approach. Its more like the dilemma of using functional or object oriented programming, they both seem to have their application in various circumstances.
I know without an examle code, my question might call for vague responses, but really, its more of a principle question and i dont wanan focus on the particular case.

Hey there,

I am not sure how weathered my experience is, in this regard. So, let us pretend I am just thinking out loud.

Quick answer
The game/app is simple, and the number of elements is small. So, safe bet is to re-render the whole grid. It makes the code easier to write - less error prone (in my mind).

More abstract answer
Dealing with a single grid to render or not is likely the simplest approach. However, as this could involve complex animations (transitions), it would make sense to work with each moving component separately. So, from an OOP perspective, I would go for the individual update approach.

On the other however, what does the browser care about… My experience with this comes mostly from creating games using the browser canvas - this is re-rendered on each frame whether you like it or not (unless you freeze it on a static image, but that is just browser magic). So, the expensive bits are the state computations - how many calculations you do to decide on a frame.

My final thought would just be:

  • If you are using DOM (tree) elements, take advantage of the browser’s excellent text-based processing - update only the necessary elements
  • If you are using the browser canvas, make use of the automagic renders - do not manually update the DOM

Hope this helps somewhat

1 Like

thanks, this gave me much better idea how to make my mind and approach the problem! :+1:

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