Zielerreichung im Spiel über Kollisionskontrolle überprüfen

Nun brauchen wir auch ein Ziel im Spiel. Unsere Spielfigur muss ein Ziel erreichen – sprich die gelbe Blume. Das Ziel müssen wir nun auf die gleiche Art zeichnen lassen, wie unsere Spielfigur. Allerdings packen wir die in eine eigene Funktion, da der Spieler nach Erreichen des Zielfeldes ja ein neues Ziel auf einem zufälligen Zielfeld bekommen soll und wir die gleiche Funktion (nur mit anderen Werten) nutzen wollen.

Hier unsere grafisch perfekt gezeichnete Blume (was so in einer Größe von 20 auf 20 Pixel geht (zum herunterladen wieder mit rechter Maustaste auf die Grafik klicken und speichern unter "bilder/zielbereich.png" wählen).

Für das Zielfeld benötigen wir im Vorfeld Variablen. Diese platzieren wir am Anfang – hier kommt noch eine Berechnung dazu, die zufällig das Zielfeld platziert:

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

Die mathematische Zufallsfunktion Math.random() liefert einen Wert zwischen 0 und 1. Dieser wird 28 multipliziert (wir wollen 28 verschiedene Positionen. Zur Erinnerung: Unser Spielfeld ist 600 Pixel breit und unser Zielbereich ist 20 Pixel breit. Sprich 20 * 28 ergibt 560 – wir wollen weder die Position ganz rechts noch die ganz links verwenden – daher kommt noch eine Addition von +20 am Ende dazu. Nachkommazahlen sind auch nicht erwünscht, daher noch für das Ergebnis Math.floor, was ein Runden auf ganze Zahlen bewirkt.

Im Code gleich hinter der neuen Funktion zum Zeichnen des Zielfeld rufen wir diese direkt auf, damit es sofort angezeigt wird.

	function zeichneZielfeld() {
		var zielfeld = new Image();
		zielfeld.src='bilder/zielbereich.png';
		zielfeld.onload=function() {
			spielfeld.drawImage(zielfeld, zielx, ziely);
		}
	}
	zeichneZielfeld();

Und damit unser Zielfeld auch erhalten bleibt, wenn unsere Funktion taktung ausgeführt wird, wird auch hier die neue Funktion zum Zeichnen des Zielfeldes ausgeführt.

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

Und unser kompletter Code bisher

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

$(document).ready(function() {
	takt = window.setInterval(taktung, 300);
	var spielbrett = document.getElementById('leinwand');
	spielfeld = spielbrett.getContext('2d');
	var spielfigur=new Image();
	spielfigur.src='bilder/spielfigur.png';
	spielfigur.onload=function() {
		spielfeld.drawImage(spielfigur,x,y);
	}

	function zeichneZielfeld() {
		var zielfeld = new Image();
		zielfeld.src='bilder/zielbereich.png';
		zielfeld.onload=function() {
			spielfeld.drawImage(zielfeld, zielx, ziely);
		}
	}
	zeichneZielfeld();

    function taktung() {
		spielfeld.clearRect(0, 0, 600, 480);
		zeichneZielfeld();
		spielfeld.drawImage(spielfigur,x,y);
	}
    
	$(document).bind('keydown', function (evt) {
		// console.log(evt.keyCode);
		switch (evt.keyCode) {
			// Pfeiltaste nach unten
			case 40:
				y += 20;
				if (y >= 480) {
					y = 460;
				}
				// console.log("Wert y: "+y);
				return false;
				break;
			// Pfeiltaste nach oben
			case 38:
				y -= 20;
				if (y <= 0) {
					y = 0;
				}
				// console.log("Wert -y: "+y);
				return false;
				break;
			// Pfeiltaste nach links
			case 37:
				x -= 20;
				if (x <= 0) {
					x = 0;
				}
				// console.log("Wert -x: "+x);
				return false;
				break;
			// Pfeiltaste nach rechts
			case 39:
				x += 20;
				if (x >= 600) {
					x = 580;
				}
				// console.log("Wert x: "+x);
				return false;
				break;
		}		
	});
});

Jetzt können wir uns locker flockig über das Feld bewegen und das Ziel ansteuern und es erreichen. Aber was passiert dann? Wir benötigen eine Kollisionskontrolle, damit unser Code auch mitbekommt, wenn wir das Ziel erreicht haben und uns ein neues Ziel gibt.

Ziel erreicht – Kollisionskontrolle mit Ziel

Unser Ziel haben wir dann erreicht, wenn die x,y-Werte unserer Spielfigur gleich sind wie die zielx,ziely-Werte vom Ziel. Dies können wir sehr einfach abfragen und darauf reagieren:

	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!");
		}
	}	

