up vote 13 down vote favorite
14
Share on Facebook

If i decide to write a simple game both text and graphical (2d) what libs may i use? Assuming 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 dont know how easy it is to setup or use. But this isnt important to me. Its for the question).
link|flag
Should probably be community wiki, as there's no correct answer. – bummzack Oct 4 at 7:38

10 Answers

up vote 6 down vote

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.

Also, here is a Google tech talk about "Building a JavaScript-Based Game Engine for the Web". It looks neat.

link|flag
up vote 1 down vote

Akihabara is a framework that I've seen come up in a number of places. A friend of mine also created a series of tutorials and documentation for the framework.

link|flag
up vote 1 down vote

Pixie Plugins

The creators of Contrasaurus have released a lot of their individual components!!!

They have code to do matrix transformations, canvas abstractions and many many more interesting things.

Their code is great and their libraries are really useful.

link|flag
up vote 1 down vote

Impact is going to be sick! Just take a look at the demo game, Biolab Disaster.

link|flag
up vote 1 down vote

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.

link|flag
up vote 1 down vote

http://rocketpack.fi/ seems to have something coming up.

link|flag
up vote 0 down vote

There is also gameQuery, a jQuery based game engine. Has decent documentation on their API, as well as, a few sound wrapper APIs they link to on their site.

http://gamequery.onaluf.org/

link|flag
up vote 0 down vote

Mozilla Gaming has a list on its Resources pages. It links to Diggy, which is a DHTML game engine I built a while back. Live demo here!

link|flag
up vote 0 down vote

Matrix.js is good if you want to get Flash style matrix transforms.

link|flag
up vote 0 down vote

Impact JavaScript Game Engine for iOS looks promising. The link shows a demo, but it has not been released, yet.

link|flag

Your Answer

 
or
never shown

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