Jump to content

  • Log In with Google      Sign In   
  • Create Account

Banner advertising on our site currently available from just $5!


1. Learn about the promo. 2. Sign up for GDNet+. 3. Set up your advert!


Design/Implementation of a gameboard


Old topic!
Guest, the last post of this topic is over 60 days old and at this point you may not reply in this topic. If you wish to continue this conversation start a new topic.

  • You cannot reply to this topic
6 replies to this topic

#1 RagingRudolf   Members   -  Reputation: 104

Like
0Likes
Like

Posted 13 May 2012 - 12:57 PM

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



Sponsor:

#2 FXACE   Members   -  Reputation: 182

Like
0Likes
Like

Posted 18 May 2012 - 09:03 AM

Did you tried to draw this map with HTML5 canvas element?

#3 RagingRudolf   Members   -  Reputation: 104

Like
0Likes
Like

Posted 18 May 2012 - 01:38 PM

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)

Edited by RagingRudolf, 18 May 2012 - 01:40 PM.


#4 Álvaro   Crossbones+   -  Reputation: 15525

Like
0Likes
Like

Posted 18 May 2012 - 01:52 PM

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.

Edited by alvaro, 18 May 2012 - 01:52 PM.


#5 RagingRudolf   Members   -  Reputation: 104

Like
0Likes
Like

Posted 18 May 2012 - 02:08 PM

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.

#6 FXACE   Members   -  Reputation: 182

Like
0Likes
Like

Posted 18 May 2012 - 06:38 PM

Also, HTML 5 canvas specification can help you.

Best wishes, FXACE.

#7 RagingRudolf   Members   -  Reputation: 104

Like
0Likes
Like

Posted 19 May 2012 - 04:28 AM

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. :)




Old topic!
Guest, the last post of this topic is over 60 days old and at this point you may not reply in this topic. If you wish to continue this conversation start a new topic.



PARTNERS