Cephi Systems Software and Contract Services

12Jul/110

Deadlines, KISS, and Minimalist Design Principles Used to Create a Simple JavaScript Game

Writing something that has even a bit of useful content can take a lot of time. If you are like me you probably discovered long ago that there are just not enough hours in the day to get everything done you wanted to, let alone get everything done to perfection.

One technique that can be used to help manage busy schedules is setting yourself a deadline, then proceeding with what you have when the clock reaches zero. While the two are not strictly related, when I think of meeting a deadline no matter what I tend to think of the software development philosophy, KISS (Keep It Simple, Stupid). Another way to describe this would be to employ a minimalist design philosophy: Keep things to the bare minimum and only add the functionally that is absolutely needed to get the job done, and no more.

Complexity and scope creep (the phenomenon where more and more seemingly minor tasks or requirements are added to a project over time) are the arch-enemies of getting things done on time.

The nice thing about working towards strict deadlines is it encourages people to get things done quickly, and make every minute count. It also creates a nice air or fear and stress around the office, that a perceptive person can pick up on fairly quickly simply by looking around. ("Nice" isn't actually a good way to describe things that diminish the quality of and shorten employee's lives). The down side of this strategy is that projects that have an absolute deadline run the risk of being released even though they do not meet user requirements (released in a very broken state).

While this strategy is often applied to multi-million dollar projects, one thing many people don’t realize is you can apply this deadline-oriented, minimalist principle to very small tasks (an hour or less). That is what I did today: I wanted to write a simple JavaScript game but not spend a lot of time designing or programming the game. I gave myself 15 minutes to conceptualize and design it. Then another 15 minutes to write it.

I decided on card game I used to play in a childhood’s friend’s basement called In-between, or Acey-Deuce. Basically two cards are dealt, and you guess whether the next card dealt’s value is higher, lower, or in between the first two cards. While this would be a great opportunity to make card and deck objects, arrays, and a shuffling algorithm, I opted for simple KISS/minimalist integers instead of something representing playing cards.

Anything beyond a basic layout for the UI, like using CSS, was not part of my design spec and was not included. Every time I look at the game I laugh at how ugly it looks, but here the key thing is it is functional (it performs per specifications) and it was done on time. Remember, we got to the moon with ugly UI's:

Image courtesy of Mysid, NASA.
This doesn’t look very friendly to non-astronauts… What no custom wallpaper? Where is the minimize button anyway? In all actuality this was revolutionary in terms of UI design for the 1960's, and could easily compete with some consumer electronics from the 1980's.

The code for In-between shows the basic use of if statements, variables, Math.ceil which rounds numbers up, and Math.random, which returns a random number between 0 and 1.

Variables in JavaScript are a bit different from other popular languages. Variables are loosely typed meaning that you do not have to declare the type (int, bool, String, etc) of the variable as you do in languages like C#, Java, or Objective-C. A variable is simply declared via:

var myVariable;

They can be assigned and declared as in other languages:

var myVariable = 6;
var myOtherVariable = "my string literal";

Some JavaScript programmers prefer to use underscores in their variable names rather than camel case, so the above could appear as "my_variable"

Variable scope is handled as follows:

A variable declared within a function is local and can only be accessed within that function.

A variable declared outside a function is global in scope, and all functions on the web page can access it. Much like other languages, variables are temporary and are deallocated when you close the page (like closing a Java application).

You do not even need to include the keyword var, and you can assign a value to the variable name, however doing so makes the variable global.

Anyway the code is below, followed by the game itself: