Thursday, January 24th, 2008

The Art and Science of JavaScript Games

Category: Articles, Games

James Edwards has written a very detailed tutorial on using dhtml to create a game which is part of his book:

In this chapter, we took the languages of CSS and JavaScript well beyond the tasks for which they were intended?the presentation and basic behavior of HTML documents — and used them to create an interactive 3D maze.

First, we looked at the basic principles by which triangles can be displayed using only CSS. We then extended that concept to render a perspective view, creating the illusion of three dimensions. Next, we established a convention for specifying floor plan data, and for dynamically translating that data into a perspective view. By adding listeners for user events, we successfully created an interactive maze that can be completely customized and extended. To top things off, we added some usability aids, such as a top-down map, and accessibility aids including keyboard navigation and captions.

While I haven’t delved into the details of every method that comprises the game script (there are plenty of comments, so I’ll leave that for you to pursue in your own time), I hope this chapter has convinced you to look at JavaScript in a new light. The possibilities really are only limited by your imagination!

Wowser :)

Posted by Dion Almaer at 6:04 am

4 rating from 26 votes


Comments feed TrackBack URI

Job opportunity: sitepoint is shearching a CSS expert to define left margins :-P

Comment by andytesti — January 24, 2008

I believe we are at the very early stages of a promising new frontier for Javascript gaming. There has been more and more talk about this recently, even actual javascript libraries made specifically to create javascript games.
My JavaScript game, World of Solitaire ( recently surpassed 10 MILLION dealt hands in just a few short months. Traffic continues to climb and climb. I view this as just more proof that JavaScript games are ready for prime time. I’m already thinking about what game to do next… in JavaScript of course :)

Comment by Robert Schultz — January 24, 2008

here has been more and more talk about this recently, even actual javascript libraries made specifically to create javascript games.

Like Scott Porter’s GameLib released ?

JavaScript games are ready for prime time.

If you limit your definition of games to puzzles and other slow pace or little animations games, yes. Actually JS have been ready for years.
But if you take into consideration fast-ish paced games or games with rich animated graphics, then that’s a different story.

The Canvascape, Canvex and 3D TOMB II, to name a few, are far from being ready for “prime time”. Sorry.

Comment by Mathieu \'p01\' Henri — January 24, 2008

Casual games are a big market, and with JS/Canvas/SVG/VML, the technology is definitely far enough along to do that. I doubt that anyone really expects to do fast-paced games in JS (atleast until it gets native multithreading and some performance tweaks), even Flash games have usually been relatively simple.

Comment by Andy Kant — January 24, 2008

I just ordered this book, funny that there’d be a bit on it here the same day

Comment by starkraving — January 24, 2008

lol @ anditesti
Too many web 2.0 sites have thrown margin out the window. I don’t get it. Do other users always run their browser fullscreen? I definitely don’t, I’ve always got other programs running. It’s sad how many designs forcibly take up every pixel of a 1024px+ width. Maybe as mobile browsing really ramps up pages will adapt.

Comment by Charles — January 24, 2008

It is amazing to me when I play an incredibly realistic game on the computer, and then when someone makes a game even more simple than the original Doom in JavaScript everyone is impressed. Yes, it is impressive how James pulled that off in JavaScript, good job. But unfortunately the end result is still worse than what we had 10 years ago on the computer.

Comment by iMarc — January 24, 2008

Andy Kant: Fair enough.
OTOH I still enjoy a casual Quake death match.

iMarc: 10 years ago ? Midi Maze, released in 1987 is lightyears ahead of what’s depicted in this article/chapter.

… and sorry for the FUBAR markup in my previous comment. Oh! if only there was a comment preview :\

Comment by Mathieu \'p01\' Henri — January 25, 2008

I think games in JavaScript can be fun, especially puzzle-like games such as this:
(which, btw, was written about 10 years ago.)

Comment by jacksonpauls — February 14, 2008

The funny thing is I built something like that without even knowing about James’ work. My source was a page called CSS border slants, which provides a quite more elegant solution for drawing triangles and trapezia (no clipping whatsoever!). The result of my efforts is the 3D JavaScript action game Jangaron.
Another thing I found rather ridiculous in James’ article (sorry, but it’s true) is the TR(ou)BL(e) mnemonic to remember the order of CSS borders, but I’m going to elaborate on that in my blog.

Comment by Joo — April 11, 2008

Okay, I’m done, please go ahead and read about The Art and Science of CSS Border Slants.

Comment by Joo — April 11, 2008

Thanks we found that intresting with the project (java) projest I am working on

Comment by Aphrodisiac — August 15, 2008

Leave a comment

You must be logged in to post a comment.