Thursday, January 24th, 2008
The Art and Science of JavaScript 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 :)
Job opportunity: sitepoint is shearching a CSS expert to define left margins :-P
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 (http://worldofsolitaire.com) 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 :)
Like Scott Porter’s GameLib released ?
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.
@Mathieu
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.
I just ordered this book, funny that there’d be a bit on it here the same day
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.
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.
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 :\
I think games in JavaScript can be fun, especially puzzle-like games such as this: http://alienballs.simplewind.com/
(which, btw, was written about 10 years ago.)
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.
Okay, I’m done, please go ahead and read about The Art and Science of CSS Border Slants.
Thanks we found that intresting with the project (java) projest I am working on