Spieleentwicklung mit JavaScript - Grundlagen
Aus XT Knowledge Base
Inhaltsverzeichnis |
Grundlagen
Browser
Für die Entwicklung von Webseiten mit HTML5 wird selbstverständlich ein Browser benötigt, der HTML5 verarbeiten kann. Hierfür sind Firefox, Opera, Google Chrome und Safari in den jeweils aktuellen Versionen geeignet. Der Internet-Explorer ist erst ab Version 9 einsetzbar, wobei es nach meinem aktuellen Kenntnisstand keine Version für Windows XP gibt.
Ich persönlich empfehle den Mozilla Firefox zum Entwickeln und die anderen zum Testen. Für den Firefox gibt es einige sinnvolle Erweiterungen, die bei der Entwicklung sehr hilfreich sind. Das nützlichste ist Web Developer. Dieses Plugin ist in der Lage, so ziemlich alle relevanten Informationen einer Webseite anzeigen und ist zum Debuggen ein unschätzbar wertvolles Werkzeug.
Editor
Zum Bearbeiten des Sourcecodes kann ich wärmstens Notepad++ empfehlen. Das Tool ist kostenlos und bietet sehr viele, sehr nützliche Features. Unter anderem erlaubt es die Erstellung von Texten mit UTF-8.
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>
<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>
</head>
<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.
- Zum Inhaltsverzeichnis Spieleentwicklung mit JavaScript - Einleitung
- Zurück zu Spieleentwicklung mit JavaScript - Einleitung
- Weiter zu Spieleentwicklung mit JavaScript - Spielfeld