<br /> animate = (function() {</p> <p> var busy;</p> <p> return function(id) {</p> <p> if (busy) return;</p> <p> busy = true;<br /> var width = 0;<br /> var interval = setInterval(function() {</p> <p> var el = document.getElementById(id);<br /> el.innerHTML = ‘@% <div style="width: @px;"><span>@%</span></div> <p>‘.replace(/@/g, width);</p> <p> if (width++ >= 100) {<br /> busy = false;<br /> clearInterval(interval);<br /> }</p> <p> }, 50);</p> <p> };</p> <p>})();<br />

You can view this by itself in the lab.

When I started my new job, I had to make the transition from YUI to jQuery. I’d seen some jQuery code before (in fact, its terseness and use of $ as both an object and a function were easy to spot), but I wasn’t familiar with it. I actually thought that the query part of jQuery meant there was some kind of Standard Query Language interface. There isn’t, but there is a really cool CSS3 selector instead.

Turns out, I was a little disappointed; I wanted to use something query-based. So, I started to throw this script together. I call it JSQL. Below are some quick examples of what it looks like in action:

<br /> var results = JSQL(’SELECT * FROM #ft WHERE nodeName = “LI”);<br />

JSQL always returns an object with an error property that’s either Boolean false or a String stating what error occurred (for example, “Unknown command UPDAT3″). If it successfully retrieves or operates on elements, it returns a count:Number property with the number of elements and an elements:Array property with those elements.

Here are some interactive examples:

Example 1: Checkboxes

<br /> JSQL(’UPDATE #jsql-example-1 SET checked = true WHERE type = “checkbox”‘);<br />

Set Checked

<br /> JSQL(’UPDATE #jsql-example-1 SET checked = false WHERE type = “checkbox”‘);<br />

Uncheck

Example 2: Form Validation

<br /> JSQL(’UPDATE #jsql-example-2 SET parentNode.className = “error” WHERE value = “”‘);<br />

Highlight empty fields

<br /> JSQL(’UPDATE #jsql-example-2 SET parentNode.className = “” WHERE value = “”‘);<br />

Reset

Example 3: Removing Elements

<br /> JSQL(’DELETE FROM #jsql-example-3 WHERE nodeName = “STRONG”‘);<br />

Remove strong tags

In the spirit of jQuery, I also stuck in a quick each method which you can use to iterate through the returned elements immediately instead of setting up your own loop. The context is the current element (like jQuery) and the return value is still the same:

Example 4: Selecting Elements

<br /> JSQL(”SELECT * FROM #jsql-example-4 WHERE nodeName = ‘EM’”).each(function() {<br /> this.style.background = ‘#ffff00′;<br /> });<br />

Select & Operate

<br /> JSQL(”SELECT * FROM #jsql-example-4 WHERE nodeName = ‘EM’”).each(function() {<br /> this.style.background = ”;<br /> });<br />

Undo

I started coding this several months ago, and just recently decided to revisit it. I found the code hard to read myself when making some modifications before publishing it here. That typically means it’s poorly written. And I’m admittedly lousy at writing parsing code… so there’s that. I also doubt it’s realistic for any real-world websites (other libraries handle those jobs quite well), but I thought it would be fun to play with.

Some noticeable features lacking are equivalents to ALTER and INSERT INTO. I’ve also got it up on GitHub, so feel free to fork it, and maybe add those methods yourself!

• [Download jsql.js] (11k)
• [Download jsql-min.js] (3,661 bytes)

But time is a commodity nowadays. I’ve got way less time to write, and when I do, I’d rather be writing code than tutorials (or honestly, playing video games). Sorry about that, but I hope the (well-commented!) source will help those of you out there who’d like to contribute to the slowly growing world of DHTML games.

You’ll notice that this code is over 6 months old. And I’m the kind of developer who constantly updates his style, methods and patterns. Given that, there may very well be many mistakes or bad practices in here, some of which I may have improved upon by now, but others maybe not. Either way, feel free to comment on them, and I’ll answer any questions as well.

Thanks for checking it out, and please be good to it. I’d love to know about any projects created with this source as a basis, and would appreciate links back here. Also please don’t claim it as your own, that’s not cool.

Enjoy!

<br /> $my_string = “This string\n”;<br /> $my_string .= “spans multiple\n”;<br /> $my_string .= “lines.\n”;<br />

Thankfully, PHP has the benefit of heredoc syntax, which makes code like this much easier to read, write and maintain:

<br /> $my_string = <<<MYSTRING<br /> This string<br /> spans multiple<br /> lines.<br /> MYSTRING;<br />

E4X

But what about JavaScript? There is no native heredoc support, but there are some other workarounds that can be used. The first I’ll offer up is ECMAScript for XML (E4X).

<br /> var myString = ” + <myString><![CDATA[This string<br /> spans multiple<br /> lines.<br /> ]]></myString>;<br />

The first line in the above example is a bit confusing. The XML will return an xml object by default, but what we want is a String. We can type the return as a String by concatenating to an empty string ('').

Next, an element must be wrapped around the CDATA to trigger the XML parser. This step is similar to PHP’s heredoc syntax in that it requires an identical beginning and ending identifier.

You can test this yourself in the lab.
Currently, it looks like only Gecko browsers (such as Firefox and Camino) support E4X. This obviously doesn’t include Internet Explorer, which is (unfortunately) often a large portion of most websites’ user bases. While this workaround is interesting, it’s definitely not realistic to assume all of your users are using Firefox, despite its rising popularity (also, it will fail to validate).

Hidden Element Hack

Another workaround I’ve seen is to place the string inside of an element (often hidden from view) and to read it in via JavaScript. Here’s an example:

<br /> /* Based on this markup:<br /> <div id=”multilines” style=”display: none;”><br /> This string<br /> spans multiple<br /> lines.<br /> </div><br /> */<br /> var myString = document.getElementById(’multilines’);<br />

This solution is clever, but definitely a hack job: not very clean, and with a bad accessibility case. The primary issue though is that it doesn’t completely solve the problem. Markup is needed to interact with the JavaScript code, so to use this solution one couldn’t maintain a completely independent .js file.

Escaping linebreaks

Another solution is very simply just to escape line breaks:

<br /> var myString = “This string\<br /> spans multiple\<br /> lines.”;<br />

By escaping the linebreak, you’re free to continue the string on the next line (note: this doesn’t include spaces, so if you want to separate words, you’ll need to begin each new line with a space). This solution is not as attractive as the E4X workaround, but has the benefit of being perfectly cross-browser compatible. Therefore, it looks like it’s currently the best method available.

Do you know of any other workarounds? If so, please let me know in the comments section.

I unfortunately am not allowed to participate, but in anticipation of Yahoo!’s Hack Day 2008, I put together a little app I’ll hopefully be able to port to YAP: twittertyper!

The concept is very simple. twittertyper displays the latest tweet from Twitter. To read the next one, first type out the tweet. The text is highlighted as you go. If you come across a character your keyboard (or operating system) won’t let you type, just press Esc to move on to the next character.

twittertyper currently just pulls in from the public timeline; no authentication is supported to pull from your timeline (maybe in a future version). This mini-app is built on YUI. Source code (uncompressed) is free to peruse.

Try it out!

Note: If you use Twitter, I’m sure you’re used to it being down. Errors happen often, but twittertyper attempts to handle them somewhat gracefully. Usually a page reload should suffice.

<br /> /**<br /> * Global Shark constructor<br /> * Options for ops: dir, speed, url, x, y, zIndex<br /> * @constructor<br /> * @public<br /> */<br /> Shark = function(ops) {</p> <p> var Y = YAHOO.util,<br /> DEFAULT_SPEED = 2,<br /> DEFAULT_ZINDEX = 1000,<br /> DELAY = 25,<br /> LEFT = ‘l’,<br /> RIGHT = ‘r’,<br /> SCREEN_WIDTH = Y.Dom.getViewportWidth(),<br /> SCREEN_HEIGHT = Y.Dom.getViewportHeight(),<br /> SHARK_WIDTH = 242,<br /> SHARK_HEIGHT = 82;</p> <p> var interval,<br /> that = this;</p> <p> that.active = true;<br /> that.dir = LEFT;<br /> that.el = {};<br /> that.onOutLeft = function(){};<br /> that.onOutRight = function(){};<br /> that.x = 0;<br /> that.y = 0;</p> <p> /**<br /> * Initializes the shark variables<br /> * @private<br /> */<br /> var init = function() {</p> <p> ops = ops || {};<br /> ops.speed = ops.speed || rand(DEFAULT_SPEED, (DEFAULT_SPEED * 2));<br /> ops.url = ops.url || ‘./’;<br /> ops.zIndex = ops.zIndex || DEFAULT_ZINDEX;</p> <p> if (ops.dir) {<br /> that.dir = ops.dir;<br /> } else {<br /> that.dir = [LEFT, RIGHT][rand(0, 1)];<br /> }</p> <p> if (ops.x === undefined) {<br /> if (that.dir == LEFT) {<br /> that.x = (SCREEN_WIDTH – 1);<br /> } else {<br /> that.x = -SHARK_WIDTH;<br /> }<br /> } else {<br /> that.x = ops.x;<br /> }</p> <p> that.el = document.createElement(’div’);<br /> that.el.className = ’shark’; // Doesn’t do anything. Just in case you want to use it<br /> that.el.style.position = ‘absolute’;<br /> that.el.style.height = SHARK_HEIGHT + ‘px’;<br /> that.el.style.zIndex = ops.zIndex;</p> <p> Y.Event.addListener(that.el, ‘click’, onclick);</p> <p> document.body.appendChild(that.el);<br /> reset();</p> <p> if (ops.y !== undefined) {<br /> that.y = ops.y<br /> plot();<br /> }</p> <p> that.start();</p> <p> };</p> <p> /**<br /> * Kills the shark<br /> * @param {Boolean} fade Whether to fade the shark in or not<br /> */<br /> that.kill = function(fade) {</p> <p> that.active = false;</p> <p> var done = function() {<br /> document.body.removeChild(that.el);<br /> stop();<br /> };</p> <p> if (fade) {</p> <p> var anim = new Y.Anim(that.el, {opacity : {to : 0}}, 0.5);</p> <p> anim.onComplete.subscribe(done);<br /> anim.animate();</p> <p> } else {<br /> done();<br /> }</p> <p> };</p> <p> /**<br /> * Move the shark<br /> */<br /> var move = function() {</p> <p> if (!that.active) {<br /> return;<br /> }</p> <p> if (that.dir == LEFT) {</p> <p> that.x -= ops.speed;</p> <p> if (that.x < -SHARK_WIDTH) {<br /> that.dir = RIGHT;<br /> that.onOutLeft();<br /> reset();<br /> }</p> <p> } else {</p> <p> that.x += ops.speed;</p> <p> if (that.x > (SCREEN_WIDTH – 1)) {<br /> that.dir = LEFT;<br /> that.x = (SCREEN_WIDTH – 1);<br /> that.onOutRight();<br /> reset();<br /> }</p> <p> }</p> <p> if (that.x > (SCREEN_WIDTH – SHARK_WIDTH)) {<br /> that.el.style.width = (SHARK_WIDTH – (that.x – (SCREEN_WIDTH – SHARK_WIDTH))) + ‘px’;<br /> } else {<br /> that.el.style.width = SHARK_WIDTH + ‘px’;<br /> }</p> <p> plot();</p> <p> };</p> <p> /**<br /> * Kills the shark. Note: intended to be overwritten<br /> */<br /> var onclick = function() {<br /> that.onclick();<br /> };</p> <p> /**<br /> * Default onclick behavior<br /> */<br /> that.onclick = function() {<br /> that.kill(true);<br /> };</p> <p> /**<br /> * Moves the shark element to the XY coordinates<br /> */<br /> var plot = function() {<br /> that.el.style.left = that.x + ‘px’;<br /> that.el.style.top = that.y + ‘px’;<br /> };</p> <p> /**<br /> * Returns a random number<br /> * @param {Number} from The starting point<br /> * @param {Number} to The stopping point<br /> * @return {Number} A random number within the range<br /> */<br /> var rand = function(from, to) {<br /> return (from + Math.floor((to – from + 1) * Math.random()));<br /> }; </p> <p> /**<br /> * Sets the background based on direction and randomizes the Y position<br /> */<br /> var reset = function() {</p> <p> that.el.style.background = ‘url(’ + ops.url + ’shark_’ + that.dir + ‘.gif)’;<br /> that.y = rand(0, (SCREEN_HEIGHT – SHARK_HEIGHT – 1));</p> <p> plot();</p> <p> };</p> <p> /**<br /> * Starts the move interval<br /> */<br /> that.start = function() {</p> <p> if (interval) {<br /> return;<br /> }</p> <p> interval = setInterval(move, DELAY);</p> <p> };</p> <p> /**<br /> * Stops the move interval<br /> */<br /> that.stop = function() {<br /> if (interval) {<br /> clearInterval(interval);<br /> interval = false;<br /> }<br /> };</p> <p> init();</p> <p>};<br />

You can create new sharks like this:

<br /> var myShark = new Shark();</p> <p>// Or setup some basics, like having him swim to the left<br /> var anotherShark = new Shark({dir : ‘l’});<br /> anotherShark.onclick = function() {<br /> alert(”I’m a shaaaaaaark!”);<br /> myShark.kill(true); // Kill it with a fade<br /> };</p> <p>// You may also want to host the shark images yourself:<br /> var hostedShark = new Shark({url : ‘http://mydomain.com/shark/’});<br />

The last example above shows setting a custom URL for the shark images. You can download those here:

There are a few different events you can subscribe to including onclick, onOutLeft and onOutRight, which I think are pretty self-explanatory.
Using these events, I put together a very simple game involving sharks, clicking and hopelessly trying to save a doomed diver. The ocean graphics came from one of my favorite CSS Zen Garden examples.

The shark script requires YUI (Animation, DOM and Event). I’ve included it in the third download option below:

• [Download shark.js] (3,747 bytes)
• [Download shark-min.js] (1,550 bytes; compressed)
• [Download shark-min-yui.js] (46k; compressed with YUI)

I’d love to see if anybody else has cool ideas of what to do with the shark script!

I must have been feeling nostalgic, missing my wasted hours playing old Nintendo games as a kid, because last weekend I put together Spacius! A Space Adventure. My goal was to make a fun, simple game using only JavaScript that would work in any browser. That’s right folks, this game was made using just div elements! Really, there’s nothing hardcore in here that would require canvas, so I guess that shouldn’t blow any minds. But this game has been tested and works in IE6, IE7, FireFox 2/3, Opera 9.5 and Safari 3.

My one cop-out was falling back on flash for the audio, but until all browsers support HTML5 (or some mad genius makes a JavaScript-only audio player), this is the best I could do. Spacius! uses Scott Schiller’s fantastic Sound Manager 2 to enable sound. There’s a little latency, but it otherwise works like a charm.

One really cool thing about the way Spacius! works is that it takes the shape of its containing element. So it was really trivial to make an 800×600 pixel version.

Here’s how to play: Press the space bar to begin the game. Use the arrow keys to move the ship. Once playing, use the space bar to shoot balls of excitement. The S key toggles sound on/off.

There are six waves in Spacius!. The last one begins at 10,000 points, and it’s really hard so only total badasses will be able to get super high scores (yes, that’s a challenge).

Here are the UFO scores:

Bomber: 15 points

Bogey: 20 points

Meteor: 50 points

“Death Star”: 25 points

So what’re you waiting for?? PLAY NOW!