Punktezähler einbauen und aktuellen Punktstand ausgeben

Natürlich wollen wir nun noch Punkte für unseren Fleiß! Also Integrieren wir nun unser Punktekonto. Wie benötigen als erstes eine Variable mit der Bezeichnung „siegpunkte“ – diese Variable platzieren wir bei allen Anfangsvariablen ganz am Anfang unseres Codes.

var x = 0;
var y = 0;
var zielx = Math.floor(Math.random()*28)*20+20;
var ziely = 460;
var siegpunkte = 0;

Und in unserer Funktion „zielfelderreicht()“ wird der Stand hochgezählt:

	function zielfelderreicht() {
		console.log("x: "+x+ "|Ziel x:"+ zielx);
		console.log("y: "+y+ "|Ziel y:"+ ziely);

		if(x==zielx && y==ziely) {
			// Ziel erreicht!
			console.log("Ziel erreicht!");

			// neues Ziel erzeugen
			if (ziely==460) {
				ziely = 0;
			}
			else {
				ziely=460;
			}
			zielx = Math.floor(Math.random()*28)*20+20;
			siegpunkte++;
		}
	}	

Das Programm kennt nun schon unsere Siegpunkte. Leider werden diese noch nirgends anzeigt. Wir benötigen also die Ausgabe der Siegpunkte. Jetzt müssen wir wieder in unseren HTML-Bereich um einen DIV-Bereich mit der Benennung „punktestand“ für unseren Punktestand zu erstellen.

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

Und unsere Ausgabe wird Aktualisiert über die Anweisung $('#punktestand').html('Siegpunkte: '+siegpunkte);

	function zielfelderreicht() {
		console.log("x: "+x+ "|Ziel x:"+ zielx);
		console.log("y: "+y+ "|Ziel y:"+ ziely);

		if(x==zielx && y==ziely) {
			// Ziel erreicht!
			console.log("Ziel erreicht!");

			// neues Ziel erzeugen
			if (ziely==460) {
				ziely = 0;
			}
			else {
				ziely=460;
			}
			zielx = Math.floor(Math.random()*28)*20+20;
			siegpunkte++;
			$('#punktestand').html('Siegpunkte: '+siegpunkte);
		}
	}

Und jetzt kommen die Hürden, die wir einbauen für die Steigerung des Spaßes. Als erstes wird ein Zeitlimit eingeführt. Wir begrenzen die Spieldauer auf 45 Sekunden.

Bitte unterstützen Sie dieses Projekt

Empfehlen Sie es weiter - wir freuen uns immer über Links und Facebook-Empfehlungen.

Bestellen Sie über folgenden Link bei Amazon:
Bücher über JavaScript

Sie können uns auch eine Spende über PayPal zukommen lassen.

Vielen Dank für Ihre Unterstützung

weitere eigene Projekte: