Game Development Reference
In-Depth Information
This kind of dynamic interaction is possible because the browser can execute JavaScript code. If you
want to program games, being able to define how the player should interact with the game is crucial.
The HTML5 Canvas
A nice thing about the new HTML standard is that it provides a couple of tags that make HTML
documents a lot more flexible. A very important tag that was added to the standard is the
canvas
tag,
which allows you to draw 2D and 3D graphics in an HTML document. Here is a simple example:
<!DOCTYPE html>
<html>
<head>
<title>BasicExample</title>
</head>
<body>
<div id="gameArea">
<canvas id="mycanvas" width="800" height="480"></canvas>
</div>
</body>
</html>
Here you can see that the body contains a division called
gameArea
. Inside this division is a
canvas
element that has a number of attributes. It has an identifier (
mycanvas
), and it has a width and height.
You can again modify things in this
canvas
element by using JavaScript. For example, the following
code changes the background color of the
canvas
element by using a few JavaScript instructions:
<!DOCTYPE html>
<html>
<head>
<title>BasicExample</title>
<script>
changeCanvasColor = function () {
var canvas = document.getElementById("mycanvas");
var context = canvas.getContext("2d");
context.fillStyle = "blue";
context.fillRect(0, 0, canvas.width, canvas.height);
}
document.addEventListener('DOMContentLoaded', changeCanvasColor);
</script>
</head>
<body>
<div id="gameArea">
<canvas id="mycanvas" width="800" height="480"></canvas>
</div>
</body>
</html>
Search WWH ::
Custom Search