Spielfigur bewegen über Pfeiltasten

Zum Bewegen der Spielerfigur müssen wir die Tastatur abfragen. Dann kann über jQuery und document.bind erfolgen.

Wichtig ist wieder, dass dies innerhalb des ready-Bereichs eingebunden wird. Integrieren wir die Funktion und lassen uns im ersten Schritt die Werte von gedrückten Tasten in der Console ausgeben:

    function taktung() {
        console.log('Hallo');
    }

    $(document).bind('keydown', function (evt) {
        console.log("Tastaturcode: " + evt.keyCode);
    });

Haben wir nun im Browser in das Fenster geklickt (meistens verpennt man beim Testen, dass das Fenster aktiv sein muss) erhält man in der Console die entsprechenden Werte der gedrückten Tasten.

Im Beispiel

40 = Pfeiltaste nach unten

37 = Pfeiltaste nach links

38 = Pfeiltaste nach oben

39 = Pfeiltaste nach rechts

Und diese ASCII-Codes können wir nun in eine switch-Anweisung packen:

	$(document).bind('keydown', function (evt) {
		console.log(evt.keyCode);
		switch (evt.keyCode) {
			// Pfeiltaste nach unten
			case 40:
				console.log("Pfeiltaste nach unten");
				return false;
				break;
		}		
	});

Was muss passieren, dass sich unsere Spielerfigur bewegt? Unsere Koordinaten x und y müssen entsprechend angepasst werden!

Wenn die Spielerfigur sich nach unten bewegt, nimmt der y-Wert zu. Wir arbeiten mit einem 20ziger Raster, weil es schön einfach zum Nachvollziehen ist. Somit muss zu dem bestehenden y-Wert 20 addiert werden.

Dazu gibt es die Kurzschreibweise y += 20;

Und integriert im bestehenden Code:

	$(document).bind('keydown', function (evt) {
		console.log(evt.keyCode);
		switch (evt.keyCode) {
			// Pfeiltaste nach unten
			case 40:
				console.log("Pfeiltaste nach unten");
				y += 20;
				console.log("Wert y: "+y);
				return false;
				break;
		}		
	});

Noch passiert überhaupt nichts außer der Ausgabe der Kontrollwerte in der Console. Unsere y-Wert wird zwar größer, aber die Spielfigur verharrt am gleichen Fleck wie bereits verstorben.

Wir müssen nun in unserer Funktion „taktung“ noch das Neuzeichnen der Spielfigur veranlassen.

    function taktung() {
        console.log('Hallo');
        spielfeld.drawImage(spielfigur,x,y);
    }

Zur Sicherheit der komplette Code:

var x = 0;
var y = 0;

$(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 taktung() {
        console.log('Hallo');
        spielfeld.drawImage(spielfigur,x,y);
    }

	$(document).bind('keydown', function (evt) {
		console.log(evt.keyCode);
		switch (evt.keyCode) {
			// Pfeiltaste nach unten
			case 40:
				console.log("Pfeiltaste nach unten");
				y += 20;
				console.log("Wert y: "+y);
				return false;
				break;
		}		
	});
});

Jetzt sollten wir die Spielerfigur bewegen können - mit einem kleinen Schönheitsfehler: auf den alten Positionen bleibt die Figur gezeichnet.

Es gibt also noch kein „Lösche die alte Figur“. Und dazu gibt es die brachiale Lösung, dass einfach das komplette Spielfeld gelöscht wird über spielfeld.clearRect(0, 0, 600, 480);. Die bisherige Anweidung für console.log('Hallo'); ersetzen wir damit.

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

Außerdem gibt es noch einen weiteren Schönheitsfehler! Wenn wir sehr schnell die Pfeiltasten zum Bewegen unserer Figur drücken, wird diese erst beim Standart-Intervallaufruf, dass wir über setInterval gesetzt haben aktualisiert. Das hat teilweise lustige Auswirkungen - einfach zum Testen mehrfach die Pfeiltaste schnell drücken. Hier kann man fleißig dagegen anprogrammieren - erst einmal ist uns der komplette Spielablauf wichtig bevor wir uns in irgendwelchen Dingen verfransen.

Die Welt ist eine Scheibe - wenigstens in unserem Spiel

Wenn wir nun mit unserer Abwärtsbewegung am unteren Spielfeldrand sind, können wir mit noch einem Tastendruck die Spielerfigur wegzaubern. Sie kippt über den Rand der Erde (die doch eine Scheibe ist).

Bisher fällt unsere Heldin über die Kantenscheibe ins nirendwo - diesen Fall sollten wir noch abfangen.

Daher brauchen wir noch eine Abfrage, um hier eine Beschränkung einzubauen. Sprich der y-Wert darf nicht größer werden, als unser Spielfeld selber ist!

	$(document).bind('keydown', function (evt) {
		console.log(evt.keyCode);
		switch (evt.keyCode) {
			// Pfeiltaste nach unten
			case 40:
				// console.log("Pfeiltaste nach unten");
				y += 20;
				if (y >= 480) {
					y = 460;
				}
				console.log("Wert y: "+y);
				return false;
				break;
		}		
	});

Jetzt bitte selber für die Bewegung nach oben, rechts und links den entsprechenden Code programmieren und unser Programm erweitern. Nicht Spickeln! Zur Kontrolle kommt der fertige Code weiter unten.

Wer sein Ergebnis vergleichen will

Hier nun der komplette Code mal allen Bewegungsrichtungen:

var x = 0;
var y = 0;

$(document).ready(function() {
	takt = window.setInterval(taktung, 600);
	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 taktung() {
		spielfeld.clearRect(0, 0, 600, 480);
		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;
		}		
	});
});

PS: wem das Spiel zum Testen zu langsam ist, kann die Taktung erhöhen!