Javascript Game: What should i know?

Question

I am thinking as a challenge i should write a javascript based game. I want sound, images and input. A background to simulate a screen (like 640x480 with all my images in it) would be useful to separate the rest of the page from the 'game'. What should i look at?

Some things i would need

• Framecontrol. A way to get the current time (or delta).
• Image, displaying it and moving it. How do i display full image. Knowing pixel access may be cool.
• Input A way to lock it in a box (like flash does) is cool.
• Sound play simple sounds on demand (like when i get a hit). Several sounds at once would be great
• Bottlenecks. What are things that will kill the CPU?
• Restrictions. What cant i do? I hear i cant 'sleep' to wait. I must set a callback
• Good or best pratice. What are good things i can do to either keep speed up or to lower glitch or compatibility problems.

Answer 1

As a starting point, you may want to write it for Opera, as Opera provides a game canvas that will help you out.

For some examples of games in javascript: http://dev.opera.com/articles/view/3d-games-with-canvas-and-raycasting-part/

http://my.opera.com/WebApplications/blog/show.dml/200788

This one is interesting, it is demos of games using the canvas element. http://www.canvasdemos.com/tag/games/

The best way to see where the problems are is to start writing the game, and then you will see what may be a problem. By looking at demos you can get an idea what performance issues they encountered. For example, a full 3D Doom game will have problems, but, as the first article above explains, there are some ways to optimize for javascript.

Once you get it working with Opera, then you can look at Firefox 3.5+ and Safari, as well as Chrome, and see if you can make some changes to have it work on those. How many platforms it works on depends on how much work you want to do for it. For a proof-of-concept pick the easiest browser for your task.

Answer 2

I'm going to answer this looking at things from a mootools javascript perspective:

Framecontrol. A way to get the current time (or delta).

periodical()

Image, displaying it and moving it. How do i display full image.

setStyles()

Input A way to lock it in a box (like flash does) is cool.

Plain old CSS

Sound play simple sounds on demand (like when i get a hit).

Swiff, remote();

Bottlenecks. What are things that will kill the CPU?

Internet Explorer.

Restrictions.

3D ... ?

What are good things i can do ... to lower glitch or compatibility problems.

Use a framework.

Answer 3

The best place to start would be to get very familiar with the <canvas> tag (it allows you to draw anything on screen)

This may help a lot: http://benfirshman.com/projects/jsnes/ its an online NES emulator that renders everything on screen - the source is also available

Hope that helps =)