Back in September 2000, I went to a parent teacher conference and clearly remember the teacher describing a math game she was playing with the children called “The Factors Game”. This game was a two player, paper based game where one player would choose a number, receiving those points but giving away all the factors of that number. Such a simple concept, and it got me thinking, “I can do that in JavaScript!” So, that night, I stayed up till 4am writing version 1.0 and was VERY proud to show off the result.

Fast forward 13 years. I hadn’t written much JavaScript in the mean time since I’d worked mostly as a manager of web development and mobile UX teams, but began dusting off my skills by necessity because I was starting my own business which required I develop once again. I’m extremely impressed with the jQuery framework, so in Feb 2013 as a learning aid I thought I’d rewrite the factors game again using jQuery, version 2.0. This time, I felt I was a lot smarter. In version 1.0, I didn’t write an algorithm to calculate whether x was a factor of y, but instead kept track via numerous arrays (Yuck!). And writing DHTML was quite involved and prone to cross-browser issues back in 2000, so I didn’t even bother (and probably didn’t even know how at the time).

Now, it’s Sept 2013. I’m preparing to write a cross-platform mobile app for FrogQuest using the Titanium framework. This framework exposes a JavaScript API then builds native Android and iOS apps from a common codebase. In reading up on how to go about this, they encouraged such best practices as not polluting the global namespace, which is not a best practice I employed in version 2.0. I didn’t know any better. I thought I was being pretty smart by using separate functions. I figured I had better study up, so I began working through John Resig’s book titled “Secrets of the JavaScript Ninja”. This book is amazing! It takes an intermediate JavaScript programmer and exposes him/her to advanced techniques, stepping through them systematically one-by-one starting with the function. This was just what I needed, and I was awestruck!

Finally, just 7 months after having rewritten version 2.0 of the Factors Game, I set about rewriting it yet again. Tonight, version 3.0 is complete (at least to the extent I feel is beneficial)

Factors Game 1.0

  1. Board is a single size (30)
  2. Pollutes the global namespace
  3. Does no math, using various explicitly defined arrays to keep track of which factors have been played, what the factors are of each number, and of image states.
  4. Graphical interface is in a table-based layout, with lots of bevels (it looks ugly now, but was consistent with design trends of the day! Seriously! Completely falls apart in today’s browsers)

Factors Game 2.0

  1. Board size is variable
  2. Pollutes the global namespace
  3. Factors are calculated by an algorithm
  4. Table based design
  5. Animations help to indicate which user’s turn it is
  6. Written in jQuery

Factors Game 3.0 

  1. Board size is variable
  2. Does NOT pollute the global namespace
  3. Improved animations communicate which numbers were given away
  4. Log file describes the actions of each turn
  5. Mixture of JavaScript and jQuery used
  6. Advanced techniques used

There’s clearly still improvements that can be made, but I’m happy with my progress. It’s been a great exercise to rewrite the same application, adding features as your skills improve. Let me know what you think!