Design/Implementation of a gameboard

Started by
5 comments, last by RagingRudolf 11 years, 11 months ago

Hello everyone,

I'm a very new member of this site (has just signed up smile.png). I and some friends have designed a game which currently is implemented in excel (simple ui biggrin.png) and we have talked about trying to make into a web game. As the only one with experience in programming I think it's a good way of learning. And I could need some advices on how I should deisgn my gameboard or which approch you would recommend.

About the solution.

Technology:
C#.NET based on MVC3 as backend language together with SQL Server as datastore.
Frontend I have choosen JavaScript to do the visuals and handling AJAX calls to WCF services.

Currently my gameboard (or map) is populated by a WCF service called GameboardService. This services is called by jQuery AJAX. Then I use jTemplate to convert the data into the actual gameboard )(which is a table with columns and rows).That works fine no problems here. Now I want to be able to move around the map. Example, the size of the whole map is 100x100 but my map view is only showing 10x10. So moving the map around is crucial to explore. To handle this I use jQueryUI draggable() which gives me the functionallity of moving it.

Here comes the actual problem. I'm not interessted in loading the whole map since the final map will have a size about 10,000 x 10,000 so I only want to load a bit of the map at the time. So I tried to hook into the "drag" event at jQueryUI draggables so if my map is moved out side of a div with more than x pixels then remove that column/row, Currently that results in my map getting completely wiped since the object still will be outside of the div when a row/column is removed. I have tried to "reset" my maps position with $('#element').position().top/left but it does not seem to work?

Do you have any ideas or some advice to how I can solve this? Or should I completely write my own framework from scratch instead of using jQuery?

Best regards Santa's own RagingRudolf smile.png

Advertisement
Did you tried to draw this map with HTML5 canvas element?
No. The map is drawn as a table where each cell is a tile. I thought of styling them with css afterwards. I was (still am) looking at a solution where I can move the map around smooth and then on the fly append areas to the map so it seems as one large map to the user.

But can you recommend using canvas to draw the map? Will it at all be possible draw so it feels smoooth? (Asking a lot because it's a new tech (canvas) to me)
A couple of days ago I wrote simple tic-tac-toe program using HTML5's canvas element (as an exercise) and it was pretty straight forward. I perused the tutorials at http://www.html5canvastutorials.com/ and used Google for help with JavaScript (how to define objects, arrays...).

The only animation I tried was very smooth, but it simply moved a single rectangle around on the canvas. I don't know if scrolling your map around would still be fast.
Well there is only one way to find out whether Canvas is fast enough. I will try to make some prototypes and see what results I get. It sounds interessting though.
Also, HTML 5 canvas specification can help you.

Best wishes, FXACE.
I have been looking on kinectJS and it seems to have some of the features I will need. So I think I will use it together with jQuery and see what I get. Thank you for the help. :)

This topic is closed to new replies.

Advertisement