Spieleentwicklung mit JavaScript - Grundlagen
Grundlagen
HTML
Der minimal notwendige HTML-Code in den das Spiel eingebettet ist, bildet folgende Beispiel:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <title>Sample</title> </head> <body> <canvas id="board" width="320" height="320" style="border:1px black solid">Dieser Browser ist nicht geeignet.</canvas> </body> </html>
Diese kleine Webseite macht nichts anderes als ein <canvas>-Element einzubinden. Der Text, der in dem Tag enthalten ist, wird bei Browsern angezeigt, die HTML5 und das Canvas-Element nicht unterstützen.
Initialisierung
Die Initialisierung des Programms erfolgt im OnLoad-Handler, der im Body-Tag angegeben werden kann. Nach dem vollständigen Laden der Seite kann das Spiel initialisiert werden. Die ersten Schritte bestehen darin, die Objekte, die für den Zugriff auf das Grafik-Element notwendig sind anzulegen und für den weiteren Programmablauf zur Verfügung zu stellen.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<title>Sample</title>
</head>
<script type="text/javascript">
var canvas;
var context;
function init()
{
canvas = document.getElementById("board");
context = canvas.getContext("2d");
context.fillStyle = '#aaaaff';
context.fillRect( 0, 0, canvas.height, canvas.width );
}
</script>
<body onLoad="init();">
<canvas id="board" width="320" height="320" style="border:1px black solid">Dieser Browser ist nicht geeignet.</canvas>
</body>
</html>
Der OnLoad-Handler wird im Body-Tag angegeben. Nach dem vollständigen Laden der Seite wird die Funktion init() aufgerufen. Mit der Funktion getElementById() wird das Canvas-Objekt ermittelt und in der globalen Variablen canvas gespeichert. So kann später von überall im Programm darauf zugegriffen werden.
Für den Zugriff auf die Grafikfunktionen steht das Context-Objekt zur Verfügung. Zur Zeit gibt es zwei Möglichkeiten: Ein Context für 2D-Grafik oder für 3D-Grafik mit WebGL. Wir beschränken uns für den Anfang auf 2D-Spiele.
Um sicherzugehen dass alles richtig aufgerufen wird, wird das Spielfeld himmelblau eingefärbt. Die Farben können genauso wie in HTML und CSS hexadezimal angegeben werden.