I always used to love typing in BASIC computer games. I've been learning new Javascript techniques for work. I figured I'd combine the two things and turn some old BASIC computer games into Javascript programs to brush up my skills and have fun in the process.

My current employer uses an older C indentation style that indents curly braces along with their contents. It took some getting used to, but now I'm used to it, so I write code using this style. If it bugs you, feel free to make a copy of the code and change it.

Javascript can be a bit of a clunky language, plus there are various cross-browser compatibility issues. Frameworks like MooTools help make the code more concise and readable and smooth out compatibility problems. I like MooTools for its Class structure, $() selector function and easy event handling mechanism. I've already managed to turn 58 lines of BASIC into 348 lines of Javascript, 83 lines of CSS and 41 lines of HTML; without the compactness allowed by MooTools, it would be slightly more ridiculous.

A lot of old BASIC games involve reading large blocks of text and then typing in responses, but this one is very visual -- it really benefits from the conversion, since clicking on the puzzle is a lot more natural than typing in numbers between 1 and 16.

I tried to make the code fairly clear and use good programming practices. There are a couple things worth looking at if you're interested in learning about web programming:

• Separation of HTML, CSS and Javascript - The HTML file is a bare framework with placeholders for the interactive elements. No explicit style information is used, just class names. The Javascript file only changes the style of elements by adding or removing class names, and it takes care of adding all interactivity to the page's buttons as part of its start-up process. All specific visual presentation information (other than the order of elements) is handled by the CSS file. This separation makes pages a lot easier to maintain in the long run -- you can look at program logic without having to dig through lots of display specifics, and you can change the cosmetics of the program without digging into the program logic.
• Variable scoping and anonymous functions - Javascript has the interesting concept of anonymous functions; you can actually create a function and assign it to a variable. This is frequently used to attach actions to buttons and page elements. The Rotate program does some slightly tricky (but useful) things to set up the click actions on the tiles -- take a look at the get_click_callback() routine for more details.

There's definitely room for improvement here -- it might be fun to use cookies to make the game history tracking more persistent. The CSS could probably be polished to make things prettier. The pop-up alerts would look better if they were rendered as page elements rather than the ugly browser defaults. Feel free to improve upon the design, and please let me know if you do!

Probably. Feel free to ask questions or yell at me -- my email address is demiankatz@gmail.com.