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 /> /**<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!

The first thing I saw last week was Scott Schiller’s amazing Experimental dynamic XBM test, favicon “VU meter”. He put his very useful Sound Manager 2 flash API to interesting use: the favicon displayed in many browsers’ tabs and other places is a VU meter of the current song playing. Awesome! So, using that cool premise, what other neat things could be done…

Enter Mathieu ‘p01′ Henri’s super cool DEFENDER of the favicon! This unbelievable game is confined in a tiny 16×16 box, just big enough for your favicon! You can also hit Enter to transfer the game into a canvas element on the page. So creative, so retro, so cool! I’ve already spent way too much time playing this game, much to the misfortune of my poor squinting eyes.

Last but never least is the always impressive Jacob Seidelin with another mind-blowing demo of what JavaScript is capable of in the right hands. I’m sorry if it’s tiring that I keep reposting what Jacob is up to, but as long as he’s doing incredible things like this, it’s not gonna stop.

You may have already heard about Radiohead’s new video hosted on Google Code. If not, here’s the gist of it:

No cameras or lights were used. Instead two technologies were used to capture 3D images: Geometric Informatics and Velodyne LIDAR. Geometric Informatics scanning systems produce structured light to capture 3D images at close proximity, while a Velodyne Lidar system that uses multiple lasers is used to capture large environments such as landscapes. In this video, 64 lasers rotating and shooting in a 360 degree radius 900 times per minute produced all the exterior scenes.

Awesome right? Well Jacob saw this as a challenge from Radiohead and did what he does: implemented it in JavaScript and canvas. As usual, super cool stuff.

Well, this week’s almost over, so here’s to hoping that next is half as cool as last week was!

In the meantime, many kind folks throughout the Interwebz have pointed out some other similar projects. Those links, in addition to some perusing of my own have come up
with some really interesting stuff. And here they are, in random order:

8 kilobytes of Mario

I’ve said before that Jacob Seidelin is a genius. This was the first article he wrote that did it for me.
This game was engineered in a cool enough way to be covered by engineering superstar John Resig.

DHTML Arkanoid

Written by the very creative Scott Schiller, this is V1.2B. It’s got music, sound effects and slick graphics.

Wolfenstein 5k

Wolfenstein 5K was written for the 5k contest (looks like it’s gone now), which challenges entrants to create a web page in under 5,120 bytes.
Kind of breaks in more recent browsers, but still very cool.
I’ve found that it plays best in Internet Explorer 6 (unfortunately), which is easy to get with
Multiple IEs.

Canvascape – 3d walker

This is an oldie but a goodie. Still blows my mind. I’ve made ray-casting engines before (someday I’ll post about that), but never one with such fine-tuned math.

World of Solitaire

This is a very impressive, very dynamic game written by Robert Schultz and built on YUI.

Dark Age

This one’s really just my favorite among the numerous Def-Logic games.
The controls unfortunately use the ijkl keys to move, which kind of kills most of the games for me. But they’re still visually stunning and amazingly well done.

GoF Software Design Patterns Crossword

Careful! This one’s really addictive.

Space Invaders

This is one of many projects by Luke Wallin, including his
Javascript 2D Game Engine.
I haven’t looked into it much, but it appears that the script is unfortunately built on globals and procedural code.
Please don’t look to it as an example of how to program games.

3D TOMB II

This is one of the many interesting projects over at Mathieu Henri’s website.
Good stuff!

What Else?

There’s also the Ajaxian games topic, which as of this writing has over 50 posts.
If you’re looking for a framework upon which to build JavaScript games, there’s the
Javascript Gamelib games programming library
(now featured on Google Code).

I’m aware that many of these are rather old projects, but they’re new to me so I thought others might be interested.
Do you know of any others? I know they’re out there somewhere! Please share them with us in the comments.

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!