3

I'm having difficulty grasping how to structure/architect a canvas application using an MVC like approach in Javascript. UI will be fairly fluid and animated, the games fairly simplistic but with heavy emphasis on tweening and animation. I get how MVC works in principle but not in practice. I've googled the buggery out of this, read an awful lot, and am now as confused as I was when I started.

Some details about the application area:

  • multi screen game framework - multiple games will sit within this framework
  • common UI "screens" include: settings, info, choose difficulty, main menu etc.
  • multiple input methods
  • common UI elements such as top menu bar on some screens
  • possibility of using different rendering methods (canvas/DOM/webGL)

At the moment I have an AppModel, AppController and AppView. From here I was planning to add each of the "screens" and attach it to the AppView. But what about things like the top menu bar, should they be another MVC triad? Where and how would I attach it without tightly coupling components?

Is it an accepted practice to have one MVC triad within another? i.e. can I add each "screen" to the AppView? Is "triad" even an accepted MVC term?!

My mind is melting under the options... I feel like I'm missing something fundamental here. I've got a solution already up and running without using an MVC approach, but have ended up with tightly coupled soup - logic and views and currently combined. The idea was to open it up and allow easier change of views (for e.g. swapping out a canvas view with a DOM based view).

Current libraries used: require.js, createJS, underscore, GSAP, hand rolled MVC implementation

Any pointers, examples etc., particularly with regards to the actual design of the thing and splitting the "screens" into proper M, V or C would be appreciated.

edit: ...or a more appropriate method other than MVC

wigglyworm
  • 106
  • 5
  • codereview.stackexchange.com might be a better place for this – xyhhx May 07 '14 at 13:32
  • ta, will try, am new to this! – wigglyworm May 07 '14 at 13:41
  • @Martin No Code Review is not a better place for this question as it is, since there is no code to review atm. Please read what's on-topic and off-topic first before suggesting a site. – Marc-Andre May 07 '14 at 14:35
  • Not sure how I can message you directly but I don't know where I can find out what on-topic or not – xyhhx May 07 '14 at 14:40
  • @Martin You can check the [help] link in the top right corner of every site. To message me "directly" just use @ and my username, this will ping me. – Marc-Andre May 07 '14 at 14:43
  • 2
    request this is closed as duplicate of http://programmers.stackexchange.com/questions/238254/javascript-mvc-application-design-canvas – wigglyworm May 07 '14 at 15:40

0 Answers0