(Link to Part 2)

Things have been humming along.  The basic app is working.  I’ve gotten the timing working, then hit an interesting problem.  I wanted the background to progressively change colors until it is red (then things go “boom”).  I selected a few colors to progress through (ugly, btw.  We’ll add changing those to the bug list).  However, the text color doesn’t look good on the more intense colors.   I could have selected a set of complementary colors and hard-coded them, but I had designs on a future fancier way to let folks choose colors.   So to get complimentary colors, I found the handy xColor plugin to jQuery.  Worked great, and I was able to choose a (reasonably) complementary color at runtime.

The only real snag I hit was with sound.  With my stand-alone test working, I tried adding it to my app.  I first did this by wiring the sound into an event handler for a button.  All good.  Then I wired it into the “times up” timer callback.  Nothing.  I isolated making the sound into a function, then called it from the button.  Worked.  Called function from timer callback.  Nothing.  Stepping through debugger I can see the function called.   Auggg!

Turns out the browser has a very reasonable restriction.  Sound shouldn’t play unless the result of a user gesture.  Timers don’t count as a gesture.  I “solved” this issue by changing the game spec (hey – it’s my game).  I think I like the result better than original plan.  When the timer thread goes off, I set a flag that the time is up.  I check the flag every time there is a swipe/tap (which is a user gesture and can hence trigger sound).   If time is up, the person clicking gets the “boom” (and vibrate, on Android).  From a “fairness” perspective this is perhaps worse, but it is a better experience to somehow feel it was “you” who caused time to run out.

(Edit: Link to Part 4)