how would you set up the GUI for a web-based board game structure?


Tags: javascript,jquery,html,css

Problem :

I want to create a web-based board game like reversi. I created a similar game in python before but now I want to try to implement it using javascript/jquery/html/css.

The main thing I'm wondering about is how to set up the GUI for the board game in the browser? I have two ideas. One, create an html table structure containing 64 cells. Second, create 64 floating divs.

I realize that for the layout of a website, tables are unreliable and inconsistent across browsers but in the case of a game like this, would a tabular setup be easier to work with?



Solution :

For something like reversi, I think a table is appropriate — beyond the visuals, it’s a decent semantic representation of the content, i.e. the state of the game board. (<div>s wouldn’t perform the same job, as they don’t represent the relationship between rows and columns.)

I’d expect a table to be as easy to work with as <div>s: possibly slightly easier, as you don’t have to write any CSS to get the two-dimensional layout, although you might have to use slightly more code to generate the HTML, depending on how you’ve got the game modelled in code. (E.g. If you’ve already modelled the game as cells within rows, it’s easy. If not, you’ll have to keep track of that in code when generating the HTML.)


    CSS Howto..

    How to style a

    inside a div with css [closed]

    How to make slide down menu to slide up?

    How to prevent opening a link of the submenu when tapping the menu?

    How to use 3 background images for a resizable layout in CSS?

    How can I zoom this gallery without moving the other pictures?

    Background Image in WebView showing in Simulator, but not on Device

    How to use inline css styling (style=“vertical-alignment:middle;”) in html5 or