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

Zeitlimit einführen

Wir wollen ein Zeitlimit, damit ein erreichter Punktestand auch mit anderen Spielern verglichen werden kann. Dazu benötigen wir in HTML ein weiteres Feld für die Anzeige der Zeit bzw. der ablaufenden Zeit.

Dazu gibt es ein weiteren DIV-Bereich unter dem Spielfeld:

<canvas id="leinwand" width="600" height="480"></canvas>
<div id="punktestand">Siegpunkte: 0</div>
<div id="spielzeit">Spielzeit: 0</div>

Das hübscher machen der Anzeige kann später über CSS erfolgen – jetzt ist erst einmal die Funktion wichtig. Und diese integrieren wir in JavaScript.

Wir brauchen wieder eine Variable (wieder am Anfang bei allen unseren Variablen) für die Spielzeit – Variablenname „spielzeit“.

var spielzeit = 45;
var restzeit = 0;

Dabei ist eine einfache Variante, dass wir über die JavaScript-Anweisung uns die aktuelle Startzeit merken und dann anhand der laufenden Zeit berechnen, ob die Gesamtzeit schon überschritten ist. Hört sich komplizierter an, als es ist.

Unsere Startzeit „startzeit“ wird über die JavaScript-Anweisung new Date(); gefüllt. Wer neugierig ist, was da in der Variable „startzeit“ steht, kann sich den Wert ja über console.log ausgeben lassen.

Wer nicht so neugierig ist – da steht neben der Zeit auch das Datum, der Wochentag und die Zeitzone. Das interessiert uns aber nicht wirklich, weil wir JavaScript für uns die Zeitberechnungen durchführen lassen.

Wir benötigen die Startzeit, die wir auch am Anfang notieren. Es gibt am Anfang also eine weitere Variable, die wir gleich über die JS-Funktion date füllen lassen:

var spielzeit = 45;
var restzeit = 0;
var startzeit = new Date();

Somit können wir (also JavaScript) nun rechnen:
Gesamtspielzeit (sprich 45 Sekunden: „aktuelle Zeit“ subtrahieren mit „anfangszeit“)

Bzw. mit allen Rundungen und der Funktion getTime() sieht das dann wie folgt aus:

var aktuellezeit = new Date();
restzeit = spielzeit - Math.floor((aktuellezeit.getTime()-startzeit.getTime()) / 1000);
console.log(restzeit);

Weil es Millisekunden sind, muss es durch 1000 dividiert werden. Das Runden des Ergebnisses über Math.floor() ist auch sinnvoll.

Dieser Code wird in die Funktion „taktung“ integriert – aber erst wenn wir noch die Ausgabe der Restzeit haben.

var aktuellezeit = new Date();
restzeit = spielzeit - Math.floor((aktuellezeit.getTime()-startzeit.getTime()) / 1000);
$('#spielzeit').html('Spielzeit: ' + restzeit);

Unser Code bisher in der Funktion taktung:

    function taktung() {
		spielfeld.clearRect(0, 0, 600, 480);
		zeichneZielfeld();
		spielfeld.drawImage(spielfigur,x,y);
		zielfelderreicht();

		var aktuellezeit = new Date();
		restzeit = spielzeit - Math.floor((aktuellezeit.getTime()-startzeit.getTime()) / 1000);
		$('#spielzeit').html('Spielzeit: ' + restzeit);
	}

Jetzt benötigen wir noch die Überprüfung, ob die Spielzeit abgelaufen ist. Dann soll das Spiel stoppen – es wird die Funktion „spielende();“ aufgerufen.

var aktuellezeit = new Date();
restzeit = spielzeit – Math.floor((aktuellezeit.getTime()-startzeit.getTime()) / 1000);
$('#spielzeit').html('Spielzeit: ' + restzeit);
if (restzeit <= 0) {
	spielende();
}

Und in der Funktion „spielende();“ wird der Timer gestoppt und eine Anzeige soll aufpoppen.

    function taktung() {
		spielfeld.clearRect(0, 0, 600, 480);
		zeichneZielfeld();
		spielfeld.drawImage(spielfigur,x,y);
		zielfelderreicht();

		var aktuellezeit = new Date();
		restzeit = spielzeit - Math.floor((aktuellezeit.getTime()-startzeit.getTime()) / 1000);
		$('#spielzeit').html('Spielzeit: ' + restzeit);
		if (restzeit <= 0) {
			spielende();
		}
	}

Und in der Funktion „spielende();“ wird der Timer gestoppt und eine Anzeige soll aufpoppen.

	function spielende() {
		clearInterval(takt);
		$('#spielendeanzeige').show();
	}

Unser HTML-Datei müssen wir ergänzen um den Eintag #spielendeanzeige, den wir über CSS sofort ausblenden damit wir diesen nachdem die Zeit abgelaufen ist, wieder einblenden können.

<canvas id="leinwand" width="600" height="480"></canvas>
<div id="punktestand">Siegpunkte: 0</div>
<div id="spielzeit">Spielzeit: 0</div>
<div id="spielendeanzeige">Zeit abgelaufen</div>

In CSS setzen wir die ID „spielbereich“ auf position: relative; damit wir unsere anderen Bereiche über diese mit position: absolute; und den entsprechenden weiteren Anweisungen ausrichten können.

#spielbereich {
	position: relative;
	width: 600px;
}

#spielendeanzeige {
	display: none;
	position: absolute;
	top: 0;
	left: 0;	
	border: 4px solid red;
	margin: 40px 50px;
	width: 500px;
	height: 400px;
	background-color: hsla(0, 50%, 50%, 0.7);
}

Natürlich wollen wir mehr Herausforderung – als Computergegner. Diese werden im folgenden Kapitel integriert.