Cephi Systems Software and Contract Services

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:

Introduction to JavaScript

JavaScript is a scripting language that is used in conjunction with markup languages like HTML to create interactive (dynamic) web pages. Interactive web pages respond to the user’s actions like clicks or mouseovers, or the user’s browser information such as their native language, what type of browser they are using, or if they are using a particular device such as an a smartphone or an iPad. JavaScript can also be used to read, write, and erase the small text files on the user’s computer know as cookies.

JavaScript is pretty different from languages like Java/C#/Objective-C: it is weakly typed, dynamic and a functional language. While it is object-oriented, it does not support the use of classes, only objects (it is a prototype-based language). JavaScript has a large number of frameworks available to make it easier to use and provide new functionality, with one of the most common being JQuery.

On a basic level JavaScript can do many of the same things full-blown programming languages can do:

• It can assign values to variables
• Do mathematical functions
• It has date and string objects
• It has if and switch statements and for and while loops
• It can handle exceptions with try, catch, and throw
• It has simple timer method making animation and games possible

JavaScript is often referred to as a scripting language rather than a programming language since it is interpreted from its source code, and not compiled. Like HTML, a web browser reads JavaScript just as it is entered into a file with a simple text editor. Scripts were traditionally just used to control the execution of programs, or automate a sequence of simple steps, but now they control user interfaces on the web, do (lightweight) calculations, facilitate communications between client and server, do data validation, and run as more or less stand alone client-side applications with GWT, do simple operations within a PDF file, or even run as server-side applications with Node.js. In recent years the lines between scripting languages and programming languages are becoming less clear, and the differences less important.

Looking at its name people often wonder how JavaScript relates to Java. Although their names are similar, JavaScript is very different from, and has nothing to do with the programming language Java other than JavaScript was designed to look a bit like Java (they have similar keywords, naming conventions, and syntax). An interesting description I read once was Java is to JavaScript as a car is to a carpet. Other than their name, they are not really related to each other.

If you are interested in learning JavaScript you should also learn HTML since JavaScript is typically used to read, write, modify, and otherwise interact with HTML web pages. Learning some CSS is useful too if you intend on customizing the appearance (presentation) of the web page or offline browser application. An excellent resource for an introduction and reference to HTML, CSS and more is W3Schools. This article is written assuming you understand some basic HTML.

JavaScript can be created with a bare-bones text editor like Window’s Notepad, Apple’s TextEdit, or Ubunto’s gedit. Free and more powerful source code editors are available such as Notepad++ (one of my favorites) and Eclipse. There are also WYSIWYG (What You See Is What You Get) code generators that allow you to drag and drop or visually build websites like Adobe’s Dreamweaver, Microsoft Visual Studio, as well as free and open source editors. I never found a free WYSIWYG editor that I really liked, but your results may vary.

The simplest way to get some JavaScript up and running is to copy or enter it into your basic text editor and save it a with “.html” file extension. Then just open the .html file from your explorer or finder app which will open the HTML page and run any JavaScript in your web browser.

This is referred to as an embedded or inline script since the JavaScript is embedded into the HTML. If you plan on using the same script on multiple pages then you could write it into its own JavaScript file with a .js extension.

When embedded, JavaScript is contained within a HTML <script> element:

<script type="text/javascript">
document.write("Hello World!");
</script>

JavaScript can also use functions that can be called like methods in other languages like Java, C#, or Objective-C:

<script type="text/javascript">
function writeSomething()
{
document.write("Hello World!");
}
</script>

Scripts can be in the head or in the body of the HTML. When placed in the body, placing them just prior to is said to speed up loading. As with other languages, the semicolons terminate a statement. They are optional, but many consider it good practice to include them, and there are instances where a statement will not be evaluated correctly without semicolons.

document.write("Hello World!") writes the text within the quotes to the webpage. This text is written wherever this script is located on the page as can be seen in the example script below.

Another way to write to a webpage is by sending your text to a specific element with:

document.getElementById("placeToSayHello").innerHTML="Hello World!";

This statement tells your browser to write “Hello World!” to the div element named placeToSayHello.

Traditionally in computer programming your first program is a hello world application, where you instruct the system to output “Hello World” to a window or console. Below is our Hello World application for JavaScript that displays “Hello World” when you click on a button:

So with this script we implement a button that calls a method and we see two basic ways of writing text to a HTML document.

Want to see what JQuery can do? JQuery Site
Create JavaScript from Java: Google Web ToolKit summary