Auch diese Funktion muss mit unserer Taktung immer wieder aufgerufen werden, damit die eventuell neuen Positionen kontrolliert werden können.

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

Aber was passiert nun beim Erreichen des Zielfeldes?

Zwei Dinge sollten passieren:

• Ein neues Ziel auf der anderen Seite des Spielfeldes soll erzeugt werden
• Die Punkte sollen hochgezählt werden

Nehmen wir das erste Geschehen in Angriff. Ein neues Ziel soll auf der anderen Spielfeldseite erzeugen.

Wir müssen Abfragen, auf welcher Spielfeldseite wir gerade mit dem Ziel sind – das bekommen wir sehr einfach mit dem Wert von ziely mit.

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

			// neues Ziel erzeugen
			if (ziely==460) {
				ziely = 0;
			}
			else {
				ziely=460;
			}
		}

Und nun müssen wir als zweites wie die Zufallsfunktion bemühen, die wir ja vom ersten Einsatz schon kennen:

	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;
		}
	}	

Und schon bekommen wir beim Erreichen des Ziels ein neues Ziel angezeigt. Durch das immer wieder Löschen des kompletten Spielfeldes und neu zeichnen in unserer Funktion „taktung“ müssen wir uns darum nicht mehr kümmern.

Einfach probieren, ob das schon soweit funktioniert!

Unser kompletter Code bisher

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

$(document).ready(function() {
	takt = window.setInterval(taktung, 300);
	var spielbrett = document.getElementById('leinwand');
	spielfeld = spielbrett.getContext('2d');
	var spielfigur=new Image();
	spielfigur.src='bilder/spielfigur.png';
	spielfigur.onload=function() {
		spielfeld.drawImage(spielfigur,x,y);
	}

	function zeichneZielfeld() {
		var zielfeld = new Image();
		zielfeld.src='bilder/zielbereich.png';
		zielfeld.onload=function() {
			spielfeld.drawImage(zielfeld, zielx, ziely);
		}
	}
	zeichneZielfeld();

	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;
		}
	}	

    function taktung() {
		spielfeld.clearRect(0, 0, 600, 480);
		zeichneZielfeld();
		spielfeld.drawImage(spielfigur,x,y);
		zielfelderreicht();
	}
    
	$(document).bind('keydown', function (evt) {
		// console.log(evt.keyCode);
		switch (evt.keyCode) {
			// Pfeiltaste nach unten
			case 40:
				y += 20;
				if (y >= 480) {
					y = 460;
				}
				// console.log("Wert y: "+y);
				return false;
				break;
			// Pfeiltaste nach oben
			case 38:
				y -= 20;
				if (y <= 0) {
					y = 0;
				}
				// console.log("Wert -y: "+y);
				return false;
				break;
			// Pfeiltaste nach links
			case 37:
				x -= 20;
				if (x <= 0) {
					x = 0;
				}
				// console.log("Wert -x: "+x);
				return false;
				break;
			// Pfeiltaste nach rechts
			case 39:
				x += 20;
				if (x >= 600) {
					x = 580;
				}
				// console.log("Wert x: "+x);
				return false;
				break;
		}		
	});
});