Tips for making a boardgame online GUI with JavaScript and HTML5 [closed]

Question

I'm very interested in Shogi (Japanese Chess), and I finally got my friend interested in it too. But my friend isn't in a position to buy software or a real board, so I told him I would make an online GUI so that we can play together.

Now the plan is that I would basically give the user the same freedom he has than with a real board. He can place any piece anywhere, and he basically doesn't have any rules. The only mechanics that would be implemented would be capturing pieces and dropping them.

There would be no AI, it wouldn't recognize when you break rules, it wouldn't recognize check mate, or when the game ends etc. Of course this means that it doesn't even know how pieces move. Everything would be done by the player except the automatically capturing pieces.

Of course the amount of pieces is still considered, you can only have the amount of pieces you should have at the start of the game, no extras etc.

What would be the best way to go about this? I want to only use HTML5 and JavaScript (jQuery, AJAX etc.), I don't want to use Java, Flash or anything like that. Only HTML5 and JavaScript and possibly some CSS features (maybe).

What would be the best way? The hardest part should be the UI really, it should be able to recognize each spot on the 9x9 board, it should recognize each piece as it's called, and it should be able to say "You can't do that, the piece you're trying to move doesn't exist".

Answer 1

There seem to be plenty of examples on github of HTML5 chess games.

If you want to create your game from scratch with Javascript I'd recommend Crafty an excellent open-source Javascript Game Engine. They have all the stuff in there to get you going, like a tile-based grid, even an isometric grid if you wanted the game to be 2.5d.

Answering this makes me want to do some game-programming now :) mjam

Oh and here's a great introduction to Crafty