SyntaxHighlighter

Wednesday, March 9, 2016

Card Game Project

A project idea that's been in my head for a while has been a HTML5 web game published as an app. Nothing fancy with <canvas> or animation libraries, but something like a turned-based game that was fun enough with simple controls. I backed a Kickstarter for a small, 2-player card game recently that my son and I like to play, so that will be the end-goal of this project.

Along the way I want to look at turning a HTML page into a true mobile app, via PhoneGapCordova or Crosswalk. I also want to track my time and progress; not because I miss my tenth-of-an-hour tracking days in the defense industry, but just to have some data points for future estimates and observe any pitfalls of my own practices.

Technologies


There are a few popular frameworks for building web app these days, along with a myriad of cool javascript libraries, and I can only choose one. I was really interested in trying the Ionic Framework, but it looks like version 2 is getting ready for prime time, which also uses Angular 2. I didn't want to ramp up learning v1 because it might not pass my longevity test, and I didn't want to learn v2 because changes are still happening in both Ionic 2 and Angular 2. Since this is a side-bar project, I want to learn a little, but not new everything, since my goal is to actually finish : ) We just used Polymer in a recent project and I'd like another try at those web components, which I hear will be useful in Angular 2 anyway. (If my app were any more complex, with any of the services "native" to Ionic or the like, I'd want to use that framework instead.)

And at this point, there isn't much more needed than Polymer to get the app out the door.

Road Map


My basic plan for app construction is:
  1. Setup and Layout - get app and dev tooling working, Flexbox the main areas of the views
  2. Components - at least two major components needed for cards
  3. Control - Click events on components or game areas to confirm actions
  4. Logic - data structures and game rules (and AI?)
  5. Animations - Cards and actions look better when things move
  6. Deploy - turn into native app
I might test out the Deploy step earlier to get a feel for how that all works a little sooner. Waiting to try critical steps until the very end, even though you only need them at the very end, is a mistake. 

Waiting to try critical steps until the very end, even though you only need them at the very end, is a mistake.    ~chimmelb
I quoted myself on that, because it applies to small and large projects alike : )

Tracking


I'll get this up on github, and branch each stage as I complete it. I'll blog after each stage and record the amount of time it took. Again, this isn't a race and I'm not under the clock of some schedule, but hopefully will find the results interesting. 

Also, I need to figure out a good way to display source code in blogger, because code samples break up mundane writing ; )

The Series


Will update this section as other posts are written.


Components

1 comment: