Spielfigur ins Spiel programmieren

Trommelwirbel - unser Held im Spiel tritt das erste mal in Erscheinung! Und natürlich bleiben wir biologisch korrekt - nur die Damen der Schöpfung bei den Bienen fliegen fleißig Blüten an - sprich unser Held ist eine Heldin! Die mänlichen Helden patrolieren im Bienenstock, dass kein Feind herein kommt und sind für die ... (lassen wir das, das Spiel soll ja jungendfrei sein). Hier darf jeder selber einen Namen für die Heldin vergeben - im Tutorial schauen wir mehr auf die Programmierung als auf Namen.

Trommelwirbel - unsere Heldin im Anflug:

Unsere Helding im Spiel

Und wir brauchen eine viel kleinere Grafik, daher bitte folgende Grafik nutzen. Diese mit dem Dateinamen "spielfigur.png" speichern.

verwendete Grafik im Spiel

Unserer Spielfigur direkt in ein Unterverzeichnis mit dem Namen "bilder" speichern - die 3 anderen Dateien liegen im Verzeichnis darüber. Zum speichern mit der rechter Maustaste auf die Grafik klicken und speichern unter wählen.

Auf Spielbrett zeichnen

Wie haben uns er Spielfeld gezeichnet – bisher nur ein grauer Bereich. Das ist der bisherige Stand unseres Codes:

$(document).ready(function() {	
    var spielbrett = document.getElementById('leinwand');
    spielfeld = spielbrett.getContext('2d');
});

Nun wollen wir unsere Spielfigur zeichnen. Dazu benötigen wir als erstes die Position, an der diese gezeichnet werden soll. Diese Position ändert sich während dem Spiel, wenn der Spieler die Spielfigur bewegt. Außerhalt unserer READY-Funktion definieren wir nun unsere zwei Koordinaten x und y:

var x = 0;
var y = 0;

$(document).ready(function() {
    var spielbrett = document.getElementById('leinwand');
    spielfeld = spielbrett.getContext('2d');
});

Jetzt wollen wir unsere Spielfigur anzeigen lassen. Im ersten Schritt lassen wir diese innerhalb unserer Hauptfunktion zeichnen. Dazu wird ein neues Objekt über „new“ erzeugt:

var x = 0;
var y = 0;

$(document).ready(function() {
    var spielbrett = document.getElementById('leinwand');
    spielfeld = spielbrett.getContext('2d');
    var spielfigur=new Image();
    console.log("spielfigur: "+spielfigur);
});

Durch die Ausgabe der Console sehen wir, dass es sich bei unserer „var spielfigur“ um ein „object“ handelt. Und mit diesem Objekt können wir nun die Grafikdatei zuweisen:

var x = 0;
var y = 0;

$(document).ready(function() {
    var spielbrett = document.getElementById('leinwand');
    spielfeld = spielbrett.getContext('2d');
    var spielfigur=new Image();
    spielfigur.src='bilder/spielfigur.png';
    console.log("spielfigur: "+spielfigur.src);
});

In der Console kann man den zugewiesen Wert kontrollieren.

Das bedeutet aber noch lange nicht, dass die Grafikdatei geladen werden kann. Wir haben nur den Pfad zugewiesen. Hat sich da ein Tippfehler eingeschlichen, dann geht das schief. Daher wird vor der Weiterverarbeitung kontrolliert, ob ein Laden erfolgreich war. Dies geschieht über „spielfigur.onload“.

Hat der Ladevorgang geklappt, dann darf die Figur auch gezeichnet werden.

Auf das „spielfeld“ wird über die „dragImage“-Funktion unsere „spielfigur“ an den festgelegten Positionen gezeichnet. Jetzt sieht man auch sehr schön, dass „x=0; y=0;“ die obere rechte Ecke ist.

var x = 0;
var y = 0;

$(document).ready(function() {
    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);
    }
});
weitere eigene Projekte: