Before you get started, you might want to make things easier by making sure you have the following:
Up-to-date Firefox Web browser - Version 3.6+ or higher recommended.
Firebug for Firefox - This add-on, available in the Firefox add-on repository, is a great help for debugging JavaScript.
A text editor - Any one will do, just use the text editor you prefer. Make sure to save all JavaScript and HTML source files to plain text, though!
Once you have all that rounded up, you're ready to rock. So, let's lay a little groundwork for our project, which we'll call "HoT MetaL JaZz". Don't worry, the name is irrelevant to the actual project, so just push those images of whatever weirdness you came up with after hearing that title right out of your head.
First thing's first - we need a source file to put all our wonderful code in. It's simple - just create a new text file, and name it "htmljz.html" - or whatever else you like, just so long as the file name ends with ".html". Now use your text editor to open the new file.
Now we are presented with a blank canvas on which to write our code. The first thing our file needs is a doctype declaration. This is simple enough - in the old days, our doctype declarations were long, messy, and hard to remember. But now, all we need is...
<!DOCTYPE html>
And that's pretty much it! This little doctype declaration is all we need under the HTML5 specification. Now, we can get started on the HTML portion of our game.
Now, let's use this template for the HTML portion of our game:
<head>
<title>HoTMetaL JaZz</title>
<script>
function startGame() {
//Our game's startup code will go here
}
</script>
<style type="text/css">
body { margin: 0 auto; width: 300px; }
</style>
</head>
<body onload="startGame();">
<canvas id="gamecanvas" width="300" height="300"></canvas>
<canvas id="backbuffer" width="300" height="300" style="display:none;"></canvas>
</body>
That is our basic skeleton page for HoT MetaL JaZz. The "title" tags set the caption of the browser's title bar - whatever you put there is what will be displayed on your browser's title bar. Our game script code will live between the "script" tags. The style tag denotes the width of the page and adds a simple CSS trick (a la the margin setting) that will allow us to center our game on the browser's viewing area. In the body, the "canvas" elements are what we'll be using for drawing our game's graphics - the canvas with the id "backbuffer" is set to not display, as we'll be using that as a back buffer to make our scene drawing a little smoother.
When you save the file, open it in your browser and behold! Nothing. Well, what were you expecting, fireworks? We still need to add more to get anything going on, but just to ensure your code is working, try hovering your mouse cursor over the top-center of your browser's viewing pane, and right-click. If you have the options "View Image" and "Save Image As..." show up in your context menu, then all is well.
Now that we have our skeleton page, we can start learning how to write awesome games in HTML5 and JavaScript. Our next article will cover the basics of using HTML5 canvas functionality. Happy gaming!
Wow, the document deceleration really is much simpler!
ReplyDeleteI'd like to see how this progresses as I cannot program in HTML5. I do think it would be easier to use HTML with an IDE. Just to have some syntax highlighting and stuff like that to neaten it out. The next release of NetBeans should have this, it already has HTML 5 in it's beta.
Nice! I'm fine using a plain text-editor, though. Probably because back in the day that's all we had, and those newfangled features always get in my way.
ReplyDeleteNow I'm probably showing my age! :3