Videos eBook Forum Kontakt

jetzt Videos kaufen
zum Lernen von HTML,
CSS und Webdesign

Jetzt das HTML-Seminar bestellen als
Video-Tutorial mit über 210 Videos:
von den Grundlagen bis zur fertigen Website
Video-Kurs HTML5, CSS & Webdesign

Video-Kurs bestellen HTML5, CSS & Webdesign
Video-Kurs bestellen HTML5, CSS & Webdesign

Vorbereitung vor dem Programmieren unseres Spiels

Für unser Spiel in JavaScript müssen wir einige Vorbereitung treffen. Wir benötigen:

  • Eine HTML-Datei (die ein paar Grundelemente enthält und CSS für Design und JavaScript für den Spielablauf nachlädt
  • Eine CSS-Datei für das Design
  • Eine JavaScript-Datei für die Aktion im Spiel

Diese 3 Dateien erstellen wir uns.

Die HTML-Datei für unser Spiel

Wir benötigen eine HTML-Datei mit dem üblichen Grundgerüst.

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>HTML5- und JavaScript Lernspiel</title>
  <script src="bienen.js"></script>
  <link href="bienen.css" rel="stylesheet">
</head>
<body>
<h1>JavaScript lernen über Spiel programmieren</h1>
</body>
</html>

Unser Spielfeld wird in HTML über das Canvas-Element über die ID „leinwand“ handhabbar. Dieses intergrieren wir im body-Bereich. Wichtig ist, dass hier die Größe des Spielfelds festgelegt wird! Wird die Größe über CSS festgelegt, kann es zu unschönen verziehen der Grafiken kommen. Daher die Größe des Canvas direkt in HTML eintragen.

<body>
<h1>JavaScript lernen über Spiel programmieren</h1>
<canvas id="leinwand" width="600" height="480"></canvas> 
</body>
</html>

Die CSS-Datei für unser Design im Spiel

Über CSS wird nun für das Spielfeld eine Hintergrundfarbe festgelegt, damit dieses sichtbar wird. Unsere CSS-Anweisungen werden in der Datei bienen.css gespeichert. Auf diese haben wir bereits oben in unserem Grundgerüst einen Link gesetzt.

body {
    margin: 0;
}

#leinwand {
    background-color: whitesmoke;
}

JavaScript in HTML-Datei integieren

Jetzt starten wir mit JavaScript. Im head-Bereich in unserer HTML-Datei packen wir den Link für das Nachladen der jQuery-Bibliothek, damit immer die aktuellste Version von jQuery von Google geladen wird. Über dieses Framework werden einige Dinge später einfacher.

Zusätzlich unterbinden wir die Nutzung des Cache im Browser, um keine unschönen Überraschungen z.B. bei der Anzeige der Highscore zu erleben.

Hier nun unser kompletter HTML-Code:

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>HTML5- und JavaScript Lernspiel</title>
  <meta http-equiv="cache-control" content="no-cache">
  <script src="https://code.jquery.com/jquery-latest.min.js"></script>
  <script src="bienen.js"></script>
  <link href="bienen.css" rel="stylesheet">
</head>
<body>
<h1>JavaScript lernen über Spiel programmieren</h1>
<canvas id="leinwand" width="600" height="480"></canvas> 
</body>
</html>

eigenes JavaScript in ausgelagerten Datei

Und nun können wir in unserer externen JavaScript-Datei bienen.js mit dem Programmieren in JavaScript starten. Das einbinden dieser Datei haben wir ja bereits im Kopf-Bereich unserer HTML-Datei erledigt.

Hier kommt die für jQuery typische ready-Funktion zum Einsatz. Diese stellt sicher, dass alle benötigen Elemente (in HTML und Co.) vorhanden und geladen sind, bevor JavaScript ausgeführt wird. Es würde ja nicht funktionieren, wenn ein Element in HTML noch nicht vorhanden ist und davor bereits eine JavaScript-Anweisung versucht, darauf zuzugreifen.

Wir bewegen uns nun immer innerhalb der geschweiften Klammer der Ready-Function und dem Ende dieser mit „});“

$(document).ready(function() {	
    alert('Wird erst ausgeführt, wenn alles geladen ist!');
});

Erster Test unserer JavaScript-Spiels

Jetzt können wir die HTML-Datei im Browser aufrufen um unsere bisherige Eingaben zu testen. Klar wird noch nicht viel Aktion im Spiel sein - sprich eigentlich herzhaft wenig außer der Ausgabe "Wird erst ausgeführt ...". Es ist aber gut zu sehen, dass die Dateien alle ordnungsgemäß geladen werden und die JavaScript-Anweisungen in unserer externen JavaScript-Datei ausgeführt werden.