up vote 5 down vote favorite
6

Hi! 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?

flag

5 Answers

up vote 6 down vote

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.

link|flag
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 at 18:24
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 2 days ago
@D. Hayes they used Flash for the sound as well. – Allan 2 days ago
Yup! But they had to turn it off during the course of the day because of problems with the Flash runtime in Firefox. No such problems in HTML/JS. I'm just sayin'. – D. Hayes 10 hours ago
up vote 2 down vote

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.

link|flag
up vote 2 down vote

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.

link|flag
up vote 1 down vote

I'm writing a game in HTML5, the current early version may be found from: http://boxbase.org/fun/knights though I will likely move it elsewhere once I get it readied. The reason to write it this way is the visibility - everyone who just happens to navigate on the site can play it.

From my point of view javascript+HTML5 will be an excellent platform for large amount of indie-games.

It'd be pretty much useful to know everything of HTML5 because you eventually need much of it. I'll need at least Audio, Image, canvas, WebSocket, few event handlers and timing -mechanisms at the clientside. They are all pretty easy to use.

example.js:

window.onload = function(){
    var canvas = document.getElementById('example');
    var cx = canvas.getContext('2d');
    cx.fillRect(20, 20, 100, 100);
};

example.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>example</title>
    <script type="text/javascript" src="example.js"></script>
</head>
<body>
    <canvas width="120" height="120" id="example">HTML5 required</canvas>
</body>
</html>

http://developer.mozilla.org/ has lot of useful documentation on it all, javascript and canvas documentation especially.

One good idea would be to ignore internet exploder as a platform and develop it all on google chrome. That way it has highest chances to work all right on Firefox and safari -browsers as well (60% of users in web).

link|flag
up vote 0 down vote

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.

link|flag

Your Answer

get an OpenID
or
never shown

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