Creating a Javascript Game (LetterLock)

LetterLock - A Word Game

I recently created a simple word game using Javascript, which presented certain challenges. The game displays 3 random letters to the player, who must then attempt to create a dictionary word in as few moves as possible by shifting the letters up or down in the alphabet.

There were several programming decisions or challenges that came up during the game’s creation, for which I was able to apply some of the things I learned in my recent computer science classes.

Continue reading Creating a Javascript Game (LetterLock)

Hunt the Wumpus

I am taking a course in discrete mathematics this semester, and the professor suggested we take a look at a game called Hunt the Wumpus.

Hunt the Wumpus was originally created in the 1970s, and unfortunately, most of the versions you can find on the web today are easier and less interesting that the original. The original eschewed a square grid for the game board and instead used a “squashed” dodecahedron, where each game space was one of the vertices.

It is also noteworthy for introducing the superbat, a feature of other games (including Zork) that followed Hunt the Wumpus, and for the humorous feedback (e.g. “ZAP–Superbat Snatch! Elsewhereville for you!”) that many of my favorite games adopted.

At any rate, I decided to recreate a version of the easier and less interesting grid-based game in Javascript:
Hunt the Wumpus

Javascript insertAfter()

There is no Node.insertAfter() DOM function in Javascript, but it is clearly something that developers would like.

As the Gecko DOM Reference for Node.insertBefore() points out, this can easily be achieved with
parentDiv.insertBefore(nodeToInsert, nodeToInsertAfter.nextSibling);

If nodeToInsertAfter doesn’t have a next sibling, a NULL value will be returned and nodeToInsert will be inserted as the last child of parentDiv.

If you find it frustrating to type insertBefore when you want to insertAfter, that’s OK: you can add that function to the Object object:
Object.prototype.insertAfter = function (newNode) { this.parentNode.insertBefore(newNode, this.nextSibling); }

Now you can type:

Javascript textarea counter

I’ve been thinking more about the textarea counter issue that I mentioned in my previous post (“Users Paste Differently“).

First of all, I noticed that some of the textarea counter scripts date back to at least 2000, so this has been a problem that developers have been looking to solve for 8 years. I checked the HTML 5 specification and found that in HTML 5, the textarea element has a maxlength attribute. Presumably user agents will build in the most elegant solution.

But what is the current most elegant solution? Continue reading Javascript textarea counter

Users Paste Differently

I’ve been using a relatively generic Javascript textarea counter for several years to restrict the input length on form textareas. I’m not sure where the specific version I’m using came from, but you can find dozens like it on Google.

Almost all of them rely on the onKeyDown and onKeyUp events to trigger the script. However, some users still manage to submit text that exceeded the limits, even though the application required Javascript. I could not for the life of me reproduce this issue…until today.
Continue reading Users Paste Differently

Why Doesn’t TinyMCE load in IE?

looks like it is all due to the insertAdjacentHTML call being used in another library. In my case, wz_tooltip. Oh wow did this hurt me. So that horror of a project that keeps on poking its head up sent in another small request… put tinyMCE or FCKeditor into one page on the website. Offered 5 hours. Well TinyMCE is already installed, so I figured this was a chance to recoup a little of my loss on this project. Sure enough, I activated TinyMCE with about 5 lines of code, checked that it worked in Firefox, and billed my money.

Next morning I get a call. The thing doesn’t work in IE. So I try a few quick and obvious things, move around where it gets loaded, try a few different load orders. No luck. Grr. I was going to type out my whole damn process, but I realized that’s not what people want to read…

Short version is: the wz_tooltip.js library conflicts with the TinyMCE library ONLY in Internet Explorer. This is because of a call to insertAdjacentHTML which is an IE-only javascript call (thanks again for embrace and extend M$). As a workaround, you can modify the wz_tooltip file by commenting out from line 397 (inclusive) (thats: if(wztt_body.insertAdjacentHTML) ) down to line 400 inclusive (thats : else if(typeof wztt_body.innerHTML != wztt_u && document.createElement && wztt_body.appendChild) ) And now I’m off to submit bug reports.

What a waste of a morning.

The Javascript Dollar Sign ($) Function

Recently, I’ve been seeing a lot of Javascript functions prefixed with a dollar sign ($) or simply named $. I thought, what sort of magical property does the dollar sign have in Javascript? What sort of esotericism had I uncovered?

The Dollar Sign Magician

I checked the O’Reilly Rhinoceros book, and found that the dollar sign has no special properties.

However, I have come to discover that dollar sign function has become the more-or-less de facto shortcut to document.getElementById(). Let’s face it, we all use document.getElementById() a lot. Not only does it take time to type, but it adds bytes to your code as well.

Here’s the version from prototype.js, which can return more than just a single element:

function $(element) {
  if (arguments.length > 1) {
    for (var i = 0, elements = [], length = arguments.length; i < length; i++)
    return elements;
  if (Object.isString(element))
    element = document.getElementById(element);
  return Element.extend(element);

Because it has become a common shortcut to document.getElementById(), it means that various Javascript libraries should play nicely together: if the dollar sign function in one .js file is overwritten by the same dollar sign function in another .js file, everything should still work. That also means that creating your own dollar sign function that does something different is probably not a good idea.

In case you were wondering, the underscore has no special properties either. But let’s face it, $(‘myVal’) looks more like programming than _(‘myVal’).

Update 2012
By now, the most common use of the $() function is as synonym for jQuery() in the popular jQuery Javascript framework. It returns a jQuery object (or objects), which includes much more than just a reference to the DOM element. (In jQuery, you can still access the underlying DOM element using .get().)

Likewise, the Prototype code I cited above also returns more than just a reference to a DOM element, as it returns an extended version of the element. As such, Prototype and jQuery will almost certainly not work well together in the majority of cases.

Does releasing code to the public inspire extra effort?

About 2 years ago, I created a javascript image/photo gallery to embed gallery functionality into a web site using only client-side processing. Although I created it for a specific purpose, it was generic enough that I decided to make it available for other people to use on their sites.

Imagine my surprise when people took me up on that offer.

Continue reading Does releasing code to the public inspire extra effort?