Take the 2-minute tour ×
Game Development Stack Exchange is a question and answer site for professional and independent game developers. It's 100% free, no registration required.

I was wondering if any experts out there could share the knowledge and resources of what is necessary to start making games with the latest HTML standards and JavaScript (or what some like to call HTML 5). Are there JavaScript libraries that are essential to the process? Aside from the <canvas> tag, what other pieces of HTML do we need to be aware of?

share|improve this question
add comment

closed as too broad by Byte56 Jul 12 '13 at 19:08

There are either too many possible answers, or good answers would be too long for this format. Please add details to narrow the answer set or to isolate an issue that can be answered in a few paragraphs.If this question can be reworded to fit the rules in the help center, please edit the question.

6 Answers

Knowledge of what HTML5 components are supported in what browsers.

Though cross browser compatibility is getting better and more uniform as time goes on some of the newer components are still not supported entirely equally.

Local storage may have some browser specific differences, and for legacy support you'll definitely need a library such as jStorage or YUI Storage Lite.

Web sockets as well may have browser specific differences, but socket.io looks like a promising library that provides a convenient abstraction.

Audio compatibility is a pretty major component that requires different sound files for different browsers: http://html5doctor.com/native-audio-in-the-browser/

Chrome has a couple of significant audio bugs, such as being unable to play short audio files, and playing many simultaneous sounds can crash the entire browser.

The main thing is to understand the browser differences, using libraries to abstract and provide legacy support as needed.

share|improve this answer
add comment

In addition to some of the game-making frameworks that are out there, you should be aware of the Burst Engine, which is a JS framework for displaying SVG-based animations in an HTML5 Canvas:

http://burst.bocoup.com/

So far I've seen people mention the and tags, but there are other DOM things that are vital to JS/HTML game development, including stuff like adding EventListener callbacks to the element for things like the 'mousemove' and 'mousedown' events. For example, this takes the first canvas element it can find and sets it up so that when you click on the canvas, it calls a function you've defined called "shootAtClick":

document.getElementsByTagName("CANVAS")[0].addEventListener('mousedown', shootAtClick, false);

You can see it in action in this example where I've extended the Akihabara engine to accept basic mouse control. (Press Z to begin, use arrow keys to move, click the mouse to shoot in the direction of the cursor.)

share|improve this answer
add comment

Just to throw more resources out there, check out RaphaelJS. It's a very nice SVG drawing and animation library that has a nice API. Don't forget to check out the demos.

Overall, I'd recommend <canvas> tags over straight DOM manipulation (e.g. making each sprite its own <div> to make hit-testing amazingly simple). It's easy to get DOM manipulation wrong and badly performant, whereas traditional 2d development strategies work well on an HTML canvas.

share|improve this answer
add comment

There are a couple of frameworks already: GameQuery and Akihabara, which is a plugin for jQuery to do some game-related activities, like animations, grouping sprites, detect collisions and read player input.

share|improve this answer
add comment

HTML and JavaScript are honestly fairly bad platforms for game development, but that won't matter until you've decided on a kind of game. The answer would be radically different for a first person shooter, an RTS or a puzzle game.

Notice that you're starting to get vague, hand-wavey answers rattling off random technologies that seem neat. That's a warning sign that you haven't asked a question with a particularly legitimate answer.

You might as well ask what C++ stuff you need to write applications. That depends. Tell us more about the project, and you might get a useful answer.

By and on the whole, there's a reason that nearly all web games are still Flash.

share|improve this answer
    
Actually, this "question" was explicitly meant to be vague in order to assess and build up a searchable resource on this site for the curious minds who want to experiment in this development environment. –  Edmundito Jul 23 '10 at 18:24
4  
I'd agree that the question is vague and the answers all over the place, but disagree that "HTML and[JS] are... bad platforms for game development." Remember Google's Pac-Man doodle? Straight HTML and JS. I think a certain kind of casual game works pretty well on that platform, and web-using humans already have the runtime. ( = –  D. Hayes Jul 24 '10 at 21:57
1  
Wow, pac-man. Groundbreaking. There's a reason nobody uses HTML/JS in gaming for anything other than tech demos. –  John Haugeland Jul 27 '10 at 3:33
1  
@Edmundito : If that is how you feel this 'question' should go, it should be marked as CW. –  Noctrine Aug 1 '10 at 3:41
12  
-1 worthless answer. If your opinion is that web games aren't a good platform then sit down. I don't know why this got so many upvotes, maybe other people share your opinions but it doesn't contribute to answering this question at all. –  Ricket Aug 9 '10 at 14:24
show 5 more comments

You should be aware of the Audio and Video tags. Web Storage is pretty critical if you need to save a lot of data for saved games etc.

There are already a few Javascript html5 game frameworks, Akihabara is rather popular.

As far as other libraries, Jquery and Functional Javascript are 2 of my favorites.

share|improve this answer
    
what are the strengths of each frameworks? Which one is the simplest, the most robust and with the cleanest code? The word "Functional" in the Functional Javascript -term sounds interesting, what is it really about? Which framework would you suggest to pythonist? –  user6365 Apr 14 '11 at 10:21
add comment

Not the answer you're looking for? Browse other questions tagged or ask your own question.