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.