Home/ Questions/Q 137719
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-11T07:09:02+00:00

I have a game that’s based on a 25×20 HTML table (the game board).

  • 0

I have a game that’s based on a 25×20 HTML table (the game board). Every 3 seconds the user can ‘move,’ which sends an AJAX request to the server, at which time the server rerenders the entire HTML table and sends it to the user.

This was easy to write, but it wastes a lot of bandwidth. Are there any libraries, client (preferably jquery) or server-side, that help send differential instead of full updates for large tables? Usually only 5-10 tiles change on a given reload, so I feel like I could cut bandwidth use by an order of magnitude by sending just those tiles instead of all 500 every 3 seconds.

I’m also open to ‘you idiot, why are you using HTML tables’-type comments if you can suggest a better alternative. For example are there any CSS/DOM manipulation techniques I should be considering instead of using an HTML table? Should I use a table but give each td coordinates for an id (like ’12×08′) and then use jquery to replace cells by id?

A clarification: the tiles are text, not images.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. You can model your game board as a multidimensional javascript array:

    [[x0, x1, x2, x3 ... xn], ..... .....]

    each entry is an array representing a row. Each cell holds the numerical value of the game piece/square.

    This model can be the ‘contract’ you send to the server via ajax as JSON. The server calculates the same array and sends it back to the UI. You can render that array into a table, divs or whatever you like. Prototype.js and jQuery make creating dhtml super easy.

    This array format will be much smaller than a whole HTML response laden with markup. It also gives you freedom to render the board in whatever way you like.

    You can further compress this format and just send the deltas. For example: save the coordinates of tiles changed by the user and send those to the server:

    [(x1, y2),.....(xn, yn)]

    Or you can do it the other way around: send the full model array to the server, and have the server calculate the deltas.

    Check out Sponty, and watch the ajax traffic every few minutes or so, we do something very similar: http://www.thesponty.com/ The client sends the full model to the server, and the server sends the diffs.

    • 0