Essential knowledge for making HTML/JavaScript-based games [closed]

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.

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.

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.

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.)

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.

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.