Festival2011/Zero to Game
Hello everybody. Welcome to the Learning Lab on how to get started using HTML5 and Javascript to make games.
Contact me
jono@mozilla.com
jonoxia on twitter
github.com/jonoxia/platform-game
I welcome any questions you might have about getting started with game programming in html5!
About the session
The goal of this session is for everyone to build a page where they can steer some kind of character around the screen using the keyboard or mouse. We may get some to some sound and animation too, time permitting.
I'm going to put some links here for files that you can download to help with the learning lab. Also some documentation perhaps.
Getting Started - links and source code
Download [JQuery]. Stick it in a folder on your laptop.
Copy the following code. Paste it into a plain-text editor. Save it in an html file, in the same folder where you put JQuery:
<html>
<head>
<title>Zero To Game</title>
<script src="jquery-1.7.js"></script>
<script src="zero2game.js"></script>
</head>
<body>
<span id="output"></span><br>
<canvas width="600" height="400" id="main-canvas">
</canvas>
</body>
</html>
Next, copy the following code and paste it into your editor. Save it as a js file called "zero2game.js", in the same folder.
$(document).ready(function() {
var canvas = $("#main-canvas");
var output = $("#output");
});
Last step: Find a smallish image, either on the web or your hard drive, to use as a game character. Figure out how many pixels wide and how many pixels tall it is. Save it in the same folder as the other files.
