If I decide to write a simple game both text and graphical (2d) what libraries would I use? (Assume we are using a HTML5 compatible browser)

The main things I can think of

Rendering text on screen

Animating sprites (using images/css)

Input (capturing the arrow keys and getting relative mouse positions)

Perhaps some preloading resource or dynamically loading resources and choosing order

Sound (but I am unsure how important this will be to me at first). Perhaps with mixing and chaining sounds or looping forever until stop.

Networking (low priority) to connect a user to another or to continuously GET data without multiple request (I know this exist but I don't know how easy it is to setup or use. But this isn't important to me. Its for the question).

As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
If this question can be reworded to fit the rules in the help center, please edit the question.

18 Answers
18

jQuery and MooTools are awesome JavaScript libraries; I prefer jQuery myself. Either one will assist you in your JS game development if you use the DOM. If you go with Canvas rendering, I still think you should use one of those libraries, but you will need to learn the Canvas functions. Here is a tutorial which introduces you to canvas by creating a Breakout clone, so it might be exactly the kind of thing you're looking for (and it uses jQuery).

Animating sprites is a matter of changing an image src, or preloading several images and swapping them out, or in a canvas just drawing frames of an animation. The above libraries can help with any of these cases. The libraries also help with input (look into events such as onkeypress and onmousemove).

For preloading resources, I've seem some games that use a single "sprite sheet" image (here is the one for Google's Pacman game). I believe they basically create a DIV of one tile size, with the CSS background-image property set to the sprite sheet and the background-position property set to the offset of the tile on the sprite sheet. I haven't seen a library that will do this for you, but jQuery or MooTools can help you as far as dynamically creating the DIV and manipulating its CSS. Otherwise, preloading images is a matter of creating <img> tags of the images you want preloaded, and not adding them to the page (or adding them invisibly). Here's a blog post that has some code for a function using jQuery to preload images for you.

SoundManager 2 seems to be the JS sound library to use; I know Vanthia uses it, and Google's Pacman used something similar (or at least the same technique, of using a hidden Flash file on the page to play sounds).

For networking, jQuery can handle AJAX for you, or if you want much more real-time networking (and have the server to do so), look into JavaScript sockets. I don't know if there's a stable library out there for it, but you might look into this or this. Essentially it uses a hidden Java or Flash file on the page so that you can do true socket communication with JavaScript, which is much quicker than AJAX polling and slightly more efficient than "AJAX Push". However, most likely, AJAX Push will be what you want, and APE (Ajax Push Engine) is probably the library to use.

This answer is a bit conservative; if he wants to use html5 browsers only then he can go for canvas and use one of the html5 libraries (see my comment on the question). Using DOM & CSS for games seems like a hack (though a workable hack in some cases).
–
oberhamsiMar 7 '11 at 9:31

2

What makes it seem like a hack? Google had no problem using pure DOM & CSS with their PacMan logo and I quite like my pong game on my homepage. Actually to be honest, canvas seems like a hack, hacking a square of graphics rendering into a page otherwise dominated by the DOM. But alas with the push towards that and WebGL it's clear the browser will become the heavyweight do-everything app if it isn't already. I digress...
–
RicketMar 8 '11 at 2:33

If he wants to use audio, networking, text rendering he will have to use html5 ready browser. Alas canvas would be a good pick. If you stick with DOM&CSS you are limited in so far as these technologies already make up a presentation layer with certain assumptions (text flow, layering, kind of a scene graph for a text document). Whereas with canvas you can manipulate pixels in any way you see fit, which is closer to 'normal', raw game engines on top of SDL or opengl.
–
oberhamsiMay 6 '11 at 7:51

The audio and networking libraries I provided don't require HTML5. And actually I see the text flow, layering and scene graph likeness as benefits. Most games are just sprites (images) being positioned and moved around and don't need direct access to pixels. It really needs to be evaluated based on the game that you want to make though, and also if you are personally more comfortable with canvas or DOM, if you want to support older browsers, if you need the extra power canvas provides, etc.
–
RicketMay 7 '11 at 16:47

1

yeah, it depends on the game. But he asks for HTML5 and your answer is mostly about Flash and DOM level 1 :) If he wants to do bleeding edge HTML5 development then don't lure him back.
–
oberhamsiMay 26 '11 at 14:08

(Incidentally, another option that looks pretty slick initially is http://impactjs.com/ but considering it costs money and the other options I looked at were open-source engines there were some glaring omissions, like the inability to attach display elements in a heirarchy.)

UPDATE: It's been almost 2 years since I posted that answer and the situation has changed slightly (this is a nascent area of technology.) Although Crafty is still a great choice, in the past year EaselJS has picked up a lot of momentum (especially considering Adobe hopped on the EaselJS train.) I'm gonna switch to that tool for future projects (also note that it has a new website)

The Effect Games engine (javascript) is fantastic for 2d, tile/sprite-based games. The website doesn't do a very good job of describing what's so great about it, but as soon as you dig into the excellent documentation you'll see how much has been covered for you:

spriting

collision detection

level editing

asset management

audio

input and control

tileset creation and management

layering

animation

performance (lock to a framerate)

cross-browser support and abstractions

hosting

embedding

HUD support

I really can't provide an exhaustive list as it's so fully featured. One thing that's missing is the ability to create in-game menus and UI (eg. equipment managers etc), but it's supposedly on the todo list.

I've been doing some research in this area lately myself, so let me chip in my $0.02:

PlayN Is a cross platform library from Google, which compiles an object oriented game from Java to javascript/Flash/Android. It will handle JSON (AJAX), data models, and has sane semantics for updates and rendering. Very cool stuff.

Processing Is a simple to use library that is aimed at designers and artists. It's exceptionally simple to use and can give you great results. I've used the Java version for scientific modelling, and it is a delight to use. The 3D scenes will need WebGL, but the 2D scenes work without.

Three.js Has some great looking demos. It requires WebGL, but the result seem worth it. There are some exiting examples online too.

Here are some of the other items in my personal linkdumps that relate to WebGL:

I usually use jawsjs because it's really easy to set it up and start developing a game in minutes. It has lots of really useful default classes (Tilemap, Viewport, Sprite, and others) that really help with game development.

You might want to consider an engine like ours as it does a lot of the legwork for you. For example to do collisions in code yourself can be really tricky (think polygon collisions). Everything on your list is easily achievable with Construct 2.