This blog is my notes as I learn to develop Games in HTML5. Like all good programmers, I'm beginning with the simple "Hello World".
For this Chapter, you need to know two basic concepts,
1. Canvas will be the basic building block for all the games(with a graphic interface) you develop in HTML5.
2. JavaScript does most of your dirty work.
There are 2ways you can initialize the canvas, using the <canvas> element in HTML5, or thru Javascript, for this tutorial iam doing it thru Javascript.
The code can be broken as follows,
Canvas Initialization
var CANVAS_WIDTH = 480;
var CANVAS_HEIGHT = 320;
var canvasElement = $("<canvas width='" + CANVAS_WIDTH + "' height='" + CANVAS_HEIGHT + "'></canvas");
var canvas = canvasElement.get(0).getContext("2d");
canvasElement.appendTo('body');
This initializes the canvas and adds it to the body of the HTML.
Game Loop
var FPS = 30;
setInterval(function() {
update();
draw();
}, 1000/FPS);
The Frame rates refers to the speed at which the image is refreshed. The Game loop continuously redraws the graphics in the canvas to give effect of smooth transition of the objects being animated.
Draw and update
var textX = 0;
var textY = 0;
function update() {
textX += 1;
textY += 0.5;
}
function draw() {
canvas.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
canvas.fillStyle = "#000";
canvas.fillText("Hello World!", textX , textY);
}
The update method gives the new position of the "Hello World" text, while the draw() method clears the old contents of the canvas and paints the new "Hello World" text in the new position.
Complete Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Hello World Demo</title>
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<h1>Hello World Demo</h1>
<script type='text/javascript'>
//<![CDATA[
var CANVAS_WIDTH = 480;
var CANVAS_HEIGHT = 320;
var FPS = 30;
var textX = 0;
var textY = 0;
var canvasElement = $("<canvas width='" + CANVAS_WIDTH + "' height='" + CANVAS_HEIGHT + "'></canvas");
var canvas = canvasElement.get(0).getContext("2d");
canvasElement.appendTo('body');
setInterval(function() {
update();
draw();
}, 1000/FPS);
function update() {
textX += 1;
textY += 0.5;
}
function draw() {
canvas.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
canvas.fillStyle = "#000";
canvas.fillText("Hello World!", textX , textY);
}
//]]>
</script>
</body>
</html>
My 2Cents, one thing I find most useful in writing HTML code is constant testing, its better to test the code after each change rather then do a zillion rollback later to find where the issue started.
Reference
http://www.html5rocks.com/en/tutorials/canvas/notearsgame/
No comments:
Post a Comment