Gegner einbauen und automatisch bewegen

Hier kommt nun unsere Bösewichtige - das könnten bei Bienen unfreundliche Autoscheiben oder Hornissen sein - in unserem Spiel einfach als rote Kugel dargestellt.

Herunterladen und im entsprechenden Verzeichnis platzieren.
Die bösen roten Kugeln:

Position und Geschwindigkeit in Arrays speichern

Wir wollen natürlich mehr als einen Gegner. Hier kommt jetzt Array zum Einsatz. In einer Variablen wird genau 1 Wert gespeichert, in einem Array können dagegen viele Werte gespeichert werden.

Diese Gegner bewegen sich horizontal – sprich wir brauchen nur die X-Position uns merken.

Als erstes benötigen wir die x-Positionen der Gegner. Dazu erstellen wir ein Array. Um es übersichtlicher zu halten, füllen wir das Array mit festen Zahlen. Natürlich könnten wir auch hier Zufallswerte erzeugen lassen (wie wir es schon beim Setzen des Ziels gelernt haben), aber wir wollen es jetzt erst einmal so einfach wie möglich um in das Thema JavaScript-Arrays einsteigen zu können.

Das Erstellen des Arrays sieht am Anfang ähnlich aus wie bei einer Variablen:

var gegnerpositionen = 

Und nun kommt nach dem Gleichzeichen eckige Klammern!

var gegnerpositionen = [];

Und innerhalb der eckigen Klammern kommen unsere 6 Werte getrennt durch Kommas (könnten auch mehr sein – aber erst einmal wollen wir es Übersichtlich!).

var gegnerpositionen = [1, 10, 60, 100, 150, 296]; 

Zusammenfassung Array: wir speichern die aktuellen Positionen der Gegnerfiguren in einem Array. In JavaScript wird wie gewohnt eine Variable erstellt – allerdings weicht der Aufbau der Zuweisung ab. Hier werden in eckigen Klammern beliebig viele Werte getrennt mit Komma zugewiesen.

var gegnerpositionen = [1, 10, 60, 100, 150, 296];  

Zusätzlich bekommt jede Gegnerfigur eine individuelle Geschwindigkeit und die Richtung der Bewegung mit. Da wir als Bewegung nur nach rechts bzw. nach links haben, können wir die Richtung der Bewegung anhand von positiven bzw. negativen Zahlen festlegen. Dadurch kann in einer Zahl sowohl die Geschwindigkeit wie auch die Richtung gespeichert werden.

Wichtig ist nur, dass wir die gleiche Anzahl an Einträgen in dem Array haben, wie bei dem Array für die „gegnerpositionen“.

var gegnerbewegung = [2, 3, -2, 4, 5, -3];

Unsere Zuweisungen kommen gleich am Anfang von unserem Programm nach unseren beisher gesetzten Variablen:

var x = 0;
var y = 0;
var zielx = Math.floor(Math.random()*28)*20+20;
var ziely = 460;
var siegpunkte = 0;
var spielzeit = 45;
var restzeit = 0;
var startzeit = new Date();
var gegnerpositionen = [1, 10, 60, 100, 150, 296]; 
var gegnerbewegung = [2, 3, -2, 4, 5, -3];

Zur Kontrolle können wir den Inhalt der Arrays auch in der Console ausgeben lassen.

console.log(gegnerpositionen);

Gegner auf Spielfeld platzieren - Einsatz von Schleifen

In unserer Funktion „taktung()“ kommt nun der Aufruf setzeGegner();, um unsere Gegner auf das Spielfeld zu bringen:

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

In der Funktion setzeGegner() wird nun anhand einer Schleife gearbeitet. Damit wir wissen, wie oft die Schleife durchlaufen werden soll, lassen wir uns mal die Anzahl der Elemente des verwendeten Array ausgeben über die JavaScript-Anweisung arrayname.length.

	function setzeGegner() {
		console.log(gegnerpositionen.length);
	}

In unserem Fall kommt da 6 raus – aber es kann ja durchaus sein, dass wir mehr Gegner wollen oder weitere Levels eingebaut werden, die dann mehr Gegner beinhalten. Daher sollte man da nicht hart codieren.

Hart codiert sieht die Schleife so aus (ist aber zum verstehen geschickter):
for (x = 0; x < 6; x++) { ...

Was passiert:

• x startet bei 0
• x wird solange durchlaufen, solange x kleiner wie 6 ist.
• Bei jedem Durchlauf wird x um 1 erhöht (das bedeutet x++)
• Alles zwischen den geschweiften Klammern wird ausgeführt

Warum eigentlich überprüfen wir auf kleiner 6, wenn unsere Einträge in dem Array in dem Beispiel eigentlich 6 Einträge sind? Der Index bei einem Array fängt nicht bei 1 sondern bei 0 an. Sprich unseren letzter Wert ist unter dem Index 5 zu finden. Daher überprüfen wir auf kleiner 6.

Nicht hart codiert packen wir einfach die Anzahl der Array-Einträge anstelle der hart codierten Zahl (im Beispiel 6) über die entsprechende JavaScript-Anweisung:

for (x = 0; x < gegnerpositionen.length; x++) { ...

Und das Ganze nun

function setzeGegner() {
    for (nr = 0; nr < gegnerpositionen.length; nr++) {
        gegnerpositionen[nr] += gegnerbewegung[nr] * 5;
        if (gegnerpositionen[nr] > 580 || gegnerpositionen[nr] < 0) {
            gegnerbewegung[nr] *= -1;
        }
        erzeugeGegner(gegnerpositionen[nr], 360-(nr*40));
    }
}

Jetzt müssen wir noch den Gegner auf unser Spielfeld zeichnen – dass passiert in der Funktion „erzeugeGegner“.

Dieser Funktion werden die X- und Y-Position des Gegners übergeben, damit diese Figur genauso wie bereits die anderen Grafiken gezeichnet werden können.

function erzeugeGegner(gx, gy) {
	var img = new Image();
	img.src = 'bilder/gegnerfigur.png';
	img.onload = function() {
		spielfeld.drawImage(img, gx, gy);
	}
} 

Starten wir das Spiel, huschen nun jede Menge rote Bälle über das Spielfeld. Allerdings hat ein Treffen zwischen Gegner- und Spielerfigur noch keine Konsequenz. Das wollen wir im nächsten Kapitel ändern.