Heute widmen wir uns der Character class. In dieser werden wir eine Funktion schreiben um den Spieler auf der Karte zeichnen zu lassen und eine Funktion , damit er sich bewegen kann.
Erstmal vorweg wir werden für alle Elemente Objekte erstellen und mi dehnen Arbeiten. Für die Character class erstellen wir ein player Object.
|
1 2 3 4 5 6 |
Player = { posX : 1, posY : 1, } |
Es ist sehr simple, wir haben auch direkt Variablen für die Position auf der X achse (posX) und der Position auf der Y Achse(posY) erstellt. der Spieler soll sich von links auf Feld 1 befinden und von Oben nach Unten ebenfalls.
Hier eine Grafik zur Veranschaulichung.Auf dem Bild sieht man unsere Tilemap, das grün markierte Feld ist die Startposition unserer Spielfigur.Er befindet sich auf Feld 1 der X Achse und Feld 1 der Y Achse.
Als nächstes schreiben wir in unseren Objekt eine DrawPlayer Funktion um den Player in die Weltkarte tatsächlich zu zeichnen.
|
1 2 3 4 |
drawPlayer : function(){ world.drawImage("player","player.png",this.posX,this.posY); } |
In nächsten Tutorial erstellen wir unser World Objekt in diese befindet sich dann eine drawImage Funktion dazu mehr in nächsten Tutorial. Der Kontruktor der drawImage Funktion erfordert folgende Parameter..
|
1 2 3 4 5 6 7 |
/* name = Name der variabel die es zu erstellen gilt filename = Dateiname mit endung z.B ,,.jpg" x = Position auf der X-Achse y = Position auf der Y-Achse */ world.drawImage(name,filename,x,y); |
Was nun noch fehlt ist die Funktion zum bewegen unserer Spielfigur.Dazu habe ich in verschiedene Ansätze gesehen. ich besorge eine Funktion die dann per if klär welche Aktion durchgeführt würde.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
movePlayer : function(direction){ if(direction === "left"){ this.posX -= 1; }else if(direction == "right"){ this.posX +=1; }else if(direction == "up"){ this.posY -= 1; }else if(direction == "down"){ this.posY += 1; } world.draw(); this.drawPlayer(); } |
Die Funktion movePlayer wird aufgerufen ihr wird die direction mitgegeben in der sich der Spieler bewegt. Dann wird der Wert um die richtung erhöht zum Beispiel. Links also posX -1.
Danach wird die Welt neugezeichnet mittels world.draw(). und der Player wird ebenfalls mit aufruf von this.drawPlayer() neugezeichnet. Nun haben wir einen Character auf der Karte , Diee Klasse kann nun noch um vieles erweitert werden z.B vorhandene exp und exp bis zum Lvl. Das Level selbst. und noch vieles mehr.
Hier noch einmal die ganze Klasse.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
/* Copyright by Webdesign-Ugurcu Author: Mario Ugurcu */ Player = { posX : 1, posY : 1, movePlayer : function(direction){ if(direction === "left"){ this.posX -= 1; }else if(direction == "right"){ this.posX +=1; }else if(direction == "up"){ this.posY -= 1; }else if(direction == "down"){ this.posY += 1; } world.draw(); this.drawPlayer(); }, drawPlayer : function(){ world.drawImage("player","player.png",this.posX,this.posY); } } |
Als nächstes widmen wir uns der World klasse.
Schreibe einen Kommentar