So right now I am taking a class on the development of games and applications using HTML5. Now generally, when one things of HTML, a lot of people would think of things like static backgrounds, formatting text, and using CSS to change the sizes of paragraph indentations. After doing a little bit of work with HTML5’s Canvas API, however, it’s easy to think of HTML of less of a markup language for text and images, and more of a dynamic, “living” language which has the graphics potential to compete with other web-compatible platforms, such as the Adobe Flash plugin.
Of course, when I refer to HTML as a programming language, I don’t mean that there’s some kind of <function> and <variable> tag you can use within HTML to do calculations (at least, not yet). From what I have seen, the most effective way of making games and other media applications within HTML is to use a canvas tag, and within that canvas tag, call functions and commands through JavaScript. It makes things pretty easy, actually.
For example, consider the following code:
<script>
window.addEventListener(“load”, init);

function init(){
var canvas= document.getElementById(“canvas”);
var ctx=canvas.getContext(“2d”);
ctx.fillStyle=”#CC0000″;
ctx.fillRect(50,50,20,20);
}
</script>
<canvas id=”canvas”>
</canvas>

This code will draw a simple rectangle on the canvas. It seems simple (and useless) enough, but you add an update loop and keyboard input, and you’ve got a moving rectangle. Add collision detection and other rectangles being created and moving a little bit across the screen each update loop, and you’ve got a main game mechanic. Add a score counter by counting the amount of updates since a collision, and you’ve pretty much got yourself a complete game. Not only is coding for Canvas only marginally more tedious than coding in Actionscript (and pretty syntactically similar), but since the Canvas API can already do a lot of stuff Flash can do, it’s easy to see why Apple believes HTML5 to be a “Flash killer”.
I’ve recently spent a few weeks creating a platformer made entirely out of Canvas and Javascript in the Programming Projects section of this website. If you want to see some of the more complex stuff you can do with Canvas, you should take a look!